오늘 한게 별로 없는 거 같긴 한데 일단 기록!
와이어프레임
와이어프레임을 또 고쳤다......
확실히 디자이너분이랑 같이 하다보니 전에는 크게 고려하지 못했던 UI/UX까지 신경써야 해서 고칠 부분이 많아진 거 같다 ㅠㅠ 그래도 더 나은 경험을 제공할 수 있는 웹에 가까워진 거 같아 기분은 좋았다 ㅎㅎ
플로우차트
그리고 에러페이지랑 Not-found 페이지 구성하고, 플로우차트를 작성했다.
사실 작성 방법이 조금 잘못되긴 했는데 고칠 시간이 없기도 하고, 디자이너 분이 차트를 보고 이해하시는 데에는 큰 문제가 없을 거 같아 저렇게 마무리 했다. 나중에 또 플로우 차트를 작성할 기회가 있다면 더 꼼꼼하게 작성해봐야징
페이지 렌더링 방식 결정
그 다음으로는 각 페이지별 렌더링 방식을 정했다.
대부분 SSG 페이지 안에 CSR 컴포넌트를 넣는 방식으로 결정되었고, 동적으로 id를 받아와 생성되는 페이지만 SSR 페이지가 되었다.
sentry
sentry 사용 여부에 대해 논의해봤는데 지금 바로 도입할 여유는 없을 거 같고 MVP 구현 후 상황 보고 사용해보기로 했다.
supabase
우리 프로젝트에 필요한 테이블을 생성했다.
처음에는 supabase 스키마 설계할 때 엄청 헤맸던 거 같은데 다들 여러번 해봐서 그런지 이번엔 금방 만들 수 있었다!
컨벤션
코드 컨벤션과 깃허브 규칙을 정했다.
코드 컨벤션
- 컴포넌트 폴더 구조:
- 공용 컴포넌트(components)
- 페이지 내에서만 사용되는 컴포넌트(_components)
- 화살표 함수 사용
- 라우트 핸들러 등 이미 함수형으로 적혀있는 애들도 화살표 함수로 바꿔도 되는지?
- Type
- PascalCase 사용
- props 관련 타입 이름은 000Props로 작성
- interface vs type → type으로 통일
- import 뒤에 type 붙여주기
- 컴포넌트 폴더 안에 들어가는 파일은 무조건 PascalCase!
- 폴더 구조: 아직 미정
- Tanstack query
- querykey: camelCase
- 비동기 요청 방법
- async await
- Tailwind Class
- Prettier Plugin Tailwind 사용(https://velog.io/@wlldone/Tailwind-CSS-Class-자동-정렬하기)
- import문 순서
- import시 절대경로 사용(@)
깃허브 규칙
- PR 템플릿 사용
- 깃 머지할 때 PR 리뷰 요청하기
- PR 한 번에 다 하는 거 금지
- approve 2명 이상시 머지 가능
- 머지할 때 메세지: 브랜치명 into 브랜치명
- 브랜치 이름: feat/세그먼트명
깃허브 커밋 규칙
- 커밋 내용 미리 정하고 작업하기
- feat: 커밋메세지
글로 옮겨놓고 보니 생각보다 뭘 많이 한 거 같기도 하고...
어쨋든 오늘 하루도 꽉꽉 채워서 열심히 잘 살았다!
