├── api [FastAPI]
│ ├── common
│ │ └── [[ 설정 파일들 ]]
│ ├── database
│ │ └── [[ DB 연결 관련 ]]
│ ├── errors
│ │ └── [[ 에러 제어 관련 ]]
│ ├── middlewares
│ │ └── [[ 미들웨어 ]]
│ ├── routes
│ │ └── [[ 라우트 ]]
│ ├── utils
│ │ └── [[ 라우트에서 사용하기 위한 코드 저장 ]]
│ ├── main.py
│ ├── models.py
│ └── README.md (한신님을 위한 리드미)
│
├── app [Next.js]
│ ├── (_게시판_)/
│ ├── (_내정보_)/
│ ├── (_매칭_)/
│ ├── (_가입&로그인_)/
│ ├── (매칭신청서완성)/
│ ├── (성사프로필상세보기)/
│ ├── (탈퇴)/
│ ├── api_/
│ ├── logout/
│ ├── favicon.ico
│ ├── global.css
│ ├── layout.jsx
│ └── page.jsx (외주사 샘플 페이지)
│
├── components
│ └── [[ 외주사 컴포넌트 디렉토리 ]]
├── public
│ └── [[ 정적 파일 디렉토리 ]]
.
.
.
├── package.json
└── README.md (모두를 위한 리드미)api: FastAPI 영역
app: Next.js 영역
- node >= 18.x
- npm >= 9.x
- python >= 3.9.x
- pip >= 22.x
npm installpip install -r requirements.txt환경 변수는 .env로 관리됩니다.
- 관리자에게
.env파일을 전달받아 관리합니다. .env파일의 내용이 외부에 노출되지 않도록 주의를 기울입니다.- 전달 받을 때에 권한이 부여되었는 지 확인합니다.
모든 스크립트는 pakage.json의 scripts에 의해 관리됩니다.
# MacOS/Linux
npm run dev
# Windows
npm run dev-window# MacOS/Linux
npm run next-dev
# Windows
npm run next-dev# MacOS/Linux
npm run fastapi-dev
# Windows
npm run fastapi-dev-window-
http://localhost:8000/docs [Swagger; OpenAPI]
-
http://localhost:8000/redoc [Document]
- localhost:8000/docs
- localhost:3000/docs - api 하위 경로만 이용 가능 (여기서 되면 프런트에서 된다고 생각하면 됩니다.)
API는 피그마 단위로 분리해 두었습니다.
- 기능 단위로 테스트 해볼 URI를 선택
- 해당 API에 대한 파라미터, 리퀘스트 바디, 리스폰스가 나옵니다.
- 우측의
Try it out을 클릭한 후 리퀘스트의 형태를 확인하고 바디를 세팅하여Execute를 눌러봅니다. - 리스폰스에 대한 코드와 바디를 확인하며 개발을 진행합니다.
Axios를 이용하여 요청을 컨트롤 합니다.
- 변수명 추천
- Next.js FastAPI Starter - Next.js + FastAPI 조합 예제
- notification-api - FastAPI 한글 예제
- @asidorenko_ - Next.js 트위터 네임드