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

AngularJS ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ To-Do ์•ฑ ๋งŒ๋“ค๊ธฐ ์‹ค์Šต - ์•ต๊ทค๋Ÿฌ ๊ฐ•์ขŒ

ํ”„๋ก ํŠธ์—”๋“œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ˆ ์ธ AngularJS์˜ ๊ธฐ๋ณธ ์‚ฌ์šฉ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค. ๋ณธ ๊ฐ•์ขŒ์—์„œ๋Š” HTML ๋ฐ CSS, Javascript์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ๋‚ด์šฉ์€ ๋‹ค๋ฃจ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

Thumbnail

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

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

  • Javascript

  • AngularJS

  • Bootstrap

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

Javascript ์˜ ์ธ๊ธฐ ํ”„๋ ˆ์ž„์›Œํฌ์ธ AngularJS ์˜ ๊ธฐ๋ณธ๊ณผ ์•ฑ ์ œ์ž‘ ๊ณผ์ •์„ ๋ฐฐ์šฐ๋Š” ์•ต๊ทค๋Ÿฌ ๊ฐ•์ขŒ ์ž…๋‹ˆ๋‹ค. AngularJS ์˜ ์ค‘์š”ํ•œ ๊ฐœ๋…๋“ค์„ ์˜ˆ์ œ์™€ ํ•จ๊ฒŒ ์‚ดํŽด๋ณด๊ณ , ์ง์ ‘ To-Do ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค์–ด ๋ณด๋ฉด์„œ ์•ต๊ทค๋Ÿฌ๋ฅผ ๊ฒฝํ—˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 2016๋…„์— Webframeworks.kr ์—์„œ ์ง„ํ–‰ํ•˜๋Š” Angular.js ์ฝ”๋“œ๋žฉ ์„ธ๋ฏธ๋‚˜๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ ์ž๋ฃŒ๋ฅผ ํ† ๋Œ€๋กœ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค

- HTML, CSS, JAVASCRIPT ์— ๋Œ€ํ•œ ์ดํ•ด๋„๊ฐ€ ์žˆ๋Š” ๋ถ„๊ป˜ ์ ํ•ฉํ•œ ๊ฐ•์ขŒ ์ž…๋‹ˆ๋‹ค.

๋ฐฐ์šฐ๋Š” ๊ฒƒ๋“ค

- AngularJS ์˜ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•, ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์„ฑ - AngularJS ๋ฅผ ์ด์šฉํ•œ SPA ๊ฐœ๋ฐœ - ์•ฝ๊ฐ„์˜ Bootstrap ์‚ฌ์šฉ๋ฒ• - NodeJS ๋“ฑ ์„œ๋ฒ„์™€์˜ ์—ฐ๊ฒฐ

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

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

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

  • ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ  : Javascript, AngularJS, Bootstrap
  • ๊ฐ•์ขŒ ์ˆ˜์ค€ : ์ดˆ๊ธ‰~์ค‘๊ธ‰
  • ์‚ฌ์ „ ์ง€์‹ :  HTML, CSS, Javascript ์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ์ดํ•ด๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

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

๊น€์ •ํ™˜(Chris)

yogafire ์Šคํƒ€ํŠธ์—… ์œ„ํ”Œ๋ž˜๋‹›(http://wepla.net) ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ-๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ์„ ๋‹ด๋‹นํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ฑ…์ฝ๋Š” ๋‚จ์ž, ์š”๊ฐ€๋งจ. ๋ธ”๋กœ๊ทธ : http://blog.jeonghwan.net/  

5. ๊ด€๋ จ ์ถ”์ฒœ ๊ฐ•์ขŒ

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

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

  • Angular๋ฅผ ์ฒ˜์Œ ๋‹ค๋ค„๋ณธ ์‚ฌ๋žŒ

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

  • HTML,CSS,JAVASCRIPT ์— ๋Œ€ํ•œ ์ดํ•ด๋„๊ฐ€ ์žˆ์œผ์‹  ๋ถ„

  • ์ƒˆ๋กœ์šด Angular ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•ด์•ผ ํ•˜๋Š” ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • HTML, CSS, Javascript ์— ๋Œ€ํ•œ ๊ธฐ๋ณธ์ ์ธ ์ดํ•ด๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”
WePlanet Official ์ž…๋‹ˆ๋‹ค.

6,411

๋ช…

์ˆ˜๊ฐ•์ƒ

143

๊ฐœ

์ˆ˜๊ฐ•ํ‰

4.7

์ 

๊ฐ•์˜ ํ‰์ 

1

๊ฐœ

๊ฐ•์˜

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

์ „์ฒด

23๊ฐœ โˆ™ (2์‹œ๊ฐ„ 29๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

143๊ฐœ

4.7

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

  • coffee miller

    โˆ™

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  4.0

    4

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

    ๊ฐ„๊ฒฐํ•˜๋ฉด์„œ ์ดํ•ด๊ฐ€ ๋น ๋ฅธ ์ˆ˜์—…์ž…๋‹ˆ๋‹ค. ๋‹ค๋งŒ.... ํŽธ์ง‘์ด ์•ˆ๋˜์‹ ๋“ฏ..^^;; ๊ทธ๋ฆฌ๊ณ , ์ƒˆ๋กœ์šด ToDo ๋งŒ๋“ค๊ณ ... ์‚ญ์ œ๊ฐ€ ์•ˆ๋˜๋Š”๋ฐ.... ๋ฒ„์ „์ด ์ข€ ๋‹ฌ๋ผ์„œ ๊ทธ๋Ÿฐ์ง€... idx๊ฐ’์ด ์•„๋‹ˆ๋ผ..... idx-1 ํ•ด์ค˜์•ผ ์ƒˆ๋กœ ๋งŒ๋“ค์–ด์ง„ ToDo๋„ ์‚ญ์ œ๋˜๋Š” ๊ฒƒ ์ฐพ์•„๋ƒˆ์Šต๋‹ˆ๋‹ค.

    • ์•ต๊ธ”

      โˆ™

      ์ˆ˜๊ฐ•ํ‰ 2

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

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

      ์•ต๊ทค๋Ÿฌ JS ๊ธฐ๋ณธ์ ์ธ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•ด ๋ณผ์ˆ˜ ์žˆ๋Š” ์ข‹์€ ๊ฐ•์˜ ์ž…๋‹ˆ๋‹ค

      • ๋งŒ๋‘

        โˆ™

        ์ˆ˜๊ฐ•ํ‰ 18

        โˆ™

        ํ‰๊ท  ํ‰์  4.8

        5

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

        • ๋ฐ•์ง€์€

          โˆ™

          ์ˆ˜๊ฐ•ํ‰ 1

          โˆ™

          ํ‰๊ท  ํ‰์  4.0

          4

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

          • Yoo Sunmo

            โˆ™

            ์ˆ˜๊ฐ•ํ‰ 1

            โˆ™

            ํ‰๊ท  ํ‰์  5.0

            5

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

            ์งง์€ ์‹œ๊ฐ„์— ํ•ต์‹ฌ์ ์ธ ๋‚ด์šฉ์„ ์„ค๋ช…ํ•ด์ฃผ์…”์„œ ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์› ์Šต๋‹ˆ๋‹ค

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

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

            ๋ฌด๋ฃŒ