협업 시, 제안하고 싶은 것들 적는 공간
디자인 → UI → api 연결 → 완성
- 디자인: 피그마 공부
- 개발
- loading, data, error → 어떻게 분리해서 작성할건지 → react-query
- stylelint로 적용해보고 싶어요!
- css 스타일도 린팅(css in js로 가능)
- eslint(simple-import-sort), prettier, stylelint, husky, lint-staged, nvmrc
- 예시) 전역 → 2 depth 넘어가면 쓴다!
- 새로고침 - 전역상태관리 없어짐 → 새로고침 어떻게 대응??
- 라이브러리 ) recoil-persist
- atom effect
boiler plate
React - Next - TypeScript - recoil - react query
eslint husky lint-staged stylelint prettier nvmrc
폴더 구조
비동기 전략
코드 포맷팅
상태관리 컨벤션
- 완성(배포관련)
디자인
- 피그마 공부
백엔드랑 주제 정할 때
- 피그잼
- 불편했던 것들을 한 곳에 몰아 넣는다.
- 점점 소거하면서 1개로 몰아간다.
UI
스토리북을 어떻게 사용하는 게 효율적일지 → 커피챗하고 구체화
- 모달, 버튼,
개발
환경세팅
상태관리 컨벤션
프론트 협업
- 해야 할 일들은 깃헙의 issues에 등록한다.
정할 것들
pr
- 적절한 pr 단위가 뭘까?
- 리뷰하는 사람을 위해! file change 10개 이하?
- issue 템플릿, pr 템플릿
task 단위를 어떻게 나누는 게 좋을까?
- 다른 팀원도 필요한 로직 → 우선으로 개발?
코딩컨벤션
- 폴더구조 (도메인별로? 어떤 식으로 분류?)
- 타입관리
- alias 절대 경로 지정
- component template
- import 구문 simple sort
- 네이밍
- 오타 x → 오타 찾아주는 extension
- 명확하게 작성 - 짧은 것보단 길더라도 이해하기 쉽게
- 인라인으로 함수 작성하기보다는 이벤트 핸들러 함수를 만들어서 넘기기
- 이벤트 핸들러 네이밍
- jsx 반환하는 컴포넌트 함수 파일은 tsx, jsx를 반환하지 않는 상수를 모아두는 파일이나 custom hook 파일은 ts
- 변수명 약자보다는 길더라도 이해할 수 있게 풀로 명시적으로 쓰기
백엔드 협업
api 문서 툴 ?
api 나오기 전까지
mock server → msw 라이브러리
스토리북
기술스택
ts, react,
next, recoil, react-query, emotion챠크라 ui, mui → 있는거 가져다 쓸지? 만들지?
- 수화 : ts, react, next, jest(간단한 거), 주석 부분(가독성 ts-doc)
- 승준 : typescript, react, next, react-query, recoil, (storybook)
- 동우: typescript, react, Next(쓰면 공부할 의향 있음), react-query, recoil
- 플젝세팅
- 템플릿 vs 하나하나 세팅
팀 규칙 or 문화
- 30분(프로젝트 설계 시) 토론이 길어지면 투표, 다수결
- 금기어
5000원 - 서로에게 듣기 싫은 말?
- 굳이?
SEO
- sitemap, canonical link, meta tags, robots.txt, semantic tags
- 블로그 만들다가 알게 되었는데 잊어먹을 것 같아서 적어놨어요!
- 웹 접근성
- aria-label 등…
만든다면 → Avatar, Modal 등을 하나씩 만드는 것.