<4주차 정리 WIL> 리액트 심화강의가 시작되었다 :)

이번 주에 한 일!

• 알고리즘 챌린지 문제 풀기! (1일 1문제 풀기 도전!)
• 코드잇 자바스크립트 중급 <객체지향 기본기> 토픽  완강
• 코드잇 자바스크립트 중급 <자바스크립트 웹 개발 기본기> 토픽  수강 (1/4 쯤 들었나,,?)
• 스파르타 리액트 기초반 수업 2~5주차 재수강 & 과제도 싹 다시해보기.
• 스파르타에서 제공한 리덕스(Redux) 세션 듣기.
• 4주차 팀 과제 답변 작성하기
• 개인과제 제출
  https://myvoyage.tistory.com/89
• 임민영 튜터님 React 세션 듣기 :)
• 항해톡 발표 구경하기!  < DOM > & < https/SSL > 세상.. 발표 너무 잘하셔
• [ 1일 1로그 100일 완성 IT 지식] 책 ~30번 챕터 읽기
• 스파르타 리액트 심화반 강의 1주차 ~ 2주차 5강까지 수강
    

📖 배운 것들

• 라이프사이클 (클래스형 vs 함수형)
  컴포넌트의 라이프사이클은 컴포넌트가 생성이 되고 제거 되기까지의 과정을 말한다.
  
  기본적으로는 클래스형 컴포넌트에 적용이 되는데, 
  우선 먼저 컴포넌트가 생성이 되는 것을 Mount라고 하는데, 생성된 컴포넌트가 생성자 함수를 거쳐 렌더(가상 돔에서 진짜 돔으로 올라가서 눈에 보이게 되는 것)가 되고, 리액트 돔 및 ref들이 업데이트된다, 이 때 componentDidMount() 함수가 실행된다. 업데이트 단계에서는 컴포넌트에 만약 수정사항이 생기면 (Props나 state가 변경되거나, 부모 컴포넌트가 리렌더링 되거나, 강제 업데이트가 발생할때) 리렌더링이 발생하고 완료되면 ComponentDidUpdate() 함수가 실행된다. 마지막으로  컴포넌트가 웹페이지에서 사라질 때(=제거될때, Unmount), 제거되기 직전 ComponentWillUnmount()가 실행된다.
  
  이 라이프사이클 메서드들은  기본적으로 클래스형 컴포넌트에서만 다룰 수 있었고,
  함수형 컴포넌트에서는 state를 관리하거나 라이프 사이클 이벤트를 사용하는것이 불가능했었으나
  리액트 훅(Hook)이라는 개념이 들어오면서 함수형 컴포넌트에서도 state(useState)를 관리하고,
  컴포넌트의 라이프사이클을 관리하는 것(useEffect)이 가능해졌다.
  
  함수형 컴포넌트의 라이프사이클은 useEffect 훅을 사용해 관리할 수 있다.
  React.useEffect ( ( ) => { 콜백함수 return ( ) => {클린업} }, [Dependency Array]
  
  useEffect 훅의 콜백함수는 최초 1회는 무조건 실행된다 ( componentDidMount() 의 역할 )
  이후, 디펜던시 어레이(의존성 배열)에 변화가 생길 때마다 재실행된다 (ComponentDidUpdate()의 역할
  만약 콜백함수가 리턴값을 반환한다면 이는 클린업의 역할을 한다 (ComponentWillUnmount())
  
  
• 리액트 훅(Hook)
  결국 자바스크립트의 함수이다. 리액트 버전 16.8 부터 도입되어 덕분에 함수형 컴포넌트에서도
  상태관리나 라이프사이클 관련 작업을 하는 것이 가능해졌다. 리액트 훅은 아래 규칙을 따른다
  
    1) 함수형 컴포넌트에서만 사용할 수 있다.
    2) 컴포넌트의 최상위에서만 호출할 수 있다.
  
  수업에서는 대표적인 훅 몇 가지를 다루어 보고 (useEffect, useCallback, useRef),
  커스텀 훅을 만들어 보았다. 커스텀 훅은 리액트 훅의 규칙들을 따른다 :) 
  또한 이름은 무조건 use로 시작해야하고, 무언가를 리턴해야만 한다.
  
  
• 모듈화, 모듈문법
• 객체지향 핵심개념 : 추상화, 캡슐화, 상속, 다형성
• static 프로퍼티와 메서드란?
• fetch 함수
• Redux 더 알아보기!
• 브라우저 & 렌더링 엔진의 작동방식
• 더티비트 시스템
• 웹팩과 바벨 사용해서 리액트 프로젝트 꾸리기
• 리액트 앱 작동 방식
• 동기 vs 비동기
• 비동기 처리 패턴 ( 콜백 패턴, 프로미스 객체, Async-await)
• Context API 사용 방법
• Redux Tool Kit
• 리액트 라우터 돔 v6 변경사할
• Rest API 
• json-server로 Mock API 만들어보기
•  XMLHTTPRequest
• Fetch API
• Axios
• Polling and Longpolling 
• 토큰 기반 인증 (OAuth2.0 과 JWT 알아보기)
• 웹저장소 종류 알아보기 (쿠키, 세션스토리지, 로컬스토리지)
• Firebase Authentication 사용하기