# 우아한테크캠프 9조 - TODO
## 개발환경 / 기술스택
- webpack
- babel
- ESLint
- prettier
- sass
- express
- mysql
---
## 그라운드 룰
### 코드리뷰
1. 데일리 스크럼 시간 이후
2. 페어의 요청에 따라 유동적으로
3. 리뷰 요청 시 올 스탑 후 리뷰
---
### 커밋 메시지
`commitType emoji <message>`
> example) feat: :sparkles: Sign In Page 구현
| Commit type | Emoji | Situation |
|:---------------------------|:----------------------------------------------|:----|
| Initial commit | :tada: `:tada:` | 따단~~~~~ |
| feat | :sparkles: `:sparkles:` | 새로운 기능, UI 등 |
| bug | :bug: `:bug:` | 버그 수정/리포트 |
| Documentation | :memo: `:memo:` | 문서화 |
| refactor | :hammer: `:hammer:` | 구조 변경, 리팩토링 |
| css | 🎨 : `:art:` | css 관련 |
| remove or edit | :fire: `:fire:` | 파일 삭제 및 수정 |
| fix lint | :shirt: `:shirt:` | eslint 에러 수정 |
| chore | :gear: `:gear:` | 기능상 변경 없는 수정 |
| init | :construction: `:construction:` | 브랜치 첫 커밋 |
> [Reference](https://gist.github.com/parmentf/035de27d6ed1dce0b36a)
---
### 브랜치 전략
- `feature / refactor / dev / main` 4개의 대분류를 기준으로 한다.
- 브랜치 상세 명은 `{feature or refactor}/{기능명}`으로 통일한다.
- ex) `feature/login`
### 기능
#### 백엔드
- [x] TODO CRUD - restful 하게
- [x] NOTI CR - ""
- [x] mysql 연동
- [ ] 배포
### 프론트엔드
- [x] 카드 cu
- [x] 카드 d (x버튼 클릭 시)
- [x] 삭제 모달 연결
- [?] 카드 dnd
- [x] 카드 r
- [x] 투두 상태 카드 개수
- [ ] 컬럼 삭제(추가과제)
- [x] 노티 c (컴포넌트 x)
- [x] 노티 read
- [x] 생성, 수정
- [x] 삭제
- [x] 이동
- [x] 네브바
- [x] 컬럼(Todos) 마크업
- [x] 웹팩, 린트 등 초기 세팅
- [x] 배포
### db
- [x] 테이블 생성
- [x] 쿼리
- todos 구분하는 필드:
- todo
- inprogress
- done
### css, 마크업
- [x] 카드
- [x] 카드 리스트
- [x] 노티 + 네비
- [x] 노티 리스트
## API 명세서
### TODO API
| method | endpoint | description |
| -------- | -------- | -------- |
| GET | /api/todo | 전체 투두를 가져옴. |
| POST | /api/todo | 새로운 투두 생성. |
| PATCH | /api/todo/{todoId} | 투두 변경/업데이트 |
| DELETE | /api/todo/{todoId} | 투두 삭제 |
**POST**
- /api/todo
- **body**
title: string,
body: string,
author?: string,
type: string,
-
**PATCH**
- /api/todo/{id}
- **body**
title?: string,
body?: string,
author?: string,
type?: string,
order?: number,
---
### NOTI API
| method | endpoint | description |
| -------- | -------- | -------- |
| GET | /api/noti | 노티 전체를 가져옴. |
| POST | /api/noti | 새로운 노티 생성 |
**POST**
- /api/noti
- **body**
username: string,
cardTitle: string,
action: {
type: string,
before: string;
after: string;
}
createdAt: Date,
---
### 남은 작업
- [x] 삭제 버튼 클릭시 모달 트리거(모달 확인 버튼 시 삭제)
- [x] 백엔드
- [x] 모든 요청에 대해서 이전 값을 prev: {prevTitle, prevType}
- [ ] DND ... 반정도?
### 오늘의 기술적 대화 (07.14)
* 상황 설명: todo table의 row를 삭제해야하는데, noti table과 foreign 참조관계이며 noti는 todo가 삭제되어도 유지되어야한다고 판단했음. 이에 따라 todo의 row를 삭제하는 것이 아닌 isDeleted라는 필드를 두어 삭제처럼 보이도록 하기로함.
* 문제 상황: 그렇다면 이 todo를 삭제하는 API는 http method를 무엇으로 써야하는가?
* 의견:
* **혁진**: HTTP Method는 REST API에서 어떠한 동작을 의미하기에 실제로 데이터베이스에서 row가 삭제되지않더라도 API를 사용하는 입장에서는 삭제되는 것처럼 인식하기에 ***DELETE 메소드가 적합***하다.
* **덕기**: HTTP Method는 정확히 작동되는 기능을 나타낸다고 생각한다. 때문에 delete가 아닌 ***PATCH가 적합***하다고 생각했다. 하지만 어디까지나 상황이 삭제하는 요청을 의미하기에 DELETE로 결정하기로 의견을 맞추었다.
* 결론상황
* HTTP Method를 무엇으로하냐에 대한 고민을 이렇게 까지 해본 적이 없었던 것 같다. 사실 이 부분은 나(혁진)이 PATCH로 의견을 수렴하였으나, 그 이후에 endpoint를 정의하는 부분에서 문제가 생겨 결국 DELETE 메소드를 사용하기로 했다.
* `PATCH /todo/{id}/remove` ... 뭐 이런 .. 것들
## 프로젝트 영상
### 시연 영상
1. 모달 열어 두고
2. 카드 추가
3. 카드 수정
4. 카드 이동
5. 카드 삭제
### 팀 활동
1. 깃헙
1. 리드미
2. 이슈
3. pr
4. 리뷰한거 몇개
5. 핵md
### 배포
EC2 인스턴스에 mysql 서버를 설치하고
nodejs와 javascript로 작성된 프로젝트를 인스턴스에 클론하였고
80번 포트를 3000번으로 라우팅시켜 express로 하여금 html파일을 응답하게 하는 구조입니다.
## 주간 팀 회고
## 김덕기
일주일간의 팀 프로젝트가 끝났다. 프로젝트 초기환경 설정이나 그라운드룰을 정하는 부분이 특히 좋았다. 많은 것을 배웠고, 다음 프로젝트부터 꼭 적용해야겠다. 또 협업 관련 툴을 알아보면 좋을 것 같다.
페어프로그래밍을 하면서 서로의 코딩 스타일을 알아갈 수 있었고, 더 많은 의견을 나눌 수 있었다. 그냥 쓰던 것도 조심스럽게 이유를 생각하면서 사용하게 됐다. 같이 프로젝트를 하다보니 모르는게 명확해지고, 공부하고 싶은 것들이 생겼다. 이번 주 주말에도 정리하느라 시간을 많이 보낼 거 같다.
초반에는 완성도 보다는 퀄리티 높은 코드를 작성하기로 했는데 중간중간에 구조가 많이 변경되는 바람에 코드도 뒤죽박죽이 되었다. 시간이 많이 있다면 같이 리팩토링을 하면 좋겠지만 시간이 없다. 대신 정리를 꼼꼼하게 해둬야겠다.
혁진님에게 정말 많은 것을 배울 수 있어서 우태캠을 하길 잘했다는 생각을 했다.
## 권혁진
페어프로그래밍은 처음해봤다. 최근에는 내 코드에 대한 피드백이나 리뷰를 받아본 기억이 별로 없다. 내가 우테캠에서 얻고자 했던 가치가 바로 이런 것이었다.
당연한 것 없이 이유에 대해 고민하는 자세,,뭐 이런거..
주제는 사소하더라도 내 생각은 이러한데 덕기님 생각은 또 다르고 이런 티키타카를 주고받는 과정 자체가 재밌었다.
페어프로그래밍으로는 프로젝트 세팅과 초기 구조 정도만 작업했던 것 같은데 페어프로그래밍을 조금 더 길게 해도 좋았을 것 같다.
경험적으로는 너무나 알찬 한 주였지만 정신적으로는 조금 힘들었던 것 같다.
내 실력에 대한 의구심이 들어서 우울한 적이 많았다. 지금은 이런 감정을 발판삼아 더 열심히 노력하는 원동력으로 삼고자 한다.
일단 주말을 푹... 쉴 생각이다. 피로누적 으악!
## 이용 가이드
1. Clone Repository
```shell
git clone https://github.com/woowa-techcamp-2022/web-todo-9.git
```
```shell
cd web-todo-9/backend
```
2. Create .env
> .env
```shell=
DB_USER=
DB_PWD=
DB_NAME=
```
3. Install dependency
```shell=
npm install
```
4. Execute Server
```shell=
npm run build
```
5. Now URL is available
[배포링크](http://ec2-15-165-8-120.ap-northeast-2.compute.amazonaws.com/) 를 통해 접속
## 배포 가이드
### 1. AWS 로그인 (루트 사용자)
[콘솔](https://ap-northeast-2.console.aws.amazon.com/console/home?region=ap-northeast-2#) 로 이동
### 2. IAM을 통한 권한 부여
권한은 더 상세하게 설정이 가능하지만 우선 테스트용도로 관리자 권한을 부여해요.
### 3. IAM 사용자 정보 저장
이 정보는 안전한 곳에 보관해주세요.
해당 csv 파일을 열면 아이디, 비밀번호, 로그인링크가 있어요.
로그인 링크를 통해 로그인해요.
### 4. 인스턴스 생성
### 5. 키페어 생성
### 6. 인바운드 편집
HTTP 포트를 개방해줘요.
### 7. SSH를 통해 접속
인스턴스 - 연결 탭을 통해 ssh를 통해 인스턴스에 접속해요.
### 8. 인스턴스와 vscode connect 하기
* vscode extension, Remote-SSH를 설치해요
* `cmd + shift + p` 에서 `add new ssh host` 를 선택해요
* `ssh -i {pem} {host}` 형태의 ssh 연결 명령어를 입력해요
* 저는 이때 pem의 경로를 절대경로로 입력했어요.
* ex) `~/keys/...pem`
* config 파일은 `Users/~` 을 선택해요
* vscode 왼쪽 탭바의 remote explorer에서 방금 등록한 ssh 타겟을 오른쪽 폴더버튼을 통해 추가해요.
* `cmd + j`를 통해 인스턴스에 연결하여 vscode를 사용할 수 있어요.
### 9. nodejs, git 설치
* 업데이트
* `sudo apt update`
* 노드 설치
* `sudo apt install nodejs`
* 깃 설치
* `sudo apt install git`
* 근데 git은 이미 설치되어있는듯?..
### 9. Repository Clone 받기
### 10. 80번 포트 3000번 포트로 프리라우팅/리다이렉트 시키기
```shell=
sudo iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-ports 3000
```
### 11. express로 라우팅
'/' 경로의 GET 요청에 `index.html` 을 응답으로 제공하도록 하면 정적 웹을 서빙할 수 있게돼요.
### 12. pm2
무중단 배포를 위해 pm2 설정도 추가해요.
상세한 것은 [공식문서](https://pm2.keymetrics.io/)를 참고해주세요.
Sign in with Wallet
Connect another wallet