내일배움캠프 4기 스파르타코딩 React B반
📒 오늘의 공부
1. JS 스터디
- 프로젝트 및 취업 준비 관련 수다
2. 포폴, 이력서 뼈대 준비
- 이력서 관련 블로그 몇 개 찾아보고 뼈대 정도만 정함
- 내가 몇 년 전에 쓰던 이력서와는 아주 달랐다.
- 자소설을 써야했던 과거 이력서와 달리 개발자 이력서에는 인적사항도 최소화(나이도 기재X)하고 정말 필요한 정보만 적는다.
3. 프로젝트 기능 개발_필수
- firebase에 들어간 데이터 가져와서 전역으로 쓰기
- 정적 페이지에서는 SSG로 가져와서 쓰는데 다른 페이지에서도 필요하고 Main index.tsx에서 props로 데이터를 넘겨줘야 해서 Recoil로 관리!
문제
- Main index에서만 Recoil을 실행하니 Recoil로 값을 받아오는 다른 Page에서는 새로고침 했을 때 빈 배열을 반환
- Main Page에 Mount 되고 나서 Recoil이 실행되는 거니까 다른 페이지에서 새로고침을 하면 값을 못 받아오는 것
시도
-
Main index보다 상위에서 GetStaticProps로 DB에서 값을 가져와 Recoil에 넣으려고 했는데 _app.tsx에서는 Recoil이 선언되어 있어 _app.tsx보다 하위 컴포넌트에서만 Recoil을 사용해야 한다.
-
app.tsx에서 모든 컴포넌트에 props로 넘겨주기
-
getStaticProps로 받아온 값을 app.tsx에서 log찍어보니 undefined
-
배포 서버에서 진행해 봄 - undefined
-
getStaticProps가 아닌 client에서 DB 값을 가져오니 잘 받아옴!
-
컴포넌트에서 app.tsx에서 props로 전달한 HomeList를 잘 받아 온다.
- 새로고침 시 오류
-> 옵셔널 체이닝으로 오류는 해결했지만 새로고침 시 값을 다시 받아오는 시간이 걸림
-> Main에서도 app.tsx에서 props로 받아온 값을 쓰려고 하니 처음엔 undefined 빈 값이 들어와 화면에 렌더링 되지 않는다.
-> 이래서 getStaticProps를 쓰려고 했던 건데..
- 새로고침 시 오류
-
검색해보니
_app.tsx에서는 getStatc~ 등을 지원하지 않기 때문에 getInitialProps를 사용해야 한다.- 전역적으로 데이터 패칭이 필요한 경우 사용 가능
- 단점: getInitialProps를 쓰면 next.js의 자동 정적 최적화 과정이 일어나지 않는다.
- 자동 정적 최적화란?
->Next가 페이지가 정적인지 자동으로 확인하고, getInitialProps나 getServerSideProps를 사용하지 않는다면 페이지를 정적 HTML로 사전에 렌더링하여 자동으로 페이지를 최적화하는 것 - 참고자료
해결..
-
메인 페이지, 검색결과 페이지, 디테일 페이지에서 각각 getStaticProps, getServerSideProps 사용..
-
통합 데이터 다 문자열로만 들어가게 수정
4. TypeScript - Udemy
알게 된 것
type.d.ts는 app.tsx 위치 혹은 하위에 있어야 사용 가능
5. 프로젝트 TypeScript 적용
any로 선언한 것 모두 type 지정해주기
문제
프론트엔드 개발자