본문으로 건너뛰기

23.07.06(목)

하루 요약​

  1. 9시 ~ 20시 : 공유 오피스
  2. 20시 30분 ~ 21시 20분 : 운동
  3. 21시 30분 ~ 22시 30분 : Frontend 스터디

오늘 한 일​

  1. Gloddy 개발
    1. Refactoring : 방만들기 페이지 리팩토링 & 전체적인 리팩토링
  2. CS 공부
    1. CSR & SSR
    2. Redux

오늘 배운 내용 요약​

  1. CSR은 서버로부터 데이터를 받기 위한 최소한의 HTML과 JS를 먼저 받은 후, <div id='root'></div>에 채울 데이터를 서버로부터 받아서 렌더링하는 방식이다. 초기 렌더링은 느리지만, 페이지간 이동은 속도가 빠르다.
  2. SSR은 서버가 HTML을 렌더링해서 클라이언트에게 보내주는 방식이다. 초기 렌더링은 빠르지만, 페이지간 이동은 느리다.
  3. Next.js는 이 두가지를 혼합해서 사용하는 방식이다. CSR은 useEffect, router.push(), <Link />를 사용하고 SSR은 getServerSideProps, SSG는 getStaticProps를 사용한다.
  4. Redux는 React의 Props Drilling 문제를 해결하기 위해 등장한 전역 상태 관리 라이브러리이다. React 내장 라이브러리인 Context API는 Context값이 변경되면 Context.Provider로 둘러쌓인 모든 컴포넌트가 리렌더링이 일어난다는 치명적인 단점이 있다.
  5. Redux는 Flux 패턴으로, 사용자가 Action을 발생시키면 Reducer가 이를 받아서 Store에 저장하고, Store에 저장된 데이터를 View에 뿌려주는 방식이다. 이때, Store에 저장된 데이터를 View에 뿌려주는 방식은 useSelector를 사용한다.

추가로 학습할 것​

  1. React에서 CSS는 언제 다운로드 받나요? JS로 HTML을 불러올 때 함께 CSS도 받아오는 건가요?
  2. CSR방식이, CDN에서 HTML파일과 LInk를 보내준다고했는데, 그 CDN는 어디에 있나요?
  3. 어떤 코드가 좋은 코드이고, 다른 사람들은 어떻게 코드를 작성할까?

오늘의 생각​

오늘은 리팩토링을 하느라 시간이 많이 흘렀다. 내가 리팩토링한 게 정답인지는 모르겠다. 어떻게 작성한 코드가 더 좋은 코드인 지 모르겠다. 항상 어떤 코드가 좋은 지 고민하며 작성하고, 어떤게 좋은 코드인지도, 그리고 다른 사람들은 어떻게 작성하는 지 또한 항상 공부해야겠다.