2024-07-08 Next.js 마이페이지 구현하기 (1)

프로젝트 구조 설정

project-root/
│
├── lib/
│   └── supabaseClient.ts
│
├── public/
│   ├── favicon.ico
│   └── ...
│
├── src/
│   ├── app/
│   │   ├── (provider)/
│   │   │   ├── (root)/
│   │   │   │   ├── layout.tsx
│   │   │   │   ├── page.tsx
│   │   │   │   └── ...
│   │   │   ├── components/
│   │   │   │   ├── PostList.tsx
│   │   │   │   ├── PostGallery.tsx
│   │   │   │   ├── ProfileModal.tsx
│   │   │   │   └── ...
│   │   │   ├── mypage/
│   │   │   │   ├── page.tsx
│   │   │   │   └── ...
│   │   │   └── globals.css
│   │   └── ...
│   └── ...
│
├── supabase/
│   ├── .temp/
│   ├── .gitignore
│   ├── config.toml
│   ├── seed.sql
│   └── ...
│
├── types/
│   └── ...
│
├── .env.local
├── .eslintrc.json
├── .gitignore
├── next-env.d.ts
├── next.config.mjs
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.ts
├── tsconfig.json
└── yarn.lock

• Next.js가 생소하다 보니 프로젝트 구조를 잡는 것부터 생소하다.
• src/app/components 폴더에 지금은 다른 팀원들의 자료가 없어 저렇게 썼지만, 계속 추가될 테니 관심사 별로 관리하기 위해 routes group을 사용한다.
• (mypage) - 컴포넌트들... 이런 식으로 정리하면 될 것 같다.
• 참고로 app 폴더 내에 componets 폴더를 만들어도 라우팅 안 됨. compoents 폴더는 특수 폴더임.
  • 그러나 최종적으로는 src 폴더와 같은 수준으로 빼었음.

 

폴더 구조를 잡는 것부터가 상당히 골치아프다. 생소하기 때문인데, 계속 노출되면서 익숙해져야겠다.

내가 작성한 폴더 구조는 현재 아래와 같다. 계속 수정될 것 같다.

 

• app/api: API 라우트를 정의하는 폴더. 서버 측에서 데이터를 처리하기 위해 사용됨.
  • api/mypage/getUser/route.ts: 사용자의 세션 정보를 가져오는 API 라우트.
  • api/mypage/getPosts/route.ts: 사용자의 게시글 정보를 가져오는 API 라우트.
• components/MyPage: 마이 페이지 관련 컴포넌트를 모아두는 폴더.
  • ProfileEditButton.tsx: 프로필 수정 버튼 컴포넌트.
  • PostView/MyPostViewSwitcher.tsx: 사용자가 작성한 게시글을 보여주는 컴포넌트.