๐Ÿ‘จโ€๐Ÿ‘จโ€๐Ÿ‘งโ€๐Ÿ‘ฆ TEAM ๋ณด๋žŒ์‚ผ์กฐ

์ธํ„ด์‹ญ ๊ธฐ๊ฐ„๋™์•ˆ ๋ณด๋žŒ์ฐฌ 3์กฐ๊ฐ€ ๋˜์ž!

Name ํ™ฉ์ˆ˜ํ˜„ ์ด์ค€ํ˜ธ ๋ฐ•์ˆ˜ํ˜„ ์ด์ƒ๋ฏผ ์œ ๋™ํ˜
Profile
GitHub @rjsej12 @wujuno @pySoo @sangminlee98 @robin14dev
Name ๊ฐ•๋ช…์ฃผ ๋ฐ•๊ฒธ์˜ ์ •์ •์ˆ˜ ๊ณ ์˜์šฑ ์ถ”ํ—Œ์žฌ
Profile
GitHub @myungju030 @seoltang @wjdwjdtn92 @free-ko @Chuhj

์›ํ‹ฐ๋“œ ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ ํ”„๋ก ํŠธ์—”๋“œ ์ธํ„ด์‹ญ 1์ฃผ์ฐจ ๊ณผ์ œ

๋™๋ฃŒํ•™์Šต์„ ํ†ตํ•ด์„œ ํŒ€์—์„œ ์ƒ๊ฐํ•œ ์›ํ‹ฐ๋“œ ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ ํ”„๋ก ํŠธ์—”๋“œ ์ธํ„ด์‹ญ ์„ ๋ฐœ ๊ณผ์ œ์˜ Best Pratice๋ฅผ ๋งŒ๋“ค๊ณ  ์ œ์ถœํ•ด์ฃผ์„ธ์š”

Best Practice๋ž€ ๋ชจ๋ฒ”์‚ฌ๋ก€๋ผ๋Š” ๋ง๋กœ์„œ, ํŠน์ • ๋ฌธ์ œ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ€์žฅ ์„ฑ๊ณต์ ์ธ ํ•ด๊ฒฐ์ฑ… ๋˜๋Š” ๋ฐฉ๋ฒ•๋ก ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์ง„ํ–‰ ๊ธฐ๊ฐ„: 2023-04-25 ~ 2023-04-28

๋ชฉ์ฐจ


๋ฐฐํฌ ๋งํฌ

https://wanted-boram3-1.vercel.app/


๋™์ž‘ ํ™”๋ฉด

แ„†แ…ฆแ„‹แ…ตแ†ซแ„‘แ…ฆแ„‹แ…ตแ„Œแ…ต แ„’แ…ฌแ„‹แ…ฏแ†ซแ„€แ…กแ„‹แ…ตแ†ธแ„‘แ…ฆแ„‹แ…ตแ„Œแ…ต
๋ฉ”์ธ ํŽ˜์ด์ง€ ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€
แ„…แ…ฉแ„€แ…ณแ„‹แ…ตแ†ซแ„‘แ…ฆแ„‹แ…ตแ„Œแ…ต แ„แ…ฎแ„ƒแ…ฎ แ„‘แ…ฆแ„‹แ…ตแ„Œแ…ต
๋กœ๊ทธ์ธ ํŽ˜์ด์ง€ Todo ํŽ˜์ด์ง€

์‚ฌ์šฉํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

Area Tech Stack
Frontend

ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ

๐Ÿ“ฆsrc
โ”œโ”€โ”€ ๐Ÿ“‚assets
โ”œโ”€โ”€ ๐Ÿ“‚components
โ”‚   โ”œโ”€โ”€ ๐Ÿ“‚AddTodoInput
โ”‚   โ”œโ”€โ”€ ๐Ÿ“‚AuthForm
โ”‚   โ”œโ”€โ”€ ๐Ÿ“‚Loading
โ”‚   โ”œโ”€โ”€ ๐Ÿ“‚Navbar
โ”‚   โ””โ”€โ”€ ๐Ÿ“‚TodoItem
โ”œโ”€โ”€ ๐Ÿ“‚constants
โ”œโ”€โ”€ ๐Ÿ“‚hooks
โ”œโ”€โ”€ ๐Ÿ“‚pages
โ”‚   โ”œโ”€โ”€ ๐Ÿ“‚SignIn
โ”‚   โ”œโ”€โ”€ ๐Ÿ“‚SignUp
โ”‚   โ”œโ”€โ”€ ๐Ÿ“‚Todo
โ”‚   โ””โ”€โ”€ ๐Ÿ“‚Welcome
โ”œโ”€โ”€ ๐Ÿ“‚routes
โ”œโ”€โ”€ ๐Ÿ“‚services
โ”œโ”€โ”€ ๐Ÿ“‚styles
โ”œโ”€โ”€ ๐Ÿ“‚types
โ””โ”€โ”€ ๐Ÿ“‚utils

ํ”„๋กœ์ ํŠธ ์‹คํ–‰ ๋ฐฉ๋ฒ•

๋ ˆํŒŒ์ง€ํ† ๋ฆฌ ํด๋ก 

$ git clone https://github.com/WANTED-TEAM03/pre-onboarding-10th-1-3.git

ํŒจํ‚ค์ง€ ์„ค์น˜

$ npm install

์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์‹คํ–‰

$ npm start

์ปจ๋ฒค์…˜

type vs interface

๐Ÿ’ญ ํ™•์žฅ์„ฑ ๋ฉด์—์„œ๋Š” interface๊ฐ€ ์ข‹์œผ๋‚˜ ์—ฌ๋Ÿฌ ํƒ€์ž…์„ ์ •์˜ํ•˜๋Š”๋ฐ๋Š” type ์ด ์ข‹๋‹ค.

๐Ÿ’ญ interface์˜ ๋ณ€์ˆ˜๋ช… ๋งจ ์•ž์— โ€˜Iโ€™๋ฅผ ๋ถ™์—ฌ์„œ ๋ฌด์—‡์„ ์œ„ํ•œ ๋ณ€์ˆ˜์ธ์ง€ ์ธ์ง€ํ•˜๊ธฐ ์ข‹๋‹ค.

๐Ÿ’ญ  โ€˜Iโ€™๋ฅผ ๋ถ™์ด๋Š” ๊ด€ํ–‰์ด ์‚ฌ๋ผ์ง€๋Š” ์ถ”์„ธ๋‹ค.

๊ฒฐ๋ก : type์„ ์‚ฌ์šฉ

Commit convention

# <ํƒ€์ž…> : <์ œ๋ชฉ> ํ˜•์‹์œผ๋กœ ์ž‘์„ฑํ•˜๋ฉฐ ์ œ๋ชฉ์€ ์ตœ๋Œ€ 50๊ธ€์ž ์ •๋„๋กœ๋งŒ ์ž…๋ ฅ
# ์ œ๋ชฉ์„ ์•„๋žซ์ค„์— ์ž‘์„ฑ, ์ œ๋ชฉ ๋์— ๋งˆ์นจํ‘œ ๊ธˆ์ง€, ๋ฌด์—‡์„ ํ–ˆ๋Š”์ง€ ๋ช…ํ™•ํ•˜๊ฒŒ ์ž‘์„ฑ
๊ตฌ๋ถ„ ๋‚ด์šฉ
FEAT ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ ์ถ”๊ฐ€
FIX ๋ฒ„๊ทธ ์ˆ˜์ •
STYLE ์ฝ”๋“œ ์˜๋ฏธ์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š๋Š” ๋ณ€๊ฒฝ์‚ฌํ•ญ
REFACTOR ์ฝ”๋“œ ๋ฆฌํŒฉํ† ๋ง
DOCS ๋ฌธ์„œ ์ˆ˜์ •
TEST ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ์ถ”๊ฐ€
CHORE ๋นŒ๋“œ ๋ถ€๋ถ„ ํ˜น์€ ํŒจํ‚ค์ง€ ๋งค๋‹ˆ์ € ์ˆ˜์ •์‚ฌํ•ญ

Git convention

  • ์ด์Šˆ ํ…œํ”Œ๋ฆฟ
---
name: "Custom issue template \U0001F60A"
about: ์ด์Šˆ์ƒ์„ฑ์‹œ ์ด ํ…œํ”Œ๋ฆฟ์„ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š”:)
title: ''
labels: ''
assignees: ''

---

## ๐Ÿฃ ๋งŒ๋“ค๊ณ ์ž ํ•˜๋Š” ๊ธฐ๋Šฅ
๊ธฐ๋Šฅ ๊ตฌํ˜„
## ๐Ÿฃ ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ํ•  ์ผ
- [ ] todo1
- [ ] todo2

## ๐Ÿฃ ํ•ด๋‹น ๊ธฐ๋Šฅ์—์„œ ์‹ ๊ฒฝ ์“ธ ๋ถ€๋ถ„

## ๐Ÿฃ ์˜ˆ์ƒ๊ธฐ๊ฐ„
0์›”00์ผ ~ 0์›”00์ผ
  • PR ํ…œํ”Œ๋ฆฟ
## ๐Ÿฃ ๊ฐœ์š”

## ๐Ÿฃ ์ž‘์—…์‚ฌํ•ญ

* 

## ๐Ÿฃ ๊ณต์œ ์‚ฌํ•ญ

*

๋„ค์ด๋ฐ ์ปจ๋ฒค์…˜

  • ์ปดํฌ๋„ŒํŠธ ํ•จ์ˆ˜ ์„ ์–ธ์€ export default function์œผ๋กœ ์‹œ์ž‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ์˜ ํ•จ์ˆ˜๋ช…์€ Page๋กœ ๋๋‚˜์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • ํ•จ์ˆ˜ ๋„ค์ด๋ฐ์€ handle๋กœ ์‹œ์ž‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  • boolean ํƒ€์ž…์˜ ๋ณ€์ˆ˜๋ช…์€ is๋กœ ์‹œ์ž‘ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

Branch protection rule ์„ค์ •

main ๋ธŒ๋žœ์น˜์™€ develop ๋ธŒ๋žœ์น˜์— branch protection rule์„ ์„ค์ •ํ•˜์—ฌ ๋ธŒ๋žœ์น˜์— ์ง์ ‘ pushํ•˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•˜๊ณ  ์ฝ”๋“œ ๋ฆฌ๋ทฐ์™€ approve๋ฅผ ํ†ตํ•ด merge๋˜๋„๋ก ์„ค์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.

  • Require approvals
  • Require review from Code Owners
  • Require conversation resolution before merging

๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐฉํ–ฅ

Best Practice

best practice ์„ ์ • ๊ธฐ์ค€

  • ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ ๋ฐ ์žฌ์‚ฌ์šฉ์„ฑ
    • ๊ฐ€๋…์„ฑ์ด ์ข‹์€ ์ฝ”๋“œ๋Š” ํ˜‘์—… ํ”„๋กœ์ ํŠธ์— ์žˆ์–ด์„œ ์ค‘์š”ํ•œ ์š”์†Œ์ž…๋‹ˆ๋‹ค.
  • ์„ฑ๋Šฅ ์ตœ์ ํ™”
    • ์„ฑ๋Šฅ ์ตœ์ ํ™”๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๋†’ํž ์ˆ˜ ์žˆ๊ณ  ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ๊ฒฝ์Ÿ๋ ฅ์„ ๊ฐ–์ถ”๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋Š” ์š”์†Œ์ž…๋‹ˆ๋‹ค.
  • ์œ ์ € ํŽธ์˜์„ฑ
    • ํ”„๋ก ํŠธ์—”๋“œ๋Š” ์œ ์ €์™€ ๊ฐ€์žฅ ๊ฐ€๊นŒ์ด ์žˆ๋Š” ํฌ์ง€์…˜์ด๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ž˜ ๊ณ ๋ คํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

assignment ๋‹จ์œ„๋กœ B.P ์„ ์ • ๊ธฐ์ค€์— ๋”ฐ๋ฅธ  B.P ์„ ์ •

ํŒ€์› ๊ณผ์ œ์™€ ๋ณธ์ธ ๊ณผ์ œ๋ฅผ ๋น„๊ตํ•˜์—ฌ ์–ดํ•„ํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„ ์ฒดํฌ

์ˆ˜ํ–‰ ๋ฐฉํ–ฅ

  • ๋ฆฌ๋ทฐํ•œ ์˜๊ฒฌ์„ ์ค‘์ ์œผ๋กœ ๊ฐœ์ธ์ด ํŠน๋ณ„ํžˆ ์ž˜ํ–ˆ๋˜ ๋ถ€๋ถ„์ด๋‚˜ ๋งก์•„์„œ ์ ์šฉํ•ด๋ณด๊ณ  ์‹ถ์€ assignment๋ฅผ ๋งก์•„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  • ๊ฐ assignment๋‹จ์œ„๋กœ ์ด์Šˆ๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ๋ธŒ๋žœ์น˜๋ฅผ ์ƒ์„ฑ ํ›„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  • ์™„์ „ํžˆ ์ƒˆ๋กœ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์•„๋‹Œ Best Practice์— ๊ฐ€๊นŒ์šด ํŒ€์› ๋ถ„๋“ค์˜ ์‚ฌ์ „๊ณผ์ œ ์ฝ”๋“œ๋ฅผ ๊ฐ€์ ธ์˜จ ๋’ค, ํšŒ์˜์—์„œ ์ ์šฉํ•ด์•ผ ํ•œ๋‹ค๊ณ  ๋‚˜์˜จ ๋ถ€๋ถ„์„ ์ถ”๊ฐ€ ๋ฐ ์ˆ˜์ •ํ•ฉ๋‹ˆ๋‹ค.
  • ์™„๋ฃŒ๋œ ์ž‘์—…์€ ์ปค๋ฐ‹ ํ›„ PR์„ ์˜ฌ๋ ค ํŒ€์›๋“ค์˜ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›์Šต๋‹ˆ๋‹ค.
  • ์ž‘์—…์€ assignments 1-4 / 5-10 ์œผ๋กœ ๋‚˜๋ˆ ์„œ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
  • ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์„ ์œ„ํ•ด ํ•จ์ˆ˜/๋ณ€์ˆ˜ ๋„ค์ด๋ฐ์„ ๋ช…์‹œ์ ์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค.
Assignment No. ์ด๋ฆ„
1 ํ™ฉ์ˆ˜ํ˜„
2 ์ด์ค€ํ˜ธ
3 ๋ฐ•์ˆ˜ํ˜„
4 ์ด์ƒ๋ฏผ
5 ์œ ๋™ํ˜
6 ๊ฐ•๋ช…์ฃผ
7 ๋ฐ•๊ฒธ์˜
8 ๊ณ ์˜์šฑ
9 ์ •์ •์ˆ˜
10 ์ถ”ํ—Œ์žฌ

๊ตฌํ˜„ ์‚ฌํ•ญ

  • ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ ๋ฐ ์žฌ์‚ฌ์šฉ์„ฑ

    • input state์˜ ๊ด€๋ฆฌ์™€ validate๋ฅผ ์˜ต์…˜์œผ๋กœ ํ•  ์ˆ˜ ์žˆ๋Š” useInput ์ปค์Šคํ…€ํ›…์„ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.
      • useInput hook์€ initValue์™€ validator๋ฅผ ์ „๋‹ฌ๋ฐ›์•„ input์˜ value, setValue, onChange๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ฐ์ฒด์™€, validation์˜ Result๋ฅผ ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ์ƒ์ˆ˜ํ™”
      • route path, URL, ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ์ •๊ทœํ‘œํ˜„์‹, ์—๋Ÿฌ ๋ฉ”์„ธ์ง€ ๋“ฑ ์ •์  ๋ฐ์ดํ„ฐ๋Š” ์ƒ์ˆ˜ํ™”ํ•˜์—ฌ ๊ฐ€๋…์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜๋ฅผ ์šฉ์ดํ•˜๊ฒŒ ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ํšŒ์›๊ฐ€์ž…๊ณผ ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋Š” UI์™€ ๋กœ์ง์ด ๋น„์Šทํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ์˜ ๋ฐ˜๋ณต์„ ์ค„์ด๊ธฐ ์œ„ํ•ด ์„œ๋กœ ๋‹ค๋ฅธ formType props๋ฅผ AuthForm component์— ์ „๋‹ฌํ•˜์—ฌ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.
    • axios interceptor๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ request๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ์‹œ์ ์—์„œ ํ—ค๋”์— ํ† ํฐ์„ ๋‹ด์•„ ๋ณด๋‚ด์ฃผ๋„๋ก ์„ค์ •ํ•˜์—ฌ ์ฝ”๋“œ์˜ ๋ฐ˜๋ณต์„ ์ค„์˜€์Šต๋‹ˆ๋‹ค.
    • ๋ผ์šฐํŒ… ๋ฐ ๋กœ๊ทธ์ธ ์—ฌ๋ถ€์— ๋”ฐ๋ผ ๋ฆฌ๋‹ค์ด๋ ‰ํŠธ ์ฒ˜๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.
      • useRoutes๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ชจ๋“  ํŽ˜์ด์ง€๋“ค์„ โ€œ/โ€๊ฒฝ๋กœ์˜ ์ค‘์ฒฉ๋ผ์šฐํŒ…์œผ๋กœ ์„ค์ •ํ•˜์—ฌ GlobalLayout์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ฝ”๋“œ๋ฅผ ๋ถ„๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.
      • useCheckAuth ์ปค์Šคํ…€ ํ›…์„ ์‚ฌ์šฉํ•˜์—ฌ location.pathname์ด ๋ณ€ํ•  ๋•Œ ํ† ํฐ ์œ ๋ฌด๋ฅผ ํ™•์ธํ•˜์—ฌ ๋กœ๊ทธ์ธ ์—ฌ๋ถ€๋ฅผ ํŒ๋‹จํ•˜๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.
      • ๋กœ๊ทธ์ธ ์—ฌ๋ถ€๋ฅผ outlet์˜ context๋กœ ์ „๋‹ฌํ•ด ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ์—์„œ useOutletContextํ›…์„ ์‚ฌ์šฉํ•˜์—ฌ ๋กœ๊ทธ์ธ ์—ฌ๋ถ€๋ฅผ ํŒ๋‹จํ•˜๊ณ  ๋ฆฌ๋‹ค์ด๋ ‰ํŠธ ์ฒ˜๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ์„ฑ๋Šฅ ์ตœ์ ํ™”

    • lazy suspense๋ฅผ ์‚ฌ์šฉํ•œ ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ…์„ ํ†ตํ•ด ์ดˆ๊ธฐ ํŽ˜์ด์ง€ ๋ Œ๋”๋ง ์†๋„๋ฅผ ๋‹จ์ถ•ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • React.Memo์™€ useMemo, useCallback์„ ์‚ฌ์šฉํ•˜์—ฌ ์„ฑ๋Šฅ์„ ์ตœ์ ํ™”ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉ์ž ๊ฒฝํ—˜

    • ๋ชจ๋ฐ”์ผ, ๋ฐ์Šคํฌํ†ฑ, ํƒœ๋ธ”๋ฆฟ ์‚ฌ์ด์ฆˆ์— ๋งž๋Š” ๋ฐ˜์‘ํ˜• UI๋ฅผ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • input์—์„œ ์—”ํ„ฐ๋ฅผ ์ž…๋ ฅํ•˜์—ฌ๋„ Submit์ด ์ผ์–ด๋‚˜๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ํˆฌ๋‘ ๋ฆฌ์ŠคํŠธ๊ฐ€ ์ถ”๊ฐ€๋  ๋•Œ ๋ฆฌ์ŠคํŠธ๋ฅผ auto scrollํ•˜๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ์—๋Ÿฌ ์ผ€์ด์Šค ๋ณ„๋กœ alertํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ์›์ธ์„ ์‰ฝ๊ฒŒ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ์ˆ˜์ • ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ input์— auto focus๋˜๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • error message ๋ Œ๋”๋ง์‹œ Layout shift๊ฐ€ ์ผ์–ด๋‚˜์ง€ ์•Š๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ํˆฌ๋‘ ์ฒดํฌ๋ฐ•์Šค ํด๋ฆญ ์‹œ ์ทจ์†Œ์„ ์„ ํ‘œ์‹œํ•˜์—ฌ ์™„๋ฃŒ๋œ ํˆฌ๋‘์ž„์„ ์‚ฌ์šฉ์ž์—๊ฒŒ ์•ˆ๋‚ดํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ํˆฌ๋‘ ์‚ญ์ œ ๋ฐ ๋ณ€๊ฒฝ ์‹œ ์‚ฌ์šฉ์ž์—๊ฒŒ ์žฌํ™•์ธํ•˜๋Š” ์•Œ๋ฆผ์„ ๊ตฌํ˜„ํ•˜์—ฌ ์‹ค์ˆ˜๋ฅผ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ํŽ˜์ด์ง€๋ฅผ ์‰ฝ๊ฒŒ ์ด๋™ํ•˜๊ณ  ๋กœ๊ทธ์•„์›ƒ์„ ํ•  ์ˆ˜ ์žˆ๋„๋ก Navbar๋ฅผ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ณ ๋ฏผํ–ˆ๋˜ ์‚ฌํ•ญ๋“ค

  • ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€๋ฅผ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•œ ์ปค์Šคํ…€ํ›…๊ณผ ์œ ํ‹ธํ•จ์ˆ˜ ์‚ฌ์šฉ์— ๋Œ€ํ•ด
    • ์ปค์Šคํ…€ํ›…์„ ์‚ฌ์šฉ ์‹œ ๋„คํŠธ์›Œํฌ ์š”์ฒญ์ด ์ผ์–ด๋‚˜๋Š” service๋‹จ์—์„œ ํ›…์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ด€๋ฆฌํ•  ์ˆ˜ ์—†์—ˆ์Šต๋‹ˆ๋‹ค.
    • ์œ ํ‹ธํ•จ์ˆ˜๋กœ ๋งŒ๋“ค์–ด ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์€ ์ฝ”๋“œ ๋ถ„๋ฆฌ์˜ ์˜๋ฏธ๊ฐ€ ํฌ๊ฒŒ ์—†๋‹ค๊ณ  ํŒ๋‹จํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ์ปค์Šคํ…€ํ›…๊ณผ ์œ ํ‹ธํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€ ๋กœ์ง์ด ํ•„์š”ํ•œ ๋ถ€๋ถ„์—์„œ localStorage ๊ฐ์ฒด๋ฅผ ์ง์ ‘ ์ฐธ์กฐํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • Todo์˜ CRUD ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ utilํ•จ์ˆ˜๋กœ ๋ถ„๋ฆฌํ•  ์ง€ ์ปดํฌ๋„ŒํŠธ๋‹จ์—์„œ ๋งŒ๋“ค์–ด ์‚ฌ์šฉํ•  ์ง€์— ๊ด€ํ•˜์—ฌ
    • CRUD๋กœ์ง์„ utilํ•จ์ˆ˜๋กœ ๋ถ„๋ฆฌํ•˜๋ฉด ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ๋ถ„๋ฆฌํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ์˜ ์–‘์„ ์ค„์ผ ์ˆ˜ ์žˆ๊ณ  ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์‰ฌ์›Œ์ง€๋ฉฐ ๋‹จ์ผ ์ฑ…์ž„์˜ ์›์น™์„ ์ง€ํ‚ฌ ์ˆ˜ ์žˆ๋Š” ์žฅ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
    • ์ปดํฌ๋„ŒํŠธ๋‹จ์— CRUD ๋กœ์ง์„ ๊ตฌํ˜„ํ•˜๋ฉด ์ฝ”๋“œ์˜ ํ•ด๋‹น state์˜ Setstate๊ฐ€ ์ผ์–ด๋‚˜๋Š” ๊ณผ์ •์„ ํ•œ ๋ˆˆ์— ๋ณผ ์ˆ˜ ์žˆ์–ด ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์ด ์ข‹์•„ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
    • ๊ณผ์ œ ํŠน์„ฑ ์ƒ Depth๊ฐ€ ๊นŠ์ง€ ์•Š๊ณ  ๊ฐ€๋…์„ฑ ์ธก๋ฉด์„ ๊ณ ๋ คํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ๋‹จ์—์„œ ํˆฌ๋‘์˜ CRUD ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ๊ตฌํ˜„ํ•˜๋„๋ก ๊ฒฐ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.