[Wecode] ๐Ÿ‘จโ€๐Ÿ’ป์œ„์ฝ”๋“œ 2์ฐจ ํŒ€ ํ”„๋กœ์ ํŠธ ํ›„๊ธฐ (์ฝ”์ธ์› ํ”„๋กœ์ ํŠธ)๐Ÿ‘ฉโ€๐Ÿ’ป

ํ™์˜ˆ์ฐฌยท2020๋…„ 10์›” 24์ผ
2
post-thumbnail

๐Ÿ—“ ์ž‘์—… ๊ธฐ๊ฐ„

- 2020.10.5 - 2020.10.16

๐Ÿ”ง ๊ธฐ์ˆ  Stack

- JavaScript(ES6+)
- React hooks
- Routes.js
- Styled Components
- Git
- HighCharts Library

๐Ÿ‘ซ ํŒ€์›

- Frontend Engineer : 3๋ช…(์†๋ณ‘์ง„, ์ตœ์˜ˆ์›, ํ™์˜ˆ์ฐฌ)
- Backend Engineer: 2๋ช…(๊น€์ˆ˜์ •, ์ตœ์ง€์„ )

๐Ÿ’ป ๊ธฐ๋Šฅ ๊ตฌํ˜„(Front-end)

  • ๊ณตํ†ต ์‚ฌํ•ญ
    ๐Ÿ‘‰ CRA ์ดˆ๊ธฐ ์„ธํŒ…
    ๐Ÿ‘‰ Git rebase์„ ํ†ตํ•œ ์ฝ”๋“œ ๋ฒ„์ „ ์ตœ์‹ ํ™” ๋ฐ ํŒ€์›๋“ค๊ฐ„์˜ ์ฝ”๋“œ ๊ณต์œ 
  • ๋ฉ”์ธ ํŽ˜์ด์ง€(์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ ๋‚ด๊ฐ€ ๋งก์€ ๋ถ€๋ถ„)
    ๐Ÿ‘‰ ๋ฉ”์ธํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ ๊ตฌํ˜„(์„ธ๋ถ€์ ์ธ ํ˜ธ๋ฒ„๊ธฐ๋Šฅ, ํด๋ฆญ ์ด๋ฒคํŠธ ๊ธฐ๋Šฅ).
    ๐Ÿ‘‰ Highcharts ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•œ ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ๊ตฌํ˜„
    ๐Ÿ‘‰ ๋“ฑ๋ฝ๋ฅ ์— ๋”ฐ๋ฅธ ๊ทธ๋ž˜ํ”„ ๋””์ž์ธ ๊ตฌํ˜„(์ฆ๊ฐ€์˜ ๊ฒฝ์šฐ ๋นจ๊ฐ„์ƒ‰, ๊ฐ์†Œ์˜ ๊ฒฝ์šฐ ํŒŒ๋ž€์ƒ‰์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ทธ๋ž˜ํ”„)
    ๐Ÿ‘‰ ๊ฑฐ๋ž˜๋Ÿ‰๊ณผ ๋“ฑ๋ฝ๋ฅ ์— ๋”ฐ๋ฅธ ์˜ค๋ฆ„์ฐจ์ˆœ, ๋‚ด๋ฆผ์ฐจ์ˆœ ์ •๋ ฌ ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€
    ๐Ÿ‘‰ ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ ๋ฐ ๋ชจ๋‹ฌ์ฐฝ ๊ธฐ๋Šฅ
    ๐Ÿ‘‰ ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… ์œ ํšจ์„ฑ๊ฒ€์‚ฌ(validation)
    ๐Ÿ‘‰ ์†Œ์…œ๋กœ๊ทธ์ธ(์นด์นด์˜คํ†ก), ์นด์นด์˜คํ†ก ๊ณ„์ •์—์„œ ๋ฐ›์€ ํ† ํฐ์„ ๋ฐฑ์—”๋“œ์—๊ฒŒ ์ „๋‹ฌ, ์œ ์ € ํ† ํฐ์„ ์ƒˆ๋กœ ์ƒ์„ฑํ•˜๋Š” ๊ธฐ๋Šฅ ๊ตฌํ˜„
    ๐Ÿ‘‰ ์ด๋ฉ”์ผ ์ธ์ฆ ๊ตฌํ˜„
  • ๊ฑฐ๋ž˜์†Œ ํŽ˜์ด์ง€
    ๐Ÿ‘‰ ๊ฑฐ๋ž˜์†Œ ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ ๊ตฌํ˜„(css grid ํ™œ์šฉ)
    ๐Ÿ‘‰ Highcharts ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ™œ์šฉํ•œ ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™” ๊ตฌํ˜„
    ๐Ÿ‘‰ setInterval()์„ ํ†ตํ•œ ์‹ค์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ ํ†ต์‹ ๊ธฐ๋Šฅ ๊ตฌํ˜„.
    ๐Ÿ‘‰ ๊ฐ€์ƒ ํ™”ํ ๋งค์ˆ˜/๋งค๋„ ๊ธฐ๋Šฅ ๊ตฌํ˜„
    ๐Ÿ‘‰ ์ด์ „ ๋ฐ์ดํ„ฐ์™€ ๋ณ€ํ™”๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๋น„๊ตํ•˜์—ฌ ๋ณ€ํ™” ๋ฐœ์ƒ ์‹œ CSS keyframe์„ ํ™œ์šฉํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ ๊ตฌํ˜„
    ๐Ÿ‘‰ ์ฃผ๋ฌธ ๊ธˆ์•ก ๊ฐ€๊ฒฉ์— ๋”ฐ๋ฅธ ์˜ค๋ฆ„์ฐจ์ˆœ(๋งค์ˆ˜),๋‚ด๋ฆผ์ฐจ์ˆœ(๋งค๋„) ์ •๋ ฌ ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • Nav Bar, Footer, ์ˆ˜์ต ํ˜„ํ™ฉ ํŽ˜์ด์ง€
    ๐Ÿ‘‰ ๋„ค๋น„๊ฒŒ์ด์…˜๋ฐ”, ํ‘ธํ„ฐ ๋“ฑ ๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ ๋ ˆ์ด์•„์›ƒ ๊ตฌํ˜„.
    ๐Ÿ‘‰ ์ˆ˜์ตํ˜„ํ™ฉ ํŽ˜์ด์ง€ ๋ ˆ์ด์•„์›ƒ ๊ตฌํ˜„.
    ๐Ÿ‘‰ ์œ ์ €์— ๋”ฐ๋ฅธ ๊ฑฐ๋ž˜๋‚ด์—ญ์„ ํ™•์ธ ์ˆ˜์ตํ˜„ํ™ฉ ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“ค์—ˆ๋‹ค.

๐Ÿ’ป ๊ฒฐ๊ณผ๋ฌผ

  • ํšŒ์›๊ฐ€์ž…/๋กœ๊ทธ์ธ ํŽ˜์ด์ง€
  • ๋ฉ”์ธ ํŽ˜์ด์ง€
  • ๊ฑฐ๋ž˜์†Œ ํŽ˜์ด์ง€

  • ์ˆ˜์ต ํ˜„ํ™ฉ ํŽ˜์ด์ง€

๐Ÿ•ตโ€โ™‚Prologue

1์ฐจ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋๋‚˜๊ณ , 1์ฃผ์ผ์˜ ํœด์‹์‹œ๊ฐ„ ๋’ค์— ๋ฐ”๋กœ 2์ฐจ ํ”„๋กœ์ ํŠธ์— ๋“ค์–ด๊ฐ”๋‹ค.

์‚ฌ์‹ค 2์ฐจ ํ”„๋กœ์ ํŠธ์—์„œ ์ฝ”์ธ์› ์‚ฌ์ดํŠธ๋ฅผ 2์ฐจ ํ”„๋กœ์ ํŠธ๋กœ ํ•  ์ค„ ๋ชฐ๋ž๋‹ค.
์• ์ดˆ์— ๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”๋ฅผ ํ”„๋กœ์ ํŠธ๋กœ ํฌ๋งํ•˜๋Š” ์ธ์›๋„ ๋งŽ์ด ์—†์—ˆ์„๋ฟ๋”๋Ÿฌ ์†Œ์…œ์ปค๋จธ์Šค ์‚ฌ์ดํŠธ๊ฐ€ ํˆฌํ‘œ์—์„œ ๊ฐ€์žฅ ๋งŽ์€ ์„ ํƒ์„ ๋ฐ›์•˜๊ธฐ ๋•Œ๋ฌธ์— ๋‹น์—ฐํžˆ ์ปค๋จธ์Šค ์‚ฌ์ดํŠธ๋ฅผ ํด๋กœ๋‹ ํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ 2์ฐจ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๋Š” ๋‹น์ผ ๋‚ด ์ด๋ฆ„์ด ์ฝ”์ธ์› ํŒ€์— ๋“ค์–ด๊ฐ€ ์žˆ๋Š” ๊ฒƒ์„ ๋ณด์•˜๊ณ  ๋‚˜๋ฅผ ํฌํ•จํ•œ ๋‹ค์„ฏ ๋ช…์˜ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค์€ ์•ฝ๊ฐ„์˜ ๋ฉ˜๋ถ•๊ณผ ํ•จ๊ป˜(?) ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ฒŒ ๋๋‹ค.

์ฒ˜์Œ์—๋Š” '๋ฐ์ดํ„ฐ ์‹œ๊ฐํ™”๋ฅผ ์ œ๋Œ€๋กœ ๊ตฌํ˜„ํ•ด๋‚ผ ์ˆ˜ ์žˆ์„๊นŒ'๋ผ๋Š” ๋‘๋ ค์›€์ด ์žˆ์—ˆ๋‹ค. ๋˜ํ•œ '๋‹ค๋ฅธ ํŒ€์›๋“ค์—๊ฒŒ ํ˜น์—ฌ๋‚˜ ํ”ผํ•ด๋ฅผ ์ฃผ์ง€ ์•Š์„๊นŒ'๋ผ๋Š” ์กฐ๋ฐ”์‹ฌ๋„ ๋“ค์—ˆ๋‹ค.

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

โœ๊ธฐ๋กํ•˜๊ณ  ์‹ถ์€ ์ฝ”๋“œ

๐Ÿฅ‡ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๋Š” ์ฝ”๋“œ

๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๋Š” ๋ฐฉ๋ฒ•์€
1. ๋นˆ ๋ฐฐ์—ด์„ fetchChart ํ•จ์ˆ˜ ์•ˆ์—์„œ ์„ ์–ธ
2. ๋ฐ›์•„์˜ค๋Š” ๋ฐ์ดํ„ฐ๋ฅผ for๋ฌธ์„ ๋Œ๋ ค ๊ฐ์ฒด ํ˜•ํƒœ๋กœ ๋ฐ›์Œ
3. ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ์„ ์–ธํ•œ ๋ฐฐ์—ด์— ์ €์žฅ
4. setChartList๋กœ ์‹ค์ œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ์ดํ„ฐ์— ๋„ฃ๋Š” ๋ฐฉ์‹
์ด๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ์ฝ”๋“œ๋ฅผ ์ž์„ธํžˆ ๋ณด๋ฉด fetchํ•จ์ˆ˜๊ฐ€ ์ด 3๋ฒˆ ์‹คํ–‰๋˜๋Š”๋ฐ, ๊ทธ ์ด์œ ๋กœ๋Š” ๋ฐฑ์—”๋“œ๋กœ๋ถ€ํ„ฐ ๋ฐ›์•„์˜ค๋Š” ๋ฐ์ดํ„ฐ๋Š” ์ด 2์ข…๋ฅ˜์˜€๊ณ , ๋‚˜๋จธ์ง€ 19๊ฐœ์˜ ๋ฐ์ดํ„ฐ๋Š” Mock Data๋ฅผ ์ด์šฉํ•ด์„œ ๊ตฌํ˜„ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ด์—ˆ๋‹ค. ์ด์— ๋”ฐ๋ผ fetchํ•จ์ˆ˜๋ฅผ ํฌ๊ฒŒ 2๋ฒˆ(์ด 3๋ฒˆ) ์‹คํ–‰ํ–ˆ๋‹ค.

์ฒซ fetch()๋Š” ์‹ค์ œ ๋ฐฑ์—”๋“œ๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๋Š” ํ•จ์ˆ˜์˜€๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ฝ”๋“œ๋ฅผ ์ž์„ธํžˆ ๋ณด๋ฉด fetch()์•ˆ์— fetch()๊ฐ€ ๋˜ ์žˆ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด๋Š” ๋ฐฑ์—”๋“œ์—์„œ ๋ณด๋‚ด์ฃผ๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ์ข…๋ชฉ list, ์ฐจํŠธ list(๊ทธ๋ž˜ํ”„) ๋‘ ๊ฐœ๋กœ ๋‚˜๋ˆ ์–ด์ ธ ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์ด์—ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๊ฐ์ฒด ์•ˆ์˜ fetch()ํ•จ์ˆ˜๋Š” ๊ทธ๋ž˜ํ”„๋ฅผ ๊ทธ๋ฆฌ๊ธฐ ์œ„ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›๊ธฐ ์œ„ํ•ด ๊ตฌํ˜„ํ•œ ๊ฒƒ์ด์—ˆ๋‹ค.

์•„์‰ฌ์› ๋˜ ์ 
fetchํ•จ์ˆ˜๋ฅผ 3๋ฒˆ ์‹คํ–‰ํ•˜๊ณ  ์ฒซ ๋ Œ๋”๋ง ๋•Œ ์ฐจํŠธ ๋ฐ์ดํ„ฐ์™€ ์ข…๋ชฉ ๋ฐ์ดํ„ฐ๊ฐ€ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚˜๋Š” ๋กœ์ง์„ ๊ตฌํ˜„ํ•ด์•ผํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋กœ๋”ฉํ•˜๋Š”๋ฐ์— ์‹œ๊ฐ„์ด ๋งŽ์ด ๊ฑธ๋ ธ๋‹ค.
๋˜ํ•œ 2์ฃผ๊ฐ„์˜ ํ•œ์ •๋œ ์‹œ๊ฐ„์ด์—ˆ๊ธฐ ๋•Œ๋ฌธ์— web socket๊ฐ™์€ ์‹ค์‹œ๊ฐ„ ํ†ต์‹ ์„ ํ•˜๊ธฐ์—๋Š” ๋ฌด๋ฆฌ๊ฐ€ ์žˆ๋‹ค๋Š” ํŒ๋‹จ์ด ๋“ค์–ด, fetch๋ฅผ setInterval์„ ํ™œ์šฉํ•ด์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ธฐ์ ์œผ๋กœ ์š”์ฒญํ–ˆ๋‹ค. ์‹ค์‹œ๊ฐ„์ฒ˜๋Ÿผ ๋ณด์—ฌ์งˆ ์ˆ˜ ์žˆ๋„๋ก ์ฝ”๋“œ๋ฅผ ์งฐ๋‹ค.
๊ฐ€์žฅ ์•„์‰ฝ๊ณ  ์—ฌ์ „ํžˆ ์˜๋ฌธ์ด ๋“ค์—ˆ๋˜ ์ ์€ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด fetch ํ•จ์ˆ˜ ์ดํ›„ .then()๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ–ˆ์œผ๋‚˜ ์ฒซ ๋ Œ๋”๋ง ๋•Œ ๋ฐ์ดํ„ฐ๊ฐ€ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚˜์ง€ ์•Š์•˜๋‹ค๋Š” ์ ์ด์—ˆ๋‹ค. ๊ฒฐ๊ตญ ๋ช‡ ์‹œ๊ฐ„์˜ ์‚ฌํˆฌ ๋์— async, await์„ ์ถ”๊ฐ€ํ•˜์—ฌ ์›ํ•˜๋Š” UI๋ฅผ ๊ตฌํ˜„ํ–ˆ์œผ๋‚˜ ์—ฌ์ „ํžˆ ์ฐ์ฐํ•œ ๊ฐ์ด ๋‚จ์•„์žˆ๋‹ค.
๊ฐœ์ธ์ ์œผ๋กœ Refactoring์„ ํ•˜๋ฉด์„œ ๊ตณ์ด ๋‘ ๋ฒˆ(then, async/await) ๊ฒน์น˜๋Š” ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ํ•˜์ง€ ์•Š๊ณ ๋„ UI๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ์•„๋ด์•ผ๊ฒ ๋‹ค.

๐Ÿฅˆ Nav bar ํด๋ฆญ ์‹œ ์ƒ‰๊น” ๋ณ€ํ™” ๋ฐ ์ฃผ์‹ ์ฐจํŠธ, ์ข…๋ชฉsorting๊ธฐ๋Šฅ

Onclick={clickBtn}์˜ flow๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ตฌํ˜„ํ–ˆ๋‹ค.
1. ChartNav์˜ Onclick์ด๋ฒคํŠธ ๋ฐœ์ƒ
2-1). ํšŒ์ƒ‰ โž ๊ฒ€์€์ƒ‰ ์ƒ‰๊น” ๋ณ€ํ™”
2-2). Nav ์กฐ๊ฑด์— ๋”ฐ๋ผ ์ฃผ์‹ ์ฐจํŠธ, ์ข…๋ชฉ sorting

๊ฐ€์žฅ ๋จผ์ €, SORT_MAPPER๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•œ ํ›„

onClick Event๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ sort_mapper์˜ index์— ๋งž๊ฒŒ navColor state๋ฅผ ๋ฐ”๊พธ๊ณ , ๋ฆฌ์ŠคํŠธ๋ฅผ sorting ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋„๋ก ๋งŒ๋“ค์—ˆ๋‹ค.


onClick๋œ ๋ฒ„ํŠผ์˜ ์ƒ‰์ƒ์„ ๋ฐ”๊พธ๋Š” styled component

onClick Event ๋ฐœ์ƒ ์‹œ index ์กฐ๊ฑด์— ๋”ฐ๋ผ sortingํ•˜๋Š” changeListํ•จ์ˆ˜

๐Ÿ˜€์ข‹์•˜๋˜ ์ (์ด๊ฑฐ ํŠน๊ธ‰ ์นญ์ฐฌ์ด์•ผ)

1์ฐจ ํ”„๋กœ์ ํŠธ ๋•Œ ๋งŽ์€ ๋ถ€๋ถ„์—์„œ ์Šค์Šค๋กœ์—๊ฒŒ ์•„์‰ฌ์šด ๊ฒƒ์„ ๋Š๊ผˆ๊ณ , ๋” ์š•์‹ฌ๋‚ด๊ณ  ์ž˜ํ•ด๋ณด์ž๊ณ  ๊ฒฐ์‹ฌํ–ˆ๊ธฐ์— 2์ฐจ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ๋” ๋งŽ์€ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ณ ์ž ๋…ธ๋ ฅํ–ˆ๋‹ค.
๋˜ํ•œ ์Šค์Šค๋กœ ์ถฉ๋ถ„ํžˆ ๊ณ ๋ฏผํ•˜์ง€ ์•Š๊ณ  ํŒ€์›๋ถ„๋“ค์ด๋‚˜ ๋ฉ˜ํ† ๋‹˜๋“ค๊ป˜ ๋ฌผ์–ด๋ณด๊ธฐ๋ณด๋‹ค๋Š” ์Šค์Šค๋กœ ํ•ด๋‚ด๋ ค๋Š” ๋…ธ๋ ฅ์„ ๋งŽ์ด ํ–ˆ๋‹ค.
2์ฃผ๊ฐ„์˜ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋๋‚˜๊ณ  1์ฐจ ํ”„๋กœ์ ํŠธ ์ดํ›„์˜ ๋‚˜์™€ 2์ฐจ ํ”„๋กœ์ ํŠธ์˜ ๋‚˜๋ฅผ ๋น„๊ตํ•ด๋ณด๋‹ˆ ์ •๋ง ๋งŽ์ด ์„ฑ์žฅํ–ˆ๋‹ค๋Š” ๊ฒƒ์„ ๋Š๋ผ๊ฒŒ ๋˜์—ˆ๋‹ค.
๊ฐ€์žฅ ๋จผ์ €๋Š” ์‰ฝ๊ฒŒ ๋ˆ„๊ตฐ๊ฐ€๋ฅผ ์˜์ง€ํ•˜๊ธฐ๋ณด๋‹ค ์Šค์Šค๋กœ ํ•ด๊ฒฐํ•˜๋ ค๋Š” ์˜์ง€๋ ฅ์ด ๋งŽ์ด ๊ธธ๋Ÿฌ์กŒ์œผ๋ฉฐ, ๊ทธ์— ๋”ฐ๋ผ ๊ณ ๋ฏผํ•˜๋Š” ๊นŠ์ด๊ฐ€ ๋‹ฌ๋ผ์กŒ๋‹ค๋Š” ๊ฒƒ์„ ๋Š๋ผ๊ฒŒ ๋˜์—ˆ๋‹ค.(2์ฐจ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•จ๊ป˜ํ•œ ๋™๋ฃŒ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค๊ณผ ๋ฉ˜ํ† ๋‹˜๋“ค๋„ ๊ฐ™์€ ์นญ์ฐฌ์„ ํ•ด์ฃผ์…จ๋‹ค!!๐Ÿค—๐Ÿค—)
๋˜ํ•œ ๊ทธ๋ ‡๊ฒŒ ๋…ธ๋ ฅํ•˜๋‹ค๋ณด๋‹ˆ ์ฝ”๋”ฉ ์‹ค๋ ฅ๋„ 1์ฐจ ํ”„๋กœ์ ํŠธ์™€ ๋น„๊ตํ•ด์„œ ๋งŽ์ด ๋Š˜์—ˆ๋‹ค๋Š” ๊ฒƒ๋„ ๋Š๊ปด์กŒ๋‹ค.
์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด์„œ ์Šค์Šค๋กœ์— ๋Œ€ํ•œ ์ž์‹ ๊ฐ๋„ ๋งŽ์ด ์ฐพ๊ฒŒ ๋˜์—ˆ๊ณ  ์•„์‰ฌ์›€๋ณด๋‹ค๋Š” ๋ฟŒ๋“ฏํ•จ๊ณผ ๋Œ€๊ฒฌํ•จ์ด ๋งŽ์ด ๋‚จ์•˜๋˜ ๊ฒƒ ๊ฐ™๋‹ค.

๐Ÿคจ์•„์‰ฌ์› ๋˜ ์ 

1์ฐจ ํ”„๋กœ์ ํŠธ์™€ ๋น„์Šทํ–ˆ๋˜ ์ปค๋จธ์Šค ์‚ฌ์ดํŠธ์™€๋Š” ๋งŽ์ด ๋‹ค๋ฅธ ๊ฐ€์ƒํ™”ํ ์‚ฌ์ดํŠธ๋ฅผ cloning ํ•ด์•ผํ–ˆ๊ธฐ์— ์ฝ”๋“œ refactoring์— ์ง‘์ค‘ํ•˜๊ธฐ๋ณด๋‹ค๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š”๋ฐ ๋งŽ์€ ์‹œ๊ฐ„์„ ํˆฌ์žํ–ˆ๋‹ค.
์ด์— ๋”ฐ๋ผ ๋‚ด๊ฐ€ ์ž‘์„ฑํ–ˆ๋˜ ์ฝ”๋“œ๋ฅผ refactotingํ•˜๋Š” ๋ฐ์— ๋งŽ์€ ์‹œ๊ฐ„์„ ๋“ค์ด์ง€ ๋ชปํ–ˆ๋‹ค.

๋‚ด๊ฐ€ ์ƒ๊ฐํ•˜๋Š” ์ข‹์€ ์ฝ”๋“œ๋Š” ๋‹ค๋ฅธ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋ฅผ ๋ดค์„ ๋•Œ ๊ฐ€๋…์„ฑ์ด ์ข‹๊ณ  ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” refactoring์— ๋งŽ์€ ์‹œ๊ฐ„์„ ํˆฌ์žํ•˜์ง€ ๋ชปํ•œ ๊ฒƒ ๊ฐ™์•„์„œ ์•„์‰ฌ์› ๋‹ค. ๋น„๋ก 2์ฐจ ํ”„๋กœ์ ํŠธ๋Š” ๋์ด ๋‚ฌ์ง€๋งŒ ๊ธฐ์กด์— ์ž‘์„ฑํ–ˆ๋˜ ์ฝ”๋“œ๋ฅผ ์Šค์Šค๋กœ refactoringํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ์•ผ๊ฒ ๋‹ค.

๐Ÿ˜™Epilogue

1์ฐจ ํ”„๋กœ์ ํŠธ๊ฐ€ ๋๋‚˜๊ณ  ๋งŽ์€ ์•„์‰ฌ์›€์ด ๋‚จ์•˜๊ธฐ์— ๊ฒฐ์—ฐํ•œ ์˜์ง€(?)๋ฅผ ๊ฐ€์ง€๊ณ  2์ฐจ ํ”„๋กœ์ ํŠธ์— ์ž„ํ–ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ฒ˜์Œ 2์ฐจ ํ”„๋กœ์ ํŠธ ์ฃผ์ œ๊ฐ€ ๋ฐœํ‘œ๋œ ์ˆœ๊ฐ„์—๋Š” ์•ฝ๊ฐ„์˜ ์ ˆ๋ง๊ณผ ํ•จ๊ป˜ '๋‚ด๊ฐ€ ํ•  ์ˆ˜ ์žˆ์„๊นŒ? ๋‚˜ ๋•Œ๋ฌธ์— ํŒ€์›๋“ค์ด ํ”ผํ•ด๋ฅผ ์ž…์ง€ ์•Š์„๊นŒ?'๋ผ๋Š” ๋ถ€์ •์ ์ธ ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ์ฐจ๊ทผ์ฐจ๊ทผ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•˜๊ณ , ํ•˜๋‚˜ํ•˜๋‚˜์˜ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋ฉด์„œ ๋‘๋ ค์›€๋ณด๋‹ค๋Š” ์šฉ๊ธฐ๊ฐ€, ๋ถ€์ •์ ์ธ ์ƒ๊ฐ๋ณด๋‹ค๋Š” ๊ธ์ •์ ์ธ ์ƒ๊ฐ์ด ์ปค์ง€๊ฒŒ ๋˜์—ˆ๊ณ  ์–ด๋ ต๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋˜(์‹ค์ œ๋กœ ์ข€ ๋‚œ์ด๋„๊ฐ€ ์žˆ์—ˆ์ง€๋งŒ,,) 2์ฃผ๊ฐ„์˜ ํ”„๋กœ์ ํŠธ๋Š” ์„ฑ๊ณต์ ์œผ๋กœ ๋งˆ๋ฌด๋ฆฌํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

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

์•ž์œผ๋กœ ๊ธฐ์—…ํ˜‘์—…์ด๋ผ๋Š” 1๋‹ฌ๊ฐ„์˜ ์‹œ๊ฐ„์ด ๋‚ด๊ฒŒ ๋‚จ์•„์žˆ๋‹ค. ์ด ๊ธฐ๊ฐ„์—๋Š” ๊ทธ ๋™์•ˆ ์œ„์ฝ”๋“œ์—์„œ ์ง„ํ–‰ํ–ˆ๋˜ cloning ํ”„๋กœ์ ํŠธ์™€๋Š” ์ „ํ˜€ ๋‹ค๋ฅธ ๊ฒƒ์„ ํ• ์ง€๋„ ๋ชจ๋ฅด๊ฒ ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ 2์ฐจ ํ”„๋กœ์ ํŠธ์—์„œ ๋Š๋ผ๊ณ  ๋ฐฐ์› ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ ์ƒˆ๋กœ์šด ๋„์ „์„ ๋‘๋ ค์›Œํ•˜์ง€ ์•Š๊ณ  ์ฆ๊ธฐ๋ฉฐ, ํ•˜๋‚˜์”ฉ ํ•ด๊ฒฐํ•ด ๋‚˜๊ฐ€๋‹ค๋ณด๋ฉด ์ด์™€ ๊ฐ™์€ ์„ฑ์ทจ๊ฐ๊ณผ ๋ฟŒ๋“ฏํ•จ, ๊ทธ๋ฆฌ๊ณ  ์Šค์Šค๋กœ๊ฐ€ ์„ฑ์žฅํ•˜๋Š” ๋ชจ์Šต์„ ๋ณผ ์ˆ˜ ์žˆ์ง€ ์•Š์„๊นŒ.

๋งˆ์ง€๋ง‰์œผ๋กœ, ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ํ•จ๊ป˜ ํ–ˆ๋˜ ๊น€์ˆ˜์ •, ์†๋ณ‘์ง„, ์ตœ์˜ˆ์›, ์ตœ์ง€์„  ๋™๋ฃŒ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค์—๊ฒŒ ๊ฐ์‚ฌ์˜ ์ธ์‚ฌ๋ฅผ ์ „ํ•œ๋‹ค. ๋‚˜ ํ˜ผ์ž ํ–ˆ๋‹ค๋ฉด ์ ˆ๋Œ€ ๋ชป ํ–ˆ์„ ํ”„๋กœ์ ํŠธ์˜€์œผ๋‚˜ ์ข‹์€ ๋™๋ฃŒ ๊ฐœ๋ฐœ์ž๋ถ„๋“ค๊ณผ 'ํ•จ๊ป˜' ํ–ˆ์Œ์— 2์ฃผ๊ฐ„์˜ ๊ธฐ๊ฐ„์ด ์ •๋ง ์žฌ๋ฏธ์žˆ์—ˆ๊ณ  ์„ฑ๊ณต์ ์œผ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ˆ˜ํ–‰ํ–ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.
๋˜ํ•œ ์ฝ”๋“œ์˜ ์™„์„ฑ๋„์™€ ๋กœ์ง ๊ตฌํ˜„์— ๊ณ ๋ฏผ์„ ๊ฒช๊ณ  ์žˆ์„ ๋•Œ, ์˜†์—์„œ ๋„์›€์„ ์ฃผ์‹  ๋ฉ˜ํ† ๋‹˜๋“ค(ํŠนํžˆ ์ตœ์ค€๋ฉ˜ํ† ๋‹˜๐Ÿฅฐ)๊ป˜ ๊ฐ์‚ฌ์˜ ์ธ์‚ฌ๋ฅผ ์ „ํ•œ๋‹ค.
ํ•จ๊ป˜ํ•ด์„œ ์œ„์ฝ”๋“œ! ํ•  ์ˆ˜ ์žˆAbility!

profile
๋‚ด์‹ค ์žˆ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด ์˜ค๋Š˜๋„ ์ตœ์„ ์„ ๋‹คํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

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

comment-user-thumbnail
2020๋…„ 10์›” 30์ผ

๋‚˜๋„ ์˜ˆ์ฐฌ๋‹˜์ด๋ž‘ ํŒ€ํ• ๋ž˜

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ