- 2020.10.5 - 2020.10.16
- JavaScript(ES6+)
- React hooks
- Routes.js
- Styled Components
- Git
- HighCharts Library
- Frontend Engineer : 3๋ช
(์๋ณ์ง, ์ต์์, ํ์์ฐฌ)
- Backend Engineer: 2๋ช
(๊น์์ , ์ต์ง์ )
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๋ฅผ ๊ตฌํํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ฐพ์๋ด์ผ๊ฒ ๋ค.
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ํ๋ ์๊ฐ์ ๊ฐ์ ธ์ผ๊ฒ ๋ค.
1์ฐจ ํ๋ก์ ํธ๊ฐ ๋๋๊ณ ๋ง์ ์์ฌ์์ด ๋จ์๊ธฐ์ ๊ฒฐ์ฐํ ์์ง(?)๋ฅผ ๊ฐ์ง๊ณ 2์ฐจ ํ๋ก์ ํธ์ ์ํ๋ค. ๊ทธ๋ฌ๋ ์ฒ์ 2์ฐจ ํ๋ก์ ํธ ์ฃผ์ ๊ฐ ๋ฐํ๋ ์๊ฐ์๋ ์ฝ๊ฐ์ ์ ๋ง๊ณผ ํจ๊ป '๋ด๊ฐ ํ ์ ์์๊น? ๋ ๋๋ฌธ์ ํ์๋ค์ด ํผํด๋ฅผ ์ ์ง ์์๊น?'๋ผ๋ ๋ถ์ ์ ์ธ ์๊ฐ์ด ๋ค์๋ค.
๊ทธ๋ฌ๋ ์ฐจ๊ทผ์ฐจ๊ทผ ๋ ์ด์์์ ๊ตฌ์ฑํ๊ณ , ํ๋ํ๋์ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ฉด์ ๋๋ ค์๋ณด๋ค๋ ์ฉ๊ธฐ๊ฐ, ๋ถ์ ์ ์ธ ์๊ฐ๋ณด๋ค๋ ๊ธ์ ์ ์ธ ์๊ฐ์ด ์ปค์ง๊ฒ ๋์๊ณ ์ด๋ ต๋ค๊ณ ์๊ฐํ๋(์ค์ ๋ก ์ข ๋์ด๋๊ฐ ์์์ง๋ง,,) 2์ฃผ๊ฐ์ ํ๋ก์ ํธ๋ ์ฑ๊ณต์ ์ผ๋ก ๋ง๋ฌด๋ฆฌํ ์ ์์๋ค.
์ด๋ฒ 2์ฐจ ํ๋ก์ ํธ๋ ๋ ๋ค๋ฅธ ์๋ก์ด ๊ฒ๋ค์ ๋ง์ด ๋ฐฐ์ฐ๋ ์๊ฐ์ด์๋ค. ๊ฐ์ฅ ๋ง์ด ๋ฐฐ์ ๋ ์ ์ ์ค์ค๋ก์ ๋ํ ๋ฏฟ์์ด์๋ ๊ฒ ๊ฐ๋ค. ์คํํ๊ธฐ์ ์์ ์ง๋ ๊ฒ์ ๋จน๊ฑฐ๋, ๋ถ์ ์ ์ธ ์๊ฐ์ผ๋ก ์ค์ค๋ก๋ฅผ ํํํ๊ธฐ๋ณด๋ค๋ ๋ฌต๋ฌตํ๊ฒ ๋ด๊ฐ ํ ์ ์๋ ๊ฒ๋ค์ ํ๋์ฉ ํด๊ฒฐํ๋ค๋ณด๋ฉด ์ด๋ ์ ๋ชฉ์ ์ง์ ๋ค๋ค๋ฅด๋ ๊ท์คํ ๊ฒฝํ์ ํ๋ค.
์์ผ๋ก ๊ธฐ์ ํ์ ์ด๋ผ๋ 1๋ฌ๊ฐ์ ์๊ฐ์ด ๋ด๊ฒ ๋จ์์๋ค. ์ด ๊ธฐ๊ฐ์๋ ๊ทธ ๋์ ์์ฝ๋์์ ์งํํ๋ cloning ํ๋ก์ ํธ์๋ ์ ํ ๋ค๋ฅธ ๊ฒ์ ํ ์ง๋ ๋ชจ๋ฅด๊ฒ ๋ค. ๊ทธ๋ฌ๋ 2์ฐจ ํ๋ก์ ํธ์์ ๋๋ผ๊ณ ๋ฐฐ์ ๋ ๊ฒ์ฒ๋ผ ์๋ก์ด ๋์ ์ ๋๋ ค์ํ์ง ์๊ณ ์ฆ๊ธฐ๋ฉฐ, ํ๋์ฉ ํด๊ฒฐํด ๋๊ฐ๋ค๋ณด๋ฉด ์ด์ ๊ฐ์ ์ฑ์ทจ๊ฐ๊ณผ ๋ฟ๋ฏํจ, ๊ทธ๋ฆฌ๊ณ ์ค์ค๋ก๊ฐ ์ฑ์ฅํ๋ ๋ชจ์ต์ ๋ณผ ์ ์์ง ์์๊น.
๋ง์ง๋ง์ผ๋ก, ์ด๋ฒ ํ๋ก์ ํธ๋ฅผ ํจ๊ป ํ๋ ๊น์์ , ์๋ณ์ง, ์ต์์, ์ต์ง์ ๋๋ฃ ๊ฐ๋ฐ์๋ถ๋ค์๊ฒ ๊ฐ์ฌ์ ์ธ์ฌ๋ฅผ ์ ํ๋ค. ๋ ํผ์ ํ๋ค๋ฉด ์ ๋ ๋ชป ํ์ ํ๋ก์ ํธ์์ผ๋ ์ข์ ๋๋ฃ ๊ฐ๋ฐ์๋ถ๋ค๊ณผ 'ํจ๊ป' ํ์์ 2์ฃผ๊ฐ์ ๊ธฐ๊ฐ์ด ์ ๋ง ์ฌ๋ฏธ์์๊ณ ์ฑ๊ณต์ ์ผ๋ก ํ๋ก์ ํธ๋ฅผ ์ํํ๋ ๊ฒ ๊ฐ๋ค.
๋ํ ์ฝ๋์ ์์ฑ๋์ ๋ก์ง ๊ตฌํ์ ๊ณ ๋ฏผ์ ๊ฒช๊ณ ์์ ๋, ์์์ ๋์์ ์ฃผ์ ๋ฉํ ๋๋ค(ํนํ ์ต์ค๋ฉํ ๋๐ฅฐ)๊ป ๊ฐ์ฌ์ ์ธ์ฌ๋ฅผ ์ ํ๋ค.
ํจ๊ปํด์ ์์ฝ๋! ํ ์ ์Ability!
๋๋ ์์ฐฌ๋์ด๋ ํํ ๋