/wanted-pre-onboarding-fe

πŸ¦–μ›ν‹°λ“œ ν”„λ¦¬μ˜¨λ³΄λ”© μ„ λ°œκ³Όμ œ

Primary LanguageTypeScript

πŸ¦–μ›ν‹°λ“œ ν”„λ¦¬μ˜¨λ³΄λ”© μ„ λ°œκ³Όμ œ

νŒ€μ›λ“€μ„ μ†Œκ°œν•©λ‹ˆλ‹€.

멀버 λ‹΄λ‹Ή 포뢀
κΉ€μŠΉλͺ¨ ν”„λ‘ νŠΈμ—”λ“œ
μ†μš°μ˜ ν”„λ‘ νŠΈμ—”λ“œ
μ΄μ’…ν˜Έ ν”„λ‘ νŠΈμ—”λ“œ μ›ν”ΌμŠ€ μ™„κ²° 전에 μ˜€ν”ˆμ†ŒμŠ€ μ»¨νŠΈλ¦¬λ·°ν„° 달기
민유경 ν”„λ‘ νŠΈμ—”λ“œ
κ°•λ‹€ν˜„ ν”„λ‘ νŠΈμ—”λ“œ
μž„μ„±ν›ˆ ν”„λ‘ νŠΈμ—”λ“œ

폴더ꡬ쑰

root
β”œβ”€β”€ .prettierrc
β”œβ”€β”€ .eslint
β”œβ”€β”€ .env
β”œβ”€β”€ package-lock.json
β”œβ”€β”€ package.json
β”œβ”€β”€ tsconfig.json
β”œβ”€β”€ public
|   β”œβ”€β”€ favicon.ico
|   └── index.html
└── src
    β”œβ”€β”€ apis
    β”œβ”€β”€ components
    β”œβ”€β”€ hooks
    β”œβ”€β”€ pages
    β”œβ”€β”€ routes
    β”œβ”€β”€ styles
    β”œβ”€β”€ theme
    β”œβ”€β”€ types
    β”œβ”€β”€ App.tsx
    └── index.tsx

배포링크

https://pre-onboarding-hotsix.netlify.app/

Best Practice

Api ν•¨μˆ˜ μ„ΈλΆ„ν™”

  1. index.ts에 token, apiClient 와 같은 곡톡 λ³€μˆ˜λ₯Ό μ œμ™Έν•œ get,put λ“± λ©”μ„œλ“œ μš©λ„λ³„λ‘œ λΆ„λ₯˜
  2. todoApi.ts 에 Todoκ΄€λ ¨ν•œ get,post,put,delete λ©”μ„œλ“œ 정리
  3. userApi.ts 에 μœ μ € κ΄€λ ¨ν•œ get,post,put,delete λ©”μ„œλ“œ 정리

Todo의 μž‘μ„± μ·¨μ†Œ κΈ°λŠ₯ μΆ”κ°€

  1. μž‘μ„±λœ νˆ¬λ‘μ˜ νŽΈμ§‘ 진행 쀑 μ·¨μ†Œλ₯Ό λˆ„λ₯Όκ²½μš° μ›λž˜μ˜ νˆ¬λ‘ μ»¨ν…μΈ λ‘œ fallback

themes둜 자주 μ“°μ΄λŠ” 색상 핸듀링

  1. λͺ…λ£Œν•˜κ²Œ RED,BLACK,GRAY등을 μ‚¬μš©ν•΄μ„œ styled-components에 prop으둜 λͺ…ν™•ν•œ 색상 μž…λ ₯ κΈ°λŠ₯ μΆ”κ°€

Router κΈ°λŠ₯ 폴더 정리

  1. private, public λ“± 토큰 μœ λ¬΄μ— λ”°λ₯Έ 경둜 μ ‘κ·Ό μ»΄ν¬λ„ŒνŠΈ 정리
  2. Router.tsxλ₯Ό ν•΄λ‹Ή 폴더에 λΆ„λ₯˜

토큰정보λ₯Ό apiμš”μ²­μ— λ‹΄μ•„ ν—€λ”λ‘œ λ³΄λ‚Όμ‹œ null둜 λ‹΄κΈ°λŠ” μ—λŸ¬ ν•΄κ²°