WIL (2021-10-02)

1. 일주일간의 리액트 심화과정

 

- 리액트 라이프사이클의 이해

라이프 사이클은 위 그림과 같이 총 9개가 존재한다.

크게 세가지 유형으로 나눌 수 있는데 생성 될때, 업데이트 할 때, 제거할 때이다. 이를 리액트에서는 마운트, 업데이트, 언마운트라고 한다. 앞으로 위의 그림 을 보면서 아래 글을 참조한다면 더욱 더 유용한 글이 될 것 같다. 사실 위 그림이 리액트 사이클의 전부이긴 하다. 

여기서 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻하고, 반대로 언마운트는 DOM에서 제거되는 것을 뜻한다.

주의하여 볼 것은 업데이트 부분인데, 업데이트는 다음과 같은 4가지 상황에서 발생한다.

1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거할 때

2. 자바스크립트 개인 공부

- 강의에서 제공되는 간단한 리액트 실습을 하면서 의도와는 다르게 변수의 값이 다를 때가 많았다. (주로 값을 할당했다고 생각했지만 undefined 가 되어 에러 발생). 리액트 라이프 사이클도 중요하지만 자바스크립트 공부를 해보니 기본 개념에서 부족함이 느껴졌다.

 

호이스팅

- 코드에 선언된 함수나 변수를 선언 및 초기화하고, 실행할 때 선언부를 코드 최상단으로 끌어올리는 것을 말한다. 

 

TDZ (Temporary Dead Zone)

- 변수의 선언과 변수의 초기화 사이의 변수에 접근할 수 없는 지점

- var는 선언부를 끌어올리고 undefined를 할당하지만, const, let은 변수명만 끌어올린다.

 

this

- 메서드 안의 함수의 this = window

- 변수 스코프는 구분하고 싶지만 this는 공유하고 싶다면? 중괄호로만 구분하면 this 공유.

 

얕은복사

- 객체의 프로퍼티를 복사 (depth 1단계까지만)

- Object.assign(복사할곳, 복사대상) , slice(), ...

 

깊은복사

- 객체의 프로퍼티를 복사 (depth 전체)

- 깊은 복사를 해야만 불변성 유지가능

- 재귀함수 이용, JSON.strignfy() 혹은 ladash 이용

 

전역변수(var)를 피해야 하는 이유

- 전역변수 A를 선언하고 delete A 로 삭제하려면 false. // 전역공간에서 선언한 변수는 전역변수임과 동시에 전역객체의 프로퍼티가 되기 때문..

- 그런데!! window.A = 값 으로 전역객체 선언 및 초기화 후 delete A는 가능... 이런 예외적인 일이 있기때문에 전역변수 선언 최소화 해야 함.

- 이 위의 것들은 var로 선언한 변수만 해당. const, let의 전역변수는 전역객체의 프로퍼티가 되지 않는다.

 

Class

- 자바스크립트는 동적 언어이며 클래스가 없는 언어이다. ES6부터 지원하는 클래스는 Java, C++ 같이 클래스 기반 언어와는 다르게 클래스 없이 객체를 생성하는 언어인데, 어떻게 생성하느냐.. JS의 모든 객체는 부모 객체의 원형과 연결되어 있는데, 상속받은 것 마냥 부모 객체의 프로퍼티, 메서드를 상속받아 쓸 수 있다. 이러한 부모 객체를 프로토타입이라고 한다. 그리고 부모 객체를 참조하는 것을 프로토타입 링크라고 함.

 

OAuth

- 외부서비스의 인증 및 권한부여를 관리하는 프레임워크.

(동작방식)

1. 클라이언트와 서버간 인증(로그인)을 하면 서버가 access_token 발급.
2. 클라이언트는 access_token을 이용해서 API요청 가능
3. 서버는 API요청을 받고 access_token을 가지고 권한 여부를 확인하여 결과를 클라이언트에 보내줌.

JWT (JSON Web Token)

- 토큰의 한 형식으로, 데이터가 JSON형태로 이루어져 있는 토큰.