์ด๋ฏธ ๋ง๋ค์ด ๋์ ๊ฐ๋ฐ ํ๊ฒฝ์ ์ดํดํ ์ ์์ด์. ์ฒ์๋ถํฐ ์ง์ ๊ฐ๋ฐ ํ๊ฒฝ์ ๋ง๋ค ์ ์์ด์.
๋ชจ๋์์คํ ์ ์ฌ์ฉํ๊ณ ๊ฐ๋ฐ ํ๊ฒฝ์ ์๋ํํ๋ ๋ฐฉ๋ฒ(Webpack)
์ต์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ ์ฌ์ฉํ๋ ํ๊ฒฝ ๋ง๋ค๊ธฐ(Babel)
๋๋ฃ์ ํ์ ํ๋ ๊ฐ๋ฐ ํ๊ฒฝ ๋ง๋ค๊ธฐ (ESLint, Prettier)
์นํฉ, ๋ฐ๋ฒจ, ๋ฆฐํธ ๊ฐ์ ํ๋ก ํธ์๋ ๊ธฐ์ ์ ์ดํดํ๊ณ ์ค๋ฌด์ ์ ์ฉํด ๋ณด์ธ์!
๋ง์ฝ ๊ทธ ํ ๋ช
์ด ํ์ ๋ ๋๋ค๋ฉด ์ด๋ป๊ฒ ๋ ๊น์? ์ด์ฉ๋ฉด ์ฌ๋ฌ๋ถ์ด ๊ทธ ํ ๋ช
์ด ๋์ด์ผ ํ ์ง๋ ๋ชจ๋ฆ
๋๋ค.
๊ฐ๋ฐํ์ ์ฌ๋ฌ๋ถ ํผ์๋ผ๋ฉด ์นํฉ ๊ตฌ์ฑํ๋ ๊ฒ์ ํผํ ์ ์๊ณ ์.
๊ฐ๋ฐ ํ๊ฒฝ ๊ตฌ์ฑ๋งํผ์ ๋ด ์์ผ๋ก ์ง์ ๋ค๋ฃฐ ์ค ์๋ค๋ฉด ์ด๋จ๊น์?
์ต์ํ ๋ค๋ฅธ ์ฌ๋์ด ๋ง๋ค์ด ๋์ ๊ตฌ์ฑ(์ด๋ฅผํ
๋ฉด create-react-app์ด๋ vue-cli๋ก ๋ง๋ ์ฝ๋)์ ์ฝ๊ณ ์ดํดํ ์ ์๋ ์ ๋๊ฐ ๋๋ค๋ฉด ํจ์ฌ ์์ ๊ฐ ์๊ฒ ์ผํ ์ ์์ ๊ฑฐ์์.
์นํฉ์ ๋น๋กฏํ ๋ฐ๋ฒจ, ๋ฆฐํธ, ํ๋ฆฌํฐ์ด ๋ฑ ํ๋ก ํธ์๋ ๊ฐ๋ฐ ํ๊ฒฝ์ ์๋ํํ๊ณ ์์ฑ์ฑ์ ๋์ฌ ์ค ์ ์๋ ๋๊ตฌ๋ค์ ์ตํ ์ ์๋ ๊ฐ์๋ฅผ ๋ง๋ค์์ต๋๋ค.
์ด๊ฒ์ ํตํด ๋์ฑ ์์ฐ์ฑ ์๊ฒ ์ผํ ์ ์๊ธฐ๋ฅผ ๊ธฐ๋ํฉ๋๋ค.
VSCode๋ฅผ ์ฌ์ฉํ์ง๋ง ํ์์ ์ฌ์ฉํ๋ ์๋ํฐ๋ IDE๊ฐ ์๋ค๋ฉด ๊ทธ๊ฒ์ ์ฌ์ฉํ์๋ ๊ด์ฐฎ์ต๋๋ค.
์ค์ต ์งํ์ ์ํด Git์ ์ค์นํด ์ฃผ์ธ์. ๊น ํ
์ ์ฌ์ฉํ๋ ์์
๋ ์๊ธฐ ๋๋ฌธ์ v2.3.0 ๋ฒ์ ์ด์์ ์ฌ์ฉํ์๊ธฐ ๋ฐ๋๋๋ค.
Q. ์ด ๊ฐ์๋ฅผ ์์ํ๊ฒ ๋ ๊ณ๊ธฐ๋ฅผ ์๊ฐํด์ฃผ์ธ์.
A. ํ๋ก ํธ์๋ ๊ธฐ์ ์ด ๋ฌด์ฒ ๋น ๋ฅด๋ค๊ณ ๋ ํ์ง๋ง ๊ทธ๋๋ ํ๋ฒ์ ์ ๋ฆฌํด ๋ณด๊ณ ์ถ์์ต๋๋ค. ์นํฉ๋ถํฐ ์์ํด์ ์ผํ๋ฉด์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ ๋๊ตฌ ๋ฉ๋ด์ผ์ ํ๋์ฉ ์ฝ์ด๋ณด๋ฉด์ ๋ธ๋ก๊ทธ์ ์ ๋ฆฌํ๋ ๋ด์ฉ์ด "ํ๋ก ํธ์๋ ๊ฐ๋ฐํ๊ฒฝ์ ์ดํด(์ด 5ํธ)"์ด๊ณ ์. ๊ทธ๋ฐ๋ค ์๋
2019๋
T์์นด๋ฐ๋ฏธ์์ ์ด ์ฃผ์ ๋ก ์ธ๋ฏธ๋๋ฅผ ์ด์๋๋ฐ ์์ธ๋ก ์ ์ฒ๋ผ ํ์๋ก ํ์๋ ๋ถ๋ค์ด ๋ง๋๋ผ๊ตฌ์. ๋ฐ์์ด ๊ด์ฐฎ์์ ๋ด์ฉ์ ๋ ๋ณด๊ฐํด์ ์ธํ๋ฐ์ ์จ๋ผ์ธ ๊ฐ์๋ฅผ ๊ฐ์คํ์์ต๋๋ค.
Q. ์ด ๊ฐ์๋ง์ ํน๋ณํ ์ฅ์ ์ด ์์๊น์?
A. ๊ฐ๋ฐํ๊ฒฝ์ด๋ผ๋ ์ฃผ์ ๊ฐ ์ค์ตํ๊ธฐ ์ข ์ด๋ ค์ธ์๋ ์์๊ฒ ๊ฐ์์. ๋ฉ๋ด์ผ๋ง ์ฝ์ด๋ณด๊ณ ์ง๋๊ฐ๊ธฐ์๋ ์ ๋ชจ๋ฅด๊ธฐ ๋๋ฌธ์ด์ฃ . ๊ทธ๋์ ๊ฐ ์ด๋ก ์์
๋ง๋ค ์กฐ๊ทธ๋ง ์ค์ต์ ์ค๋นํ์ต๋๋ค(์ค์ต ์ ์ฅ์: lecture-frontend-dev-env).์ด์ ๊ฐ์ "์ค์ต UI ๊ฐ๋ฐ๋ก ๋ฐฐ์๋ณด๋ ์์ javascript ์ VueJS ๊ฐ๋ฐ"์์ ๋ค๋ฃฌ ์ฝ๋๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ฌ๊ธฐ์ ๊ฐ๋ฐํ๊ฒฝ์ ๊ตฌ์ฑํ๋๋ก ๋จ๊ณ๋ณ๋ก ์ค์ต ๊ณผ์ ๋ฅผ ์ค๋นํ์ด์. ํ๋ํ๋ ํ์ด๋ณด๋ค๋ณด๋ฉด ์ด๋์ ๊ฐ๋ฐ ํ๊ฒฝ ๊ตฌ์ฑํ๋๊ฒ์ด ์์ ์ตํ์ง์ ์๋๋ก ๋ง์ด์ฃ .
Q. ์ด ๊ฐ์๋ฅผ ํตํด ์ด๋ค ์ผ์ ํ ์ ์๋์?
A. ํ์ฌ ์ฌ๋ฌ๋ถ์ด ๊ฐ๋ฐํ๊ณ ์๋ ํ๋ก์ ํธ์ ๊ฐ๋ฐํ๊ฒฝ์ ์ดํดํ ์ ์์๊ฑฐ์์. ํ์ํ๋ค๋ฉด ์ปค์คํฐ๋ง์ด์งํด์ ์์ฐ์ฑ์ ๋์ผ ์๋ ์๊ณ ์. ์ด์ ๋ง ํ๋ก์ ํธ๋ฅผ ์์ํ๋ ๋จ๊ณ์ธ๊ฐ์? ๊ทธ๋ผ ์
๋ง์ ๋ง๊ฒ ์ง์ ๊ฐ๋ฐ ํ๊ฒฝ์ ๊พธ๋ฉฐ๋ณผ ์๋ ์์ต๋๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
๋ฏธ๋ฆฌ ์ธํ ๋ ํ๊ฒฝ์์๋ง ๊ฐ๋ฐํด์ ์นํฉ์ด๋ ๋ฐ๋ฒจ ์ค์ ์ ๋์ ํ ๋ชจ๋ฅด๊ฒ ์ด์
์นํฉ์ ์จ ๋ณด๊ธด ํ๋๋ฐ ์ด๋ค ๋ฐฉ์์ผ๋ก ๋์ํ๋ ๊ฑด์ง ์๊ณ ์ถ์ด์
์ผ๊ด์ ์ธ ์ฝ๋ฉ ์ปจ๋ฒค์ ์ ์ ์งํ๊ณ ์ถ์๋ฐ ํ์ผ๋ก ์์ ํ๋ค ๋ณด๋ ์ ์ ๋ผ์
์ ์ ์ง์,
ํ์ํ ๊น์?
๊ธฐ์ด์ ์ธ ํ๋ก ํธ์๋ ๊ฐ๋ฐ ๊ฒฝํ์ด ํ์ํฉ๋๋ค. (์๋ฐ์คํฌ๋ฆฝํธ, HTML, CSS)
13,314
๋ช
์๊ฐ์
822
๊ฐ
์๊ฐํ
580
๊ฐ
๋ต๋ณ
4.8
์
๊ฐ์ ํ์
9
๊ฐ
๊ฐ์
์์
์ค ๊ถ๊ธํ ์ฌํญ์ ์ง๋ฌธ ์ฌํญ์ ์ฌ๋ ค์ฃผ์ธ์.
๋งค์ผ ํ ๋ฒ์ฉ ํ์ธํ๊ณ ๋ต๋ณ ๋๋ฆฌ๊ฒ ์ต๋๋ค.
์ ์ฒด
39๊ฐ โ (5์๊ฐ 2๋ถ)