[미니 프로젝트] 게시판 프로젝트 3일차

무엇을 했나

• 몽고DB 더미 데이터 작성
• 글 목록 아이템 카드 만들기(완성은 했으나 제대로 작동 안함)
• 아이템 리스트 컴포넌트 만들기(미완)
• 헤더 버튼에 호버/액티브 효과 추가

 

시행착오

'Promise' is not a valid JSX element

헤더 컴포넌트에 유저 로그인 정보 확인을 위해서 비동기 작업인 useServerSession()을 하고 헤더 컴포넌트를 async함수로 만들었는데 임포트해서 적용하는 루트 레이아웃 부분에서 타입 오류가 발생함. 검색해 보니 known issue라고 하고 나중에 해결될 예정이라 한다. 임시방편으로 해결하는 법이 공식문서에 나와있다.

 

바디가 전체 뷰포인트를 차지하지 않는 현상

globals.css에서 body에 100vw, 100vh를 주고 루트 레이아웃에서 min-h-screen h-full을 줘서 해결.. 근데 왜 바디 높이를 지정해줘야 하는지 잘 모르겠다.

 

몽고DB 타입 에러

any로 해결...^_^,,,,,, 해결이라기보단 무시..ㅠㅠㅠ

몽고DB 공식 문서에 나와 있는 타입스크립트 전용 가이드를 따라하려고도 해봤으나 Next.js와는 사용법이 약간 달라서 적용하기가 어려웠다.

'typeof globalThis' has no index signature 에러는 스택오버플로우에도 답글이 많이 달려 있는데 어떤 걸 시도해봐도 해결되지는 않았다. 

 

글 목록에서 글 아이템 전달해줄 때 오류

타입 에러가 너무 터지는데 아직 해결을 못했다. 타입스크립트 버릴까...후

 

해결할 것

타입 오류 해결해서 글 목록 완성하자

 

참고 자료

async 함수 컴포넌트 에러

https://nextjs.org/docs/app/building-your-application/configuring/typescript#async-server-component-typescript-error

 

globalThis 타입 에러 스택오버플로우

https://stackoverflow.com/questions/68481686/type-typeof-globalthis-has-no-index-signature

 

몽고DB 타입스크립트 가이드

https://www.mongodb.com/compatibility/using-typescript-with-mongodb-tutorial