1107_힐링주였던 week13

threejs와 nextjs

이번주는 react 를 이용한 게시판을 만들었다. 배운점 정리.

• nextjs 14 버전에 대해서 정보가 적어서 힘들었다. 알고있던 next와 폴더구조가 많이 달라졌다. 나만무 같은 중요한 프로젝트를 할때, 프레임워크의 버전은 보수적으로 가는게 맞다. 아직 다른 라이브러리랑 호환이 되는지 안되는지도 모르잖아 ? 괜히 LTS가 있는게 아니라고🤔
• 처음에 셋팅하는게 제일 어렵다. 에러를 처음에 셋팅할 때 제일 많이 본거같다…; 버전이랑 연결된 내용이긴 했지만 공식문서대로 했는데 안되니까 참 난감했다. 결국 next 14버전을 13버전의 폴더 구조를 사용해서 극복(?) 했다.
• 같은일을 여러번 하는게 싫다. 그러려면 컴포넌트를 만들어놓고, 경우에 따라 갖다 써야하는데, 그럼 storybook을 써야한다고 느꼈다.
• 각 페이지에 대한 layout 잡고가기(페이지마다 달라지면 안되니까.)
• 좋은 코드를 위한 리펙토링은 주기적으로 해야한다. 나중에 하면 고치기가 힘들다. 나만무를 할때 그 주기를 강제로 정해놔야겠다. 구현해야할게 급해서 리팩토링을 자꾸 미루게 되었다.
• 에러를 해결하고나서, 그 에러를 어떻게 해결했는지 작성하기..(하지만 잘 안된다. 어떻게 극복할 수 있을까?) 참고했던 블로그, 공부했던 공식문서를 정리하기. 된다, 하고 그냥 넘어가는게 아니라, 왜 되지 ? 어떤 코드를 추가했더니(혹은 뺏더니) 되었다를 확실히 알기.
• vercel 배포 진짜 좋다. CI/CD도 가능하고 간편하고 빠르다. 아직까진 단점을 못찾겠다. json-server 도 배포할 수 있어서 진짜 서버처럼 사용하게 만들 수 있었다.
• three.js 를 이용해서 시바견을 메인페이지에 렌더링 했다. 생각보다 오래걸렸다. 공식문서대로 하면 금방할 줄 알았는데. (three.js 를 처음 접해서 렌더링 하고 클릭 이벤트 주는 함수까지 연결하는데 16시간 정도 소요됬다.) 왜냐?
  • nextjs에서 three.js 렌더링 예시를 찾는게 쉽지 않았다. 공식문서는 아예 html기준으로 작성되어있다.
  • nextjs 에서 gltf 렌더링 하는 방식에 대한 이해가 부족했다. build 파일안에 넣고 쓸 경우 절대경로로 써야 했다.