- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > À¥ÇÁ·Î±×·¡¹Ö > ½ºº§Æ®·Î ½ÃÀÛÇÏ´Â À¥ ÇÁ·±Æ®¿£µå[ºñÁ¦ÀÌÆÛºí¸¯]
½ºº§Æ®ÀÇ ÀåÁ¡°ú ±â´É, ±âÁ¸ ÇÁ·±Æ®¿£µå ÇÁ·¹ÀÓ¿öÅ©¿ÍÀÇ Â÷ÀÌÁ¡ ±×¸®°í ½ºº§Æ®°¡ ½ÇÀü ÇÁ·ÎÁ§Æ®¿¡ ¾î¶»°Ô »ç¿ëµÇ´ÂÁö ¼Ò°³ÇÑ´Ù. ¶ÇÇÑ, ½ÇÁ¦ ¹é¿£µå ¼¹ö°¡ Àִ ȯ°æ¿¡¼ ¡®Todo ¼ºñ½º¡¯¿Í ¡®SNS ¼ºñ½º¡¯¸¦ È¿°úÀûÀ¸·Î ±¸ÇöÇÑ´Ù. ÀÌ °úÁ¤¿¡¼ ´Ü¼øÈ÷ ÇϳªÀÇ ÇÁ·¹ÀÓ¿öÅ©¸¦ ÀÍÈ÷´Â °ÍÀ» ³Ñ¾î ÄÄÆ÷³ÍÆ®, »óÅ°ª, ºñµ¿±âÅë½Å µî ÇÁ·±Æ®¿£µå °³¹ßÀÚ¶ó¸é ¾Ë¾Æ¾ß ÇÏ´Â ±âº»±â¸¦ ÀÍÈú ¼ö ÀÖ´Ù.
ÀÌ Ã¥À» ÅëÇØ ½ºº§Æ® ¹®¹ýÀ» ü°èÀûÀ¸·Î °øºÎÇÏ°í °£°áÇÑ ÄÚµå·Î À¥ ÇÁ·±Æ®¿£µå¸¦ ºü¸£°Ô °³¹ßÇØ ³ª°¡¸ç ½ºº§Æ®ÀÇ ¸Å·ÂÀ» Á¦´ë·Î ´À²¸º¼ ¼ö ÀÖÀ» °ÍÀÌ´Ù.
ÀÌ Ã¥À» ÅëÇØ ¾òÀ» ¼ö ÀÖ´Â °Í
- Svelte ÇÁ·¹ÀÓ¿öÅ© È°¿ë ¹× ÀÀ¿ë ½ºÅ³
- ÇÁ·±Æ®¿£µå °³¹ß °úÁ¤¿¡ ´ëÇÑ Àü¹ÝÀûÀÎ ÀÌÇØ
- È»ìÇ¥ÇÔ¼ö, map, filter µî ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ® ¹®¹ýÀÇ ÀÌÇØ
- axios¸¦ ÀÌ¿ëÇØ ¹é¿£µå ¼¹ö¿Í È¿À²ÀûÀ¸·Î Åë½ÅÇÏ´Â ¹æ¹ý
- ÅäÅ«À» ÀÌ¿ëÇØ ÀÎÁõ°úÁ¤À» ÇÁ·±Æ®¿£µå¿¡ Àû¿ëÇÏ´Â ¹æ¹ý
- SNS ¼ºñ½º Á¦ÀÛÀ» ÅëÇÑ ½ÇÀü °³¹ß ÇÁ·ÎÁ§Æ® °æÇè
- rollup.js ¹øµé·¯ÀÇ ÀÌÇØ
- ¹«ÇѽºÅ©·Ñ, Æû°ËÁõ, ½¬¿î³¯Â¥º¸±â µî ½Ç¹«¿¡ ¹Ù·Î Àû¿ë °¡´ÉÇÑ ÇÁ·±Æ®¿£µå ½ºÅ³
ÀÌ Ã¥À» ÅëÇØ ½ºº§Æ® ¹®¹ýÀ» ü°èÀûÀ¸·Î °øºÎÇÏ°í °£°áÇÑ ÄÚµå·Î À¥ ÇÁ·±Æ®¿£µå¸¦ ºü¸£°Ô °³¹ßÇØ ³ª°¡¸ç ½ºº§Æ®ÀÇ ¸Å·ÂÀ» Á¦´ë·Î ´À²¸º¼ ¼ö ÀÖÀ» °ÍÀÌ´Ù.
ÀÌ Ã¥À» ÅëÇØ ¾òÀ» ¼ö ÀÖ´Â °Í
- Svelte ÇÁ·¹ÀÓ¿öÅ© È°¿ë ¹× ÀÀ¿ë ½ºÅ³
- ÇÁ·±Æ®¿£µå °³¹ß °úÁ¤¿¡ ´ëÇÑ Àü¹ÝÀûÀÎ ÀÌÇØ
- È»ìÇ¥ÇÔ¼ö, map, filter µî ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ® ¹®¹ýÀÇ ÀÌÇØ
- axios¸¦ ÀÌ¿ëÇØ ¹é¿£µå ¼¹ö¿Í È¿À²ÀûÀ¸·Î Åë½ÅÇÏ´Â ¹æ¹ý
- ÅäÅ«À» ÀÌ¿ëÇØ ÀÎÁõ°úÁ¤À» ÇÁ·±Æ®¿£µå¿¡ Àû¿ëÇÏ´Â ¹æ¹ý
- SNS ¼ºñ½º Á¦ÀÛÀ» ÅëÇÑ ½ÇÀü °³¹ß ÇÁ·ÎÁ§Æ® °æÇè
- rollup.js ¹øµé·¯ÀÇ ÀÌÇØ
- ¹«ÇѽºÅ©·Ñ, Æû°ËÁõ, ½¬¿î³¯Â¥º¸±â µî ½Ç¹«¿¡ ¹Ù·Î Àû¿ë °¡´ÉÇÑ ÇÁ·±Æ®¿£µå ½ºÅ³
ÀúÀÚ: ±è±Ù¿µ
Chapter 01 Svelte ¼Ò°³
1-1 À¥ ÇÁ·±Æ®¿£µåÀÇ °ú°Å¿Í ÇöÀç
1-2 SvelteÀÇ µîÀå
1-3 Svelte ÀåÁ¡
____1-3-1 Write less code: º¸´Ù ÀûÀº ÄÚµå
____1-3-2 No virtual DOM: °¡»óµ¼ ¾øÀÌ
____1-3-3 Truly reactive: ÁøÁ¤ÇÑ ¹ÝÀÀ¼º
Chapter 02 ÇнÀ ȯ°æ
2-1 REPLÀ» ÅëÇÑ ¿¹Á¦ ½ÇÇà¹æ¹ý ¼Ò°³
2-2 ·ÎÄà °³¹ßȯ°æ ±¸Ãà
____2-2-1 Node.js ȯ°æ ¼³Á¤
____2-2-2 ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµå ¼³Ä¡
____2-2-3 Svelte ¼³Ä¡ ¹× ½ÇÇà
2-3 Svelte ¼³Ä¡ Æú´õ ¼³¸í
____2-3-1 ±âº» ±¸¼º¿ä¼Ò ¹× Æú´õ ±¸Á¶ ¼³¸í
____2-3-2 Svelte ±âº» ±¸¼º¿ä¼Ò
2-4 ¼Ò½ºÄÚµå ½ÇÇà¹æ¹ý
Chapter 03 ÄÄÆ÷³ÍÆ®(1) - ±âº» »ç¿ë¹æ¹ý
3-1 ÄÄÆ÷³ÍÆ® ±âº»
3-2 State(»óÅ°ª)
3-3 Reactivity(¹ÝÀÀ¼º)
____3-3-1 ¸¶Å©¾÷ ¿µ¿ª¿¡¼ÀÇ ¹ÝÀÀ¼º
____3-3-2 ½ºÅ©¸³Æ® ¿µ¿ª¿¡¼ÀÇ ¹ÝÀÀ¼º - \$:
____3-3-3 ´Ù¸¥ ÇÁ·¹ÀÓ¿öÅ©¿Í ÄÚµå ºñ±³
3-4 Event
____3-4-1 À̺¥Æ® ±âº» »ç¿ë¹æ¹ý
____3-4-2 ÀζóÀÎ(inline) À̺¥Æ® »ç¿ë¹æ¹ý
____3-4-3 À̺¥Æ® ¼ö½Ä¾î(modifiers)
3-5 Props¸¦ ÀÌ¿ëÇÑ ÄÄÆ÷³ÍÆ® Åë½Å¹æ¹ý
____3-5-1 Props ±âº» »ç¿ë¹æ¹ý
____3-5-2 Props µ¥ÀÌÅÍ º¯°æ
Chapter 04 ÄÄÆ÷³ÍÆ®(2) - Template Á¦¾î
4-1 ³í¸®ºí·Ï {#if...}
____4-1-1 if ºí·Ï
____4-1-2 else ºí·Ï
____4-1-3 else-if ºí·Ï
4-2 ¹Ýº¹ºí·Ï {#each...}
____4-2-1 Each ºí·Ï
4-3 Binding
____4-3-1 ¹ÙÀεùÀ̶õ?
____4-3-2 ·¹ÀÎÁö ¹ÙÀεù
____4-3-3 ¼¿·ºÆ®¹Ú½º ¹ÙÀεù
____4-3-4 üũ¹Ú½º ¹ÙÀεù
____4-3-5 group inputÀ» ÀÌ¿ëÇÑ ¶óµð¿À ¹öÆ° ¡¤ üũ¹Ú½º ¹ÙÀεù
____4-3-6 contenteditable ¹ÙÀεù
____4-3-7 ÄÄÆ÷³ÍÆ® ¹ÙÀεù
4-4 ½½·Ô(Slot)
____4-4-1 ½½·ÔÀ̶õ?
____4-4-2 ½½·Ô name ¼³Á¤
____4-4-3 Á¶°Ç¿¡ µû¸¥ Ç¥Çö
____4-4-4 ½½·Ô¿¡¼ÀÇ Props Åë½Å
4-5 ¶óÀÌÇÁ»çÀÌŬ
Chapter 05 ÄÄÆ÷³ÍÆ® Åë½Å °í±Þ
5-1 context API
____5-1-1 context API ±âº» »ç¿ë¹æ¹ý
____5-1-2 context API È°¿ë ¿¹Á¦
5-2 dispatch
5-3 store
____5-3-1 writable store
____5-3-2 derived store
____5-3-3 readable store
Chapter 06 ½ºÅ¸ÀÏ ¹× È¿°ú
6-1 CSS Á¦¾î
6-2 transition: ȸéÀüȯ
____6-2-1 fade
____6-2-2 blur
____6-2-3 fly
____6-2-4 slide
____6-2-5 scale
____6-2-6 draw
____6-2-7 in ¡¤ out
____6-2-8 crossfade
____6-2-9 flipÀ» ÀÌ¿ëÇÑ ¾Ö´Ï¸ÞÀ̼Ç
6-3 motion
____6-3-1 tweened
____6-3-2 spring
6-4 actions
____6-4-1 ¾×¼Ç ±âº» »ç¿ë¹æ¹ý
____6-4-2 ¾×¼Ç¿¡ ÀÎÀÚ Àü´Þ
____6-4-3 update ¡¤ destroy
____6-4-4 ¾×¼ÇÀ» ÅëÇÑ À̺¥Æ® Á¦¾î
____6-4-5 ¾×¼ÇÀ» ÀÌ¿ëÇÑ ¿ÜºÎ ¶óÀ̺귯¸® È°¿ë
Chapter 07 Modal·Î ¹è¿ì´Â ÄÄÆ÷³ÍÆ® ½Ç½À
Chapter 08 ½ÇÀü ÇÁ·ÎÁ§Æ®(1) - Todo ¼ºñ½º ¸¸µé±â
8-1 Todo ÇÁ·ÎÁ§Æ® ¼³¸í
____8-1-1 Todo ¼ºñ½º ±â´É
____8-1-2 ±âº» ȯ°æ¼³Á¤
8-2 ÄÄÆ÷³ÍÆ® ¹èÄ¡
8-3 Todo ¸®½ºÆ® Ãâ·Â
8-4 Todo ÀÔ·Â
8-5 Todo »èÁ¦
8-6 Todo ¼öÁ¤
8-7 count
1-1 À¥ ÇÁ·±Æ®¿£µåÀÇ °ú°Å¿Í ÇöÀç
1-2 SvelteÀÇ µîÀå
1-3 Svelte ÀåÁ¡
____1-3-1 Write less code: º¸´Ù ÀûÀº ÄÚµå
____1-3-2 No virtual DOM: °¡»óµ¼ ¾øÀÌ
____1-3-3 Truly reactive: ÁøÁ¤ÇÑ ¹ÝÀÀ¼º
Chapter 02 ÇнÀ ȯ°æ
2-1 REPLÀ» ÅëÇÑ ¿¹Á¦ ½ÇÇà¹æ¹ý ¼Ò°³
2-2 ·ÎÄà °³¹ßȯ°æ ±¸Ãà
____2-2-1 Node.js ȯ°æ ¼³Á¤
____2-2-2 ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµå ¼³Ä¡
____2-2-3 Svelte ¼³Ä¡ ¹× ½ÇÇà
2-3 Svelte ¼³Ä¡ Æú´õ ¼³¸í
____2-3-1 ±âº» ±¸¼º¿ä¼Ò ¹× Æú´õ ±¸Á¶ ¼³¸í
____2-3-2 Svelte ±âº» ±¸¼º¿ä¼Ò
2-4 ¼Ò½ºÄÚµå ½ÇÇà¹æ¹ý
Chapter 03 ÄÄÆ÷³ÍÆ®(1) - ±âº» »ç¿ë¹æ¹ý
3-1 ÄÄÆ÷³ÍÆ® ±âº»
3-2 State(»óÅ°ª)
3-3 Reactivity(¹ÝÀÀ¼º)
____3-3-1 ¸¶Å©¾÷ ¿µ¿ª¿¡¼ÀÇ ¹ÝÀÀ¼º
____3-3-2 ½ºÅ©¸³Æ® ¿µ¿ª¿¡¼ÀÇ ¹ÝÀÀ¼º - \$:
____3-3-3 ´Ù¸¥ ÇÁ·¹ÀÓ¿öÅ©¿Í ÄÚµå ºñ±³
3-4 Event
____3-4-1 À̺¥Æ® ±âº» »ç¿ë¹æ¹ý
____3-4-2 ÀζóÀÎ(inline) À̺¥Æ® »ç¿ë¹æ¹ý
____3-4-3 À̺¥Æ® ¼ö½Ä¾î(modifiers)
3-5 Props¸¦ ÀÌ¿ëÇÑ ÄÄÆ÷³ÍÆ® Åë½Å¹æ¹ý
____3-5-1 Props ±âº» »ç¿ë¹æ¹ý
____3-5-2 Props µ¥ÀÌÅÍ º¯°æ
Chapter 04 ÄÄÆ÷³ÍÆ®(2) - Template Á¦¾î
4-1 ³í¸®ºí·Ï {#if...}
____4-1-1 if ºí·Ï
____4-1-2 else ºí·Ï
____4-1-3 else-if ºí·Ï
4-2 ¹Ýº¹ºí·Ï {#each...}
____4-2-1 Each ºí·Ï
4-3 Binding
____4-3-1 ¹ÙÀεùÀ̶õ?
____4-3-2 ·¹ÀÎÁö ¹ÙÀεù
____4-3-3 ¼¿·ºÆ®¹Ú½º ¹ÙÀεù
____4-3-4 üũ¹Ú½º ¹ÙÀεù
____4-3-5 group inputÀ» ÀÌ¿ëÇÑ ¶óµð¿À ¹öÆ° ¡¤ üũ¹Ú½º ¹ÙÀεù
____4-3-6 contenteditable ¹ÙÀεù
____4-3-7 ÄÄÆ÷³ÍÆ® ¹ÙÀεù
4-4 ½½·Ô(Slot)
____4-4-1 ½½·ÔÀ̶õ?
____4-4-2 ½½·Ô name ¼³Á¤
____4-4-3 Á¶°Ç¿¡ µû¸¥ Ç¥Çö
____4-4-4 ½½·Ô¿¡¼ÀÇ Props Åë½Å
4-5 ¶óÀÌÇÁ»çÀÌŬ
Chapter 05 ÄÄÆ÷³ÍÆ® Åë½Å °í±Þ
5-1 context API
____5-1-1 context API ±âº» »ç¿ë¹æ¹ý
____5-1-2 context API È°¿ë ¿¹Á¦
5-2 dispatch
5-3 store
____5-3-1 writable store
____5-3-2 derived store
____5-3-3 readable store
Chapter 06 ½ºÅ¸ÀÏ ¹× È¿°ú
6-1 CSS Á¦¾î
6-2 transition: ȸéÀüȯ
____6-2-1 fade
____6-2-2 blur
____6-2-3 fly
____6-2-4 slide
____6-2-5 scale
____6-2-6 draw
____6-2-7 in ¡¤ out
____6-2-8 crossfade
____6-2-9 flipÀ» ÀÌ¿ëÇÑ ¾Ö´Ï¸ÞÀ̼Ç
6-3 motion
____6-3-1 tweened
____6-3-2 spring
6-4 actions
____6-4-1 ¾×¼Ç ±âº» »ç¿ë¹æ¹ý
____6-4-2 ¾×¼Ç¿¡ ÀÎÀÚ Àü´Þ
____6-4-3 update ¡¤ destroy
____6-4-4 ¾×¼ÇÀ» ÅëÇÑ À̺¥Æ® Á¦¾î
____6-4-5 ¾×¼ÇÀ» ÀÌ¿ëÇÑ ¿ÜºÎ ¶óÀ̺귯¸® È°¿ë
Chapter 07 Modal·Î ¹è¿ì´Â ÄÄÆ÷³ÍÆ® ½Ç½À
Chapter 08 ½ÇÀü ÇÁ·ÎÁ§Æ®(1) - Todo ¼ºñ½º ¸¸µé±â
8-1 Todo ÇÁ·ÎÁ§Æ® ¼³¸í
____8-1-1 Todo ¼ºñ½º ±â´É
____8-1-2 ±âº» ȯ°æ¼³Á¤
8-2 ÄÄÆ÷³ÍÆ® ¹èÄ¡
8-3 Todo ¸®½ºÆ® Ãâ·Â
8-4 Todo ÀÔ·Â
8-5 Todo »èÁ¦
8-6 Todo ¼öÁ¤
8-7 count