2023/01/06(금)

1. 기획서 작성(완료)

UnsungHero Project

2. 커피챗(동근 멘토님)을 통한 프로젝트 고려 사항

• 검색 기능 구현을 어디까지 하면 좋을지 생각해 보자.

• 아버지라는 것을 확인할 수 있는 방법이 있는지 생각해 보자.

• 폐쇄형 커뮤니티의 특성을 잘 살려야 하는데 그걸 어떻게 해야할지 잘 고려해보자.

• 프로젝트의 flow가 있어 좋은 것 같음.

• 입력폼이 많다면 React hook form을 고려해 보자.

• Uncontrolled input과 Controlled input을 알아보자.

• API를 캐싱해주는 라이브러리들이 있다. React query는 자체적으로 데이터를 받아오면 캐싱을 한다.

• 조금 더 고도화되게 만들어 보는 것도 좋을 것 같다.

• 욕심부리지 않고 스택을 선택한 것은 좋은 것 같다.

• styled components는 3세대 css라 불리는데 문제는 점점 퍼포먼스 이슈가 생기기 시작하고 있다. CSS가 깨졌다가 돌아오는 경우도 있다. 그래서 아토믹 4세대 CSS가 관심을 받고 있다.

• React 18버전부터 Server Side Rendering이 관심을 많이 받고 있다.

• 앞으로 개발 흐름이 어떻게 변화해 나아갈지를 고민하면 좋을 것 같다.

• 기술 SPEC을 잘 구현할 수 있을지 고민하면 좋을 것 같다.

• 프로젝트 초기 세팅 시간이 얼마나 걸릴지 계산해보면 좋을 것 같다.

• 각자 기능을 구현하는데 시간이 얼마나 걸릴지 계산해보면 좋을 것 같다.

• 우리가 정한 규칙들이 절대적인 것은 아니라고 생각하면 좋을 것 같다.

• 우리가 정한 규칙들을 지켜나가면서 그로 인한 장점들을 아는 것도 중요한 것 같다.

• 로그인 토큰은 프로젝트 규모가 크지 않기 때문에 로컬 스토리지에 저장해도 충분할 것 같다.

• 조금 더 고도화 한다면 리프레쉬 토큰은 로컬 스토리지에 액세스는 세션, 쿠키에 저장하면 좋을 것 같다.

• 다른 방법으로는 서드 파티 로그인을 사용해 보는 방법도 있다.

3. React hook foam

3.1 React hook foam의 특징

• 만약 input이 여러개가 있다면 그에 따라 여러개의 state를 설정해야 하지만 react-hook-form을 사용하면 자체적으로 state를 관리해서 useState를 사용할 필요가 없음

• 각 input에 이벤트 핸들러를 따로 설정할 필요가 없음

• form의 onSubmit 이벤트 발생 시 handleSubmit 을 통해 form의 모든 유효성 검사를 통과한 경우에만 handleSumit 전달 인자로 넘겨준 콜백 함수 호출 되도록 register 함수를 통해 input의 props 설정 및 유효하지 않는 값이 들어왔을 때 error message render 되도록 설정 가능

• formState 에서 에러를 관리하고 있고 errors 객체 property를 통해 출력 가능하고 submit 시 loading 관련 데이터도 있음

• watch 라는 form의 입력값들의 변화를 관찰 할 수 있게 해주는 함수가 있음

• input의 값을 따로 관리하는 것이 아니라 모든 값을 하나의 객체를 통해 관리

• value, errors, loading, 각 input의 이벤트 헨들러, handleSubmit 등을 state로 관리하거나 함수로 만들어주어야 하는데 그런 작업 없이 form 작업을 할 수 있도록 함

• 러닝커브가 높지 않음

3.2 결론

4. 폴더 구조

• 기능별로 폴더 구조 생성

5. prettier & ESLint 설정

6.1 prettier 설정

{
  "parser": "typescript",
  "singleQuote": true,
  "printWidth": 110,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "arrowParens": "always",
  "endOfLine": "lf",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve"
}

6. 기타 회의 내용

• 고생하셨습니다@.@