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

카테고리 없음

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

JeanneLee57 2023. 5. 27. 00:18

무엇을 했나

글 목록 화면에 띄우기 성공
헤더에 유저 프로필 표시
유저 프로필에 마이페이지 연결했다가 아래 사항이 해결 안돼서 같이 보류
로그인 상태가 아닐 때 마이페이지 연결 안되도록 라우트 보호 시도하다가 보류
카테고리 다이나믹 라우팅

시행착오

테일윈드에서 h요소 스타일링

h2 태그 글씨 크기가 작게 나와서 의아하게 생각했는데 원래 그렇다고 한다. 글로벌 CSS에 별도의 설정을 해주면 h태그 스타일을 사용할 수 있다.

마이페이지 라우트 보호

nextAuth 공식 문서에 라우트 보호를 위해서 getServerSideProps를 사용해 프리페칭을 하라고 되어 있었으나 지금 이 메서드가 legacy가 되어서 app 폴더에서는 사용할 수 없고 pages 폴더에서만 사용 가능하다. pages 폴더에 mypage를 만들어 시도해 보았으나 어려워서 중도 포기.. 다음에 다시 해봐야겠다.

서버 컴포넌트에서 클라이언트 컴포넌트로 프랍 전달 불가(아님!! 왜 그랬는지 다시 생각해볼 것)

비동기 작업을 하는 서버 컴포넌트인 글 목록에서 페이지 버튼들이 들어 있는 컴포넌트에 프랍으로 페이지 수만 전달해서 페이지 숫자들을 렌더하려고 했는데 비동기 컴포넌트에서 클라이언트 컴포넌트로 프랍을 전달하려 하면 dns 에러가 난다. 생각해 보면 아직 데이터를 다 받아오지 않았는데 클라이언트 컴포넌트를 렌더하려 하니 오류가 나는 것 같다. 버튼 컴포넌트를 분리해서 글 목록 컴포넌트에서 버튼 컴포넌트들을 렌더해주는 것으로 해결했다.

알게 된 것

useRouter 훅을 사용해 페이지 이동시킬 수 있다.

참고 자료

https://tailwindcss.com/docs/adding-base-styles

useRouter

https://nextjs.org/docs/pages/api-reference/functions/use-router