Skip to content
forked from FEeasy404/GameUs

๐ŸŽฎ ๊ฒŒ์ž„๊ณผ ๊ด€๋ จ๋œ ๋ชจ๋“  ๊ฒƒ, ๊ฒŒ์ž„์–ด์Šค ๐Ÿ•น

Notifications You must be signed in to change notification settings

yeodahui/GameUs

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŽฎ ๊ฒŒ์ž„๊ณผ ๊ด€๋ จ๋œ ๋ชจ๋“ ๊ฒƒ, GameUs ๐Ÿ•น

[๋ฐฐํฌ URL]

๊ฒŒ์ž„์–ด์Šค-๋ฐœํ‘œ(๋‚ ์งœ์ˆ˜์ •)

1. ํ”„๋กœ์ ํŠธ ์†Œ๊ฐœ

[๊ฐœ์š”]

๐ŸŽฎ ๊ฒŒ์ž„๊ณผ ๊ด€๋ จ๋œ ๋ชจ๋“  ๊ฒƒ, ๊ฒŒ์ž„์–ด์Šค๋Š” ๊ฒŒ์ž„ ์นฉ, ๊ฒŒ์ž„๊ธฐ ๋“ฑ ๊ฒŒ์ž„์— ๊ด€๋ จ๋œ ๋ฌผํ’ˆ์„ ์‚ฌ๊ณ  ํŒŒ๋Š” ์ค‘๊ณ ๊ฑฐ๋ž˜ ์ปค๋ฎค๋‹ˆํ‹ฐ์ž…๋‹ˆ๋‹ค.

๊ฒŒ์ž„์„ ์ข‹์•„ํ•˜๋Š” ํŒ€์›๋“ค์ด ๋ชจ์—ฌ, ๊ฒŒ์ž„ ๋ฌผํ’ˆ ์ „์šฉ ์ค‘๊ณ  ๊ฑฐ๋ž˜ ์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

ํŒ”๊ณ  ์‹ถ์€ ๊ฒŒ์ž„ ๊ด€๋ จ ๋ฌผํ’ˆ์„ ์ž์‹ ์˜ ํ”„๋กœํ•„์— ์˜ฌ๋ ค ํŒ๋งค ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฒŒ์ž„์œผ๋กœ ๊ฐ€๋“์ฐฌ ๋‚˜์˜ ์ผ์ƒ์„ ๊ธ€๊ณผ ์‚ฌ์ง„์ด ๋‹ด๊ธด ๊ฒŒ์‹œ๋ฌผ์„ ์ž‘์„ฑํ•˜์—ฌ ๋‹ค๋ฅธ ์œ ์ €์—๊ฒŒ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜์™€ ์ทจํ–ฅ์ด ๋น„์Šทํ•œ ์—ฌ๋Ÿฌ ์œ ์ €๋ฅผ ๊ฒ€์ƒ‰ํ›„ ํŒ”๋กœ์šฐํ•˜์—ฌ ํ”ผ๋“œ์—์„œ ๊ฒŒ์‹œ๋ฌผ์„ ๊ตฌ๊ฒฝํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋Œ“๊ธ€์„ ๋‚จ๊ธฐ๊ณ  ์ข‹์•„์š”๋ฅผ ๋ˆ„๋ฅผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

[๋งํฌ]


2. ํŒ€์› ์†Œ๊ฐœ

๊น€๋„ํฌ ๊น€๋ณด๋žŒ ์—ฌ๋‹คํฌ ์ดํ˜œ์›
github: hee1231 github: boram2445 github: yeodahui github: donkeeman
์ผ์ •๊ด€๋ฆฌ์ž ๋””์ž์ธ ๊นƒํ—ˆ๋ธŒ ๊ด€๋ฆฌ์ž ์›Œํฌ์ŠคํŽ˜์ด์Šค ๊ด€๋ฆฌ์ž ์Šคํฌ๋Ÿผ ์ง„ํ–‰ ๋ฌธ์„œ ๊ด€๋ฆฌ์ž

3. ์—ญํ• ๋ถ„๋‹ด

โ˜บ๏ธ ๊น€๋„ํฌ

  • ํ”„๋กœ์ ํŠธ ์ „๋ฐ˜์ ์ธ ๋””์ž์ธ ๋ฐ ์Šคํƒ€์ผ๋ง
  • ํ”„๋กœํ•„ ์ˆ˜์ • ํŽ˜์ด์ง€ ๋งˆํฌ์—…
  • ์ฑ„ํŒ… ๋ฐฉ ํŽ˜์ด์ง€ ๋งˆํฌ์—…
  • 404 ํŽ˜์ด์ง€ ๋งˆํฌ์—… ๋ฐ ๊ธฐ๋Šฅ ๊ตฌํ˜„

๐Ÿ˜† ๊น€๋ณด๋žŒ

  • ์ƒํ’ˆ ๋“ฑ๋ก ํŽ˜์ด์ง€ ๋งˆํฌ์—… ๋ฐ ์ƒํ’ˆ ๋“ฑ๋ก, ์ˆ˜์ •, ์‚ญ์ œ ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • ๊ฒŒ์‹œ๊ธ€ ๋“ฑ๋ก ํŽ˜์ด์ง€ ๋งˆํฌ์—… ๋ฐ ๊ฒŒ์‹œ๊ธ€ ๋“ฑ๋ก, ์ˆ˜์ •, ์‚ญ์ œ, ์‹ ๊ณ  ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • ๋Œ“๊ธ€ ๋“ฑ๋ก, ์‚ญ์ œ, ์‹ ๊ณ  ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • ์ด๋ฏธ์ง€ ๋ฆฌ์‚ฌ์ด์ฆˆ ๋ฐ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • ๋ชจ๋‹ฌ ๋งˆํฌ์—… ๋ฐ ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ ๊ตฌํ˜„

๐Ÿ˜› ์—ฌ๋‹คํฌ

  • ๋กœ๊ทธ์ธ, ๊ฒ€์ƒ‰, ์ฑ„ํŒ… ๋ชฉ๋ก ํŽ˜์ด์ง€ ๋งˆํฌ์—…
  • ํ™ˆ ํ”ผ๋“œ ํŽ˜์ด์ง€ ๋งˆํฌ์—… ๋ฐ ํŒ”๋กœ์šฐํ•˜๋Š” ์‚ฌ์šฉ์ž ๊ฒŒ์‹œ๊ธ€ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • ์ข‹์•„์š” ๋ฐ ์ข‹์•„์š” ์ทจ์†Œ UI ๊ตฌํ˜„
  • ํ•˜๋‹จ ํƒญ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ” ๋งˆํฌ์—… ๋ฐ ๊ธฐ๋Šฅ ๊ตฌํ˜„

๐Ÿ˜Ž ์ดํ˜œ์›

  • Splash ํŽ˜์ด์ง€ ๋งˆํฌ์—… ๋ฐ ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • ๋กœ๊ทธ์ธ, ๋กœ๊ทธ์•„์›ƒ ๊ธฐ๋Šฅ ๋ฐ ํ† ํฐ ๊ฒ€์ฆ, ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ๊ตฌํ˜„
  • ํšŒ์›๊ฐ€์ž… ๊ธฐ๋Šฅ ๋ฐ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ๊ตฌํ˜„
  • ์‚ฌ์šฉ์ž์˜ ํ”„๋กœํ•„ ํŽ˜์ด์ง€ ๋งˆํฌ์—… ๋ฐ ํ”„๋กœํ•„ ์ˆ˜์ • ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • ํŒ”๋กœ์ž‰/ํŒ”๋กœ์›Œ ๋ชฉ๋ก ํŽ˜์ด์ง€ ๋งˆํฌ์—… ๋ฐ ํŒ”๋กœ์šฐ, ์–ธํŒ”๋กœ์šฐ ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • ์ข‹์•„์š”, ์ข‹์•„์š” ์ทจ์†Œ ๊ธฐ๋Šฅ ๊ตฌํ˜„

4. ๊ฐœ๋ฐœํ™˜๊ฒฝ

[๊ธฐ์ˆ ]


Front-End Back-End ๋ฒ„์ „ ๋ฐ ์ด์Šˆ๊ด€๋ฆฌ
HTML Living Standard
CSS Modules
React
API ์ œ๊ณต๋จ Git
Github
Notion

๐Ÿ“Œ Styled components vs CSS Modules

ํŒ€์›๋“ค ๋ชจ๋‘ ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ๋ฆฌ์•กํŠธ๋ฅผ ๋Šฅ์ˆ™ํ•˜๊ฒŒ ๋‹ค๋ฃจ๊ณ  ์‹ถ๋‹ค๋Š” ๊ณตํ†ต์ ์ธ ๋ชฉํ‘œ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ ๋„ค ๋ช… ๋ชจ๋‘ ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•ด๋ณธ ๊ฒฝํ—˜์ด ์—†์—ˆ๊ธฐ ๋•Œ๋ฌธ์—, ๊ธฐ์กด์˜ CSS์™€ ์‚ฌ์šฉ๋ฒ•์ด ์œ ์‚ฌํ•œ CSS Modules๋ฅผ ์‚ฌ์šฉํ•ด ํ•™์Šต๋น„์šฉ ์ค„์ด๊ธฐ๋ฅผ ์„ ํƒํ•˜์˜€์Šต๋‹ˆ๋‹ค.


๐Ÿ“Œ Git-flow vs Github-flow

๊นƒ ๋ธŒ๋žœ์น˜ ์ „๋žต์œผ๋กœ ๊นƒํ—ˆ๋ธŒ ํ”Œ๋กœ์šฐ๋ฅผ ์ฑ„ํƒํ–ˆ์Šต๋‹ˆ๋‹ค.
์งง์€ ํ˜ธํก์œผ๋กœ ๊ฐœ๋ฐœํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ ์‘ํ•˜๋Š” ๋ฐ ์‹œ๊ฐ„์ด ๋งŽ์ด ๋“ค์ง€ ์•Š์•˜์œผ๋ฉด ํ–ˆ๊ณ , ํŒ€์›๋“ค ๊ฐ„์˜ ์ž‘์—… ๋‚ด์šฉ์„ ๋นจ๋ฆฌ ์ฃผ๊ณ  ๋ฐ›๊ธฐ์— ์œ ์šฉํ•  ๊ฒƒ ๊ฐ™๋‹ค๋Š” ํŒ๋‹จ ํ•˜์— ๊นƒ ํ”Œ๋กœ์šฐ์— ๋น„ํ•ด ๋ธŒ๋žœ์น˜ ๊ตฌ์กฐ๊ฐ€ ๋‹จ์ˆœํ•œ ๊นƒํ—ˆ๋ธŒ ํ”Œ๋กœ์šฐ๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.


[ํŒจํ‚ค์ง€ ๋ชจ๋“ˆ]

  • create-react-app : ๊ฐœ๋ฐœํ™˜๊ฒฝ ์„ธํŒ…
  • eslint, prettier : ์ฝ”๋“œ ํฌ๋งทํŒ…, ๊ฐœ๋ฐœ๋‹จ์œ„์—์„œ์˜ ์ฝ”๋“œ ํ’ˆ์งˆ ๊ด€๋ฆฌ
  • react-router-dom : ๋ผ์šฐํŒ… ์ฒ˜๋ฆฌ
  • browser-image-compression : ๋Œ€์šฉ๋Ÿ‰ ์ด๋ฏธ์ง€๊ฐ€ ์„œ๋ฒ„์— ์—…๋กœ๋“œ๋˜๊ธฐ ์ „ ๋ฆฌ์‚ฌ์ด์ง•

5. ๋””๋ ‰ํ„ฐ๋ฆฌ ๊ตฌ์กฐ

๐Ÿ“Œ ์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜์—ฌ ๋””๋ ‰ํ„ฐ๋ฆฌ๋ฅผ ๊ตฌ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.

assets : ํ”„๋กœ์ ํŠธ์— ์‚ฌ์šฉ๋˜๋Š” ์ด๋ฏธ์ง€ ๋ฐ ํฐํŠธ
common : ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” js ํŒŒ์ผ
contexts : useContext๋ฅผ ์ด์šฉํ•œ context ํŒŒ์ผ

์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ
	atoms : button, CommentIcon, ImageBox ๋“ฑ ์ตœ์†Œ ๋‹จ์œ„์˜ ์ปดํฌ๋„ŒํŠธ
	molecules : atom์„ ์กฐํ•ฉํ•ด ํ—ค๋”, ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ” ๋“ฑ ๋ชฉ์ ์„ ๊ฐ€์ง„ UI ์ปดํฌ๋„ŒํŠธ
	organisms : ๋ฆฌ์ŠคํŠธ๋‚˜ ํผ ๋“ฑ molecules๊ฐ€ ์—ฌ๋Ÿฌ ๊ฐœ ๋ชจ์ธ ์ปดํฌ๋„ŒํŠธ
	pages : ๋ผ์šฐํŒ… ๋˜๋Š” ๋‹จ์œ„, ์•„๋ž˜๋กœ props๋ฅผ ๋‚ด๋ ค์ฃผ๋Š” ํŽ˜์ด์ง€ ์ปดํฌ๋„ŒํŠธ

------------------------------------

๐Ÿ“public
  โ”œโ”€๐Ÿ“„favicon.ico
  โ””โ”€๐Ÿ“„index.html
๐Ÿ“src
  โ”œโ”€๐Ÿ“assets
  โ”‚   โ”œโ”€๐Ÿ“fonts
  โ”‚   โ”œโ”€๐Ÿ“icons
  โ”‚   โ””โ”€๐Ÿ“images
  โ”œโ”€๐Ÿ“common
  โ”œโ”€๐Ÿ“components
  โ”‚   โ”œโ”€๐Ÿ“atoms
  โ”‚   โ”‚   โ”œโ”€๐Ÿ“Author
  โ”‚   โ”‚   โ”œโ”€๐Ÿ“Button
  โ”‚   โ”‚   โ”œโ”€๐Ÿ“Comment
  โ”‚   โ”‚   โ””โ”€ ...
  โ”‚   โ”œโ”€๐Ÿ“molecules
  โ”‚   โ”‚   โ”œโ”€๐Ÿ“BottomNavigateBar
  โ”‚   โ”‚   โ”œโ”€๐Ÿ“ChatRoom
  โ”‚   โ”‚   โ””โ”€ ...
  โ”‚   โ””โ”€๐Ÿ“organisms
  โ”‚       โ”œโ”€๐Ÿ“CommentList
  โ”‚       โ”œโ”€๐Ÿ“EmailPasswordForm
  โ”‚       โ””โ”€ ...
  โ”œโ”€๐Ÿ“pages
  โ”‚   โ”œโ”€๐Ÿ“ChatListPage
  โ”‚   โ”œโ”€๐Ÿ“ChatRoomPage
  โ”‚   โ”œโ”€๐Ÿ“ErrorPage
  โ”‚   โ””โ”€ ...
  โ”œโ”€๐Ÿ“contexts
  โ”œโ”€๐Ÿ“„App.jsx
  โ”œโ”€๐Ÿ“„index.js
  โ”œโ”€๐ŸŽจfont.css
  โ”œโ”€๐ŸŽจglobal.css
  โ””โ”€๐ŸŽจreset.css
๐Ÿ“„.eslintrc
๐Ÿ“„.prettierrc
๐Ÿ“„package-lock.json
๐Ÿ“„package.json
๐Ÿ“„README.md

6. ํ•ต์‹ฌ ๊ธฐ๋Šฅ

1) ํ™ˆ

splash ๋กœ๊ทธ์ธ ํšŒ์› ๊ฐ€์ž…
splash ๋กœ๊ทธ์ธ ํšŒ์›๊ฐ€์ž…
ํ™ˆ ํ”ผ๋“œ ๊ฒ€์ƒ‰
ํ™ˆํ”ผ๋“œ ๊ฒ€์ƒ‰
์ฑ„ํŒ… 404 ํŽ˜์ด์ง€
์ฑ„ํŒ… 404

2) ๊ฒŒ์‹œ๊ธ€

๊ฒŒ์‹œ๊ธ€ ์ž‘์„ฑ ๊ฒŒ์‹œ๊ธ€ ์ˆ˜์ • ๊ฒŒ์‹œ๊ธ€ ์‚ญ์ œ
๊ฒŒ์‹œ๋ฌผ์ž‘์„ฑ ๊ฒŒ์‹œ๊ธ€ ์ˆ˜์ • ๊ฒŒ์‹œ๊ธ€ ์‚ญ์ œ
๊ฒŒ์‹œ๊ธ€ ์ƒ์„ธ ๋ฐ ๋Œ“๊ธ€ ๋Œ“๊ธ€ ์‚ญ์ œ ๋Œ“๊ธ€ ์‹ ๊ณ 
๊ฒŒ์‹œ๊ธ€ ์ƒ์„ธ ๋ฐ ๋Œ“๊ธ€ ๋Œ“๊ธ€ ์‚ญ์ œ ๋Œ“๊ธ€ ์‹ ๊ณ 
๊ฒŒ์‹œ๊ธ€ ์‹ ๊ณ  ์ข‹์•„์š”, ์ข‹์•„์š” ์ทจ์†Œ
๊ฒŒ์‹œ๊ธ€ ์‹ ๊ณ  ์ข‹์•„์š” ๋ฐ ์ข‹์•„์š” ์ทจ์†Œ

3) ํ”„๋กœํ•„

๋‚ด ํ”„๋กœํ•„ ํ”„๋กœํ•„ ์ˆ˜์ •
๋‚ด ํ”„๋กœํ•„ ํ”„๋กœํ•„ ์ˆ˜์ •
ํŒ”๋กœ์›Œ, ํŒ”๋กœ์ž‰ ํƒ€ ์œ ์ € ํ”„๋กœํ•„ ๋ฐ ํŒ”๋กœ์šฐ, ์–ธํŒ”๋กœ์šฐ
ํŒ”๋กœ์›Œ ๋ฐ ํŒ”๋กœ์ž‰ ์œ ์ € ํ”„๋กœํ•„ ๋ฐ ํŒ”๋กœ์šฐ ๋ฐ ์–ธํŒ”๋กœ์šฐ

4) ํŒ๋งค ์ƒํ’ˆ

์ƒํ’ˆ ๋“ฑ๋ก ์ƒํ’ˆ ์ˆ˜์ • ์ƒํ’ˆ ์‚ญ์ œ
์ƒํ’ˆ ๋“ฑ๋ก ์ƒํ’ˆ ์ˆ˜์ • ์ƒํ’ˆ ์‚ญ์ œ

7. ํ•ต์‹ฌ ์ฝ”๋“œ

1) ์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด

์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹จ์œ„๋ณ„๋กœ ์ชผ๊ฐ  ํ›„ ํ•„์š”ํ•œ ๋ถ€๋ถ„์— ์กฐํ•ฉํ•˜๋Š” ํ˜•์‹์œผ๋กœ ํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

atom, molecule, organism์„ ํ™œ์šฉํ•ด UI๋Š” ์ตœ๋Œ€ํ•œ ์žฌํ™œ์šฉํ•˜๊ณ , API๋กœ ๋ฐ›์•„์˜จ ์ •๋ณด ๋“ฑ์€ page์—์„œ๋ถ€ํ„ฐ ์•„๋ž˜๋กœ ๋‚ด๋ ค์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

...
return (
    <section>
      <h2 className="a11y-hidden">๊ฒŒ์‹œ๊ธ€ ์ƒ์„ธ ํŽ˜์ด์ง€</h2>
      <HeaderForm backButton={true} menuButton={true} /> // molecule
      {post && comments ? (
        <div className="wrapper-contents">
          <PostCard post={post} /> // molecule
          <CommentList // organism
            comments={comments}
            handleDelete={handleDelete}
            handleReport={handleReport}
          />
          <MessageInput // molecule
            type="comment"
            src={user.image}
            title="๋Œ“๊ธ€"
            placeholder="๋Œ“๊ธ€ ์ž…๋ ฅํ•˜๊ธฐ..."
            buttonText="๊ฒŒ์‹œ"
            inputRef={inputRef}
            onClick={handleTextInput}
          />
        </div>
      ) : (
        <Loading /> // molecule
      )}
    </section>
  );

2) ๋ฐ์ดํ„ฐ๊ฐ€ ๋กœ๋“œ๋˜์—ˆ๋Š”์ง€ ์ƒํƒœ ํ™•์ธ

useEffect๋ฅผ ํ†ตํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” fetch ํ•จ์ˆ˜๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ณ , ๊ทธ๋ ‡๊ฒŒ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ์ปดํฌ๋„ŒํŠธ์— ๋ณด์—ฌ์ฃผ๊ณ ์ž ํ•˜์˜€์ง€๋งŒ, ๋ Œ๋”๋ง๋ณด๋‹ค ๋Šฆ๊ฒŒ ๊ฐ€์ ธ์™€์ ธ ์ปดํฌ๋„ŒํŠธ์— ์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ์ œ๋Œ€๋กœ ํ‘œ์‹œ๋˜์ง€ ์•Š๊ฑฐ๋‚˜ ํ™”๋ฉด์ด ๊นœ๋นก๊ฑฐ๋ฆฌ๋Š” ์ด์Šˆ๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด, ์•„์ง ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค์ง€ ๋ชปํ•˜์˜€๋‹ค๋จผ ๋กœ๋”ฉ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ , ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™”์„ ๊ฒฝ์šฐ์—๋งŒ ์›๋ž˜์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค

const [post, setPost] = useState();
const [comments, setComments] = useState([]);
useEffect(() => {
    getPostComment(user.token, postId, setComments);
    getPostData(user.token, postId, setPost);
  }, [postId]);

return(
	<section>
		<h2 className="a11y-hidden">๊ฒŒ์‹œ๊ธ€ ์ƒ์„ธ ํŽ˜์ด์ง€</h2>
		<HeaderForm />
		{post && comments ? (
		  <div className="wrapper-contents">
		    <PostCard post={post} />
		    <CommentList comments={comments}/>
		    <MessageInput/>
		  </div>
		) : (
		  <Loading />
		)}
	</section>
)

3) ์›น ์ ‘๊ทผ์„ฑ์„ ๋†’์ด๊ธฐ ์œ„ํ•œ ๋…ธ๋ ฅ

  • ์ƒ๋‹จ์— ํ…์ŠคํŠธ๊ฐ€ ์—†๋Š” ๋””์ž์ธ์˜ ํŽ˜์ด์ง€์˜ ๊ฒฝ์šฐ์—๋Š” a11y-hidden ํด๋ž˜์Šค๋ฅผ ์ด์šฉํ•˜์—ฌ ํŽ˜์ด์ง€ ์„ค๋ช…์„ ์ˆจ๊ฒจ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

  • ํ…์ŠคํŠธ๊ฐ€ ๋„ˆ๋ฌด ๊ธธ ๊ฒฝ์šฐ ๋ง์ค„์ž„ํ‘œ๋กœ ์ค„์ด๋˜ title ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ฆฌ๋ฉด ์ „์ฒด ํ…์ŠคํŠธ๋ฅผ ๋ณด์—ฌ์ฃผ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
...
<span className={styles["product_name"]} title={product.itemName}>
  {product.itemName}
</span>
...

8. ์šฐ๋ฆฌํŒ€์˜ ์ŠคํŽ˜์…œ ํฌ์ธํŠธ

1) ํ”„๋กœ์ ํŠธ ์Šคํ„ฐ๋”” ์ง„ํ–‰

ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ ์ „ ํ•„์š”ํ•œ ์ง€์‹๋“ค์— ๊ด€ํ•ด ์Šคํ„ฐ๋””๋ฅผ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. (๐Ÿ“š์Šคํ„ฐ๋”” ๋””๋ ‰ํ† ๋ฆฌ)

GitHub-flow ๋ธŒ๋žœ์น˜ ์ „๋žต, Github Issues์™€ Project, React ํ”„๋กœ์ ํŠธ์˜ ๋””๋ ‰ํ„ฐ๋ฆฌ ๊ตฌ์กฐ, ํ”ผ๊ทธ๋งˆ ์‚ฌ์šฉ๋ฒ•, StoryBook ์‚ฌ์šฉ ๋ฐฉ๋ฒ•๋“ฑ์˜ ์ฃผ์ œ๋กœ ์‹ค์Šต ์œ„์ฃผ์˜ ์Šคํ„ฐ๋””๋ฅผ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ๋“ค์„ ๋ถ„์„ํ•ด์„œ ๋ฐœ๊ฒฌํ•œ ํˆด์ด๋‚˜ ์ „๋žต์„ ์Šคํ„ฐ๋””๋ฅผ ํ†ตํ•ด ์ง์ ‘ ์‚ฌ์šฉํ•ด๋ณด๊ณ  ๊ทธ๊ฒƒ์„ ์šฐ๋ฆฌ ํ”„๋กœ์ ํŠธ์— ์–ด๋–ป๊ฒŒ ์ ์šฉ์‹œํ‚ฌ ์ง€ ์˜๋…ผํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๊ทธ ๊ฒฐ๊ณผ ํ•˜๋‚˜์˜ ์ฃผ์ œ์— ๋Œ€ํ•œ ํŒ€์› ์ „๋ฐ˜์˜ ์ดํ•ด๋„๋ฅผ ๋†’์ผ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.


2) ์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด ์‚ฌ์šฉ

์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฆฌํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด์€ atoms - molecules - organisms - templates - pages 5๋‹จ๊ณ„๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฆฌํ•˜์ง€๋งŒ, ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ์— ๋น„ํ•ด ์ง€๋‚˜์น˜๊ฒŒ ๋‹จ๊ณ„๋ฅผ ๋ถ„๋ฆฌํ•˜๋ฉด ์ž‘์—… ์†๋„๊ฐ€ ๋Š๋ ค์ง€๊ณ  ๋ณต์žกํ•  ๊ฒƒ์ด๋ผ ์˜ˆ์ƒํ•ด 4๋‹จ๊ณ„(atoms - molecules - organisms - pages)๋กœ ํŒจํ„ด์„ ๋ณ€ํ˜•ํ•ด ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฆฌํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด์„ ์ ์šฉํ•จ์œผ๋กœ์จ bottom-top ๊ฐœ๋ฐœ ๋ฐฉ์‹์—์„œ ์–ด๋–ป๊ฒŒ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์„์ง€ ๋งŽ์ด ๊ณ ๋ฏผํ•ด๋ณผ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ atoms๋ฅผ ๋ชจ๋‘ ๊ฐœ๋ฐœํ•œ ๋’ค ํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ•œ ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์ž‘์—…๋‹จ์œ„๋ฅผ ํŽ˜์ด์ง€ ๋‹จ์œ„๋กœ ์„ค์ •ํ•ด, ํŒ€์›๊ฐ„์— ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐœ๋ฐœํ•˜๊ณ  ์žˆ๋Š” ๋“ฑ์˜ ํ—คํ”„๋‹์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ๋งค์ผ ๐Ÿ‘ฉโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ง๋ฐ์ผ๋ฆฌ ์Šคํฌ๋Ÿผ์„ ์ง„ํ–‰ํ•ด ์„œ๋กœ์˜ ์ž‘์—…์ƒํ™ฉ์„ ๊ณต์œ ํ•จ์œผ๋กœ์จ ํ•ด๊ฒฐํ–ˆ๊ณ , ์•„ํ† ๋ฏน ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•  ๋•Œ๋Š” ๊ทธ์— ์•Œ๋งž๊ฒŒ ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„์˜ ์ž‘์—…๋ถ„๋‹ด์ด ํ•„์š”ํ•˜๋‹ค๋Š” ๋ ˆ์Šจ์„ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค.


3) ์ ๊ทน์ ์ธ ๊นƒํ—ˆ๋ธŒ ํ™œ์šฉ

ํƒœ์Šคํฌ, ์ด์Šˆ, PR ๊ด€๋ฆฌ ๋“ฑ์— ๊นƒํ—ˆ๋ธŒ๋ฅผ ์ ๊ทน์ ์œผ๋กœ ํ™œ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์ €ํฌ์˜ ํŒ€ ๊ทœ์น™ ์ค‘ ํ•˜๋‚˜๋Š”, ๋ˆ„๊ตฐ๊ฐ€ ์ด์Šˆ๋ฅผ ๋ฐœ๊ฒฌํ–ˆ์„ ๋•Œ โ€œํ•ด๋‹น ์ด์Šˆ๋ฅผ ๋ฐœ๊ฒฌํ•˜๊ฒŒ ๋œ ์ƒํ™ฉโ€, โ€œ์™œ ์ด ์ด์Šˆ๋ฅผ ํ•ด๊ฒฐํ•ด์•ผ ํ•˜๋Š” ์ง€โ€ ๋“ฑ ๋ฌธ์ œ์— ๋Œ€ํ•ด์„œ ํŒ€์›๋“ค์ด ์ดํ•ดํ•˜๊ณ  ๊ณต๊ฐํ•  ์ˆ˜ ์žˆ๋„๋ก ์ตœ๋Œ€ํ•œ ์ž์„ธํžˆ ์„ค๋ช…ํ•˜๊ธฐ์ž…๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ๋ฒ„๊ทธ๋ฅผ ๋ฐœ๊ฒฌํ–ˆ์„ ๋•Œ๋Š” ํ•ด๋‹น ๋ฒ„๊ทธ๊ฐ€ ๋‚˜ํƒ€๋‚œ ์ƒํ™ฉ์— ๋Œ€ํ•ด์„œ ๊ณต์œ ํ•˜๊ณ , ์ž์‹ ์ด ์ƒ๊ฐํ–ˆ์„ ๋•Œ์˜ ํ•ด๊ฒฐ๋ฐฉ๋ฒ• ๋“ฑ ์ „๋‹ฌ๋ฐ›๋Š” ์‚ฌ๋žŒ์ด ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ์ „๋‹ฌํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ตฌ์ฒด์ ์ธ ์ด์Šˆ ์ž‘์„ฑ
์ด์Šˆ๋ฅผ ์ƒ์„ฑํ•  ๋•Œ๋Š” ๋ฒ„๊ทธ ๋ฐœ์ƒ ์ƒํ™ฉ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๋ฉฐ ์บก์ณ๋‚˜ gif๋ฅผ ์ฒจ๋ถ€ํ•˜๋Š” ๋“ฑ ์ตœ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ „๋‹ฌํ•˜์˜€์Šต๋‹ˆ๋‹ค.


๊ตฌ์ฒด์ ์ธ PR ์ž‘์„ฑ
PR์—๋Š” ์ด์Šˆ๋ฅผ ๋งํฌํ•ด ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ–ˆ๋Š”์ง€, ์–ด๋–ค ๊ธ€์„ ์ฐธ๊ณ ํ–ˆ๋Š” ์ง€์— ๋Œ€ํ•œ ์„ค๋ช…๊ณผ ์ค‘์ ์ ์œผ๋กœ ๋ด์ฃผ์—ˆ์œผ๋ฉด ํ•˜๋Š” ๋ถ€๋ถ„์„ ๋ช…์‹œํ•ด ํšจ์œจ์ ์ธ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ์œ ๋„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.


Issue์™€ Pull Request์— ํ…œํ”Œ๋ฆฟ์„ ์ ์šฉ
๊นƒํ—ˆ๋ธŒ์˜ Issue์™€ Pull Request์— ํ…œํ”Œ๋ฆฟ์„ ์ ์šฉํ•˜์—ฌ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์— ์‚ฌ์šฉ๋˜๋Š” ๋น„์šฉ์„ ์ค„์ด๊ณ ์ž ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
BUG, CUSTOM, FEATURE ์„ธ ๊ฐ€์ง€ Issue ํ…œํ”Œ๋ฆฟ์„ ๋งŒ๋“ค์–ด ์‚ฌ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.



๊นƒํ—ˆ๋ธŒ ํ”„๋กœ์ ํŠธ
์ด์Šˆ๋ฅผ ๐ŸŽฎ๊นƒํ—ˆ๋ธŒ ํ”„๋กœ์ ํŠธ์™€ ์—ฐ๊ฒฐํ•˜์—ฌ ์ง„ํ–‰ ์ƒํ™ฉ์„ ํ•œ๋ˆˆ์— ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.


๊นƒํ—ˆ๋ธŒ ์œ„ํ‚ค
๐Ÿ“‘๊นƒํ—ˆ๋ธŒ ์œ„ํ‚ค์— ์ฝ”๋”ฉ, ์ปค๋ฐ‹, PR ์ปจ๋ฒค์…˜์„ ์ •๋ฆฌํ•ด ๋‘์–ด ํŽธํ•˜๊ฒŒ ๋ณผ ์ˆ˜ ์žˆ๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.


๋””์Šค์ฝ”๋“œ ์›น ํ›…
PR์„ ์ž‘์„ฑํ•˜๋ฉด ์ตœ์†Œ 2๋ช…์—๊ฒŒ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›์€ ๋’ค ๋จธ์ง€ํ•˜๋„๋ก ๊ทœ์น™์„ ์„ค์ •ํ•ด์„œ, ๋””์Šค์ฝ”๋“œ ์ฑ„๋„์— Github ์›นํ›…์„ ์—ฐ๋™ํ•ด PR์ด๋‚˜ ๋ณ€๊ฒฝ์‚ฌํ•ญ ์ปค๋ฐ‹์ด ์žˆ์„ ๊ฒฝ์šฐ ๋น ๋ฅด๊ฒŒ ์•Œ๋ฆผ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋กํ•˜์˜€์Šต๋‹ˆ๋‹ค.


9. ๊ณ ์ƒ๋‹ด, ๋ ˆ์Šจ๋Ÿฐ

1) ์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด์€ ๋งŽ์€ ์ž‘์—…์‹œ๊ฐ„๊ณผ ์—๋„ˆ์ง€๋ฅผ ์š”๊ตฌํ•œ๋‹ค ๐Ÿ˜ฑ

  • props๊ฐ€ ๊ณ„์† ์ปดํฌ๋„ŒํŠธ๋ฅผ ํƒ€๊ณ  ์ „๋‹ฌ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋™์‹œ์— ๊ด€๋ฆฌํ•˜๊ธฐ ๋ณต์žกํ–ˆ๊ณ , ๊ฐ๊ฐ์˜ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ž˜ ๋™์ž‘ํ•˜๋Š”์ง€ ํ™•์ธํ•˜๊ธฐ๊ฐ€ ๊นŒ๋‹ค๋กœ์› ์Šต๋‹ˆ๋‹ค.
  • ๊ธฐ์กด์˜ 5๋‹จ๊ณ„ ๊ตฌ์กฐ์—์„œ atom, molecules, organisms, pages 4๋‹จ๊ณ„ ๊ตฌ์กฐ๋กœ ๋ณ€ํ˜•ํ•ด ์‚ฌ์šฉํ–ˆ์ง€๋งŒ, ์ข€ ๋” ๋‹จ์ˆœํ™”ํ•  ํ•„์š”๊ฐ€ ์žˆ์—ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
  • ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ์˜ˆ์ƒํ•ด์„œ ํ”„๋กœ์ ํŠธ ์ „ ์Šคํ„ฐ๋””๋ฅผ ํ†ตํ•ด์„œ StoryBook์„ ์‚ฌ์šฉํ•ด๋ดค์ง€๋งŒ, ๋ฆฌ์•กํŠธ์—๋„ ์ต์ˆ™ํ•˜์ง€ ์•Š์•˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ํ•™์Šต ๋น„์šฉ์ด ๋†’๋‹ค๊ณ  ํŒ๋‹จํ•ด ๋„์ž…ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.
  • ํ•˜์ง€๋งŒ ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด์„œ ์‹œ๊ฐ์  ํ…Œ์ŠคํŠธ์˜ ์–ด๋ ค์›€์„ ํฌ๊ฒŒ ๋Š๊ผˆ๊ณ *, ์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฆฌํ•  ๋•Œ๋Š” StoryBook์ด ํ•„์ˆ˜์ ์ด๋ผ๋Š” ๊ฒƒ์„ ๊นจ๋‹ณ์•˜์Šต๋‹ˆ๋‹ค.

2) ํŽธ๋ฆฌํ•œ UI ์žฌ์‚ฌ์šฉ vs ๊ธฐ๋Šฅ ์ถ”๊ฐ€์˜ ์–ด๋ ค์›€ ๐ŸŒฑ

  • ์ปดํฌ๋„ŒํŠธ๋ฅผ ํ™•์žฅ์„ฑ์žˆ๊ฒŒ, ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ค๋ฉด์„œ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๊ธฐ๊ฐ€ ๊นŒ๋‹ค๋กœ์› ์Šต๋‹ˆ๋‹ค. UI์˜ ์žฌ์‚ฌ์šฉ์€ ํŽธ๋ฆฌํ–ˆ์ง€๋งŒ, State๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋“ฑ ๋™์ž‘์„ ์ถ”๊ฐ€ํ•˜๋ฉด ๊ธฐ๋Œ€์™€ ๋‹ค๋ฅด๊ฒŒ ๋™์ž‘ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•˜์Šต๋‹ˆ๋‹ค.
  • ๊ทธ๋ž˜์„œ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋‚˜ ์ƒํƒœ ๋“ฑ์€ ์žฌ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ์ปดํฌ๋„ŒํŠธ๋‚˜, page ๋‹จ์œ„์—์„œ props๋กœ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.
  • ํ•˜์ง€๋งŒ props๋ฅผ ์•„๋ž˜๋กœ ์ „๋‹ฌํ•˜๊ณ  ๋˜ ์ „๋‹ฌํ•˜๋Š” ๊ตฌ์กฐ๋Š”, ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋งˆ๋‹ค props์˜ ํ˜•์‹์„ ๋งค๋ฒˆ ํ™•์ธํ•ด์•ผ ํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ถ€๋ถ„์€ props์˜ ํƒ€์ž…์„ ๊ฐ•์ œํ•˜๊ฑฐ๋‚˜ default ๊ฐ’์„ ์ •์˜ํ•ด์คŒ์œผ๋กœ์จ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

3) ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์œผ๋กœ ๋งŒ๋“œ๋Š” ์ ๊ทน์ ์ธ ํŒ€ ๐Ÿ’•

  • ๊ฐœ๋ฐœ ํ”„๋กœ์ ํŠธ ๊ฒฝํ—˜์ด ๋งŽ์ด ์—†๋‹ค๋ณด๋‹ˆ๊นŒ ๊ณ ๋ฏผ๋„ ๋ถˆ์•ˆ๋„ ๋งŽ์•˜์Šต๋‹ˆ๋‹ค. ์ž˜ํ•˜๊ณ  ์‹ถ๊ณ , ์–ด๋–ค ๋…ผ์ œ์— ๋Œ€ํ•ด ์˜๊ฒฌ์„ ์ฃผ๊ณ  ๋ฐ›๊ณ , ์‹คํ–‰์„ ํ•ด๋ณด๊ณ ๋Š” ์‹ถ์€๋ฐ ์•„์ด๋””์–ด๊ฐ€ ์‰ฝ๊ฒŒ ๋‚˜์˜ค์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์˜ค๋žœ๋งŒ์— ์ฒ˜์Œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ณต๋ถ€๋ฅผ ์‹œ์ž‘ํ•  ๋•Œ ๊ฐ™์€ ๋ง‰๋ง‰ํ•จ์„ ๋Š๊ผˆ์Šต๋‹ˆ๋‹ค.
  • ์ €๋Š” ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๊ฐ€ ์ง€์‹์˜ ๊ฒฉ์ฐจ๋กœ๋ถ€ํ„ฐ ๋ฐœ์ƒ๋œ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ์–ด๋– ํ•œ ๋ฌธ์ œ์— ๋Œ€ํ•ด์„œ ์˜๊ฒฌ์„ ๋‚ด๋ ค๋ฉด ์ตœ์†Œํ•œ์˜ ์ง€์‹์ด๋‚˜ ๊ฒฝํ—˜์ด ์žˆ์–ด์•ผ ์ž์‹ ๊ฐ์„ ๊ฐ€์ง€๊ณ  ์ œ์‹œํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•˜์Šต๋‹ˆ๋‹ค.
  • ๊ทธ๋ž˜์„œ ์ •๋ณด๋ฅผ ๊ธ์–ด๋ชจ์•˜์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ํ”„๋กœ์ ํŠธ๋“ค์„ ๋ถ„์„ํ•˜๊ณ , ํ˜‘์—… ์ฃผ์ œ์˜ ๋ธ”๋กœ๊ทธ ๊ธ€์„ ์ฝ๊ณ  ๋‹ค๋ฅธ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค๊ป˜ ์งˆ๋ฌธ์„ ๋˜์ ธ๊ฐ€๋ฉฐ ์ •๋ณด๋ฅผ ์–ป์€ ๋‹ค์Œ, ์ ์šฉํ•  ์ˆ˜ ์žˆ์„ ๋ฒ•ํ•œ ํ‚ค์›Œ๋“œ๋“ค์„ ๊ฐ€์ ธ์™€ ์Šคํ„ฐ๋””๋ฅผ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • 3~4์ผ์— ํ•œ๋ฒˆ์”ฉ ํšŒ์˜ํ•˜๋ฉด์„œ ์Šคํ„ฐ๋””๋ฅผ ์ง„ํ–‰ํ•˜๊ธฐ ํž˜๋“ค์—ˆ์ง€๋งŒ, ์ž์‹ ์ด ๋งก์€ ์ฃผ์ œ์— ๋Œ€ํ•ด์„œ๋Š” ํŒ€ ๋‚ด์—์„œ ๋‚˜๋ฆ„์˜ ์ŠคํŽ˜์…œ๋ฆฌ์ŠคํŠธ๊ฐ€ ๋˜์–ด ๊ทธ ๋ถ„์•ผ๋ฅผ ๋ฆฌ๋“œํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ถ€์กฑํ•œ ์ •๋ณด๋“ค์„ ์ฑ„์šฐ๊ณ  ๋‚˜๋‹ˆ ์ž์‹ ๊ฐ์ด ์ƒ๊ฒผ๊ณ , ์ž์‹ ์˜ ๋ถ„์•ผ๊ฐ€ ์ •ํ•ด์ง€๋ฉฐ ์˜ค๋„ˆ์‹ญ์„ ๋‚˜๋ˆ ๊ฐ€์ง€๊ณ  ์ด์ „๋ณด๋‹ค ํ™œ๋ฐœํ•˜๊ฒŒ ์˜๊ฒฌ์„ ์ฃผ๊ณ ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค.
  • ์ด ๊ฒฝํ—˜์œผ๋กœ ์šฐ๋ฆฌ๋Š” ์†Œ์‹์„, ๋ฌธ์ œ๋ฅผ ๊ณต์œ ํ•˜๋Š” ๊ฒƒ์ด ๊ณง ์ ๊ทน์ ์ธ ํŒ€์„ ๋งŒ๋“ ๋‹ค๋Š” ๊ตํ›ˆ์„ ์–ป์—ˆ๊ณ , ์ดํ›„๋กœ๋„ ๋…ธ์…˜ ์›Œํฌ์ŠคํŽ˜์ด์Šค ํ™œ์šฉ, ๋ฐ์ผ๋ฆฌ ์Šคํฌ๋Ÿผ, ๊นƒํ—ˆ๋ธŒ, ํŽ˜์–ดํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋“ฑ ์›ํ™œํ•œ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์„ ์œ„ํ•œ ๋…ธ๋ ฅ์„ ํ•ด๋‚˜๊ฐ€๋ฉฐ โ€œ๋ฌธ์ œ์— ๋Œ€ํ•ด์„œ ํŒ€์›๋“ค์ด ์ดํ•ดํ•˜๊ณ  ๊ณต๊ฐํ•  ์ˆ˜ ์žˆ๋„๋ก ์ตœ๋Œ€ํ•œ ์ž์„ธํžˆ ์„ค๋ช…ํ•˜๊ธฐโ€๋ผ๋Š” ๊ทœ์น™์„ ์ง€์ผœ์™”์Šต๋‹ˆ๋‹ค.

10. ๐Ÿš€ ์•ž์œผ๋กœ์˜ ๋„์ „๊ณผ์ œ

  • ์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด์„ ์ ์šฉํ•˜๋ฉฐ ํ—ค๋ฉ”๋ฉด์„œ ์ค‘๋ณต์ฝ”๋“œ๊ฐ€ ๋งŽ์ด ์ƒ๊ฒผ๋Š”๋ฐ, ์ œ๊ฑฐํ•˜๋Š” ๊ฒƒ์— ์–ด๋ ค์›€์„ ๋Š๋ผ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. API ์ฝ”๋“œ๋ฅผ ๋ถ„๋ฆฌํ•˜๊ณ  Custom Hook์„ ๋งŒ๋“ค์–ด ์ง€๊ธˆ์˜ ์ฝ”๋“œ๋ณด๋‹ค ๊ฐ€์‹œ์ ์ด๊ณ  ํšจ์œจ์ ์ธ ์ฝ”๋“œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
  • setState์˜ ๋น„๋™๊ธฐ์  ์‹คํ–‰์— ๋Œ€ํ•ด ๋”์šฑ ๊ณต๋ถ€ํ•˜์—ฌ ๋ฒ„๋ฒ…์ž„์„ ๊ณ ์ณ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.
  • ํ™ˆ ํ”ผ๋“œ, ํŒ”๋กœ์›Œ/ํŒ”๋กœ์ž‰ ๋ชฉ๋ก, ๋Œ“๊ธ€ ๋“ฑ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ ๊ฐœ์ˆ˜ ์ œํ•œ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌดํ•œ์Šคํฌ๋กค ๋˜๋Š” ํŽ˜์ด์ง€๋„ค์ด์…˜์„ ์ถ”๊ฐ€ํ•ด ์ „์ฒด ๋ชฉ๋ก์„ ๋ณด์—ฌ์ฃผ๋„๋ก ๊ฐœ์„ ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

About

๐ŸŽฎ ๊ฒŒ์ž„๊ณผ ๊ด€๋ จ๋œ ๋ชจ๋“  ๊ฒƒ, ๊ฒŒ์ž„์–ด์Šค ๐Ÿ•น

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 79.5%
  • CSS 20.1%
  • HTML 0.4%