- GitHub URL: (https://github.com/uzoolove/FESP01-project)
- 제공되는 API 서버를 사용해서 FrontEnd를 완성하면 됩니다.
- API 서버의 주제는 오픈마켓이며 회원, 상품리, 구매, 후기 등의 기능이 제공됩니다.
- 제공되는 API 기능을 잘 검토해서 어떤 종류의 쇼핑몰을 만들지는 각 팀에서 결정하면 됩니다.
- 티셔츠 판매
- 신발 판매
- 중고제품 판매 등
- API 서버는 프로젝트 첫날 github로 제공되며 github의 가이드를 따라서 각자 로컬에 DB 및 API 서버를 설치해서 사용합니다.
- 최대한 제공되는 API만 이용해서 개발하고 제공되는 API 이외애 추가하고 싶은 기능이 있을 경우 요청하면 검토후 추가해 드릴수 있습니다.(단, 다만 새로운 API로 인해 기존 API에 변경이 발생하거나 요청한 API 구현이 복잡할 경우에는 추가가 어려울 수도 있습니다.)
- Application Server: Node.js + Express
- Database: MongoDB
- https://nodejs.org/en/download 접속 후 다운로드
- 본인의 OS에 맞는 버전 다운로드 후 기본 설정으로 설치
- https://www.mongodb.com/try/download/community 접속 후 다운로드
- Version: 7.0.3
- Platform: 본인 OS에 맞는 플랫폼 선택
- Package: msi(Windows)
- 기본 설정으로 설치
- Mac 사용자는 다음을 참고해서 설치
- Homebrew를 이용한 설치: https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-os-x
- Tarball을 이용한 설치: https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-os-x-tarball
- View > Source Control > Clone Repository 선택
- https://github.com/uzoolove/FESP01-project.git 입력
- 복사할 적당한 폴더(예시, C:\FESP) 선택 후 Select as Repository Destination 선택
- 폴더 경로에 한글이 들어가지 않도록 주의
- Open 선택
- 프로젝트 루트에서 실행
cd api
npm i
npm start
- 기본으로 제공되는 샘플 데이터로 DB 초기화
npm run dbinit
- https://www.postman.com/downloads 접속 후 다운로드
- 본인의 OS에 맞는 버전 다운로드 후 기본 설정으로 설치
- Workspaces > Create Workspace
- Blank Workspace > Next
- Name: FESP > Create
- Environments > + 버튼(Create new environment)
- "New Environment" -> "API Server"로 수정
- Variable: url
- Type: default
- initial value: https://localhost/api
- Ctrl + S 눌러서 저장
- Collections > + 버튼(Create new collection) > Blank collection
- "New Collection" -> "Sample"로 수정
- 우측 상단의 "No Environment" 클릭 후 Api Server 선택
- 컬렉션 목록에 있는 Sample 컬렉션위에 마우스 올린 후 ··· 클릭해서 Add request 선택
- "New Request" -> "상품 상세 조회"로 수정
- "Enter URL or paste text" 항목에 {{url}}/products/4 입력 후 Send
- 정상 응답 결과 확인
- 컬렉션 목록에 있는 Sample 컬렉션위에 마우스 올린 후 ··· 클릭해서 Add request 선택
- "New Request" -> "회원 정보 조회"로 수정
- "Enter URL or paste text" 항목에 {{url}}/users/4 입력 후 Send
- 401 응답 결과 확인("authorization 헤더가 없습니다.")
- 컬렉션 목록에 있는 Sample 컬렉션위에 마우스 올린 후 ··· 클릭해서 Add request 선택
- "New Request" -> "로그인"로 수정
- "GET" -> "POST"로 수정
- "Enter URL or paste text" 항목에 {{url}}/users/login 입력
- Body > raw > "Text" -> "JSON"으로 변경 후 아래처럼 입력 후 Send
{ "email": "[email protected]", "password": "11111111" }- 정상 응답 결과 확인
- Collections > 로그인 > Tests
- 다음처럼 입력 후 Send
if (pm.response.code === 200) { const jsonData = pm.response.json(); const accessToken = jsonData.item.token.accessToken; const refreshToken = jsonData.item.token.refreshToken; pm.environment.set("accessToken", accessToken); pm.environment.set("refreshToken", refreshToken); } - Environments > API Server 환경 변수에 accessToken과 refreshToken 추가 되었는지 확인
- Collections > 회원 정보 조회 > Authorization(또는 Auth) 선택
- Type: Bearer Token
- Token: {{accessToken}}
- Send
- 정상 응답 결과 확인
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent