Code Convention

[ 폴더구조 예시 ]

• components
• common
• dashboard
• dashboardLeftTab
• dashboardRightTab
  • dashboardRightTab.tsx
  • dashboardRightTab.hook.tsx
  • dashboardRightTab.style.tsx
• index.tsx
• login
• index.tsx
• pages
• login
• dashboard
• channel
• group

[ constant : SNAKE_CASE (with Capital Letter) ]

export const SUCCESS_MESSAGE = '성공!' ✅
export const successMessage ='성공!' ❌

[ variable : camelCase ]

const inputVariable ✅
const InputVariable ❌

[ function : camelCase ] => 함수형

const handleClick = () => {} ✅
const handle_click = () => {} ❌

[ component : PascalCase ]

const FunctionalComponent = ({...props}) => {} ✅
const functionalComponent = ({...props}) => {} ❌

[ Type ]

type Props = { ... } ✅
interface Props { ... } ❌

• css : sticky

• 전역상태는 우선 context => 나중에 고민

• 서버 상태관리 rtk

• 의존성 ( 리팩토링 나중에 )

• 추상화 ( 코드리뷰 많이 )

• 라이브러리 X => 빠르게 구현 O 쓰자

• CI,

  • husky( pre-push test, pre-commit lint-staged ) ,
  • issue Template,
    • 왜 이 issue가 필요한지 ?
    • Todo
  • PR Template,
    • What is this PR?
    • Changes
    • ScreenShot
    • Discussion -Test CheckList
  • discussion,
  • 문서화 ( wiki )
    • component 문서화
    • test 문서화

• eslint,prettier