[유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 1기 - 12일차

 

12일 차인 오늘은 tmdb API를 활용해 API Call를 병렬처리 하는 방식과 무한 스크롤 기능을 구현해 보았고, Next.js에서 가장 어려운 개념인 Caching 메커니즘에 대해 학습했다. 복습할 내용이 너무 많다. 오늘 정리 못한 부분은 주말에 시간을 내서 정리가 필요해 보인다. 

 📚 학습한 내용
- 실습 : tmdb API 활용한 DataFetching 
- API Call 병렬 처리 방식
- Router Handler
- .env 환경변수 
- 실습 : tmdb API 활용한 무한 스크롤 기능 구현
- Caching

 

✍🏻 학습한 내용 정리

 

무한스크롤 기능을 개인프로젝트를 진행하면서 구현해보고 있는 중이었다. 별도의 패키지 설치 없이 Intersection Observer API를 사용해서 구현하고 있었는데, 강의에서는 react-intersction-observer 설치해서 구현했다. 둘 다 원리는 동일하다. 브라우저 뷰포트(Viewport)와 원하는 요소(Element)의 교차점을 관찰하며, 요소(Element)가 뷰포트에 포함되는지 아닌지를 구별하는 기능을 제공한다.

무한 스크롤은 요소(Element)가 View의 끝점에서 관찰되면 API 요청 후 기존의 리스트에서 추가하는 방식으로 구현한다. 패키지를 사용하니 간단한 게 구현할 수 있었으나, 아직 코드의 동작원리 방식은 이해되지 않았다. 의존성 배열에  movies 상태도 왜 추가되어야 하는지 이해하지 못해 주말에 복습이 필요하다. 

 

학습 내용 개념 정리

 

오늘 복습에 중점은 둔건 Caching 메커니즘이었다. 강의를 들으면서 이해되지 않는 부분들이 많아서 공식문서를 계속 읽어가면서 개념을 파악하는데 이해하는 집중 했다. 강사님 말씀대로 참 Next.js 공식문서의 그림으로 잘 정리되어 있었다. 완전히 이해되기까지는 많은 경험을 해야 할 것 같았다. 과제로 Chaching 메커니즘을 정리해야는데 글로 정리해 보니 처음보다는 이해되었다. Data Fetching 처리할 때 가장 신경 써야 할 부분은 Data Cache 인 것 같다. 영구적으로 요청받은 결괏값이 지속되니 적절하게 캐싱처리를 무효화해주어야 한다는 점을 꼭 인지하고 있어야겠다. 

Cacheing 메커니즘에 대한 정리

 

 

👩🏻‍💻 학습을 통해 느낀 점 

 

매일 학습 회고를 쓰려니.. 고비가 찾아온다. 저녁밥을 먹고 씻고 복습하면고 다시 코드 구현해 보면 금방 12시가 넘어간다.. 하루가 너무 짧다.. 사전 직무 교육을 수행하는 동안 꾸준하게 매일매일 회고하고 싶었는데 피곤하기도 하고 스스로 회고하는 방식에 대해 약간 의구심이 들었다. 

 

 

 

---

 

본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성되었습니다.

 

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프

#Next.js #프론트엔드개발자양성과정 #개발자교육과정