진수의 개발세계 진수의 개발세계

생활코딩의 Redux 강의를 보며 공부한 내용을 정리한 글입니다. Redux : 자바스크립트로 만든 애플리케이션을 위한 예측 가능한 상태의 저장소 Redux(리덕스)의 핵심은 store다. store는 정보가 저장되는 곳으로, 애플리케이션에서 글 목록의 정보, 현재 선택한 글에 대한 정보와 같은 것들이 저장된다. store 안에는 state라고 하는 실제 정보가 저장된다. 사용자는 직접적으로 state를 제어할 수 없고, 반드시 state를 제어할 수 있는 함수를 이용해야 한다. 그래서 store에는 state와 관련된 일을 하기 위한 dispatch, subscribe, getState라고 하는 세 가지 중요한 함수가 있다. 먼저, store를 생성할 때는 Redux에서 제공하는 createStore라..

호이스팅 호이스팅은 변수를 선언하고 초기화했을 때 변수의 선언 부분이 해당 스코프의 최상단으로 끌어올려진 것처럼 동작하는 자바스크립트의 특성이다. 자바스크립트는 모든 선언(var, function, let, const, class)을 호이스팅한다. 하지만 var와 달리 let과 const로 선언된 변수를 선언문 이전에 참조하면 참조 에러가 발생한다. 변수의 생성과정을 먼저 보면 이해하기 쉽다. 선언 단계 : 실행 컨텍스트의 변수 객체에 등록(이 변수 객체는 스코프가 참조하는 대상이 됨) 초기화 단계 : 변수 객체에 등록된 변수를 위한 메모리 공간 확보, 해당 변수는 undefined로 초기화됨 할당 당계 : undefined로 초기화된 변수에 실제 값 할당 var 키워드로 변수를 선언하면 선언 단계와 초..

Scope - scope: 어떤 변수에 접근할 수 있는 유효범위, 전역(global)과 지역(local)으로 나뉜다 - 전역 스코프(global scope) : 코드 어디에서나 참조할 수 있다 - 지역 스코프(local scope / function-level scope) : 함수 코드 블록이 만든 스코프, 함수 자신과 하위 함수에서만 참조할 수 있다 - 전역변수 : 함수 바깥에 선언된 변수, window 객체에 선언된 변수 - 지역변수 : 함수 안에 선언된 변수 자바스크립트는 변수의 범위를, 호출한 함수의 지역 스코프부터 전역 스코프까지 점차 넓혀가며 찾는다, 이것을 스코프 체인(scope chain)이라 한다 const drink = 'coffee'; function outer() { console...

1. DOM, CSSOM 생성 - 서버로부터 HTML, CSS를 다운로드 받는다 - HTML 태그를 파싱해 DOM tree를 구성한다 - CSS 파일을 CSSOM으로 변환한다 2. Render tree 생성 - DOM과 CSSOM을 가지고 실제 화면에 표현되는 노드들로만 구성된 Render tree를 만든다 - 스크립트 태그, 메타 태그와 같은 것들은 화면에 표현되는 것이 아니므로 생략된다 - display:none과 같이 CSS를 통해 숨겨진 노드들은 렌더링 트리에 들어가지 않는다 3. Layout Render Tree를 생성하는 것이 화면에 표시할 노드와 해당 노드의 스타일을 계산하는 과정이었다면, 다음으로는 각 노드들이 화면에서 어느 위치에, 어떤 크기로 출력될지 계산하는 레이아웃 과정을 거치게 된..

집합(Set) 중복된 원소가 없고 정렬되지 않은 컬렉션 자바스크립트 내장 객체(ES6) 메서드 add(원소) : 원소 추가 remove(원소) : 원소 삭제 has(원소) : 어떤 원소가 집합에 포함되어 있는지 여부를 불리언 값으로 반환 clear() : 모든 원소 삭제 size() : 원소 개수 반환 values() : 집합의 모든 원소를 배열 형태로 반환 구현 class Set { constructor() { this.items = {}; } has(value) { return this.items.hasOwnProperty(value); // hasOwnProperty -> 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값을 반환한다 } add(value) { if (!this.has(val..

연결 리스트(linked list) 각 노드가 데이터와 포인터를 가지고 한 줄로 연결되어 있는 방식으로 데이터를 저장하는 자료 구조 배열과 달리 원소 추가/삭제 시 다른 원소들을 움직이지 않아도 된다는 장점이 있다 원소를 찾을 때까지 처음(head)부터 루프를 반복해야 한다 메서드 append(원소) : 리스트의 맨 끝에 원소 추가 insert(위치, 원소) : 해당 위치에 원소 삽입 remove(원소) : 원소 삭제 indexOf(원소) : 해당 원소의 인덱스 반환, 존재하지 않을 경우 -1을 반환 removeAt(위치) : 해당 위치의 원소 삭제 isEmpty() : 원소가 하나도 없으면 true, 아니면 false를 반환 size() : 원소의 개수 반환 getHead() : head 노드 반환 구..

김민준 님의 '리액트를 다루는 기술'을 참고하여 작성한 글입니다. 배열 비구조화 할당 const user = ['sola', 'jin']; // user 배열 안에 있는 값을 userOne과 userTwo에 담는 일반적인 방법 const userOne = user[0]; const userTwo = user[1]; // 배열 비구조화 할당을 사용한 방법 const [userOne, userTwo] = user; 리액트의 useState에서의 비구조화 할당 const [word, setWord] = useState(''); useState 함수의 인자에는 상태의 초기값이 들어간다. 타입은 어느 것이든 상관없다. 함수를 호출하면 배열이 반환된다. 배열의 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바..

ES6 이전에는 값을 담는 데 var 키워드 만을 이용했다. var 키워드는 함수 단위의 scope를 가진다. 즉, 해당 값을 사용할 수 있는 코드 영역이 함수 단위다. function hello() { var a = "hello"; if(true) { // {1} var a = "world"; console.log(a); // world {2} } console.log(a); // world {3} } hello(); {1} if 문 밖에서 var 값을 "hello"로 선언하고, {2} if 문 안에서 "world"로 설정했다. if 문 안에서 새로 선언했음에도 if 문 밖에서 a를 조회하면 {3} 변경된 값이 나타난다. 이런 문제점을 해결해 주는 것이 바로 let과 const 인 것! function..