October 09, 2020
๐์ ํ๋ธ ํด๋ก ์ฑ๋ฆฐ์ง 3๊ธฐ๋ฅผ ์กธ์ ํ์ต๋๋ค!๐
์กธ์ ํ์ง๋ ํ 6๊ฐ์ ์ ๋ ์ง๋ฌ์ง๋ง ์ธ์คํ๊ทธ๋จ์ ๋จ๊ฒจ๋์ ํ๊ธฐ๋ฅผ ๋์๊ธฐ๋ฉฐ ์ ํ๋ธ ํด๋ก ์ฑ๋ฆฐ์ง ํ๊ธฐ๋ฅผ ์จ๋ณด๋ คํฉ๋๋ค! ๊ทธ๋ผ ๊ณ ๊ณ ๐จ
์ด๋ฒ ์ ํ๋ธ ํด๋ก ์ฑ๋ฆฐ์ง์์๋ Javascript
๋ก ํ๋ก ํธ๋ฅผ, nodejs
๋ก ๋ฐฑ์๋๋ฅผ ๊ตฌํํ๋ค! ์ฒ์ ์ ํ nodejs ์ธ๊ณ๋ ์ ๋ง ํผ๋์ค๋ฌ์ ๋ค๐ฑ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฆฐ์ง ๋๋ ๋ก์ง์ ์ง๊ณ ๊ทธ๊ฒ์ ๊ทธ๋๋ก ๊ตฌํํ๊ธฐ๋ง ํ๋ฉด ๋๋๋ฐ morgan, body-parser, babel, pug, mongoose ๋ฑ ๋ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ธ ์ค ์์์ผ ํ๋ค. ์ง๊ธ์ด์ผ pug๋ ํ
ํ๋ฆฟ, mongoose๋ ์ฝ๋๋ก ๋ฐ์ดํฐ๋ฒ ์ด์ค ์กฐ์ ๋ฑ ๊ฐ๊ฐ์ ์ฉ๋๋ฅผ ์์ง๋ง ์ฒ์ ์์ํ ๋น์ โ์ด ๋ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ค ์์์ผํ๋ค๊ณ ?โํ๊ณ ๊ฒ์ ๋ง์ด ๋จน์์๋ค.
์ฒ์ ๋ณด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ตํ๋ ๊ฒ๋ ํ๋ค์์ง๋ง 6์ฃผ ๋์ ๋์ ์์ด ๋์ค๋ ๊ณผ์ ๊ฐ ์ ๋ง ํ๋ค์๋ค. ์ ๋ง ๋คํ์ธ ๊ฑด 6์ฃผ ๋์์ ์ฑ๋ฆฐ์ง์ฌ์ ํด์ฆ
์ ๊ตฌํ๊ณผ์
๊ฐ ์ ์ ํ ์์ฌ์ ๋์๋ค. ๋ฉฐ์น ๋์์ ๊ตฌํ๊ณผ์
๋ก ์ฌ์ ์ด ์ง์ณ์์ ๋ ํด์ฆ
๊ฐ ๊ณผ์ ๋ก ๋์ค๋ฉด ์ ๋ง ํ๋ณตํ์๋ค๐
3์ผ ๊ณผ์ ๋ฅผ ํ์๋ ๋ถ์ด ์์ผ์๋ค๋ฉด ๊ผญ ๋ฏธ๋ฆฌ๋ฏธ๋ฆฌ ํ์ธ์ฉ๐ฅ
๊ทธ ์ค ๊ฐ์ฅ ๊ธฐ์ต์ ๋จ๋ ๊ณผ์ ๊ฐ ์๋๋ฐ 3์ผ ๊ณผ์ ์๋ค. ํ ๋ฒ ์ฑ ๋ณด๊ณ โ์ค ํ๋ ๊ฑฐ๋ ๋น์ทํ๋คโํ๊ณ ๋ง์ง๋ง ๋ ๋ชฐ์์ ํ๋๋ฐ.. ๊ฒฐ๊ตญ ์๋ฒฝ๊น์ง ๊ณผ์ ๋ฅผ ํ๊ฒ ๋์๋ค. ํ๋ ๊ฒ๊ณผ ๋น์ทํ์ง๋ง์ GET, POST์ ์ฐจ์ด, ๊ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ชฉ์ ์ ์ดํดํ์ง ๋ชปํ๋ฉด ์ง๊ธฐ๊ฐ ํ๋ค์๋ค. ๊ทธ๋๋ ๊ตฌ๊ธ๋ง + ๊ฐ์ ๋ณต์ต
์ผ๋ก ์๋ฒฝ 4์์ฏค์ ๊ณผ์ ๋ฅผ ๋๋๋ค.
6์ฃผ๊ฐ์ ๋์ฅ์ ์ ๊ฑฐ์ณ ์ ํ๋ธ ํด๋ก ์ ์ฑ๊ณตํ์๋ค!
์ฑ๋ฆฐ์ง๊ฐ ๋๋๊ณ โ์น์ฌ์ดํธ ํ๋ ์ฏค์ด์ผ ๋ง๋ค ์ ์๋คโ๋ ์์ ๊ฐ๊ณผ โ์น์ฌ์ดํธ ๋ง๋๋ ๊ฒ ์ด๋ ๊ฒ ์ด๋ ต๋ค๊ณ ?โํ๋ ๊ณตํฌ๊ฐ์ด ํผ์ฌํด์์๋ค. ์ง๊ธ์์ ๋ณด๋ฉด ์ ๋ง ๋น์ฐํ ๊ฒ์ด ์ด๋ค ํ๋ ์์ํฌ๋ ์ฌ์ฉํ์ง ์์๊ธฐ ๋๋ฌธ์ ์ฌ์ดํธ ๋ง๋๋ ๊ฒ ์ด๋ ค์ธ ์ ๋ฐ์ ์๋ค. ํ๋ก ํธ๋ก react
๋ฅผ ์ฐ๋ฉด ํจ์ฌ ๋ ๊ฐ๋จํ ์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์๋๋ฐ ๊ทธ ๋น์์๋ react
์ ์กด์ฌ๋ฅผ ๋ชฐ๋๋ ํฐ๋ผ ๋ง์ด ๊ณตํฌ์ค๋ฌ์ ๋ค๐ฑ
๊ทธ๋ฆฌ๊ณ JavaScript์ ์๋์ฐ ์ด์์ฒด์ ์ ๋ํ ๋นก์นจ๐ข๋ ์์๋ค. โ๋ ์ต๋ํ ์ปดํ์ผ์ด ์ฑ๊ณตํ๋๋ก ๋
ธ๋ ฅํ๋คโ๋ JavaScript์ ๋
ธ์ค๋ ฅ ๋๋ถ์ ํ ์๊ฐ ์ฝ์ง์ ๊ธฐ๋ณธ์ด์๋ค๐ ๊ฑฐ๊ธฐ๋ค package.json
์ scripts๋ฅผ ์ ๋ ๋๊ผด๋ผ์ฐ ์์ ๋ฆฌ๋
์ค ๋ช
๋ น์ด๋ฅผ ์๋์ฐ ๋ช
๋ น์ด๋ก ๋ฐ๊ฟ์ ์งฐ๋๋ฐ ๊ณ์ ์๋ฌ๊ฐ ํฐ์ก๋ค. ์ด ๋ ๋งฅ๋ถ๐ป์ ์ผ๋ง๋ ์ฌ๊ณ ์ถ์๋์ง ๋ชจ๋ฅธ๋ค. (์ง๊ธ๋ ๋งฅ๋ถ์ ์ฌ๊ณ ์ถ๋ค.. WSL2๊ฐ ์๋ฌด๋ฆฌ ์ข์์ก๋ ๋ก์ปฌ ์์ฒด๊ฐ ๋ฆฌ๋
์ค์ธ ๊ฒ๋ณด๋ค ๋ชปํ๋ค.)
์ด ๋ ๋น์ Python์ ๊ณง ๋ฐ์ ์์ ์ด์๊ณ ReactJS๋ง ์ฑ๊ณตํ๋ฉด ๋๋๋ฐ ์ง๊ธ์..
์ ํ๋ธ ํด๋ก ์ฑ๋ฆฐ์ง๋ฅผ ์กธ์
ํ๊ณ MongoDB
, ES6
, PUG
, NodeJS
๋ฑ์ง๋ฅผ ํ๋ํ๋ค! ์ ํ๋ธ ํด๋ก ์ฑ๋ฆฐ์ง๊ฐ ๋๋๊ณ ๋ฐ๋ก ํ์ด์ฌ ์ฑ๋ฆฐ์ง๋ฅผ ์์ํด์ Python
๋ ๋ฐ์๊ณ ReactJS
๋ฑ์ง๋ง ๋จ๊ฒจ๋๊ณ ์์๋ค. ๋น๋ก ์ ๋ฒ ๋ฒ์์์ผ๋ก ์ธํด ๋ฆฌ์กํธ ์ฑ๋ฆฐ์ง๋ฅผ ํต๊ณผํ์ง ๋ชปํ์ง๋ง ๊ณง ๋๊ฐ์ค๋ ์ฑ๋ฆฐ์ง์ ๋ค์ ์ฐธ์ฌํ ์์ ์ด๋ค.
์ ํ๋ธ ํด๋ก ์ฑ๋ฆฐ์ง๋ ๊ฐ์ธ์ ์ผ๋ก ๋ง์ด ํ๋ค์๋ ์ฑ๋ฆฐ์ง์ฌ์ ์ฐ์ ์กธ์ ์ ๋ฐ๋ผ์ง๋ ์์๊ณ ๋ฌด์ฌํ ์กธ์ ๋ง ํ๋ฉด ์ข๊ฒ ๋ค๋ ์๊ฐ์ ํ๋ค. ๋น๋ก ์ฐ์ ์กธ์ ์ ํ์ง ๋ชปํ์ง๋ง ๋๊ผด๋ผ์ฐ ์์ ์ฝ๋๋ฆฌ๋ทฐ์์ ๋ด ๋์์ ํ๋ ์ด์ด ๊ณผ์ ๋ฅผ ์นญ์ฐฌํด์ฃผ์ จ๋ค!! ์ฐ๋ฆฌ๊ฐ ํํ๋ค ์ฐ๋ ๋์์ ํ๋ ์ด์ด์ ์ต๋ํ ๋๊ฐ์ด ๋ง๋๋ ค๊ณ ๋ ธ๋ ฅํ๋ค. ๊ทธ ๋ ธ๊ณ ๋ฅผ ์์์ฃผ์ ์ ์ ๋ง ์ข์๋ค๐
6์ฃผ๊ฐ ์ ๋ง ํ๋ค์์ง๋ง ์ ๋ง ๋ฐฐ์ด ๊ฒ ๋ง์ 6์ฃผ์๋ค. ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฆฐ์ง๊น์ง ํฉํ๋ฉด ๊ฑฐ์ 8์ฃผ๊ฐ JavaScript๋ง ์ฌ์ฉํ๋๋ฐ ๊ทธ๋๋ JavaScript๊ฐ ๋ฏ์ค๋ค..
์ด ๋ ์ ๋ง ์ด์ฌํ ์ฝ๋ฉํ๊ณ ์ด์ฌํ ๊ณต๋ถํ๋ค. ๋ค์ ๊ทธ ๋๋ก ๋์๊ฐ๊ณ ์ถ์ ๊ธฐ๋ถ๋ ๋ ๋ค. ๋ฆฌ์กํธ ์ฑ๋ฆฐ์ง๋ ์ฒซ ์๋ ๋ ๋ฒ์์์ด ๊ฒน์ณ ํฌ๊ธฐํ์ง๋ง ์ด๋ฒ์๋ ์ด์ฌํ ํด์ ์ฐ์ ์กธ์ ๐๊น์ง ํด๋ณผ ๊ฒ์ด๋ค. ํ์ดํ ๐ช๐ช