๐ŸŽฌ ๋…ธ๋งˆ๋“œ์ฝ”๋” ์œ ํŠœ๋ธŒ ํด๋ก  ์ฑŒ๋ฆฐ์ง€ 3๊ธฐ ์กธ์—… ํ›„๊ธฐ

๐ŸŽ‰์œ ํŠœ๋ธŒ ํด๋ก  ์ฑŒ๋ฆฐ์ง€ 3๊ธฐ๋ฅผ ์กธ์—…ํ–ˆ์Šต๋‹ˆ๋‹ค!๐ŸŽ‰

์กธ์—…ํ•œ์ง€๋Š” ํ•œ 6๊ฐœ์›” ์ •๋„ ์ง€๋‚ฌ์ง€๋งŒ ์ธ์Šคํƒ€๊ทธ๋žจ์— ๋‚จ๊ฒจ๋†“์€ ํ›„๊ธฐ๋ฅผ ๋˜์ƒˆ๊ธฐ๋ฉฐ ์œ ํŠœ๋ธŒ ํด๋ก  ์ฑŒ๋ฆฐ์ง€ ํ›„๊ธฐ๋ฅผ ์จ๋ณด๋ คํ•ฉ๋‹ˆ๋‹ค! ๊ทธ๋Ÿผ ๊ณ ๊ณ ๐Ÿ’จ

์ฒ˜์Œ ์‹œ์ž‘ํ•˜๋Š” ๋ฐฑ์—”๋“œ

7-2

์ด๋ฒˆ ์œ ํŠœ๋ธŒ ํด๋ก  ์ฑŒ๋ฆฐ์ง€์—์„œ๋Š” Javascript๋กœ ํ”„๋ก ํŠธ๋ฅผ, nodejs๋กœ ๋ฐฑ์—”๋“œ๋ฅผ ๊ตฌํ˜„ํ•œ๋‹ค! ์ฒ˜์Œ ์ ‘ํ•œ nodejs ์„ธ๊ณ„๋Š” ์ •๋ง ํ˜ผ๋ž€์Šค๋Ÿฌ์› ๋‹ค๐Ÿ˜ฑ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฑŒ๋ฆฐ์ง€ ๋•Œ๋Š” ๋กœ์ง์„ ์งœ๊ณ  ๊ทธ๊ฒƒ์„ ๊ทธ๋Œ€๋กœ ๊ตฌํ˜„ํ•˜๊ธฐ๋งŒ ํ•˜๋ฉด ๋๋Š”๋ฐ morgan, body-parser, babel, pug, mongoose ๋“ฑ ๋งŽ์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์“ธ ์ค„ ์•Œ์•„์•ผ ํ–ˆ๋‹ค. ์ง€๊ธˆ์ด์•ผ pug๋Š” ํ…œํ”Œ๋ฆฟ, mongoose๋Š” ์ฝ”๋“œ๋กœ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค ์กฐ์ž‘ ๋“ฑ ๊ฐ๊ฐ์˜ ์šฉ๋„๋ฅผ ์•Œ์ง€๋งŒ ์ฒ˜์Œ ์‹œ์ž‘ํ•  ๋‹น์‹œ โ€œ์ด ๋งŽ์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋‹ค ์•Œ์•„์•ผํ•œ๋‹ค๊ณ ?โ€ํ•˜๊ณ  ๊ฒ์„ ๋งŽ์ด ๋จน์—ˆ์—ˆ๋‹ค.

์ด๊ฑด ๊ปŒ์ด์ง€ ํ–ˆ๋‹ค๊ฐ€ ์ œ๊ฐ€ ์”นํ˜”์Šต๋‹ˆ๋‹ค..

์ฒ˜์Œ ๋ณด๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ตํžˆ๋Š” ๊ฒƒ๋„ ํž˜๋“ค์—ˆ์ง€๋งŒ 6์ฃผ ๋™์•ˆ ๋Š์ž„ ์—†์ด ๋‚˜์˜ค๋Š” ๊ณผ์ œ๊ฐ€ ์ •๋ง ํž˜๋“ค์—ˆ๋‹ค. ์ •๋ง ๋‹คํ–‰์ธ ๊ฑด 6์ฃผ ๋™์•ˆ์˜ ์ฑŒ๋ฆฐ์ง€์—ฌ์„œ ํ€ด์ฆˆ์™€ ๊ตฌํ˜„๊ณผ์ œ๊ฐ€ ์ ์ ˆํžˆ ์„ž์—ฌ์„œ ๋‚˜์™”๋‹ค. ๋ฉฐ์น ๋™์•ˆ์˜ ๊ตฌํ˜„๊ณผ์ œ๋กœ ์‹ฌ์‹ ์ด ์ง€์ณ์žˆ์„ ๋•Œ ํ€ด์ฆˆ๊ฐ€ ๊ณผ์ œ๋กœ ๋‚˜์˜ค๋ฉด ์ •๋ง ํ–‰๋ณตํ–ˆ์—ˆ๋‹ค๐Ÿ˜‚

7-3

3์ผ ๊ณผ์ œ๋ฅผ ํ•˜์‹œ๋Š” ๋ถ„์ด ์žˆ์œผ์‹œ๋‹ค๋ฉด ๊ผญ ๋ฏธ๋ฆฌ๋ฏธ๋ฆฌ ํ•˜์„ธ์šฉ๐Ÿ˜ฅ

๊ทธ ์ค‘ ๊ฐ€์žฅ ๊ธฐ์–ต์— ๋‚จ๋Š” ๊ณผ์ œ๊ฐ€ ์žˆ๋Š”๋ฐ 3์ผ ๊ณผ์ œ์˜€๋‹ค. ํ•œ ๋ฒˆ ์“ฑ ๋ณด๊ณ  โ€œ์˜ค ํ–ˆ๋˜ ๊ฑฐ๋ž‘ ๋น„์Šทํ•˜๋„คโ€ํ•˜๊ณ  ๋งˆ์ง€๋ง‰ ๋‚  ๋ชฐ์•„์„œ ํ–ˆ๋Š”๋ฐ.. ๊ฒฐ๊ตญ ์ƒˆ๋ฒฝ๊นŒ์ง€ ๊ณผ์ œ๋ฅผ ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ํ–ˆ๋˜ ๊ฒƒ๊ณผ ๋น„์Šทํ–ˆ์ง€๋งŒ์€ GET, POST์˜ ์ฐจ์ด, ๊ฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๋ชฉ์ ์„ ์ดํ•ดํ•˜์ง€ ๋ชปํ•˜๋ฉด ์งœ๊ธฐ๊ฐ€ ํž˜๋“ค์—ˆ๋‹ค. ๊ทธ๋ž˜๋„ ๊ตฌ๊ธ€๋ง + ๊ฐ•์˜ ๋ณต์Šต์œผ๋กœ ์ƒˆ๋ฒฝ 4์‹œ์ฏค์— ๊ณผ์ œ๋ฅผ ๋๋ƒˆ๋‹ค.

์ฑŒ๋ฆฐ์ง€๊ฐ€ ๋๋‚œ ์งํ›„์—

7-4

6์ฃผ๊ฐ„์˜ ๋Œ€์žฅ์ •์„ ๊ฑฐ์ณ ์œ ํŠœ๋ธŒ ํด๋ก ์— ์„ฑ๊ณตํ•˜์˜€๋‹ค!

์ฑŒ๋ฆฐ์ง€๊ฐ€ ๋๋‚˜๊ณ  โ€œ์›น์‚ฌ์ดํŠธ ํ•˜๋‚˜ ์ฏค์ด์•ผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹คโ€๋Š” ์ž์‹ ๊ฐ๊ณผ โ€œ์›น์‚ฌ์ดํŠธ ๋งŒ๋“œ๋Š” ๊ฒŒ ์ด๋ ‡๊ฒŒ ์–ด๋ ต๋‹ค๊ณ ?โ€ํ•˜๋Š” ๊ณตํฌ๊ฐ์ด ํ˜ผ์žฌํ•ด์žˆ์—ˆ๋‹ค. ์ง€๊ธˆ์™€์„œ ๋ณด๋ฉด ์ •๋ง ๋‹น์—ฐํ•œ ๊ฒƒ์ด ์–ด๋–ค ํ”„๋ ˆ์ž„์›Œํฌ๋„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์ดํŠธ ๋งŒ๋“œ๋Š” ๊ฒŒ ์–ด๋ ค์šธ ์ˆ˜ ๋ฐ–์— ์—†๋‹ค. ํ”„๋ก ํŠธ๋กœ react๋ฅผ ์“ฐ๋ฉด ํ›จ์”ฌ ๋” ๊ฐ„๋‹จํžˆ ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š”๋ฐ ๊ทธ ๋‹น์‹œ์—๋Š” react์˜ ์กด์žฌ๋ฅผ ๋ชฐ๋ž๋˜ ํ„ฐ๋ผ ๋งŽ์ด ๊ณตํฌ์Šค๋Ÿฌ์› ๋‹ค๐Ÿ˜ฑ

๊ทธ๋ฆฌ๊ณ  JavaScript์™€ ์œˆ๋„์šฐ ์šด์˜์ฒด์ œ์— ๋Œ€ํ•œ ๋นก์นจ๐Ÿ’ข๋„ ์žˆ์—ˆ๋‹ค. โ€œ๋‚œ ์ตœ๋Œ€ํ•œ ์ปดํŒŒ์ผ์ด ์„ฑ๊ณตํ•˜๋„๋ก ๋…ธ๋ ฅํ•œ๋‹คโ€๋Š” JavaScript์˜ ๋…ธ์˜ค๋ ฅ ๋•๋ถ„์— ํ•œ ์‹œ๊ฐ„ ์‚ฝ์งˆ์€ ๊ธฐ๋ณธ์ด์—ˆ๋‹ค๐Ÿ˜‡ ๊ฑฐ๊ธฐ๋‹ค package.json์˜ scripts๋ฅผ ์ž˜ ๋•Œ ๋‹ˆ๊ผด๋ผ์“ฐ ์ƒ˜์˜ ๋ฆฌ๋ˆ…์Šค ๋ช…๋ น์–ด๋ฅผ ์œˆ๋„์šฐ ๋ช…๋ น์–ด๋กœ ๋ฐ”๊ฟ”์„œ ์งฐ๋Š”๋ฐ ๊ณ„์† ์—๋Ÿฌ๊ฐ€ ํ„ฐ์กŒ๋‹ค. ์ด ๋•Œ ๋งฅ๋ถ๐Ÿ’ป์„ ์–ผ๋งˆ๋‚˜ ์‚ฌ๊ณ  ์‹ถ์—ˆ๋Š”์ง€ ๋ชจ๋ฅธ๋‹ค. (์ง€๊ธˆ๋„ ๋งฅ๋ถ์„ ์‚ฌ๊ณ  ์‹ถ๋‹ค.. WSL2๊ฐ€ ์•„๋ฌด๋ฆฌ ์ข‹์•„์กŒ๋“  ๋กœ์ปฌ ์ž์ฒด๊ฐ€ ๋ฆฌ๋ˆ…์Šค์ธ ๊ฒƒ๋ณด๋‹ค ๋ชปํ•˜๋‹ค.)

๋ฑƒ์ง€ ๊ทผํ™ฉ๊ณผ ๋‹ˆ๊ผด๋ผ์“ฐ ์ƒ˜์˜ ์นญ์ฐฌ

7-1

์ด ๋•Œ ๋‹น์‹œ Python์€ ๊ณง ๋ฐ›์„ ์˜ˆ์ •์ด์—ˆ๊ณ  ReactJS๋งŒ ์„ฑ๊ณตํ•˜๋ฉด ๋๋Š”๋ฐ ์ง€๊ธˆ์€..

์œ ํŠœ๋ธŒ ํด๋ก  ์ฑŒ๋ฆฐ์ง€๋ฅผ ์กธ์—…ํ•˜๊ณ  MongoDB, ES6, PUG, NodeJS ๋ฑƒ์ง€๋ฅผ ํš๋“ํ–ˆ๋‹ค! ์œ ํŠœ๋ธŒ ํด๋ก  ์ฑŒ๋ฆฐ์ง€๊ฐ€ ๋๋‚˜๊ณ  ๋ฐ”๋กœ ํŒŒ์ด์ฌ ์ฑŒ๋ฆฐ์ง€๋ฅผ ์‹œ์ž‘ํ•ด์„œ Python๋„ ๋ฐ›์•˜๊ณ  ReactJS ๋ฑƒ์ง€๋งŒ ๋‚จ๊ฒจ๋‘๊ณ  ์žˆ์—ˆ๋‹ค. ๋น„๋ก ์ €๋ฒˆ ๋ฒˆ์•„์›ƒ์œผ๋กœ ์ธํ•ด ๋ฆฌ์•กํŠธ ์ฑŒ๋ฆฐ์ง€๋ฅผ ํ†ต๊ณผํ•˜์ง€ ๋ชปํ–ˆ์ง€๋งŒ ๊ณง ๋‚˜๊ฐ€์˜ค๋Š” ์ฑŒ๋ฆฐ์ง€์— ๋‹ค์‹œ ์ฐธ์—ฌํ•  ์˜ˆ์ •์ด๋‹ค.


์œ ํŠœ๋ธŒ ํด๋ก  ์ฑŒ๋ฆฐ์ง€๋Š” ๊ฐœ์ธ์ ์œผ๋กœ ๋งŽ์ด ํž˜๋“ค์—ˆ๋˜ ์ฑŒ๋ฆฐ์ง€์—ฌ์„œ ์šฐ์ˆ˜ ์กธ์—…์€ ๋ฐ”๋ผ์ง€๋„ ์•Š์•˜๊ณ  ๋ฌด์‚ฌํžˆ ์กธ์—…๋งŒ ํ•˜๋ฉด ์ข‹๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ–ˆ๋‹ค. ๋น„๋ก ์šฐ์ˆ˜ ์กธ์—…์€ ํ•˜์ง€ ๋ชปํ–ˆ์ง€๋งŒ ๋‹ˆ๊ผด๋ผ์“ฐ ์ƒ˜์˜ ์ฝ”๋“œ๋ฆฌ๋ทฐ์—์„œ ๋‚ด ๋™์˜์ƒ ํ”Œ๋ ˆ์ด์–ด ๊ณผ์ œ๋ฅผ ์นญ์ฐฌํ•ด์ฃผ์…จ๋‹ค!! ์šฐ๋ฆฌ๊ฐ€ ํ”ํžˆ๋“ค ์“ฐ๋Š” ๋™์˜์ƒ ํ”Œ๋ ˆ์ด์–ด์™€ ์ตœ๋Œ€ํ•œ ๋˜‘๊ฐ™์ด ๋งŒ๋“œ๋ ค๊ณ  ๋…ธ๋ ฅํ–ˆ๋‹ค. ๊ทธ ๋…ธ๊ณ ๋ฅผ ์•Œ์•„์ฃผ์…”์„œ ์ •๋ง ์ข‹์•˜๋‹ค๐Ÿ˜

๋งˆ๋ฌด๋ฆฌ

6์ฃผ๊ฐ„ ์ •๋ง ํž˜๋“ค์—ˆ์ง€๋งŒ ์ •๋ง ๋ฐฐ์šด ๊ฒŒ ๋งŽ์€ 6์ฃผ์˜€๋‹ค. ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฑŒ๋ฆฐ์ง€๊นŒ์ง€ ํ•ฉํ•˜๋ฉด ๊ฑฐ์˜ 8์ฃผ๊ฐ„ JavaScript๋งŒ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ ๊ทธ๋ž˜๋„ JavaScript๊ฐ€ ๋‚ฏ์„ค๋‹ค..

์ด ๋•Œ ์ •๋ง ์—ด์‹ฌํžˆ ์ฝ”๋”ฉํ–ˆ๊ณ  ์—ด์‹ฌํžˆ ๊ณต๋ถ€ํ–ˆ๋‹ค. ๋‹ค์‹œ ๊ทธ ๋•Œ๋กœ ๋Œ์•„๊ฐ€๊ณ  ์‹ถ์€ ๊ธฐ๋ถ„๋„ ๋“ ๋‹ค. ๋ฆฌ์•กํŠธ ์ฑŒ๋ฆฐ์ง€๋Š” ์ฒซ ์‹œ๋„ ๋•Œ ๋ฒˆ์•„์›ƒ์ด ๊ฒน์ณ ํฌ๊ธฐํ–ˆ์ง€๋งŒ ์ด๋ฒˆ์—๋Š” ์—ด์‹ฌํžˆ ํ•ด์„œ ์šฐ์ˆ˜ ์กธ์—…๐ŸŽ“๊นŒ์ง€ ํ•ด๋ณผ ๊ฒƒ์ด๋‹ค. ํ™”์ดํŒ…๐Ÿ’ช๐Ÿ’ช


Written by@์ฝ”๋”ฉํ•˜๋Š”ํŽญ๊ท„
ํŒŒ์ด์ฌ๊ณผ ์›น์— ๊ด€์‹ฌ ๋งŽ์€ ์ปด๊ณต ์ „๊ณต์ž๐Ÿ‘ฉโ€๐Ÿ’ป

GitHubInstagram