2021/12/30
ํ์(X) ๊ทธ๋ฅ ๋ชฌ์คํฐ(O)
๋๋์ด ์ ์ญํ๋ค! ํ๊ต ๋ค๋ ๋๋ ์ ์ฒด๋ผ์ ๋ชป ๊ฐ๊ณ ์๋ค๊ฐ ์กธ์ ํ๊ณ ๋์์ผ ๊ฒจ์ฐ ์ฐ๋ง์ ์ ๋ํด์โฆ ๋๋์ด ์ ์ญ์ ํด๊ฐ ๋ฐ์์ต๋๋ค.
๋ฌผ๋ก ๊ตฐ์ํ ํ๋ฉด์๋ ๊พธ์คํ ์ฝ๋ฉ๋ ํ๊ณ , ์ผ๊ณผ ์๊ฐ ๋์ค ๋จ๋ ์๊ฐ์ ๊ฐ๋ฐ ์์ ์ฝ๊ณ , ์ถํด๊ทผ ๋๋ ํฐ์ผ๋ก ๋ธ๋ก๊ทธ ๊ธ๋ค์ ๊พธ์คํ ๋ด์์ง๋งโฆ ์ ์ญํ๊ณ ํ๋ ๊ณต๋ถ์ ์์ด ํจ์ฌ ๋ ๋ง๋ค๊ณ ๋๊ปด์ง๋ค.
์ฐ์
์์์ผ๋ก ์ ์งํ ๊น๋ ์๊ฐ์ ํด๋ดค์๋๋ฐ, ๊ทธ๋ฌ๊ธฐ์ ๊ทธ๋ ๊ทผ๋ฌด์ง๊ฐ ๋์์ง ์์์ ์ ์ฐฉํ๊ณ ์ถ์์๋ ๊ฒ ๊ฐ๋ค.
์ ๋ผ ์ด์ ๋์๊ฐ์ ๊ฒฝ๋ ฅ ์์
์ ์ฌ์ง์ ํ๋ถ + ๋์๋ฆฌ ์์ ์ ํ๋ก ํธ์๋ +
JS
๋ก ์คํ ๊ฐ๋ฐ์โฆ? ๊ฐ ๋์ด๋ฒ๋ ค์ ์๊ธด ๋ณ๋ช ์ ๋๋คใ ใ ใ ใ
์ผ๋จ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๋ค์ง๊ธฐ ์์ํ๋ค. ๋ณต๋ฌดํ๋ ๋์ ์ ๋ง ๋ง์ด๋ ๋ค๋ฅธ ๊ธธ๋ก ์์ ํด๋ณด๊ณ ์ถ์๋ ๊ฐ๋ฐ๋ค์ ํด๋ดค์ผ๋, ์ด์ ์ทจ์ค์ ํ์ํ ์คํฌ๋ค์ ๊ณต๋ถํ ๋๋ผ๊ณ ํ๋จํ๊ธฐ ๋๋ฌธ์ด๋ค.
๊ทธ๋ ๊ฒ ์ก์ ์ฑ ๋ค์
JS
๋ก๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive
React
๋ ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์
์ด๊ฒ์ด ์ทจ์
์ ์ํ ์ฝ๋ฉ ํ
์คํธ๋ค with ํ์ด์ฌ
์ด๋ ๊ฒ ๋์๊ฒ ๋ค.
์ด์ ๋ณด๋ ์ ์๋ถ๋ค์ด ๋ค ์คํ ๊ฐ๋ฐ์์ด์๋คโฆ
์๋ฐ์คํฌ๋ฆฝํธ Deep Dive
๋ ์๊ทผ๋ ๋์จ JS
์ฑ
๋ค ์ค์์ ์๋นํ ์ข์ ์ฑ
์ด์๋ค. ๊ทธ๋์ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์
๋ฌธ
์ด๋ ์๋ฐ์คํฌ๋ฆฝํธ ์๋ฒฝ ๊ฐ์ด๋
์ฑ
์ ์ฝ์ด๋ดค์์ง๋ง, ๋ฌธ๋ฒ๊ณผ ๊ฐ๋
์ฑ์ ๋ฉด์์ ์ด ์ฑ
์ ๋ฐ๋ผ์ฌ ์๋ ์๋ค.
es6
์ดํ์ es-next
์์ค์ ๋ค๋ฃจ๊ณ ์๊ณ , ์ฑ
์ ๋ณผ๋ฅจ๋ ์๋นํ๋ค. ์ฒ ํ์ด์ง ์ ๋ ๋์๋ ๊ฑธ๋ก.
๋ค๋ง ๋ค๋ฅธ ์ฑ ์ ๋นํด ๋ถ์กฑํ ๊ฑด, โ์์๊ฐ ๋๋ ์๊ณ ๋ฆฌ์ฆโ ๊ณผ โ์ฐ์ต ๋ฌธ์ โ ์ด๋ค. ๊ทธ๋์ ๋ญ๊ฐ ๊ณต๋ถ๋ฅผ ํ๋ค๊ณ ๋ฐ๋ก ์์ผ๋ก ์ฝ๋ฉ์ ํ๊ฑฐ๋ ํ๋ ๋ถ๋ถ์ด ์์ด์ ์ฐธ๊ณ ์๋ก์ ๊ธฐ๋ฅ๋ง์ ํ๋ค.
๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์
์ ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์ ์ ์งํํ ์ฑ
์ค ์ต๊ณ ๋ผ๊ณ ํ ์ ์๋ค. ๋ ๊ทธ๋์ ์ฝ์ด์จ ๋ค๋ฅธ ๋ฆฌ์กํธ ๊ธฐ์ ์์ ๋ค์ ๋ณด๋ฉดโฆ es5 ๋ฌธ๋ฒ์ ์ฌ์ฉํ๋ค๊ฑฐ๋ ํ
์ ๊ดํ ๋ด์ฉ์ ์๋ค๋ ์ง, ๊ทธ์ ๋ฐ๋ผํ๊ธฐ๋ง ํ๋ ํ์ง์ ์ฃผ์
์ด๋ผ๋ ์งโฆ ๋ฌด์๋ณด๋ค๋ ํ์ฐธ ์ง๋ ํจํค์ง ๋ฒ์ ์ ์ฌ์ฉํ๊ณ ์๋ ๊ฒ๋ค์ด ๋๋ฌด ๋ง์์ ์ด์ง๋ฌ์ธ ์ง๊ฒฝ์ด์๋ค.
ํ์ง๋ง ๋ฆฌ์กํธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์
์ ์ต์ ๋ฆฌ์กํธ ๊ธฐ์ ์ ๋ด๊ณ ์์ผ๋ฉด์๋ SSR
์ ๊ดํ ์ง์๋ ์๊ณ , ์ต์ ํ์ ๊ดํ ์ง์๋ ์๋ ค์ค๋ค! (์!)
๊ฒ๋ค๊ฐ ์คํ์๋ ์ ์๋ถ ๊นํ๋ธ์์ ์
๋ฐ์ดํธ๊ฐ ๋๋ค. A/S ๊น์ง ํ์คํ๋คใทใท
์ด ์ฑ
๋ ์ฒ ํ์ด์ง ์ ๋๋ก ๋ณผ๋ฅจ๋ ๋ง๊ณ , ๋ฐฐ์ธ ์ ์ด ๊ต์ฅํ ๋ง๋ค. ๋ฆฌ์กํธ ์ด๋ณด์ ํ๋
๋์! ๋๋ถ์ ํ์์์ธ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ๋ฅผ ๋ค๋ฃจ๋ ๊ธฐ์
์ ์ถฉ๋๊ตฌ๋งคํ๋ ค๋ค ๊ฒจ์ฐ ์ฐธ์๋ค. ์ง๊ธ์ ์ ๊ฑธ ๊ณต๋ถํ ๋๊ฐ ์๋๋๊นโฆ
๋จ์ ์ด๋ผ๊ณ ํ๋ค๋ฉด, ์ค์ต์์ ์ฐ์ด๋ ๋ฐฑ์๋ ํ๋ ์์ํฌ๊ฐ ์ทจํฅ์ ํ๋ค๋ ๊ฑฐ ์ ๋.
ํญ์ ์ฐ๋์ฐ๋์ฉ ๋ณด๋ ์ฑ โฆ ์ฝ๋ฉ ํ ์คํธ๋ฅผ ์์ฒญ ์ข์ํ์ง๋ ์๋์ง๋ผ ์ ์ ๋ณด๊ฒ ๋์๋ค. ์ง๊ธ๋ ๊ฐ๋ ์ด๋ก ๋ง ์ฝ์ด๋ณด๊ณ ๊ทธ๋ฅ ํ๋ก๊ทธ๋๋จธ์ค ๊ฐ์ ๋ฌธ์ ํ๊ณ ์๋ค.
์ฒ์์ ๊ณต๋ถํ ๋๋ ์ฑ
์ ๋์จ๋๋ก ํ์ด์ฌ
์ ์ฌ์ฉํ๋ค. ๊ทธ๋ฆฌ๊ณ ๋ฐฑ์ค์ด๋ solved.ac
์์๋ ๋๊ฐ์ด ํ์ด์ฌ
์ผ๋ก ๋ฌธ์ ๋ค์ ํ์๋ค.
๊ทธ๋ฌ๋ ์ด๋ ๋ , ๋ญ๊ฐ๋ฅผ ๊นจ๋ฌ์ ๋ฏ์ด ํ์ด์ฌ
์ ๋ฉ๋ฆฌํ๊ณ JS
๋ก ์๊ณ ๋ฆฌ์ฆ์ ํ๊ธฐ ์์ํ๋ค. ์ญ์ ์ฃผ๋ ฅ๊ธฐ๋ก ์ฝ๋ฉํ๋ ๊ฒ ๋ง์ด ํธํ๋ค.
ํ์ง๋ง ๊ทธ ๋๋ถ์ JS
์ธํ์ ๊ธฐ๋ณธ ์ง์ํ์ง ์๋ ๋ฐฑ์ค์ ๋ ๋๊ณ , ํ๋ก๊ทธ๋๋จธ์ค ๋ฌธ์ ๋ฅผ ํ๊ฒ ๋์๋คโฆ
์ฑ ์ ๊ทธ๋ฅ ์ฝ๋ฉ ๋ฌธ์ ๋ฅผ ์๋ ค์ฃผ๋ ๊ฒ ์๋๋ผ, ์ฌ๋ฌ ์๋ฃ๊ตฌ์กฐ์ ์๊ณ ๋ฆฌ์ฆ์ ์๋ ค์ค๋ค. ํ๋ถ ์์ ์ ๊ธฐ์ต์ด ์๋ก์๋ก ๋ ์ฌ๋ผ์ ๋ฐ๊ฐ์ ๋ค. ์ด๋ฏธ ๋ฐฐ์๋ณธ ๋ถ๋ถ์ด๋ผ ๋น ๋ฅด๊ฒ ํ์ด๋ณด๊ณ ๋ฌธ์ ๋ก ๋ค์ด๊ฐ๋๋ฐโฆ ์ด๋ ค์!! ๋ฌผ๋ก ์ง๊ธ์ ๊ทธ๋ฆฌ ์ ์ด๋ ต์ง๋ง, ์ฒ์ ๋ดค์ ๋ ์ด๋ ค์ ๋ค.
์ด ์ฑ ์ ๋จ์ ์ด๋ผ๊ณ ํ๋ค๋ฉด ์ญ์ ์ฑ ์ ํ๊ณ์๋ ๊ฐ์ ๊ฒ์ธ๋ฐ, ๋ฐ๋ก ์ฝ๋ฉ ๋ฌธ์ ์ ๋ํ ๋ต์ ํ๊ณ ํ ์คํธ ์ผ์ด์ค๋ ์๊ฐ ์ ํ์ ์ ์ ์๋ค๋ ๊ฒ์ด๋ค. ๊ทธ๋์ ์ด๋ป๊ฒ๋ ๋ต๋ง ๋ด๋ ๋ฐฉ์์ผ๋ก ํ๊ฒ ๋๋ ๋ถ์์ฉ์ ๋ณ์ ์ ์๋ค.
๋ง์ด ํ์์๋ค. ๋น์ฅ ๊ฐ์ ์ฝ์ด๋ผ. ๋์๊ฒ ์ฝ๋ฉ ์ํ๋ ๋ฒ์ ์๋ ค์ฃผ์ ํ๋ถ ์กฐ๊ต๋โฆ ์ด ์ฑ ์ ๋ณด๊ณ ์๋ ค์ฃผ์ ๊ฒ์ด์๊ตฐ์โฆ
์ฑ ์ ์์ฅ์๋ ์ฐ์ฌ์์ง๋ง ๊ฐ๋ณ๊ฒ ์ฝ๋ ์ฑ ์ด ์๋๋ค. ๋๋ ํ์ 2๊ฐ๋ ๋ค ์จ๊ฐ๋ฉด์ ์๋ ํ๋ค.
์์ฌ์ ๋ ์ ์, ๋ง์ง๋ง ์ค์ต? ํํธ๊ฐ java
๋ก ์ฐ์ฌ์๋ค๋ ์ โฆ JS
๋ฒ์ ๋ ๋ด์ฃผ์ธ์!
์์ ์ด ์๋ ์ธํฐ๋ท ๊ฐ์๋ ๋ธ๋ก๊ทธ๋ก ๋ฐฐ์ด ๊ฒ๋ ์๋ค. ์ฑ ๊ณผ๋ ๋ฌ๋ฆฌ ๋ณต๋ฌด ์ค๋ถํฐ ํด์จ ๊ฒ๋ค์ด ๋ง๋ค.
๋จผ์ ์นํฉ
์ ๋ํด ๊ฐ๋
์ ์ ๋ฆฌํ๋ค. ๊ณ๊ธฐ๋ ํ ์ค
์ ๊ฐ๋ฐ ์ปจํผ๋ฐ์ค. ์ด๋ ํ๋ ์ ํ
์ด์
์์ ๋งํ๊ธฐ๋ฅผ CRA
๋ฅผ ํตํด ์ค์บํด๋ฉํ ๋ฆฌ์กํธ๋ฅผ ๊ฒฐ๊ตญ ์น ๊ฐ์์๊ณ ์นํฉ ์ค์ ๋ถํฐ ๋ค์ ํ๊ฒ ๋์๋ค๊ณ โฆ
๊ทธ๋์ webpack
, babel
, eslint
, prettier
๋ฑ ๊ฐ๋ฐ ํ๊ฒฝ์ ๋ํด ๊ณต๋ถ๋ฅผ ํ์๋ค. ๊ทธ์ ๋ํ ์ค์ต์ผ๋ก CRA
์์ด ๋ฆฌ์กํธ ๊ฐ๋ฐ ํ๊ฒฝ ๊ตฌ์ฑํ๊ธฐ๋ ํด๋ณด์๋ค.
๊ฑฐ๊ธฐ์ ์ถ๊ฐ๋ก ๋ฆฌ์กํธ ๊ฐ๋ฐ ํ๊ฒฝ ๊ตฌ์ฑํ๋ ๊น์ RTK(Redux Tool Kit)
๋ ๊ณต๋ถํด๋ณด์๋ค. ๊ฝค ๊ต์ฅํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ผ ๋ค์์ ์ธ ๊ธฐํ๋ฅผ ๋ง๋ค๊ณ ์ถ๋ค.
ํ์
์คํฌ๋ฆฝํธ
๋ ๋นผ๋จน์ ์ ์๋ค. ์น์ผ๋ก๋ ๋ฐฐ์ฐ๊ณ , ์ํ ์ด๋ฒคํธ๋ก ๋ฐ์ ์์ ์ผ๋ก ๊ทผ๋ฌด์ง์์๋ ๊ณต๋ถํ๋ค. ์ข์ ํ์ดํ์ ํ๋ ๋ธ๋ก๊ทธ ๊ธ์ ๋ง์ด ์ฝ์๋๋ฐ, ๊ฐํ๋ง ํ๊ณ ๋ง์ด ํก์ํ์ง๋ ๋ชป ํ ๊ฑฐ ๊ฐ๋คโฆ
ํ์ดํ์ ํ๋ ์กฐ๊ธ ๋ฒ๊ฑฐ๋กญ์ง๋ง, ์๋์์ฑ์ด ์๋ฒฝํ๊ฒ ๋๋ ๊ฒ ์ ์ผ ๋ง์ ๋ ๋ค. ํ์ ๋ ์ ์ ๋ง์์ง๋ ๊ด๋ฆฌํ๊ธฐ, ๋ก์ง ์ง๋ ๊ฒ ํ๋ค์ด์ง๋ ๊ฒ ๋๊ปด์ง๋ค. ์ ์ ์ด๋ ค์์ง๋ ํ๋ก ํธ์๋ ์ ๊ณ๐ญ
ํ
์คํ
๋ ์กฐ๊ธ ๋ฐฐ์ ๋ค. ํ ์ค
์์ ๋ด์ค ๊ณผ์ ๋ฅผ TDD
๋ก ํด์ผํ๋ค๊ธธ๋, ๋ถ๋ฆฌ๋์ผ jest
๊ณต์ ๋ฌธ์ ์ฝ๊ณ ๊ฐ์ธ ํ์ ๋ ํด๋ณด๊ณ , FEConf
์์ ๋ฐํํ TDD
ํ๋ ์ ํ
์ด์
๋ ๋ณด๊ณ ๊ทธ๋ฌ๋ค.
ํ์ง๋ง ๊ณผ์ ๋ ๊ทธ ํ๋ก ํธ์๋๋ก ๋์จ ๊ฒ ์๋์๊ณ โฆ ์ฌ๊ธฐ๊น์ง๋ง ๋งํ๊ฒ ์ต๋๋ค.
์ ๋ฆฌํ ๋ ํฌ๋ ๋น๊ณต๊ฐ์ ๋๋ค^^
์ทจ์ค์ด๋ผ๊ณ ๋ ๋งํ์ง๋ง, ์ง๊ธ๋ ๊ทธ๋ ๊ณ ์ ๊ทน์ ์ผ๋ก ํ๊ณ ์์ง๋ ์์๋ค. ์ฌ๋ฌ๊ฐ์ง ์ด์ ๊ฐ ์๋๋ฐ,
๊ทธ๋์ ๋ค์ด๋ฒ, ์นด์นด์ค, ํ ์ค ๋ฑ๋ฑ ์ง์ ๊ธฐ๊ฐ์ด ์๋ ๊ณต์ฑ๋ค๋ง ์ง์์ ํ๋ค.
์ด 4๋ฌธ์ (3๋ฌธ์ ์๋).
์ด์ ๋ ๋ ๋ฌธ์ ๋ค์ ํ๊ณ ์์ผ๋ ํ ์ ์๊ฒ ์ง!!!
0์ ๊ดํ
๋๋ง ์ญ๋๊ธ์ผ๋ก ์ด๋ ค์ ์ดโฆ??
์ด 6๋ฌธ์
ํ๋ก๊ทธ๋๋จธ์ค์์ ์นด์นด์ค ์ฝํ ๋ฌธ์ ๋ค์ ๋ค ํ๊ณ ์๋ค!!!
3.5์ ๊ดํ
ํฌ์ฝโฆ ์๊ฐ ์ ํ ์ผ์ด์ค๋ง ๋๊ฒผ์ด๋
์ด 4๋ฌธ์
์ผ๋ฐ ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ๊ฐ ์๋๋ผ ํ๋ก ํธ์๋ ์ง์์ ํ์ฉํ๋ ๋ฌธ์ ๊ฐ ์ถ์ ๋์ด์ ์ ๊ธฐ
๊ทธ๋ฌ๋ ์ฒ์์ผ๋ก ๋ณธ ์ฝํ (์ ์ญ ๋ค์ ๋ )์ธ๋ฐ๋ค ์ค๋น ์์ด ๋ดค๋คโฆ
2์ ๊ดํ
๊ทธ๋ญ์ ๋ญ ์ค๋นํ ํธ
300/400 ์ ๋ง๊ณ ๊ดํ
์ด๋ฒ์๋ ์๊ฐ ์ ํ ๋ฌธ์ ๊ฐโฆ
์ด๋ฒ์ ํ๋ซํผ์ ๊ตฌ๋ฆ์ ์ผ๋๋ฐ ์โฆ js
์ธํ ์ง์์ด ์ ๋ผโฆ ํ๋ก๊ทธ๋๋จธ์ค ๋๋ ค์ค!!
์ด์ฌํ ์ค๋นํ๋ค. HackerRank
๋ฌธ์ ๋ ํ๊ณ , ํ๋ก๊ทธ๋๋จธ์ค ๋ฌธ์ ๋ ํ์๋ค!!
4๋ฌธ์ ์ฌ์(!!!)
๋ค ํ๊ณ ์ต์ ํ๋ ํ๊ณ 40๋ถ์ด๋ ๋จ๊ธฐ๊ณ ์ ์ถํ ์ง๋ผ ๊ธฐ์ ๋ง์์ผ๋ก ๋ฉด์ ์ ์ค๋นํ๊ณ ์์๋๋ฐ
์ฌ์์ธ๋ฐ ํ๋ฝ
๋์ฒด ์ด๋ค ์ธ์ฌ๋ฅผ ์ธํด์ผ๋ก ๋ฝ๊ธธ๋โฆ
ํ์ฌ ์งํํ์ด๊ธด ํ๋ฐ ๋ฌธ์ ๋ฅผ ๋ฐ๋ฐ์ ๋ชป ํ์ด์ ๊ธฐ๋๋ ํ์ง ์๋๋คโฆ
21๋ ๋๊น์ง๋ ๋๊ฒ ๋ค๊ณ ์ ์ธํด๋ ๊ฒ ์์ผ๋ ๋ด๋ ๋ถํฐ๋ ๊ผผ์ง์์ด ์ทจ์ค์ ํ ์ ๋ฐ์ ์๋ค. ์ฝํ ๊ณต๋ถ ๋น์ค์ ๋๋ฆฌ๊ณ , ์์ ์ง์๋ ์ฌ๊ธฐ์ ๊ธฐ ํด๋ด์ผ ํ ๋ฏ ํ๋ค.
ํ์ง๋ง ๋๋ ํ ์ด ํ๋ก์ ํธ๋ฅผ ํ๊ณ ์ถ์ ๊ฑธ
์ ๊ฐ๋๋๋ก ์ฐ๋ค๋ณด๋ ์ค๊ตฌ๋๋ฐฉ์ด ๋์ด๋ฒ๋ ธ๋ค. ๊ทธ๋ฆฌ๊ณ ์๋ฌด๋๋ ๊ธฐ์ต๋ ฅ ๋๋ฌธ์ธ์ง ์ต๊ทผ ์ผ๋ง ์ ์ด๋ฒ๋ ธ๋คโฆ ํ๊ณ ๋ฅผ 1๋ ์ 2๋ฒ ํด์ผํ๋โฆ?