ํ๋ฆฌ์จ๋ณด๋ฉ ์ฝ์ค๊ฐ ์์๋์ง ๋ฒ์จ ์ผ์ฃผ์ผ ๋๊ฒ ์ง๋ฌ๋ค.
ํ๋ฆฌ์จ๋ณด๋ฉ์ ํฌ๊ฒ ๋ชจ์๋ฉด์ , ์ค์ค๋ก ๊ณต๋ถ, ํ ํ๋ก์ ํธ๋ก ๋๋ ์ ์๋ ๊ฒ ๊ฐ๋ค.
ํ๋ฆฌ์จ๋ณด๋ฉ์ codestates์ ํจ๊ป ํ๋๋ฐ ์ด ๊ธ์ ๋ณด์๋ ๋ค๋ฅธ ๋ถ๋ค์ ๋ค๋ฅธ ๊ต์ก ๊ธฐ๊ด๊ณผ ํ ํ๋ฅ ์ด ๋์๋ณด์ธ๋ค. ๊ทธ๋์ ์ด ํ๊ณ ๋ก์ ์ฐธ๊ณ ์ฉ์ผ๋ก๋ง ๋ณด์๋ฉด ๋ ๋ฏ ํ๋ค.
(๋ง์ฝ codestates๋ผ๋ฉด ์ด์ ๋น์ทํ ์ปค๋ฆฌํ๋ผ์ผ ์๋..)
์์๋ถํฐ OT๊ฐ ๋๋๊ณ ๋ฐ๋ก ๋ชจ์ ๋ฉด์ ์ด ์์ด ๋ถ๋ด๋ถ๋ด ๋ชจ์ ๋ฉด์ ์ง๋ฌธ ๋ฌธํญ๋ค์ ๋ณด๊ณ ๊ทธ์ ๋ํ ๋ต๋ณ๋ค์ ์ฐพ์๋ณด๊ณ ์ดํดํ๋ฉฐ ๋ฉด์ ์ ์ค๋นํ๋ค.
๋ชจ์ ๋ฉด์ ์ 1:1 ํ์ด ๋ฉด์ ์ผ๋ก ๋ฒ๊ฐ์ ๊ฐ๋ฉด์ ๋ฉด์ ๊ด, ๋ฉด์ ์ ์ญํ ์ ํ์๋ค.
์ฒซ๋ฒ์งธ ํ์ด๋ถ๊ป์ codestates์์ ๊ต์ก์ ๋ฐ์ผ์
์ ์ด๋ฐ ์ปค๋ฆฌํ๋ผ์ ์ต์ํ์
์ ์ฒ์ํ๋ ๋๋ฅผ ์ ์ด๋์ด์ฃผ์
จ๋ค.
์ง๊ธ๋ ๊ฐ์ฌํ๊ฒ ์๊ฐํ๋ค๐
wanted preonboarding์ ๋๊ฐ ๊ฐ๋ฅด์ณ์ฃผ๋ ๊ฒ์ด ์๋ ๊ฐ์ด๋๋ผ์ธ๋ง ์ ์ํ๊ณ ๊ทธ์ ๋ฐ๋ผ ์ค์ค๋ก ํ์ตํ๊ณ ๋ถ๊ฐ์ ์ธ ๋ด์ฉ๋ ์ค์ค๋ก ์ฐพ์๋ณด๋ฉฐ ๊ณต๋ถํ๋ ์์คํ
์ด๋ค.
๋ฌด์ธ๊ฐ๋ฅผ ๋ฐฐ์ฐ๊ณ ์ถ์ด์ ํ๋ฆฌ์จ๋ณด๋ฉ์ ์ ์ฒญํ๋๋ฐ ๋ง์ ์ค์ค๋ก ํ์ตํ๋ ๋ฅ๋ ฅ์ ๊ธฐ๋ฅด๊ณ ์์ ์ ์ญ๋์ ๋ฐ๋ผ ํ์ตํ๋ ๊ฒ์ด์๋ค. ๊ทธ๋๋ ๊ฐ์ด๋๋ผ์ธ์ ์ ์ํด์ฃผ์ด์ ๋คํ์ด์๋ค..
์ค๋๋ง์ ์ค์ค๋ก ๊ณต๋ถํ๋ ค๋๊น ์๊ฐ์ด ์ค๋๊ฑธ๋ฆฌ๋ ๋ฏํ๋ค,, ๊ณต๋ถํ๋ค๊ฐ ๋ชจ๋ฅด๋ ๊ฐ๋
์ด ์์ผ๋ฉด ๊ทธ ๊ฐ๋
์ ๋ํด์ ๊ตฌ๊ธ๋งํ๊ณ ๋ ๊ฑฐ๊ธฐ์ ๋ชจ๋ฅด๋ ๋ด์ฉ์ด๋ฉด ๋ ๊ตฌ๊ธ๋งํ๋.. ๋ฌดํ ๋ฃจํ์ ๋น ์ง๋ ๊ฒ ๊ฐ๋ค.
์์ต์๊ฐ์ด ๋ง์ด ์ฃผ์ด์ง ๊ฒ์ด ์๋์ฌ์ ๋น ๋ฅด๊ฒ ์ต๋ํ๊ณ ๋ชจ๋ฅด๋ ๋ด์ฉ์ ๋ฐ๋ก ์๊ฐ์ ๋ด์ ์ฐพ์๋ณด๋ฉด์ ๊ณต๋ถํ ์ ์๋๋ก ์ดํดํ์ง ๋ชปํ ๋ด์ฉ์ ํค์๋๋ฅผ ์ด๋์ ์ ์ด๋์ผ๋ฉด์ ๊ณต๋ถํด์ผ๊ฒ ๋ค๋ ์๊ฐ์ด ๋ค์๋ค.
(๋์ค์ ๊ผญ ์ฐพ์๋ณด๋ฉด์ ๊ณต๋ถํ์)
ํ๋ฆฌ์จ๋ณด๋ฉ์ ์ง์ํ ์ด์ ์ค ๊ฐ์ฅ ํฐ ์ด์ ์ด๋ค. ํ ํ๋ก์ ํธ๋ฅผ ํ๊ณ ์ถ์๋ค. ํ์ง๋ง ์ฌ๋ฌ ๋์ธ ํ๋์ด๋ ๋์๋ฆฌ๊ฐ์ ๊ณณ์ ์ง์ํ์ฌ ํ ์ ์์์ง๋ง, ์ฉ๊ธฐ๊ฐ ์์๋ค.. ์ฉ๊ธฐ๋ณด๋ค ์์ง๊ฐ ์์๋ค๊ณ ๋ ๋ณผ ์ ์์ ๊ฒ ๊ฐ๋ค. ์กฐ๊ธ ๋ ๋๊ณ ์ถ์ ์๋ง์ด..
ํ ํ๋ก์ ํธ๋ ์ผ์ฃผ์ผ์ 2๊ฐ์ ํ๋ก์ ํธ๋ฅผ ์์ฑํด์ผํ๋ค. ์ฒ์ ํ๋ก์ ํธ 2๊ฐ๋ฅผ ํด์ผํ๋ค๊ณ ๋ค์์ ๋, ์ง์์ ์ ํ๊ฑด๊ฐ.. ๋ด๊ฐ ํ ์ ์์๊น.. ๋ผ๋ ์๊ฐ์ด ๋จผ์ ๋ค์๋ค.
์ฒซ ํ๋ก์ ํธ๋ Vue.js๋ฅผ ์ฌ์ฉํ์ฌ ์ฐจํธ ๊ด๋ จ ํ์ด์ง๋ฅผ ๊ตฌํํ๋ ๊ฒ์ด์๋ค.
ํญ์ React๋ง ๊ณต๋ถํด์๋๋ฐ ๊ฐ์๊ธฐ Vue๋ฅผ ์ฌ์ฉํ๋ผ๊ณ ํด์ ์ถฉ๊ฒฉ์ด์๋ค. ๋ถ๋ด๋ถ๋ด ํ์๋ค๊ณผ vue์ ๋ํด์ ๊ฐ๋ตํ๊ฒ ๋ณด๊ณ ๋ฐ๋ก ํ๋ก์ ํธ๋ฅผ ์์ํ๋ค.
vue๋ react์ props๋ฅผ ์ ๋ฌํ๋ ๋ฒ๊ณผ ๋ ๋๋งํ๋ ๋ถ๋ถ์ด ๋ค๋ฅธ ๊ฒ ๊ฐ๋ค. vue ์ react์ ์ฐจ์ด์ ์ ๋์ค์ ํ๋ฒ ์ ์ด๋ด์ผ๊ฒ ๋ค.
์ฐจํธ๋ฅผ ๊ทธ๋ฆฌ๋ ๊ฑด vue-chartjs๋ฅผ ์ฌ์ฉํ๋๋ฐ ๋ฌด์ธ๊ฐ ๋ง์ด ๋ถ์น์ ํ Docs์ธ ๊ฒ ๊ฐ์๋ค. ์ํ๋ ๋ถ๋ถ์ customํ๊ณ ์ถ์๋๋ฐ ๊ทธ ๋ถ๋ถ์ ์ฐพ๊ธฐ ์ด๋ ค์ ์๋ค. ๋ํ ์์ด๋ก ๋์ด์์ด์ docs api๋ฅผ ์ฝ์ผ๋ฉด์ ์ ์ ์ ์ ์ด ํผ๋ฏธํด์ก๋ค..
์ด์ฐ์ด์ฐ ์ฐจํธ๋ ๊ตฌํํ๊ณ ๋ฐ์ดํฐ๋ ์ ์ ๋ฌํ๋ฉด์ ํ์๋ค์ด ํ ๋ถ๋ถ๊ณผ ํฉ์น๋ฉด์ ์์ฑ์์ผฐ๋ค.
์์ฑ์ํค๊ณ ๋ณด๋ ์์ธ๋ก ํ ๋ง ํ๋ค๊ณ ๋๊ผ๋ค.
์ฒซ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ํ์๊ณผ github๋ ํ์
์ผ๋ก ์ฐ๊ณ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ด๋ จ docs๋ ์ง์ ์ฐพ์๋ณด๋ฉด์ ํ๋ ์์ผ๋ก ์ด๋ป๊ฒ ํ๋ก์ ํธ๋ฅผ ํด์ผํ ์ง ํ์ด ์กฐ๊ธ์ ์กํ๊ฐ๋ค.
๋๋ฒ์งธ ํ๋ก์ ํธ๋ ๋คํ์ด React๋ก ํด์์ง ๊ด๋ จ API๋ฅผ ์ฌ์ฉํด ๋ฉ๋ชจ ์ดํ๋ฆฌ์ผ์ด์
์ ๋ง๋๋ ํ๋ก์ ํธ์๋ค. API๋ฅผ ๋ถ๋ฌ์ค๋ฉด์ CORS ์ค๋ฅ๊ฐ ๋ฒ๋ฒํ ์ผ์ด๋๋๋ฐ ๋๋ฒ์งธ ํ๋ก์ ํธ ํ์ฅ๋๊ป์ Next.js๋ฅผ ์ ์ํ์
จ๋ค. Next.js๋ ๋ค์ด๋ณด๊ธฐ๋ง ํ์ง ์จ๋ณธ์ ์ด ์๋๋ฐ ์ญ์ ํ ํ๋ก์ ํธ๋ฅผ ํ๋ฉด์ ์๋ก์ด ๊ธฐ์ ์ ๋น ๋ฅด๊ฒ ์ต๋ํ๊ณ ์ ์ฉํ๋ ๊ฒ์ด ์ฑ์ฅ์ ํฐ ๋์์ด ๋ ๊ฒ์ด๋ผ ์๊ฐํ๋ค.
ํ๋ก์ ํธ์์๋ LocalStorage ๋ถ๋ถ์ ๋งก์๋ค. LocalStorage์ ์ ์ฅํ๊ณ ์ ์ฅํ ๊ฐ์ ์์ ํ๋ฉด ๋๊ฒ ์ง๋ผ๊ณ ์ฝ๊ฒ ์๊ฐํ๊ณ ์ ๊ทผํ์ง๋ง.. LocalStorage์ value์ ํ์
๋๋ฌธ์ ํฐ ๊ณ ์์ ํ๋ค..
๋ํ ์ญ์ ๊ฐ์ ๊ฒฝ์ฐ, ํน์ value ๊ฐ๋ง ์ญ์ ํ๊ณ ์ถ์๋๋ฐ LocalStorage์ ์ญ์ ๊ธฐ๋ฅ์ key๋ฅผ ํตํ ์ญ์ ๊ธฐ๋ฅ๋ฐ์ ์์ด value๋ฅผ ์ญ์ ํ๋๋ฐ ๋ ๋ง์ ์๊ฐ์ ํฌ์ํ๋ค.
๋๋ฒ์งธ ํ๋ก์ ํธ๋ ์ด์ฐ์ ์ฐ ํ๋ค๋ณด๋ ๊ตฌํ์ด ๋์๊ณ LocalStorage์ ์ ์ฅ, ์ญ์ , ์์ ์ด ์ ๋๋๊ฑธ ๋ณด๋ ์์ฌ์ด ๋์๋ค.
์ค๊ฐ ๊ณผ์ ์์ ํ์๋ค์ ๋์์ ๋ง์ด ๋ฐ์ ์์ง ๋ถ์กฑํ ์ ์ด ๋ง๋ค๊ณ ๋๊ปด์ก๋คใ
ใ
์์ง 4~5์ฃผ๊ฐ ๋ ๋ง์ ํ๋ก์ ํธ์ ๊ณต๋ถ๋ฅผ ํตํด ๋น ๋ฅด๊ฒ ์ฑ์ฅํ๊ณ ์ถ๋ค. ์ฑ์ฅํด์ ํ์๋ค์๊ฒ ๋ง์ ๋์์ ์ค ์ ์๋ ํ์์ผ๋ก ์ฑ์ฅํ๊ณ ์ถ๋ค.