Inflearn brand logo image
Inflearn brand logo image
BEST

์•ต๊ทค๋Ÿฌ ๊ธฐ์ดˆ ์„ธ๋ฏธ๋‚˜

์›น ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ์˜ ํฐ ์ถ•์ธ ์•ต๊ทค๋Ÿฌ๊ฐ€ 5 ๋ฒ„์ „์ด ์ถœ์‹œ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. 5.0 ์ถœ์‹œ์™€ ํ•จ๊ป˜ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์œ ์ € ๊ทธ๋ฃน์„ ์ค‘์‹ฌ์œผ๋กœ ์•ต๊ทค๋Ÿฌ 5 ๋ฅผ ๋น ๋ฅด๊ฒŒ ๋ฐฐ์›Œ๋ณด๋Š” ์›Œํฌ์ƒต์„ ์ง„ํ–‰ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ํฐ ๊ทธ๋ฆผ์„ ๋น ๋ฅด๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋””ํ…Œ์ผํ•œ ์ถ”๊ฐ€ ๊ฐ•์˜๊ฐ€ ์ด์–ด์งˆ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

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

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

  • Angular5์˜ ๊ธฐ๋ณธ ๊ฐœ๋…

  • Angular ์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ ๋ฐ ์‚ฌ์šฉ๋ฒ•

  • Angular CLI๋ฅผ ํ™œ์šฉํ•œ ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ๋ฐ ๊ด€๋ฆฌ

  • ์˜์กด์„ฑ ์ฃผ์ž…๊ณผ ์„œ๋น„์Šค ๊ฐœ๋…

  • Angular Router๋ฅผ ํ†ตํ•œ ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ๋„ค๋น„๊ฒŒ์ด์…˜

  • HTTP ์š”์ฒญ ์ฒ˜๋ฆฌ ๋ฐ ๋””๋ ‰ํ‹ฐ๋ธŒ, ํŒŒ์ดํ”„ ์‚ฌ์šฉ๋ฒ•

  • Bootstrap๊ณผ์˜ ํ†ตํ•ฉ ๋ฐ ๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ ์ ์šฉ

  • ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง๊ณผ Angular Universal

  • Angular Material ์ปดํฌ๋„ŒํŠธ ์‚ฌ์šฉ๋ฒ•

  • Karma์™€ Jasmine์„ ํ™œ์šฉํ•œ ์œ ๋‹› ํ…Œ์ŠคํŠธ

1. ์•ต๊ทค๋Ÿฌ ๊ธฐ์ดˆ ๊ฐ•์ขŒ ์†Œ๊ฐœ

์›น ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ ์ค‘ ๊ฐ€์žฅ ๊ฐ•๋ ฅํ•œ ์•ต๊ทค๋Ÿฌ์— ๋Œ€ํ•ด ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค. ์•ต๊ทค๋Ÿฌ๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  ์žˆ๋Š” ์ฃผ์š” ๊ตฌ์„ฑ ์š”์†Œ๋“ค์„ ํ•™์Šตํ•˜๊ณ , ๊ทธ๋Œ€๋กœ ๋”ฐ๋ผํ•˜๋ฉฐ ์ดํ•ด๋ฅผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ด๋ฒˆ ์•ต๊ทค๋Ÿฌ ๊ธฐ์ดˆ ๊ฐ•์ขŒ๋ฅผ ํ†ตํ•ด ๊ฐ„๋‹จํ•œ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋น ๋ฅด๊ฒŒ ๋งŒ๋“ค์–ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์†Œ์Šค๋Š” ๊ณผ์ •๋ณ„๋กœ Github ์ €์žฅ์†Œ์—์„œ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

๋ฐฐ์šฐ๋Š” ๊ฒƒ๋“ค
์•ต๊ทค๋Ÿฌ ๊ฐœ์š”
๊ฐœ๋ฐœํ™˜๊ฒฝ ๊ตฌ์ถ•
Angular Quick Start
Component, Template
Component ์—ฐ๊ฒฐ, ๋ผ์ดํ”„์‚ฌ์ดํด
Angular CLI
Angular Service
Angular Router
Angular HttpModule
Angular Directive, Pipe
Angular Build & Deploy
Angular Universal
Angular Material
Angular Unit Test

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

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์™€ ์•ต๊ทค๋Ÿฌ5 ๋ฅผ ์ด์šฉํ•˜์—ฌ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ณ  ์‹ถ์œผ์‹  ๋ถ„๋“ค
ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•ด ๋ณธ ๊ฒฝํ—˜์ด ์žˆ๋Š” ๋ถ„๋“ค์—๊ฒŒ ์ถ”์ฒœ ๋“œ๋ฆฝ๋‹ˆ๋‹ค.
 

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

์ด์›…์žฌ
ํ˜„ ์ŠคํŠœ๋””์˜ค์”จ๋“œ์ฝ”๋ฆฌ์•„ ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด ํ˜„ ๋งˆ์ดํฌ๋กœ์†Œํ”„ํŠธ MVP ํ˜„ ์ผ๋ ‰ํŠธ๋ก  ์ฝ”๋ฆฌ์•„ ์œ ์ €๊ทธ๋ฃน ์šด์˜์ž, ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ฝ”๋ฆฌ์•„ ์œ ์ €๊ทธ๋ฃน ์šด์˜์ž ์ „ ๋ธŒ์ดํ„ฐ์น˜ ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด๋ง ๋žฉ ๋žฉ์žฅ ์ „ ํŠธ๋ฆฌํ”Œ๋ฒ ์ด CTO

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

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

  • ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์— ๊ด€์‹ฌ ์žˆ๋Š” ๋ถ„

  • Angular๋ฅผ ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ์ดˆ๋ณด์ž

  • TypeScript๋ฅผ ํ™œ์šฉํ•œ ์›น ๊ฐœ๋ฐœ์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๋ถ„

  • ์‹ค๋ฌด ํ”„๋กœ์ ํŠธ์— Angular๋ฅผ ์ ์šฉํ•˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

  • ์ตœ์‹  Angular ๊ธฐ์ˆ ๊ณผ ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๋ถ„

์•ˆ๋…•ํ•˜์„ธ์š”
์ด์›…์žฌ์ž…๋‹ˆ๋‹ค.

11,873

๋ช…

์ˆ˜๊ฐ•์ƒ

124

๊ฐœ

์ˆ˜๊ฐ•ํ‰

4.7

์ 

๊ฐ•์˜ ํ‰์ 

5

๊ฐœ

๊ฐ•์˜

14๋…„์ฐจ ์†Œํ”„ํŠธ์›จ์–ด ์—”์ง€๋‹ˆ์–ด ์ž…๋‹ˆ๋‹ค.

 

2021๋…„ ๋ถ€ํ„ฐ๋Š” NHN Dooray ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ๊ฐœ๋ฐœํŒ€์„ ๋ฆฌ๋“œํ•˜๋ฉฐ, ์„œ๋น„์Šค ์ „์ฒด์˜ UI ์— ๋Œ€ํ•œ ์ฑ…์ž„์„ ๋งก์•˜์Šต๋‹ˆ๋‹ค. ํŒ€์„ ๋งก์•„ ๊ธฐ์กด์— ์šด์˜ํ•˜๊ณ  ์žˆ๋˜ ๋ ˆ๊ฑฐ์‹œ ์‹œ์Šคํ…œ(AngularJS, Vue)์„ React, TypeScript ๋กœ ๋ฆฌ๋‰ด์–ผ ํ•˜์˜€์Šต๋‹ˆ๋‹ค. 10์ธ ์ด์ƒ์˜ ๋‹ค์ˆ˜ ํ”„๋ก ํŠธ์—”๋“œ ์—”์ง€๋‹ˆ์–ด๋“ค์ด ํ•˜๋‚˜์˜ ํ”„๋Ÿฌ๋•ํŠธ๋ฅผ ํ•จ๊ป˜ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ์•„ํ‚คํ…์ฒ˜๋ฅผ ์„ค๊ณ„ํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋Š” ์—…๋ฌด๋ฅผ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ „์ฒด ์„œ๋น„์Šค ๊ทœ๋ชจ๊ฐ€ ํฌ๊ณ  ๋ณต์žก๋„๊ฐ€ ๋†’์•„ Monorepo ๋กœ ๊ฐœ๋ฐœ ๋ฐ ์šด์˜ํ•˜๊ณ , Micro Frontend ๋ฅผ ๋„์ž…ํ•˜์—ฌ ๋ฐฐํฌ ์ฃผ๊ธฐ ๋‹จ์ถ•์— ๋Œ€ํ•ด ๋…ธ๋ ฅํ•ด์™”์Šต๋‹ˆ๋‹ค. Storybook ์„ ํ†ตํ•ด ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ ๊ทน์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋ฉฐ, Design System ์„ ๊ตฌ์ถ•ํ•˜๊ณ  ํ™œ์šฉ์ด ๋  ์ˆ˜ ์žˆ๋„๋ก ํ”„๋กœ์„ธ์Šค๋ฅผ ๋‹ค๋“ฌ๋Š” ์—ญํ• ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค.

 

์ด์ „์—๋Š” Studio XID ์—์„œ TypeScript ์™€ Electron ์„ ์ด์šฉํ•˜์—ฌ, ๋””์ž์ด๋„ˆ๋ฅผ ์œ„ํ•œ ์ธํ„ฐ๋ ‰์…˜ ํ”„๋กœํ† ํƒ€์ดํ•‘ ํˆด์ธ ProtoPie ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ํ•œ๊ฐ€์ง€ ์ œํ’ˆ์„ ์•ฝ 4๋…„๋™์•ˆ ๋งŒ๋“ค๋ฉด์„œ ์ข‹์€ ์ฝ”๋“œ, ํ’ˆ์งˆ์ด ์ข‹์€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ•ด์™”์Šต๋‹ˆ๋‹ค.

 

๋Œ€๊ทœ๋ชจ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์— ๋Œ€ํ•œ ๋” ๋‚˜์€ ๋ฐฉํ–ฅ์„ ๊ณ ๋ฏผํ•˜๊ณ , ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
Microsoft MVP (TypeScript) ๋กœ ํ™œ๋™ํ•ด ์™”์œผ๋ฉฐ, ์ตœ์‹  ์›น๊ธฐ์ˆ ์— ๋Œ€ํ•ด ์‚ฌ๋žŒ๋“ค๊ณผ ์ด์•ผ๊ธฐ ํ•˜๋Š” ๊ฒƒ์„ ์ฆ๊น๋‹ˆ๋‹ค.

 

์—ฌ๋Ÿฌ ๊ณณ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ ํŒ€์„ ์ด๋Œ๋ฉฐ, ์ฃผ๋กœ ํ•จ์ˆ˜ํ˜• ์–ธ์–ด(ํด๋กœ์ €)๋‚˜ Node.js ๋กœ ๋ฐฑ์—”๋“œ ์ž‘์—…์„ ์ง„ํ–‰ํ•ฉ๋‹ˆ๋‹ค.
์ธํ”„๋ผ ์ž๋™ํ™”์— ๋Œ€ํ•œ ๊ด€์‹ฌ์ด ๋งŽ์Šต๋‹ˆ๋‹ค.

๋”๋ณด๊ธฐ

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

์ „์ฒด

34๊ฐœ โˆ™ (5์‹œ๊ฐ„ 52๋ถ„)

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

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

15๊ฐœ

4.8

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

  • develop๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    develop

    ์ˆ˜๊ฐ•ํ‰ 1

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

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

    ์ข‹์•„์š”!

    • ์œค์Šนํ™˜๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
      ์œค์Šนํ™˜

      ์ˆ˜๊ฐ•ํ‰ 1

      โˆ™

      ํ‰๊ท  ํ‰์  5.0

      5

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

      • mango1g๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
        mango1g

        ์ˆ˜๊ฐ•ํ‰ 13

        โˆ™

        ํ‰๊ท  ํ‰์  4.8

        5

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

        ์•ต๊ทค๋Ÿฌ ๊ฐ•์˜๊ฐ€ ๋งŽ์ด ์—†๋Š”๋ฐ, ๋„์›€์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

        • ๋งŒ๋‘๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
          ๋งŒ๋‘

          ์ˆ˜๊ฐ•ํ‰ 18

          โˆ™

          ํ‰๊ท  ํ‰์  4.8

          4

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

          • support๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
            support

            ์ˆ˜๊ฐ•ํ‰ 1

            โˆ™

            ํ‰๊ท  ํ‰์  5.0

            5

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

            ์ข‹์•„์š”! ๋„์›€์ด ๋งŽ์ด ๋์Šต๋‹ˆ๋‹ค :)

            ์ด์›…์žฌ๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

            ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

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

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

            โ‚ฉ55,000