WIL 6์ฃผ์ฐจ

Eddyยท2022๋…„ 8์›” 19์ผ

WIL

๋ชฉ๋ก ๋ณด๊ธฐ
6/15
post-thumbnail

๐Ÿ“– WIL 6์ฃผ์ฐจ

๐ŸŒž 6์ฃผ์ฐจ ์Šค์ผ€์ฅด

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


๐ŸŒž ํšŒ๊ณ 

ํ”„๋กœ์  ๊นƒํ—ˆ๋ธŒ ์ฃผ์†Œ
ํ”„๋กœ์ ํŠธ ์‹œ์—ฐ์˜์ƒ

  • ์šฉ๋Ÿ‰์ด ์ปค์„œ ์ด๋ฒˆ์ฃผ๋Š” ์˜์ƒ์œผ๋กœ ๋Œ€์ฒดํ–ˆ๋‹ค.

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

์‚ฌ์‹ค ํ”„๋กœ์ ํŠธ ์ดˆ๋ฐ˜์—” ์˜๊ฒฌ์„ ๋งž์ถ”๋Š”๊ฒƒ ์กฐ์ฐจ ์‰ฝ์ง€์•Š์•˜๋‹ค. ์„œ๋กœ ๋„ˆ๋ฌด๋‚˜ ๋‹ค๋ฅธ ์‹œ์„ ์œผ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฐ”๋ผ๋ดค๊ณ  ๋ฐฑ์—”๋“œ์˜€๋˜ ํŒ€์žฅ๋‹˜์€ ๊ทธ๋ƒฅ ๋ณธ์ธ์ด ์ค€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณต์‚ฌ ๋ถ™์—ฌ๋„ฃ๊ธฐํ•˜๋ฉด UI์— ๋ณด์ด๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ์‰ฝ๊ฒŒ ๋งํ•˜๊ธฐ๋„ ํ–ˆ๋‹ค.๐Ÿ˜… ๊ทธ ๋ฐ์ดํ„ฐ๋ฅผ UI์— ๋ณด์ด๊ฒŒ ํ•˜๋Š”๊ฒŒ ์šฐ๋ฆฌ์˜ ์ผ์ด๊ณ  ๊ทธ๊ฒŒ ์–ด๋ ค์šด๊ฑด๋ฐใ…Žใ…Ž ํŒ€์žฅ๋‹˜์€ ๊ณผ์ œ ๋‚ด๋‚ด ๋ฌด๋ฆฌํ•œ ๊ธฐ๋Šฅ ์ถ”๊ฐ€ ์š”๊ตฌ์™€ api์„ค๊ณ„ ๋ณ€๊ฒฝ ๋“ฑ ์†Œํ†ต์ด ์‰ฝ์ง€์•Š์€ ๋ถ„์ด์…จ๋‹ค. ํ•˜์ง€๋งŒ ์ดํ•ดํ•˜์‹œ๊ธฐ ์‰ฝ๊ฒŒ ์ง์ ‘ ์ฝ”๋“œ๋ฅผ ๋ณด์—ฌ๋“œ๋ฆฌ๋ฉฐ ๋ฐ์ดํ„ฐ์˜ ํ๋ฆ„์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด๋“œ๋ฆฌ๊ณ  ๋‹ค๋ฅธ ๋ฐฑ์—”๋“œ ๋ถ„๋“ค๋„ ์ค‘๊ฐ„์—์„œ ์šฐ๋ฆฌ์˜ ์ด์•ผ๊ธฐ๋ฅผ ๋“ฃ๊ณ  ์ค‘์žฌ๋ฅผ ์ž˜ ํ•ด์ฃผ์…จ๊ธฐ์— ๋๋‚ผ ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ๐Ÿซถ

๋‹น์—ฐํ•˜๊ฒŒ๋„ ํ”„๋กœ์ ํŠธ๋Š” ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•  ๋•Œ ๋ฒ„๊ทธ๋„ ๋งŽ์•˜๊ณ  ํ˜ผ์ž JsonServer๋ฅผ ๋งŒ๋“ค์–ด ํ…Œ์ŠคํŠธํ• ๋•Œ๋Š” ์ž˜๋˜๋˜ ๊ธฐ๋Šฅ๋“ค๋„ ์„œ๋ฒ„์™€ ๋งž์ถฐ๋ณด๋‹ค ๋๋‚ด ๊ตฌํ˜„ํ•˜์ง€ ๋ชปํ•œ ๊ธฐ๋Šฅ๋“ค๋„ ์žˆ์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋ ‡๊ฒŒ ํŒ€์œผ๋กœ ๋ฐฑ์—”๋“œ์™€ ์†Œํ†ตํ•˜๋Š” ๊ฒฝํ—˜์„ ํ•ด๋ณด๋Š” ๊ฒƒ์ด ์‹ค์งˆ์ ์ธ ์ด๋ฒˆ์ฃผ ์ฃผ์ฐจ์˜ ๋ชฉํ‘œ๊ฐ€ ์•„๋‹ˆ์˜€์„๊นŒ?

๐ŸŒง ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…

์„œ๋ฒ„์™€ ํ†ต์‹ ํ•˜๊ธฐ์œ„ํ•ด ์šฐ๋ฆฌ๋Š” axios ์™€ ํ† ํฐ์„ ์ด์šฉํ•œ๋‹ค. ์„œ๋ฒ„์—์„œ ๋ณด๋‚ด์ฃผ๋Š” ํ† ํฐ์„ ์ €์žฅํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์„ธ์…˜๊ณผ ์ฟ ํ‚ค , ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€ ๋“ฑ ์—ฌ๋Ÿฌ ๋ฐฉ๋ฒ•๋“ค์ด ์žˆ๋‹ค. ์ด ๋ฐฉ๋ฒ•๋“ค์€ ์—ฌ๋Ÿฌ ์ฐจ์ด๊ฐ€ ์žˆ์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ์ฟ ํ‚ค์— ๋„์ „ํ•˜์˜€์ง€๋งŒ ์‹คํŒจํ–ˆ๋‹ค. ์ฟ ํ‚ค ์‚ฌ์šฉ๋ฒ•์„ ์ฐพ๊ธฐ์œ„ํ•ด ๊ตฌ๊ธ€๋ง๋„ ๋งŽ์ดํ•˜๊ณ  ์ •๋ณด๋„ ๋งŽ์ด ์ฐผ๊ณ  2์ผ ์ •๋„๋ฅผ ์Ÿ์•˜์ง€๋งŒ ๊ฒฐ๊ตญ ์‹คํŒจํ–ˆ๊ณ  ๋กœ์ปฌ์Šคํ† ๋ฆฌ์ง€๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค. ์ด ๋ถ€๋ถ„์ด ๋„ˆ๋ฌด ์•„์‰ฝ๋‹ค. ๋‹ค์Œ์ฃผ์—” ๊ผญ ์ฟ ํ‚ค๋ฅผ ์ด์šฉํ•ด๋ด์•ผ๊ฒ ๋‹ค.

์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ์„ ํƒํ• ๋•Œ ๋งˆ๋‹ค ์„œ๋ฒ„์— get ์š”์ฒญ์„ ํ•˜๋ฉด ์„œ๋ฒ„์—์„œ ํ•ด๋‹น ์นดํ…Œ๊ณ ๋ฆฌ์˜ ์‹œํŠธ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์ด ์•„๋‹Œ ๋ชจ๋“  ๊ฒŒ์‹œ๋ฌผ ๋ฆฌ์ŠคํŠธ๋ฅผ ๊ฐ€์ ธ์˜จ ํ›„ filter๋ฅผ ์ด์šฉํ•ด ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ๊ณจ๋ผ๋ƒˆ๋‹ค. ๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€๋Šฅํ•œ ๋ฐฉ๋ฒ•์ด์˜€์ง€๋งŒ ์‹ค์ œ๋ผ๋ฉด ๋ชจ๋“  ๊ฒŒ์‹œ๋ฌผ์„ ๋ฐ›์„๋•Œ ๋ฐ์ดํ„ฐ์–‘์— ๋”ฐ๋ผ ์ฒซ ๋กœ๋”ฉ์ด ๊ธธ์–ด์งˆ ์ˆ˜ ์žˆ๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ๋‹ค. ์ด๋Ÿฐ๊ฒฝ์šฐ ๋ฌดํ•œ์Šคํฌ๋กค์ด๋‚˜ ์„œ๋ฒ„์— ์š”์ฒญํ• ๋•Œ ์ผ์ • ๊ฐฏ์ˆ˜์˜ ๋ฐ์ดํ„ฐ๋งŒ ๋ฐ›์•„์˜ค๋Š” ๋ฐฉ์‹์„ ์ƒ๊ฐํ•˜์—ฌ ๊ฐœ์„ ํ•ด์•ผ๊ฒ ๋‹ค.

ํ˜‘์—…์„ ์œ„ํ•ด ๊นƒํ—ˆ๋ธŒ์— ํ”„๋กœ์ ํŠธ๋ฅผ ๊ณต์œ ํ•˜๋ฉฐ redux ์•ˆ์˜ api๋ฅผ ๋…ธ์ถœ์‹œ์ผฐ๋‹ค. ๋ณด์•ˆ์„ ์œ„ํ•ด gitignore๋ฅผ ์ด์šฉํ•ด ์ด๋ฅผ ์ œ์™ธ์‹œ์ผœ์•ผ๊ฒ ๋‹ค.


๐ŸŒณ Pull Request ์ด๋ฒˆ์ฃผ ๋‚˜์˜ ํ† ์–‘

https://velog.io/@leejpsd/Pull-Request

์ด๋ฒˆ์ฃผ๋Š” ํ˜‘์—…์„ ์œ„ํ•ด ๊นƒํ—ˆ๋ธŒ organization์ด ์•„๋‹Œ fork๋ฅผ ์‚ฌ์šฉํ•˜์˜€๋‹ค.
fork ์™€ Pull Request(PR)์˜ ์ •ํ™•ํ•œ ์‚ฌ์šฉ๋ฒ•์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•˜์—ฌ ๋”ฐ๋กœ ํฌ์ŠคํŒ…ํ•˜์˜€๋‹ค.


๐ŸŒณ Styled-components ์ด๋ฒˆ์ฃผ ๋‚˜์˜ ํ† ์–‘ 2

https://velog.io/@leejpsd/styled-components

0๊ฐœ์˜ ๋Œ“๊ธ€