일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- CSS
- UI
- superstarjypnation
- web
- 코드스테이츠
- Next.js
- 카카오
- Til
- javascript
- 자료구조
- 회고
- 30daysdowoonchallenge
- 스택
- 해시테이블
- 프로그래머스
- vercel
- 프로토타입
- level1
- redux
- useState
- html
- React
- 큐
- 자바스크립트
- 생활코딩
- 백준
- REST_API
- mysemester
- UX
- 운영체제
- Today
- Total
목록javascript (28)
데굴데굴
⚙️ 오늘 배운 주제 객체 지향 프로그래밍 🐹 오늘의 기분 오전에는 어제부터 이어졌던 블로깅 과제를 마저 하고 오후에는 페어분과 새로운 과제를 해결했다. 생각보다 빨리 끝나서 이런저런 이야기도 나눴다. 재밌었다! 혼자 하는 것보다 배우는 게 훨씬 많았다. 어제는 프로토타입을 완전히 이해 못하고 있었는데 오늘 아침에 블로깅 과제를 하면서 뭔가 좀 틀이 잡힌 느낌이었다. 여러 자료를 찾아보고 예시 코드도 직접 작성해보는게 도움이 된 것 같다. 그리고 드디어 주말에 매장에서 계약했던 의자가 배송되었다. 전 의자보다 훨씬 편하다. 허리도 덜 아프고! 조립하는 것도 재밌었음. 내일은 오늘보다 더 어려운 걸 하는 것 같던데 심히 걱정이다. 게다가 3일 동안 진행되는 유닛이라 벌써 만만치 않음이 느껴짐... 마음 단..
다른 예시를 들어보려했는데 너무 헷갈림..! 학습하면서 자주 써왔던 Array로 설명해보자 Array로 이해해보기 nums라는 배열을 리터럴 방식으로 정의했다. let nums = [4, 5, 6]; nums 자체에는 메소드 함수가 정의되어 있지 않다. 하지만 우리는 nums.sort, nums.map, nums.filter, nums.reduce 등의 메소드를 자유롭게 사용할 수 있다. 그 이유는 무엇일까? 배열은 이렇게 new 키워드를 이용하여 만들 수도 있다. let nums = new Array(4, 5, 6); nums; // [4, 5, 6] 자세히 보니 어디서 많이 본 것 같다. 클래스로 인스턴스 객체를 만들 때에도 new 키워드를 쓴다! nums는 Array라는 클래스로 새롭게 만든 일종의..
⚙️ 오늘 배운 주제 객체 지향 프로그래밍 🐹 오늘의 기분 페어 활동이 없는 날이라 긴장감 유지를 위해 하루종일 열품타를 켜놓고 학습했다. 확실히 휴대폰에 손이 안 가서 집중이 잘 된다! 오늘은 객체 지향에 관한 개념들을 학습했다. 클래스, 객체 지향까지는 괜찮았지만 프로토타입이 나오면서부터 점점 물음표가 생성됐다. 프로토타입은 mdn 실습 해보면서 유어클래스도 다시 읽어보고 딥다이브도 같이 봐야겠다. 아리까리하다 아직은! 그저께부터는 백준을 관두고 코딜리티 문제를 풀기 시작했다. 예전부터 코딜리티에 컴퓨팅 사고 기르는데 좋은 문제가 많다는 글을 몇 번 봤어서 언젠간 풀어봐야지 했는데 드디어 풀어보게 되었다. 자체 IDE도 있고 자바스크립트 지원도 잘 해줘서 풀기 편하다. 근데 시간복잡도 신경쓰는게 정말..
MDN 등 여러 곳에서 자바스크립트를 '프로토타입 기반의 동적 언어'로 설명하고 있다. 프로토타입은 자바스크립트를 설명할 때 빠지지 않는 개념이기에 잘 이해하는 것이 중요하다. 모든 객체는 자신의 부모와도 같은 프로토타입을 가지고 있으며 이것과 연결되어 있다. 객체가 생성될 때 그 객체의 생성 방식에 따라 prototype 객체도 같이 생성된다. class Student { constructor(name, grade, gender) { this.name = name; this.grade = grade; this.gender = gender; } study() { console.log(this.name + '가 공부를 시작합니다.'); } } // 클래스를 이용해 생성한 인스턴스 let chulsoo = ..
객체 지향 프로그래밍 (Object Oriented Programming, OOP) 초기의 C와 포트란 같은 언어는 절차적 언어이다. 절차적 언어는 순차적인 명령의 조합으로 작성된다. 절차 지향 관점에서는 프로그램을 명령어 또는 함수의 목록으로 본다. (딥다이브 260페이지) 객체 지향은 사람이 세계를 보고 이해하는 방법을 흉내낸 방법론이다. 현실 세계의 사물들은 각각의 속성과 기능을 가지고 있으며, 이는 각 사물을 구분하는 단서가 된다. 객체 지향 관점에서는 프로그램을 객체의 집합으로 표현하며, 클래스에 데이터와 기능을 한 곳에 묶어서 처리한다. 객체 지향 언어에는 Java, C++, C# 등이 있다. 자바스크립트는 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성이 가능하다. 객체 지향에는 네 가..
클래스(class)는 일종의 청사진이고, 청사진을 이용해 만든 새로운 객체가 인스턴스(instance)이다. 코드로 보기 // ES6 문법을 기반으로 작성한 Student 클래스 class Student { constructor(name, grade, gender) { this.name = name; this.grade = grade; this.gender = gender; } study() { console.log(this.name + '가 공부를 시작합니다.'); } } // 클래스를 이용해 생성한 인스턴스 let chulsoo = new Student('김철수', 3, 'male'); chulsoo; // Student {name: '김철수', grade: 3, gender: 'male'} chul..
⚙️ 오늘 배운 주제 고차함수 🐹 오늘의 기분 이름부터 범상치 않은 고차함수를 배웠다. 오전에 혼자 코플릿을 푸는데 처음 세션에서 시간이 부족해서 어라..? 하면서 후다닥 풀어제꼈다. 페어분 봽기 전에 남은 문제를 더 살펴볼 걸 그랬다. 문제를 아예 처음 보니 뇌정지가 와서 한참 헤맸었다. 게다가 일부 개념은 와닿지 않은 상태로 푸니 오류도 수없이 마주했었다. (reduce가 내 발목을 잡았다) 오늘 학습 요약 - 학습할 때: "어..?" - 라이브세션: "아...?" 복습하면서 점차 "아...!"로 바뀌길 기대해봐야지 🗝 키워드 일급객체, 고차함수, 커링함수, 콜백함수, filter, map, reduce, 추상화, 값 수준에서의 추상화, 사고 수준에서의 추상화 🗣 스스로에게 설명 일급 객체 first..
⚙️ 오늘 학습한 주제 DOM 유효성 검사 실습, 이벤트 객체 🐹 오늘의 기분 어제에 이어서 유효성 검사 실습을 이어서 했다. 필드 입력에 따라 회원가입 버튼을 활성화하는걸 구현해보고 싶어서 학습 끝내고 계속 붙잡고 있었다. 어찌저찌 완성은 해서 뿌듯하긴 한데 이렇게 하는게 맞는지 아리까리하다. 항상 내가 한 게 작동이 잘 되면 뭔가 의심스러움. 내일부터는 솔로 프로젝트가 시작된다. 처음 들어왔을 때 선배들이 만든 거 보고 저거 내가 할 수 있을까 했는데 벌써 눈 앞에 와버렸다. 할 수 있는 만큼 해보자! 🗣 오늘 구현해본 내용 CSS는 크게 변경하지 않았다. 하나 특별한 걸 꼽자면 하트 채우기 정도..? 이것도 야매로 구현한거라 보완할 점이 아직 많다 ㅜㅎ 버튼 활성화 CSS pseudo selecto..