# 4/8

### 오전

- 스크럼 간단하게
- PR 에 대해 리뷰

### 오후

- 전체 공유 (3시~4시)
- PR 보내기 위한 문서작성(4시~5시)
- PR 보내기 (~5시)
- 주간 회고 (5시~6시)

### 오전 회의

- eslint import/order 에 쓰이는 키값에 대해서 논의
- pathGroups 의 필요성??
- groups 의 순서 정하기
- internal vs [parent, siblings]
- 무슨 차이가 있을까
- 이슈 라벨에 예상 소요시간 적기

- 제목에 `이슈번호` 쓰는 컨벤션은 삭제하자
- 코드스쿼드 레포에서 자꾸 링크됨..

### 이슈
- babel-node 실행관련
- 맥과 윈도우 차이

### 발표

- 환경설정에 대해서 같이 의논할 사항이 많았어서(lint, 어떤 tools 를 쓸건지) 실질적으로 front 코딩은 오늘(금요일)부터했음..

- (park) BE 관련해서 JSON server 를 npx 로 쓰는게 맘에안들어서 lowdb 직접 하다가 routes 가 거의 불가능해보여서 express + mongoDB 로 이사갔다.

- (BB) 처음 사용해보는거라 블로그 등 참고자료 보면서 사실 꼼꼼히 확인못하고 작성했던 것도 있는데 리뷰를 꼼꼼히 해 주셔서 공부할 시간을 많이 가졌고, 파크의 의견이나 지식을 많이 들을 수 있던 점도 좋았다.

- git 협업툴 을 굉장히 많이 잘썼다
- Wiki
- Projects
- Issues
- Pull request
- main 보내는게 아니라서 자동으로 되는건 아니었지만,, 어떤 흐름으로 되는지 이해 했음
- manage automation
- PR 기반으로 협업
- back 과 front 간에 코드 동기화가 어려웠다
- 2명이라 좀 번거로웠다
- 리뷰 확인도하고, 코딩도해야되고...

- peact
- 클래스기반(리액트의 클래스 생명주기처럼?)으로 해봤으니까 hooks 기반으로도 해보면 좋지않을까~?
- hooks 기반으로 리액트가 어떤 흐름으로 렌더링이 되는지를 확인해보니 useState, useEffect 등을 사용했다.
- useState, useEffect 를 직접 공부하고 구현해봤다.
- 아직 제대로 테스트를 안해봐서 버그가 있는지는 모르겠지만 아직은 잘된다

- postcss
- css-in-js 방식 도입
- 가장 많이 쓰는 전처리기? 라고 들어서 사용해보자고 이야기했다.
- create-react-app 의 default
- 클래스명에 대한 고민이 줄어서 좋았다.
- 다양한 플러그인으로 크로스브라우징에 대해 대응할 수 있는점도 좋았다.

### PR

## 💻 구현된 사항

<img width="949" alt="스크린샷 2022-04-08 오후 4 42 11" src="https://user-images.githubusercontent.com/58503584/162389172-c4575937-2f0e-4163-9ea0-e1ac186b5a49.png">

- 미리 작성한 HTML+CSS 를 바탕으로 `Component` 구조 짜보고, 화면에 띄우기

## 🧐 어떤 생각으로?

- `peact.js`
- 이전 미션에서는 클래스기반(리액트의 클래스 생명주기처럼?)으로 VanilaJS SPA 구현을 해봤으니 `함수형 기반으로도 해보면 좋지않을까` 라는 생각으로 페어 프로그래밍을 통해 함수형 컴포넌트를 생성하는 기반이 될 코드를 작성해보았습니다.

- 함수형은 useHooks 를 사용하고, 그 기반으로 리액트가 어떤 흐름으로 렌더링을 하는지 확인해보니 useState, useEffect 등을 사용하는 것을 공부했습니다.
- useState, useEffect 가 어떻게 실행되는지를 상상해보면서 VanilaJS로 구현해보았습니다.
- 아직 제대로 테스트를 안해봐서 버그가 있는지는 모르겠지만 버그가 생기면 고쳐나가는 식으로 사용해보겠습니다

- postcss
- create-react-app 의 default인 처리기인데, 사용해본 경험이 없어서 이번 미션을 통해 사용하자고 이야기를 나누었습니다.
- 클래스명에 대한 고민이 줄어서 좋았습니다.

## 🥲 아쉬웠던 || 어려웠던 점?

### [BE]
- JSON server + lowdb 를 활용해서 router 를 만들어 보려고 했던 시도가 어려웠습니다.
- express 를 사용했던 경험을 떠올리면서 그와 비슷하게 사용해보려고 했는데 JSON server 가 지원하는 정도가 `express.Router()` 와 같은 기능을 지원하지 않는 것 같아서 `express + mongoDB` 로 바꾸게 되었습니다.

## 🧑‍💻 알아볼점

- 맥과 윈도우간에 환경변수(?)를 처리 하기위한 환경설정

## ❗️문제발생 then 해결한 방법

- babel-node 실행관련
- 맥에서 실행이 되던 npm scripts 가 윈도우에서 동작되지 않았음

- 해결한 방법
- 윈도우에서 babel-node 의 경로 지정해서 실행하기
- `./node_modules/.bin/babel-node`
- 분명히 처리할 수 있는 방법이 있을텐데 시간이 부족해서 다음 PR에 꼭 적용할 수 있도록 하겠습니다!

## ✅ PR 리뷰에서 개선한 점

### [공통]

- lint import/order - import 정렬을 위한 `eslint-plugin-import`의 rules를 추가하여 정돈되고 일관된 형식을 유지할 수 있게 되었습니다.

### [FE]
- <a href="https://github.com/healtheloper/todo-list/pull/23">수정 PR</a>
- 웹팩 번들링 결과 디렉토리를 `.gitignore`에 추가하였습니다.
- lint 관련
- 개발 작업시 오류가 생기는 부분을 함께 확인하여 예외처리하였습니다.

### [BE]
- <a href="https://github.com/healtheloper/todo-list/pull/25">수정 PR</a>
- todo 테이블 내부에서 쓰이는 `fk` column 의 이름을 명확하게 하기
- `column` -> `columnId`
- `db.json 데이터 일관성`, `router 분리`, `모델함수(?)` 사용하던 것 파라미터 통일, 형변환 직관적으로 바꾸기, `lowdb` 관련 `update` 처리
- `express` + `mongodb` + `mongoose` 를 사용하면서 모두 개선되었습니다.
- `mongoose` 에서 `id` 를 넘겨줄 때 형변환 필요없음
- `mongoose` 에서 지원하는 `update` 함수 사용
- `mongoose` 에서 지정한 파라미터형식 사용
- `express.Router` 함수 활용하여 `router` 분리
- 데이터형식 -> `schema` 통해 `model` 생성
- `constants` 파일을 통해 enums 와 같은 값 관리
- 에러 처리관련 로직
- `mongoose` 을 사용하면 임의로 에러처리를 해줄 필요가 없음
- `try-catch` 로직만 사용
- todo logs 관련 routes
- `log/todo` 로 변경

- 업데이트시 일부분만 변경하므로 `PUT` -> `PATCH` 로 변경

## 👋 다음 PR엔?

- `BE` 와 실제 통신을 `axios` 를 통해 시도할 예정입니다.
- `axios` 와 `fetch` 차이 확인하고 사용하기!