์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

React & Express ๋ฅผ ์ด์šฉํ•œ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœํ•˜๊ธฐ

Velopert ๋‹˜์ด ์•Œ๋ ค์ฃผ๋Š” ReactJS ๊ฐ•์ขŒ ์ž…๋‹ˆ๋‹ค. ์ตœ๊ทผ ๊ฐ๊ด‘๋ฐ›๋Š” Javascript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ React ๋ฅผ ์†Œ๊ฐœํ•˜๊ณ , ์‚ฌ์šฉ๋ฒ•์„ ์•Œ๋ ค์ฃผ๋Š” ๊ฐ•์ขŒ ์ž…๋‹ˆ๋‹ค.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ํ”„๋ก ํŠธ์—”๋“œ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • ์ „๋ฐ˜์ ์ธ Web front-end ๊ธฐ์ˆ 

  • Javascript, React.js, node.js

ํ›„๋ฐ˜๋ถ€ ํ…์ŠคํŠธ ๊ฐ•์ขŒ๋Š” ์ทจ์†Œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฐ•์ขŒ์—์„œ ๋‹ค๋ฃจ๋Š” ๋‚ด์šฉ์ด ์กฐ๊ธˆ ์˜ค๋ž˜๋˜์–ด ์ƒˆ๋กœ์šด ๊ฐ•์˜๋กœ ๋ฆฌ๋‰ด์–ผ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ƒˆ ๊ฐ•์˜ ๋ณด๊ธฐ

1. ๊ฐ•์ขŒ ์†Œ๊ฐœ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ReactJS ๋ฅผ ํ•™์Šตํ•˜๋Š” react ๊ฐ•์ขŒ ์ž…๋‹ˆ๋‹ค. ์š”์ฆ˜ ๋“ค์–ด HOT ํ•œ ํŽ˜์ด์Šค๋ถ์—์„œ ๊ฐœ๋ฐœํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ, React.js ์— ๋Œ€ํ•˜์—ฌ ์•Œ์•„๋ณด๊ณ , ์ง์ ‘ ์‚ฌ์šฉ์„ ํ•ด๋ณด๋ฉด์„œ ๊ธฐ์ˆ ์„ ์ตํž ์ˆ˜ ์žˆ๋Š” ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค. React.js ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ, ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ ํ”„๋กœ์ ํŠธ ๋ช‡๊ฐœ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๊ณ , Node.js, MongoDB๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Backend ์„œ๋ฒ„๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•๋„ ์ตํžˆ๊ณ , ์ตœ์ข…์ ์œผ๋กœ๋Š” ๊ฐ•์ขŒ์—์„œ ๋ฐฐ์šด ์ง€์‹๋“ค์„ ๊ฒฐํ•ฉํ•˜์—ฌ ๊ฐ„๋‹จํ•œ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋กœ์ ํŠธ๋ฅผ ์™„์„ฑํ•ฉ๋‹ˆ๋‹ค.

- node.js ๋ฅผ ์‚ฌ์šฉํ•ด ๋ณธ ๊ฒฝํ—˜์ด ์žˆ์œผ๋ฉด ํ•™์Šตํ•˜๊ธฐ ์ˆ˜์›”ํ•ฉ๋‹ˆ๋‹ค.
- HTML,CSS,JAVASCRIPT ์— ๋Œ€ํ•œ ์ดํ•ด๋„๊ฐ€ ์žˆ๋Š” ๋ถ„๊ป˜ ์ ํ•ฉํ•œ ๊ฐ•์ขŒ์ž…๋‹ˆ๋‹ค.
- ์™„๊ฐ• ์ „ ์ž…๋‹ˆ๋‹ค. ๋งค์ฃผ ํ•œ๋‘ํŽธ์”ฉ ์—ฐ์žฌ๋  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.
-  2016๋…„ 8์›”์— Webframeworks.kr ์—์„œ ์ง„ํ–‰ํ•˜๋Š” React.js ์ฝ”๋“œ๋žฉ ์„ธ๋ฏธ๋‚˜๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ ์ž๋ฃŒ๋ฅผ ํ† ๋Œ€๋กœ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค

์ฐธ๊ณ  ์ž๋ฃŒ

Links
- http://slides.com/minjunkim-1/deck (๊ฐ•์˜์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์Šฌ๋ผ์ด๋“œ)
- https://velopert.com/reactjs-tutorials (React.js ํ…์ŠคํŠธ ๊ฐ•์ขŒ ๋ชฉ๋ก)

2. ๋„์›€๋˜๋Š” ๋ถ„๋“ค

  • ํ‰์†Œ React.js ๋ฅผ ํ•™์Šตํ•˜๊ณ  ์‹ถ์—ˆ๋˜ ๋ถ„
  • ์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ  ์‹ถ์€ ๋ถ„
  • HTML,JAVASCRIPT,CSS ์— ๋Œ€ํ•œ ์ดํ•ด๋„๊ฐ€ ์žˆ์œผ์‹  ๋ถ„

3. ๊ฐ•์ขŒ ํŠน์ง•

  • ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ  : ์ „๋ฐ˜์ ์ธ Web front-end ๊ธฐ์ˆ , Javascript, React.js, node.js
  • ๊ฐ•์ขŒ ์ˆ˜์ค€ : ์ดˆ๊ธ‰~์ค‘๊ธ‰
  • ์‚ฌ์ „ ์ง€์‹: HTML,CSS,Javascript ์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ์ดํ•ด๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
  • node.js ๋ฅผ ๊ฒฝํ—˜ํ•ด๋ณด์‹  ๋ถ„์ด๋ผ๋ฉด ๋”์šฑ ์ข‹์•„์š”.

4. ๊ฐ•์‚ฌ ์†Œ๊ฐœ

๊น€๋ฏผ์ค€

ํŠธ๋ Œ๋””ํ•œ IT๊ธฐ์ˆ ์„ ์ง€ํ–ฅ(ํ•˜๋ ค๊ณ  ๋…ธ๋ ฅ)ํ•˜๋Š” ๊ฐœ๋ฐœ์ž, ๊น€๋ฏผ์ค€์ž…๋‹ˆ๋‹ค. Github์ด๋‚˜ ๋ธ”๋กœ๊ทธ์—์„œ๋Š” velopert๋กœ ํ™œ๋™ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. React.js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋งค์šฐ ์ข‹์•„ํ•˜๋ฉฐ, ๊ตญ๋‚ด์—์„œ ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์ธ๊ธฐ๋ฅผ ํ•œ์ธต ๋” ๋†’์ด๊ฒ ๋‹ค๋Š” ๋‹ค์ง์œผ๋กœ ์ž๋ฃŒ๋ฅผ ๋งŒ๋“ค๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ํ‰์†Œ React.js ๋ฅผ ํ•™์Šตํ•˜๊ณ  ์‹ถ์—ˆ๋˜ ๋ถ„

  • ์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ  ์‹ถ์€ ๋ถ„

์•ˆ๋…•ํ•˜์„ธ์š”
velopert(๊น€ ๋ฏผ์ค€)์ž…๋‹ˆ๋‹ค.

23,866

๋ช…

์ˆ˜๊ฐ•์ƒ

512

๊ฐœ

์ˆ˜๊ฐ•ํ‰

23

๊ฐœ

๋‹ต๋ณ€

4.8

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

38๊ฐœ โˆ™ (5์‹œ๊ฐ„ 45๋ถ„)

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

141๊ฐœ

4.8

141๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

๋ฌด๋ฃŒ