프로젝트를 진행하기에 앞서 필요한 룰을 정하고 개발환경을 설정하였습니다.
About
산책로를 공유하고 추천할 수 있는 산책로 공유 서비스. 함께 합시다. Stroll.
Client & Server Basic Architecture
Client file structure
├── App.js
├── Root.js
├── component
│ ├── AddTrail
│ │ ├── AddTrail.css
│ │ ├── Info_Map.js
│ │ └── Info_Trail_Input.js
│ ├── Login
│ │ ├── LoginInfo.css
│ │ └── LoginInfo.js
│ ├── Main
│ │ ├── Map.js
│ │ ├── ThemeList.js
│ │ ├── ThemeListElement.js
│ │ ├── TrailList.js
│ │ ├── TrailListElement.js
│ │ └── mypage.css
│ ├── Signup
│ │ ├── SignUpInfo.css
│ │ └── SignUpInfo.js
│ └── TrailInfo
│ ├── CommentList.js
│ ├── CommentListElement.js
│ ├── Info_Map.js
│ ├── Info_Trail.js
│ ├── Photozone.js
│ ├── RecentReview.js
│ ├── navermap.png
│ └── style.css
├── index.css
├── index.js
└── pages
├── addTrail.js
├── login.js
├── mypage.js
├── signup.js
└── trailinfo.jsServer file structure
.
├── README.md
├── config
│ ├── config.js
│ └── jwt.js
├── controllers
│ ├── signin.js
│ ├── signup.js
│ └── trails
│ ├── comment.js
│ ├── tag.js
│ ├── trailId.js
│ └── trails.js
├── index.js
├── migrations
│ ├── 20200114050301-create-users.js
│ ├── 20200115075622-create-categories.js
│ ├── 20200115075901-create-images.js
│ ├── 20200115080332-create-locations.js
│ ├── 20200118051951-create-trails.js
│ └── 20200118053842-create-comments.js
├── models
│ ├── categories.js
│ ├── comments.js
│ ├── images.js
│ ├── index.js
│ ├── locations.js
│ ├── trails.js
│ └── users.js
├── package-lock.json
├── package.json
├── routes
│ ├── signin.js
│ ├── signup.js
│ └── trails.js
└── uploadsTeam Rules
- Client
| 종류 | 형식 | 예시 |
|---|---|---|
| Component | 첫 글자 대문자 | SigUpInfo |
| Class | cl_소문자 | cl_trails |
| ID | id_소문자 | id_trail_element |
- Server
| 종류 | 형식 | 예시 |
|---|---|---|
| 모든 변수 | Camel case | const bodyParser = require('body-parser'); |
| Model | 소문자 | users, categories 등 |
- ESLint & Prettier
// [client]
// prettier
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"trailingComma": "all"
}
// eslint
"eslintConfig": {
"extends": [
"react-app",
"airbnb"
],
"rules": {
"react/prefer-stateless-function": 0,
"react/jsx-filename-extension": 0,
"react/jsx-one-expression-per-line": 0
}
}
// [server]
// prettier
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"trailingComma": "all"
}
// eslint
"eslintConfig": {
"extends": "airbnb"-
팀 운영
-
코드 리뷰 시간에 리뷰 및 PR Merge - 리뷰를 받고 PR을 한 사람이 확실하다면 Merge 하기
-
팀원이 요청시 페어 프로그래밍을 진행하기
-
Stand-up meeting : 팀장 제외 팀원들이 하루씩 돌아가면서 작성하기
🍕 점심시간: 12:00 ~ 13:00
🌮 저녁시간: 18:00 ~ 20:00
-
Stack
- Client: React, React-router-dom, Ant-design, Axios
- Server: Node.js, Express, Sequelize, Sequelize-cli, JWT, crypto, cors, mysql
Project Step
- Bare Minimum
- 산책로를 카테고리별로 분류(내 위치 기반)
- 회원가입
- 로그인
- 로그아웃
- 산책로 한 곳을 클릭하면 정보창 표시
- 위치 정보(도로명 주소), 카테고리(조용한 산책로), 사진들, 리뷰(별점, 평) 등
- 산책로 추가: 마커 5개를 찍어서 루트 생성 → [추가] 버튼으로 추가 가능, 이 때 어떤 산책로인지 분류할 “태그(조용한 산책로, 위치 정보)” 필요
- Advanced
- 시간대별로 산책할 사람 모집
- 행정구역별로 산책로 필터링
- Oauth 이용한 인증
- RESTful한 CRUD 구현
- Nightmare
- 산책 시작 - 끝 까지의 위치정보를 트래킹해서 산책로 추가할 수 있는 기능
API 문서
| Method | End Point | Request | Response | Usage |
|---|---|---|---|---|
| POST | /signup | emai password username | res.sendStatus(201) res.sendStatus(409) | 회원가입 |
| POST | /signin | email password | res.status(200).json({ token: token }); res.sendStatus(401); | 로그인 |
| GET | /trails | res.status(200).json(모든 산책로 정보) res.sendStatus(404); | 모든 산책로 데이터 불러오기 | |
| POST | /trails | * form-data newLocations tag img title review adminDistrict | res.sendStatus(200) res.sendStatus(400) | 새로운 산책로 생성 + 이미지 업로드 |
| GET | /trails/:tag | res.status(200).json(선택한 카테고리 데이터) res.sendStatus(404) | 선택한 카테고리의 산책로들 데이터 불러오기 | |
| GET | /trails/:tag/:trailId | res.status(200).json(선택한 산책로 데이터) res.sendStatus(404) | 선택한 산책로의 데이터 및 코멘트 불러오기 | |
| POST | /trails/:tag/:trailId/comment | res.sendStatus(200) res.sendStatus(400) | 코멘트 포스트 |
Database Schema
