[리액트 심화반] 1주차 개발일지

1. 배운 내용

자바스크립트 문법 (변수와 상수, 자료형, 객체, 함수, 콜백함수, 프로토타입)

기획서 쪼개기

메인페이지 만들기

최소단위 컴포넌트 만들기

 

 

2. 새로 알게 된 내용

1) TDZ (Temporal Dead Zone, 일시적 사각지대)

let, const는 호이스팅이 된다. 스코프에 진입할 때 변수를 만들고, TDZ가 생성되지만 코드 실행이(=실행 컨텍스트가) 변수가 있는 실제 위치에 도달할 때까지 액세스를 못할 뿐.

 

2) const로 선언된 객체는 수정될 수 있다. 객체에 대한 참조를 변경하는 것이 불가능.

 

3) 콜백 함수 : 함수를 값처럼 전달할 때, 인수로 넘겨주는 함수

 

4) 프로토타입 : 자바스크립트의 모든 객체는 자신의 부모 객체와 연결되어있다. 좀 더 정확히는 부모 객체의 원형. (부모 객체의 프로토타입) 마치 객체 지향에서의 상속 개념처럼 부모 객체의 프로퍼티나 메소드를 상속받아 쓸 수 있다. (위임에 가까움) 이런 부모 객체를 프로토타입 객체, 혹은 그냥 프로토타입이라고 부른다. 그리고 부모 객체를 참조하는 걸 두고 프로토타입 링크라고 한다. 상속이 쭉쭉 내려가는 걸 프로토타입 체인이라고 한다.

__proto__ // 접근 가능하지만 면접에서나 쓰일 법한 구식 방식

Object.getPrototypeOf() // 최대한 이런 식으로 참조하도록 하고

Object.create() // 프로토타입 체인에 연결할 때는 이걸 사용하자

 

5) 크롬 익스텐션

- Redux devTools : 리덕스를 사용할 때, 리덕스의 액션에 따른 데이터 변화를 편히 볼 수 있게 해준다.

- React developer Tools : 리액트를 디버깅하기 편하게 해준다.

 

6) VSCode 확장 프로그램

- React Extension Pack 설치

- Prettier - code formatter

 

7) 기획서를 보면서 컴포넌트를 쪼개보자

- 페이지마다 반복되는 부분을 찾자

 

 

3. 느낀 점

리액트 기초 수업을 듣지 않아서 내용이 엄청 많다고 생각했다. 그렇지만 유용한 크롬 익스텐션이나 vscode 익스텐션을 알게 되었고, 컴포넌트를 어떻게 하면 잘 쪼갤 수 있는지 조금이나마 확실하게 알게 되었던 것 같다.