Home

42 Manito Frontend wiki 입니다.

배포 페이지

• https://42manito.com

개발 테스트 페이지

• https://dev.42manito.com
• 크롬으로 접속시 www.dev.42manito.com 으로 접속 시도하면 SSL 오류가 날 수 있음. dev.42manito.com 으로 접속할 것)

API (배포)

• https://api.42manito.com

API (테스트)

• https://api.dev.42manito.com

Swagger

• https://app.swaggerhub.com/apis/JuneParkCode/Manito42/1.0.0

ERD

• https://www.erdcloud.com/d/L8n7bayanfnsxNkmm

Tech Requirement (Tech Stack)

• Next.js
• Typescript
• RTK
• tailwind, antd
• yarn

CI/CD

• Storybook
• Github action
  • PR Commit 대상으로 Build 가 정상적으로 되는지 테스트합니다.
• AWS Amplify
  • dev, deploy 에 push 되었을 때 해당 code를 기반으로 배포가 진행됩니다.
  • deploy : https://42manito.com
  • dev : https://dev.42manito.com
  • 접근 권한의 경우 @sungjpar 에게 문의

Script

yarn run dev yarn run build yarn run start

NextJS

• NextJS는 CSR, SSR, SSG를 지원하는 리엑트 기반 프레임 워크입니다.
• 우리 서비스는 기본적인 구조로는 page route를 사용 중 입니다. NextJS 13버전에서 나온 App route는 아직 불안정하기도 하고 고려대상이 아직은 아닙니다.
• 공식문서 링크: https://nextjs.org/docs

RTK

• RTK를 사용하실땐 꼭 크롬 확장프로그램중에 redux devtools 를 사용하시는 걸 추천합니다.
  • 그 이유로는 chat를 보시면 현재 캐시되어있는 또는 store에 저장되어있는 개체들의 정보를 볼 수 있다는 점과 데이터가 디스패칭이 되는 시점을 돌려서 페이지의 렌더를 확인할 수 있다는 아주 큰 장점이 있습니다.
• 다운로드 링크: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko
• 공식문서 링크: https://redux-toolkit.js.org/introduction/getting-started

폴더구조

• src/로 시작하는 곳이 컴포넌트 및 ts코드들이 존재하는 곳이며, public/은 프로젝트 내에서 사용할 리소스(이미지 등)을 저장하는 곳입니다.
• src/RTK 는 RTK Slice, RTK Query코드들이 존재하는 폴더입니다.
• src/Types 는 프로젝트 내에서 사용할 각 데이터의 DTO가 존재하는 폴더입니다.
• src/common 은 현재 프로젝트 내에서 사용할 공용 컴포넌트를 저장하는 폴더입니다.(로티에니메이션, 버튼, 모달 등)
• src/components 는 pages/에 있는 하나하나 페이지에서 사용할 컴포넌트들을 역할별로 나누어놨습니다.(예: Layout, Home 등)
• src/hooks 는 각각의 페이지 또는 컴포넌트에서 커스텀 훅을 작성해서 사용하게 될때 각 역할별로 폴더를 구성해서 작업하시면 됩니다.
• src/pages 는 폴더 이름이 42manito.com/<폴더이름>으로 라우팅이 되며 폴더이름 밑에 [id].tsx로 되어있는 경우에는 동적라우팅 페이지입니다.
• src/style 은 css파일을 모아놓은 폴더고, css파일은 style에 넣어서 사용하시면 됩니다.
• src/utils 는 프로젝트 전반적으로 사용할 utils함수 파일들을 모아놓은 폴더입니다.