TIL_221219_ 🚩 React 심화 강의

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. 리액트 심화 강의

다 듣고 복습까지 완료

• Redux Toolkit

  • yarn add react-redux @reduxjs/toolkit
  • devtools는 toolkit에 내장되어 있어 코드 설정 없이 확장프로그램 설치만으로 사용 가능
  • createSlice API import하기 - slice를 사용하면 Reducer, Action Value, Action Creator를 한번에 구현 가능

• json-server

  • 아주 간단한 DB와 API 서버를 생성해주는 패키지로 Backend(BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(FE) 개발에 임시적으로 사용할 mock data를 생성하기 위해 사용한다.
  • yarn add json-server
  • react와 따로 start 해주기
    yarn json-server --watch db.json --port 3001

• Axios

  • yarn add axios
  • http 통신을 도와주는 패키지
  • 요청 방식에 대해서는 사용할 API 명세서를 봐야 한다.
  • GET
  • POST
  • DELETE
  • PATCH
  • Network 탭을 통해 확인

• Thunk

  • redux middlewear를 사용하면 Action이 reducer로 전달되기 전에 어떤 작업을 추가할 수 있다.
  • Thunk를 사용하면, 객체가 아닌 함수를 dispatch 할 수 있게 해준다.
  • createAsyncThunk 라는 툴킷 API 사용
    -> 첫번째 자리에는 action value, 두번째에는 함수
    -> 두번째로 들어가는 함수에서 첫번째 인자는 컴포넌트에서 보내준 payload, 두번째 인자는 thunk에서 제공하는 API
  • thunk 함수라는 것을 표시하기 위해 함수 앞에 __ 등의 개인 convention 사용
  • Thunk 사용 순서
  1. Thunk 함수 만들기
  2. extraReducer에 thunk 등록하기
  3. dispatch(thunk 함수) 하기
  4. devtools 이용해서 작동 확인
  5. Store 값 조회하고, 화면에 렌더링 하기

• redux toolkit에서의 reducer는 action creator를 자동으로 만들지만 비동기를 위한 extraReducer에서는 따로 action creator를 만들어줘야 한다.

• React Hooks:optimizing

  • memo
    -> 불필요한 렌더링 방지
    -> props로 전달하는 함수를 매번 리렌더링하는 경우 memo를 써도 렌더링이 계속 됨
  • useCallback
    -> component가 리렌더링 되더라도 생성된 함수를 새로 만들지 않고 재사용할 때 쓴다.
    -> 의존성 배열 사용
    -> 사용 대상: 함수
  • useMemo
    -> useCallback과 사용원리 같음
    -> 사용 대상: 객체, 배열 등의 값
  • 리렌더링이 정말 불필요한 경우에만 사용하기

• Custom Hook

  • 공통된 로직이나 기능을 별도로 분리한 hook
  • src/hooks폴더/useCustomHook.js

  ⭐ 반드시 file의 이름앞에 use 사용

• 리액트 배포하기(S3)

  • AWS 액세스 키는 절대 노출하면 안 됨

추가 공부

• http 프로토콜

• 비동기개념 및 콜백함수

• Promise

• async/await

• .env

  ---

• Axios 총정리

• immer

  • react에서 쉽게 불변성을 유지할 수 있는 코드 작성을 도와주는 라이브러리

• heroku는 어떤 서비스를 제공하는 플랫폼일까?

  • heroku로 배포하기

• axios instance 란 무엇이고, 왜 사용할까?

  • baseUrl, headers, timeout 등을 axios의 instance로 생성하면 여러곳에서 반복해서 작성할 필요가 없다.
  • instance에 작성할 수 있는 항목

• axios interceptor란 무엇이고, 왜 사용할까?

  • 공통되는 기본 URL, header 등을 공통으로 처리
  • request 직전, response 받고 then, catch로 처리 직전에 가로챌 수 있다.
  • interceptor로 API 관리하기

• request headers와 response headers에 담기는 정보

---

2. React 숙련 과제 리뷰 강의 복습

• React 심화 강의 어렵고 어려운 거 하니 또 엄청 졸려서 중간에 짧게 낮잠 자가면서 공부하다가 환기도 시킬겸 숙련 과제 리뷰 강의 다시 봤다.
  • 아직 숙련 과제 코드 좀 더 수정해야 하는데 심화 강의 이해해야 할 게 너무 많네.

---

3. Modern JavaScript Tutorial_3

하루에 한 시간씩 공부

브라우저

• 브라우저 이벤트 소개

  • addEventListener
    -> 어떤 이벤트는 addEventListener를 써야만 동작

  ---

🚩

내 생각

• 공부가 너무 안 되는 날
  • 이렇게 공부가 안 되고 안 한 날은 처음이다.
  • 리액트 심화 강의가 어려워서 좀 졸리긴 했지만 오전부터 거의 한 시간마다 20분씩 낮잠 자고 저녁 시간도 1시간 정도 앞당겨 누워서 쉬었다.
  • 그동안 식사 시간 제외하고 쉬는 시간 거의 없이 달려왔는데 오늘 몰아 쉰 느낌이다.
  • 정신 차려야 된다!! 이제 곧 팀플 시작인데!!!!! 오늘 일찍 자고 내일 집중 잘 하자!!