11월 15일 회의록

오늘의 할 일

• 환경 설정
• 하나의 컴퓨터에서 작업
• 그대로 보고 언제든 따라할 수 있도록 문서화하며 작업

회의록

Issue, PR template

• 리뷰
• bug report 템플릿 추가
• 추후 issue form으로 변경할지 말지 고민해보기로
• 현재 백로그도 같이 project에 기록을 하는데 소요 시간을 어디에 적을지 고민

이슈 및 브랜치 관리 전략

• merge vs rebase
• 1일 1PR을 위해 confilct를 어떻게 해결할지, feature를 어떤 크기로 나눌지
  • conflict가 발생할 경우의 merge(rebase)
  • PR의 merge
• 이슈 브랜치에서 작업 중 메인 브랜치에 커밋이 생길 경우 다시 이슈 브랜치로 merge를 할지 rebase를 할지
  • rebase를 할 경우 이력 관리가 어려워짐 → 브랜치 당 여러 사람이 붙을 경우 별로 좋지 않음
  • merge → 깃 그래프가 더러워질 수 있다
• rebase는 conflict를 어떻게 해결할까
  • 원래 뿌리부터 차례대로 conflict 해결하기
  • https://stackoverflow.com/questions/42424432/git-rebase-how-to-deal-with-conflicts

기술 스택 문서 리뷰

• 문제 - 해결 방식으로 좀 더 내용 추가
  • yarn vs npm 이유 추가
    • [https://velog.io/@altmshfkgudtjr/yarn2와-함께-Plug-n-Play를-적용해보자](https://velog.io/@altmshfkgudtjr/yarn2%EC%99%80-%ED%95%A8%EA%BB%98-Plug-n-Play%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90)
  • Jest 이유 추가
• tailwind와 style-component를 같이 쓰는 것에 대한 고민
  • Style-component
    • HTML의 태그와 스타일을 분리하는 것
    • 동적 스타일링
• Vite의 동작원리를 이해하는 것이 필요하다고 판단해 추후 세미나를 열기로 함
• React를 고른 이유를 작성하는데 있어서 빈틈이 있는 논리를 최대한 피하려고 노력했다

XState

• 시작과 끝이 있는 하나의 UI(캐릭터)의 상태 관리에서는 매우 편하지만, 상태들끼리 서로 영향을 줄 수 있는 혹은 상태끼리의 조합이 무한히 나오는 것들에 관해서는 오히려 오버헤드가 클 수 있다.

  • 예시: 가방 안에는 무엇이든 들어올 수 있고 무한히 들어올 수 있는데 들어오는 아이템들도 상태를 가지고 있다. 이때 아이템들의 상태에 따라서 가방의 상태가 변하게 되는 것 까지 모델링을 할 수 있는가?

  [XState](https://docs.google.com/presentation/d/1QsyPY65MScRDECkEWLyyIyVd6KLIsTDfD3TCXlKUEHI/edit?usp=sharing)

• 상태의 종류가 매우매우 많으면 관리가 어려울 수 있다. (boolean 상태가 50가지가 넘는다면 그냥 리스트에 항목이 있고 없고로 구분하는 것이 더 편하지 않나?)

개발 환경 설정

Version

yarn	1.22.19
npm	8.19.2
node	v18.12.1

• ts configuration 옵션

  • useDefineForClassFields : 상속할 때 setter 혹은 타입을 새로 가져올 때 declare를 사용해라

    [Documentation - TypeScript 3.7](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the-declare-property-modifier)

  • noEmit : 빌드 시 타입 체크

• yarn dev → vite 명령어로는 번들링이 일어나지 않는다? vite 세미나 예정
  • on-the-fly translation
  • typescript esbuild → entry point
• loader
  • 소스 파일에 모든 것을 모아놓기
  • 압축, 후공정, 파일 명 바꾸기
  • vite: assets → public으로 옮겨주기
• 하위호환성 보장 해주지 않음, 하려면 Babel plugin 설치
• hot reloading → esbuild and rollup

Eslint

• npx : package runner
  • yarn eslint --init 이랑 차이가 무엇일까?
• airbnb의 plugin이 eslint:recommend를 포함한다.
• parserOptions에 where to find typescript configuration 부분을 설정해줘야한다
• typescript configuration에도 eslint configuration를 가리켜줘야한다
• cjs로 해야 잡다한 오류를 제거할 수 있었다. 왜?
  • tsconfig → eslint
  • eslint → tsconfig
    • parserOptions
      • project
      • tsconfigRootDir → https://github.com/typescript-eslint/typescript-eslint/issues/251
  • root: true
• window ↔ mac
  • git의 개행문자 변환 기능을 이용

Prettier

• eslint 플러그인

Jest

• Jest config도 lint
  • package.json, eslint의 typescript parser, tsconfig의 includes 순환참조 현상?

gitignore

• 최상단으로 파일을 병합하자!

수료생과의 MeetUp

• “내”가 해결하고 싶은 문제
• “왜”의 대한 답을 꼭 내자
• “기록”을 잘하자
  • 시간 날 때 x 시간 내서 혹은 틈틈이
• “협업”을 잘하는 방법
  • 배려와 솔직함
  • 칭찬
• 그라운드 룰
  • 친해질 기회!
  • 가꾸는 데 의미가 있다!
• 멘토링 잘 활용하기
  • 멘토님과 친해지기
  • 잘 수용하기
  • 좋은 질문
    • 검색 → 되새김 → 질문 → 공유
• 학습의 효율 올리기