소정 기술스택, 컨벤션 관련

개발환경

• Typescript - fix

• - cra

• eslint, prettier

테스트 코드 여부

• jest

• react-testing-library

• storybook

api 통신

• axios

상태관리 라이브러리

• react-query, swr >> 나중에 최적화 시킬 때 붙여도 될 것 같기도?
대표적으로 캐시 관리
• api end point를 기준으로 캐시해서 서버에 재요청을 하지 않음

• context api → 전역 상태관리를 처음부터? 나중에? 나중에라면 언제쯤 필요할까?

스타일 관련

• emotion, theme
emotion을 사용하는 이유?
styled-component를 사용하는 도중에 알게된 라이브러리로,
styled-component와 같은 기능을 모두 제공하고 있으며, 용량도 가볍고, 성능이 좋다고 알려져있다.
또한, css prop기능을 제공하고, SSR시 서버작업이 필요없다고 한다.
출처:
https://zereight.tistory.com/985
[Zereight's Blog]

애니메이션

• lottie
lottie를 사용하는 이유?
json파일로 애니메이션을 구현해 용량이 작고, 부드러운 애니메이션이 가능

지도

• mapbox api
mapbox를 사용하는 이유?
• 세계지도를 활용할 수 있음
• 지도 디자인 커스텀이 가능함

위치 가져오기

actions, releases

배포환경

• aws

변수명, 함수명, 파일명

• components, pages - 파스칼케이스

• hooks, 함수, 변수 - 카멜케이스

파일구조 컨벤션

• components - base(재사용 가능, 도메인 특성이 담기지 않은) domain(도메인의 특성이 담긴, ex_네비게이션, base를 확장해서 도메인 특성을 담은 경우)

• contexts - user, navigation, post, weather

• hooks

• pages

• routes - PrivateRoute, PreventedRoute

• styles - theme, reset, font

• utils - api 통신 관련, 상수, 함수 (같은 요청을 또 만들지 않아도 되서 편했음)

• styled component 작성 규칙 (동진의 제안)
• style.js 파일로 분리하기
• Card 폴더 - index.tsx
- style.js

 

CSS 스타일 관련

• reset - 파일로 넣기

• 폰트 - 파일로 넣기

• CSS 단위(px, rem, em?)

깃허브 위키

• 위키에는 어떤내용?

• 위키 관리자? - 지니~

• twl(today we learned) - 작성 후 슬랙에 링크 전달(알림)

• 프로젝트 일정

이미지 에디터