OOP 공부 목표(객체 지향 프로그래밍) 클래스 개념 이해 / 인스턴스 개념 이해 new 사용법 class 사용법 추상화 / 현실을 바탕으로 메소드, 속성 디자인 OOP(객체 지향 프로그래밍) 다형성 캡슐화 상속 추상화 프로토 타입 개념 이해 상속 개념 이해 클래스 상속 원리 이해 Prototype chain 이해 상속 관계 현실 세계 모델을 코드로 작성 Class 모듈화 앞서 필요한 개념 객체 개념 // 클로저 개념 // 객체 다루기 메소드 호출 실습하기 메소드 호출 방식에서는 화살표 함수를 쓰지 않습니다. 이유는 mdn을 잠초 let makeModule = { value1 : 1, add : function() { this.value1++; }, minus: function() { this.value..
비동기 공부 목표 blocking 개념 동기적 개념(synchronous) non - blockin / 비동기 개념 (asynchronous) 비동기적으로 작동하는 기능 로딩창 / 인터넷 서버 요청 후 응답 기다림 / 큰 용량 파일을 로딩 callback / promise의 장점 단점 promise 패턴 공부 resolve, reject 의미 then/catch 와의 관계 promise 인자 넘기는 법/세가지 상태/promise.all 이해 async/await 작동 원리 비동기 간단히 동기와 비동기의 차이점을 설명하자면, 동기는 전화라고 생각할 수 있고, 비동기는 문자라고 생각할 수 있다. 전화는 당장 일을 멈추고 전화를 받아야 한다. 하지만 문자는 시간이 얼마나 걸리던 미룰수가 있다. 즉, 요청과 동..
재귀 공부 목표 재귀적 사고 쪼개어 생각하기 함수 자신의 재귀적 호출 탈출 조건 재귀 활용(트리 구조) 트리 구조 json 구조 dom 구조 재귀 함수 재귀란? 재귀 함수 언제 사용해? 재귀 함수 사용 연습 문제를 쪼개서 생각하기 하나의 배열이 있고, 그 배열의 합을 구하는 함수를 만든다고 가정하자 내가 생각한 공식은 반복문 이었다. arr = [1, 2, 3, 4, 5] let sum = 0 for (let i = 0; i < arr.length; i++) { sum += arr[i] } console.log(sum); 하지만 반복문 없이 단순히 arr의 원자의 합을 구한다고 생각해 보자 한번에 합을 계산하는 것보다 하나씩 쪼개서 계산하는게 더 쉬울 것이다. [1] sum = 1 [1, 2] sum =..
CSS CSS의 . 과 #의 차이의 개념 절대 단위와 상대 단위 구분 CSS의 박스 모델 content-box와 border-box 의 차이 위 개념은 기본적으로 알고 넘어가야 하는 것 입니다! 한단계 더 높아지기 위한 공부 CSS의 셀렉터 규칙 후손 셀렉터 / 자식 셀렉터 차이 레이아웃을 위한 HTML만들기 Flexbox 이용해 레이아웃 만들기 방향 / 늘리기 / 수평 정렬 / 수직 정렬 / 크기 조절 셀렉터(selector / 선택자) p {color: red; paddin: 5px;} 같은 경우 p : 선택자 (selector) {} : 선언 블록 (Declaration block) color : 선언 부분의 속성(property) red : 선언 부분의 속성값(Property Value) 셀렉터 ..
HTML 가장 기본적인 요소 Tag 의 집합이며, 가장 기본 요소 이다. Ex) 내용 같은 그룹 안에 기능을 넣어줍니다. 기본 구조 head / body / footer로 이루어져 있습니다. TAG 많이 쓰이는 TAG만 모아 봤고, 자세한거는 MDN을 이용하자 HTML 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. 는 CSS를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있습니다. HTML 요소는 HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 요소만 존재할 수 있습니다. HTML 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다. HTML 요소는 문서 ..
DOM 이란? DOM (Document Object Model)은 HTML 및 XML 문서를위한 프로그래밍 인터페이스입니다. 프로그램이 문서 구조, 스타일 및 내용을 변경할 수 있도록 페이지를 나타냅니다. DOM은 문서를 노드와 객체로 나타냅니다. 이렇게하면 프로그래밍 언어가 페이지에 연결할 수 있습니다. 간단히 말해 프로그래머 관점에서 본 HTML 이라고 생각한다. DOM 구조 는 트리 구조로 HTML을 부모 자식으로 나눠 만들어 진다. HTML - JS CRUD // 조회하기 console.log(document.body) // body console.dir(document.body.children) // body 엘리먼트 자식 찾기 // element 만들기 let tweetDiv = documen..
사전 지식 리엑트를 공부 하기 전 사전 지식 HTML / CSS 기초 개념 JS 기초 개념 함수형 프로그래밍 / 고차 함수 개념 및 이해 배열 내장 메소드 기초 ES6 문법 이해 >>> 공부 필요 컴포넌트 용어 React intro 공부 목표 React 3가지 특징 이해 및 설명 JSX가 왜 명시적인지 이해 및 작성능력 React 컴포넌트의 필요성 이해 및 설명 create-react-app으로 간단한 개발용 react앱을 실행 React React란? 프론트엔트 개발을 위한 JS 오픈 라이브러리이다 3가지 특징으로는 선언형, 컴포넌트 기반, 범용성 을 가지고 있다. 선언형 React는 HTML/CSS/JS로 나눠 적기 보다 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍이다...
class Stack { constructor () { this.stack = []; this.size = 0; } push(arg) { this.size++; this.stack = this.stack.concat(arg); } size() { return this.size; } pop() { if (this.stack.length === 0) { return -1 } const popNum = this.stack[this.size - 1]; this.stack = this.stack.slice(0, -1); this.size-- return popNum; } empty() { if (this.size === 0) { return 1; } else { return 0; } } top() { if (th..
'객체' 객체를 배우면서... 배열과 객체 구조 파악하기 >>> 구분까지 지어서 생각해야 합니다. 객체 속성 조회, 변경, 삭제 등 자유롭게 사용해야 합니다. 객체 메소드 파악하기 객체 X 반복문 파악하기 객체 객체 형태 let obj = { key1 : value1, key2 : value2 }; 그렇다면 객체의 값은 어떻게 출력할까? 방법1 객채명.key이름 >>> value 출력 방법2 객채['key명'] 객채명.key === 객채['key'] >>> = value 객채명[key] = value 객체 메소드 delete : 원하는 객체의 값 하나를 지울 수 있습니다. for ... in 는 객체 key 값을 주로 순회 하면서 값을 가져오기 위할 때 쓰입니다..
'배열' 배열을 배우면서... index, element, length 등을 잘 알아야 사용이 가능하다 스택, 큐, pop 등을 알아야한다! FIFO, FILO 등을 알자! 2차원 배열을 공부하자! 배열 기초 메소드 element를 순회 하면서 조회, 추가, 삭제, 복사, 분리 하는 법을 알아야 한다. >>> unshift, shift, slice, length 변수, 데이터, 특정값이 배열인지 아닌지? >>> Array.isArray element >>> push, pop 특정값 배열에 포함되어있는지 확인 >>> indexOf, includes 배열 배열이란 순서가 있는 값입니다. 즉 순서대로 값이 들어 간다는 말이죠! 배열에서 가장 알고 가야 할 것은 용어 입니다. 용어 element ..