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

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,897

๋ช…

์ˆ˜๊ฐ•์ƒ

514

๊ฐœ

์ˆ˜๊ฐ•ํ‰

23

๊ฐœ

๋‹ต๋ณ€

4.7

์ 

๊ฐ•์˜ ํ‰์ 

2

๊ฐœ

๊ฐ•์˜

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

์ „์ฒด

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

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

142๊ฐœ

4.8

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

  • ์šฐ๊ฑฑ๋‹ค์ง

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 6

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

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

    • Eun

      โˆ™

      ์ˆ˜๊ฐ•ํ‰ 75

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

      100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

      ๋ฌด๋ฃŒ๊ฐ•์˜๋ผ์„œ ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ๊ณจ๋ผ ๋ณด์•˜๋Š”๋ฐ ์ฐธ๊ณ ๊ฐ€ ์ž˜ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ณธ ๊ฐ•์˜๋Š” ์ข€ ์˜›๋‚  ๋‚ด์šฉ์ด๋ผ์„œ ์ฐธ๊ณ ํ•˜์…”์•ผ ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

      • bapzul

        โˆ™

        ์ˆ˜๊ฐ•ํ‰ 2

        โˆ™

        ํ‰๊ท  ํ‰์  5.0

        5

        32% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

        • ์„ธ์ธํŠธ

          โˆ™

          ์ˆ˜๊ฐ•ํ‰ 3

          โˆ™

          ํ‰๊ท  ํ‰์  5.0

          5

          100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

          ์ข‹์€๊ฐ•์˜๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

          • Yohan Kim

            โˆ™

            ์ˆ˜๊ฐ•ํ‰ 7

            โˆ™

            ํ‰๊ท  ํ‰์  4.4

            4

            100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

            ๋น„์Šทํ•œ ๊ฐ•์˜

            ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

            ๋ฌด๋ฃŒ