์ฐํ ์ฝ 6๊ธฐ๊ฐ ์ ํ๋ ํ๋ฆฌ์ฝ์ค๋ถํฐ ์จ๋ณด๋ฉ ๊ธฐ๊ฐ๊ณผ ๋ ์ฐจ๋ก์ ๋ฏธ์ ์ ๋๋ธ ์ง๊ธ๊น์ง ๊ฒช์ ์ฐํ ์ฝ์ ์ด๋ค ์ฌ๋์ด ์ฐํ ์ฝ ํฌ๋ฃจ๊ฐ ๋ ๊น์ ๋ํ ๊ธ
์ฐํ ์ฝ 6๊ธฐ FE ํฌ๋ฃจ ๋ฐ๋ค์ "๋ก๋ ๊ฒ์"๋ฏธ์ ์ ๊ตฌํํ๋ฉด์ ๋ฐ์ํ ์ด์์ ํด๊ฒฐ๋ฐฉ๋ฒ๋ค, ์๊ฒ ๋ ์ ๊ณผ ๋๋ ์ ์ ๋ํ ์ด์ผ๊ธฐ
์๋ ํ์ธ์ ์ฐํ ์ฝ 6๊ธฐ FE ๋ฐ๋ค์ ๋๋ค!. ํ์ ์คํฌ๋ฆฝํธ, ์ปดํฌ๋ํธ, cypress๋ฅผ ํตํ E2Eํ ์คํธ๋ฅผ ์งํํ "์ ์ฌ ๋ญ๋จน์ง?"๋ฏธ์ ์ด ๋์ด ๋์ ๋ฏธ์ ์ ์งํํ๋ฉด์ ์๊ฒ ๋ ์ , ๊ฒช์ ์ด์์ ๋๋ ์ ๋ค์ ์ด์ผ๊ธฐ ํด๋ณด๋ ค ํฉ๋๋ค. ๐ซ๋ฏธ์ ์๊ฐ ๐ซ ๋ฏธ์ ์ ํ์ต ๋ชฉํ ์ด
์ด๋ฒ ์ฐํ ์ฝ 6๊ธฐ์์๋ ์ ์ฐ์ฑ ๊ฐํ ์คํฐ๋๊ฐ ์งํ๋๋ค.๋ ๋ฒจ1 ๋์์ ์ ์ ์ ์ฐ์ฑ ๊ฐํ ๋ชฉํ์ ์ด๋ฅผ ์ํ ์ ์ ๋ ธ๋ ฅ, ๊ทธ ๊ณผ์ ์ ๊นจ๋ฌ์์ ์ ๋ํด ์ด์ผ๊ธฐ๋ฅผ ํด๋ณด๋ ค ํ๋ค.๋ฐฉํ ์์ , ๋ํ๊ต ๊ณผ์ ๊ฐ ์๊ธฐ๋ฉด ํ์๋ค์ ํฌ๊ฒ ๋ ๊ฐ์ง ์ ํ์ ๋๋๋ค.๐จ๏ธ "์๊ฐ ์ฌ์ ๊ฐ ์๋๋ฐ ๋์ค
์๋ ํ์ธ์. ์ฐํ ์ฝ 6๊ธฐ FE ๋ฐ๋ค์ ๋๋ค! ๋ ๋ฒจ1์ ๋ง์ง๋ง ์ด์ ์ธ '์ํ ๋ฆฌ๋ทฐ'๋ฏธ์ ์ด ๋๋ฌ์ต๋๋ค.๐๐๐ ์ด๋ฒ ๋ฏธ์ ์ ํ์ต ๋ชฉํ๋ API ์ฐ๋๊ณผ ๋น๋๊ธฐ, UX์๊ณ ์ค์ผ๋ ํค, ๋ฌดํ ์คํฌ๋กค ๊ธฐ๋ฅ๊ณผ ์ํ ์์ธ์ ๋ณด ๋ชจ๋ฌ๋ ๊ตฌํํด์ผ ํ์ต๋๋ค. ๋ฏธ์ ๊ตฌํ ๐ฟ ์ํ ๋ฆฌ๋ทฐ
์ฐํ ์ฝ 6๊ธฐ FE ๋ฐ๋ค์ ํ ์ฝํก ํ๊ธฐ
์ฐํ ์ฝ 6๊ธฐ FE ๋ฐ๋ค์ '๋ ๋ฒจ2 ํ๋ก ํธ์๋ ๋ฏธ์ ํ๊ณ '
์ฐํ ์ฝ '๋ฆฌ๋ทฐ๋ฏธ'ํ(=์ฐํ ์ฝ ๋ ๋ฒจ3,4 ํํ๋ก์ ํธ๋ฅผ ํจ๊ปํ๊ฒ ๋ ํ)์ ํ๋ก ํธ์ํธ ๊ธฐ์ ์คํ์ผ๋ก emotion์ ์ฌ์ฉํ๊ฒ ๋์๋ค. ํํ๋ก์ ํธ์ด๋ค๋ณด๋ css ์์ฑ ์ ๋ ฌ์ ์ผ๊ด๋๊ฒ ํด์ผํ๋ค๋ ํ์์ฑ์ ๋๊ผ๋ค. css-in-js์ธ emotion์์ css ์์ฑ์ ์๋ ์ ๋ ฌํด
์ฐํ ์ฝ ๋ ๋ฒจ3 : ํ์ ์ ๋ถํฐ ํ๋น๋ฉ,1์ฐจ ๋ฐ๋ชจ๋ฐ์ด,ํด์ปคํค๊น์ง ํ๊ธฐ
์ฐํ ์ฝ ๋ฆฌ๋ทฐ๋ฏธํ์ด ์ฌ์ฉ์ ์ค์ฌ ๊ธฐ๋ฅ์ผ๋ก ์๋น์ค ๋น์ ์ ์คํํ ์ ์์๋, ์์ ์คํ๋ค์ ๋ํ ์ด์ผ๊ธฐ
์ฐํ ์ฝ ๋ ๋ฒจ3 ๋ฐฉํ ๋์, ํ๋ก์ ํธ ๋ฆฌํฉํ ๋ง์ ๋ชฐ์ ํ๋ ํ๊ธฐ
msw๋ฅผ ์ฌ์ฉํด ํ๋ก๋์ ์ฝ๋์ ํ ์คํธ ์ฝ๋์ด mock ์๋ฒ๋ฅผ ์ ์ฉํ๋ ๋ฐฉ๋ฒ
์ฐํ ์ฝ ๋ ๋ฒจ3 ๋น์, Codepipeline์ ํตํด ํ๋ก ํธ์๋ CD๋ฅผ ๊ตฌํํ ํ๊ธฐ ๊ธ
'๋ฆฌ๋ทฐ๋ฏธ'ํ ํ๋ก์ ํธ์์ ์น๊ณผ ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ ํ๊ดํ ๊ธฐ๋ฅ์ ๊ตฌํํ ํ๊ณ ๊ธ์ ๋๋ค
'์ฐ์ํํ ํฌ์ฝ์ค' ๋ ๋ฒจ4์ ํ๋ก ํธ์๋ ๋ฏธ์ ๊ณผ '๋ฆฌ๋ทฐ๋ฏธ' ํ๋ก์ ํธ์์ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์งํํ๋ฉฐ ๊ณต๋ถํ ๋ด์ฉ์ ์ ๋ฆฌํ ๊ธ - ์ฑ๋ฅ ์ต์ ํ ํ์์ฑ, ์ธก์ ๋๊ตฌ ๋ฐ ์ฑ๋ฅ ์ ํ ํด๊ฒฐ ๋ฐฉ๋ฒ
์ฐ์ํํ ํฌ์ฝ์ค' ๋ ๋ฒจ4์ ํ๋ก ํธ์๋ ๋ฏธ์ ๊ณผ '๋ฆฌ๋ทฐ๋ฏธ' ํ๋ก์ ํธ์์ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์งํํ๋ฉฐ ๊ณต๋ถํ ๋ด์ฉ์ ์ ๋ฆฌํ ๊ธ 2ํธ - Webpack์์ ์ฑ๋ฅ ์ต์ ํํ๊ธฐ
์ฝ 11๊ฐ์์ ์ฐ์ํํ ํฌ์ฝ์ค ๊ณผ์ ์ ๋ง์ณค๋ค. ์ฐ์ํํ ํฌ์ฝ์ค๋ ๊ฐ๋ฐ์๋ก์์ ๊ธธ์ ๋ํ ํ์ , ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ก์ ์ด๋ค ๊ธธ์ ๊ฐ์ผ ํ๋์ง์ ๋ํ ๋ฐฉํฅ์ฑ์ ์ป๊ณ ์ข์ ์ธ์ฐ๋ค์ ๋ง๋ ๋ป๊น์ ๊ฒฝํ์ด์๋ค. 4๋ฌ์ ํ ํ๋ก์ ํธ ๋ฏธ์ ์ด ์ข ๋ฃ๋์๋ค. ์ต์ข ๋ฐ๋ชจ๋ฐ์ด์์ UI/UX์ ๋