[주간회고록] 6주차 주간 회고록

6주차 기간: 2024년 3월 20일 → 2024년 3월 26일

🗒️ 핵심 3줄 요약
- 3D 써보니까 재미있다
- Next.js 엄청 편리해서 신선한 충격
- 잠 제발 일찍 자기

🎯 이번 주 목표

• ✅ 리액트 마스터클래스 졸업작품에 3D 넣어보기

👏 칭찬하고 싶은 점

• 졸업 작품에 R3F 써보는 게 목표였는데 원하는대로는 안됐지만 얼추 마무리해서 다행이다.

😭 고치거나 버려야 할 점

• Three.js를 아직 제대로 공부하지 않은 채 R3F를 사용하다 보니 구글링을 정말 많이 해야했다. 미리 미리 공부해두자!
• 그만 늦게 자기..? 과제 미리 해… 제발…

🏃 일일 스프린트

• 2024년 3월 20일
  • ✅ 주간 회고록 작성하기
  • ✅ 인터뷰 사전 연락
  • ✅ 언어공부
  2024년 3월 21일
  • ✅ 인터뷰
  • ✅ 언어공부
  2024년 3월 22일
  • ✅ 친구랑 놀기
  • ✅ 언어공부
  2024년 3월 23일
  • ⚠️ React JS 마스터클래스 졸업 작품
  • ✅ 언어공부
  2024년 3월 24일
  • ✅ React JS 마스터클래스 졸업 작품
  • ✅ 인터뷰 정리
  • ✅ 언어공부
  2024년 3월 25일
  • ✅ NextJS 기초 #1.1~#2.1
  • ✅ 챌린지 퀴즈 풀기
  • ✅ 랩미팅 회의 정리
  • ✅ 언어공부
  2024년 3월 26일
  • ✅ NextJS 기초 #2.2~#2.10
  • ✅ 챌린지 퀴즈 풀기
  • ✅ 언어공부

✍️ 이번 주 배운 내용

🤩 새롭게 알게 된 것

• CSR vs SSR
  CSR은 기본적으로 브라우저가 자바스크립트를 모두 다운받은 뒤 브라우저 내부 자바스크립트 엔진이 직접 실행시켜 html 엘리멘트를 만들어서 화면에 추가하는 방식이다. 이 경우 네트워크 환경이 안 좋거나 자바스크립트 파일이 커서 다운받는데 시간이 걸리면 그동안 사용자는 화면 상에 아무것도 볼 수가 없다. 또한, SEO에 좋지 않다. CSR과 반대로 SSR은 server에서 react 컴포넌트를 브라우저가 이해할 수 있게 html로 변환하는 pre-render 과정을 거친다.
• Next.js 처음 배웠는데 엄청난 프레임워크라는 사실을 알게 되었다.. 개발할 때 정말 편리할 것 같다.

🤔 해결하지 못 한 점

• 원래 R3F를 사용하게 된 이유는 framer-motion에 3D도 모션을 줄 수 있어서 R3F랑 같이 써보고 싶어서였다. TV를 누르면 카메라가 TV 화면을 zoom in 하고 framer motion을 이용해 카메라 무빙을 쉽게 구현하는 게 목표였다. layout camera를 이용해서 움직이는 것까지는 구현했는데 layout camera와 tv를 감싸고 있는 framer motion의 motion canvas가 창 사이즈를 움직이면 반응형으로 캔버스의 사이즈 조절이 안 되는 문제가 발생했다. github issue에서 찾아보니 나처럼 이 문제가 발생한 사람이 꽤 있었다. 근데 다른 사람들의 답변을 참고해보았을 때 버그라는 얘기가 많았고 공식 예제에도 같은 현상이 나타나는 것을 확인한 후에는 어쩔 수 없이 layout camera를 사용하는 것을 포기했다…이 부분을 R3F에서 제공하는 카메라를 움직이는 걸로 대체했으면 좋았을텐데 아직 카메라 움직이는 것까지 공부하지 못해서 시도하지 않았다.
• 원래는 TV안에 영화 리스트를 보여주고 싶었다. 그러려면 routing하는 요소들을 Canvas안에 넣어 주었어야 했는데 이 부분을 잘 해결하지 못했다. drei 패키지 안에 html 요소를 canvas 안에서 사용할 수 있게 해주는 Html 컴포넌트가 있는데, 얘를 잘 활용하면 될 것 같아서 시도했다가 결국 실패했다… three.js 자체를 좀 더 공부해 본 뒤에 다시 시도해 봐야겠다.

💖 주간 회의와 조별 활동

📝 이번 주 활동

• -

🙃 기억에 남는 것

• -