|
|
|
½ÇÀü ¸®¾×Æ® ÇÁ·Î±×·¡¹Ö : ¸®¾×Æ® ÈźÎÅÍ Next.js±îÁö
|
|
|
Programming Insight(ÇÁ·Î±×·¡¹Ö ÀλçÀÌÆ®)1
¤Ó ÀÌÀç½Â
¤Ó
ÀλçÀÌÆ®
|
|
|
|
- Á¦ÈÞ¸ô ÁÖ¹® ½Ã °í°´º¸»ó, ÀϺΠÀ̺¥Æ® Âü¿© ¹× ÁõÁ¤Ç° ÁõÁ¤, ÇÏ·ç/´çÀÏ ¹è¼Û¿¡¼ Á¦¿ÜµÇ¹Ç·Î Âü°í ¹Ù¶ø´Ï´Ù.
-
-
-
ÇÙ½É ¿ø¸®·Î ¸®¾×Æ®ÀÇ ±âº» °³³äÀ» ´ÙÁö°í,
¸®¾×Æ® ÈÅÀ¸·Î ±¸ÇöµÈ ½ÇÀü ¿¹Á¦¸¦ ÅëÇØ È°¿ë¹ýÀ» ÀÍÈù´Ù!
¸®¾×Æ® ÈÅÀ¸·Î ÀÛ¼ºµÈ ¿¹Á¦¿Í ÇÙ½É ¿ø¸®¸¦ ÅëÇØ ¸®¾×Æ®ÀÇ ½ÇÀü »ç¿ë¹ýÀ» ÀÍÈú ¼ö ÀÖ´Ù. ´Ü¼øÈ÷ ±â¼úÀ» ¼Ò°³ÇÏ´Â µ¥ ±×Ä¡Áö ¾Ê°í ±× ±â¼úÀ» »ç¿ëÇÏ´Â ÀÌÀ¯¸¦ ÇÔ²² ´Ù·é´Ù. µû¶ó¼ ¸®¾×Æ®»Ó ¾Æ´Ï¶ó ¾ÕÀ¸·Î ¸¸³ª°Ô µÉ ¾î¶² ±â¼úµµ ºü¸£°Ô ¹è¿ï ¼ö ÀÖ´Â ±âº»±â¸¦ ½×À» ¼ö ÀÖ´Ù. ¸®¾×Æ®¸¦ ÀÌ¹Ì »ç¿ëÇØ º» »ç¶÷À» ´ë»óÀ¸·Î ¾²¿´Áö¸¸ ±âÃʺÎÅÍ ½ÃÀÛÇÑ´Ù. ¿ì¼± ¸®¾×Æ® ÇÁ·ÎÁ§Æ®¸¦ ±¸ÃàÇÏ°í, ÃֽŠÀÚ¹Ù½ºÅ©¸³Æ® ¹®¹ý, ¸®¾×Æ®ÀÇ ÁÖ¿ä °³³äÀ» °£´ÜÈ÷ ¾Ë¾Æº»´Ù. Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ®¸¦ ¼³¸íÇÏ´Â ºÎºÐÀ» Á¦¿ÜÇÏ°í ÀÌ Ã¥ÀÇ ¸ðµç ¿¹Á¦´Â ¸®¾×Æ® ÈÅÀ¸·Î ÀÛ¼ºÇß´Ù.
¸®¾×Æ® ÈÅÀÇ °³³ä°ú ½ÇÁ¦ È°¿ëÇÒ ¶§ µµ¿òÀÌ µÇ´Â °í±Þ È°¿ë¹ýÀ» ¾Ë¾Æº» ÈÄ ¸®´ö½º, ¹Ùº§, À¥ÆѱîÁö ´Ù·é´Ù. ¼¹ö»çÀÌµå ·»´õ¸µÀÇ °³³ä°ú Next.js ÇÁ·ÎÁ§Æ®¸¦ ±¸ÃàÇÏ´Â ¹æ¹ýÀ» »ìÆ캻 ÈÄ Å¸ÀÔ½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇØ ¸®¾×Æ® Äڵ带 ÀÛ¼ºÇÑ´Ù. ÃßÈÄ ¸®¾×Æ®¿¡ Ãß°¡µÉ °ÍÀ¸·Î ¿¹»óµÇ´Â concurrent ¸ðµå±îÁö ´Ù·ï¼ ´Ù°¡¿Ã º¯È¿¡µµ ´ëºñÇÑ´Ù.
ÀÌ Ã¥¿¡¼ ´Ù·ç´Â ³»¿ë
¡Ü ¸®¾×Æ®ÀÇ »ç¿ë¹ý°ú ÇÙ½É ¿ø¸®
¡Ü ¸®¾×Æ® °³¹ß ȯ°æÀ» Á÷Á¢ ±¸ÃàÇÏ´Â ¹æ¹ý
¡Ü ¼¹ö»çÀÌµå ·»´õ¸µÀÇ ÁÖ¿ä °³³ä¿¡ ´ëÇÑ ÀÌÇØ¿Í ÀÀ¿ë
¡Ü Á¤Àû ŸÀÔÀΠŸÀÔ½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇØ ¸®¾×Æ® Äڵ带 ÀÛ¼ºÇÏ´Â ¹æ¹ý
¡Ü ¸®´ö½º·Î »óŸ¦ °ü¸®ÇÏ´Â ¹æ¹ý
¡Ü Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÏ´Â ·¹°Å½Ã ÇÁ·ÎÁ§Æ® ´Ù·ç±â
¡Ü ³íºí·ÎÅ· ·»´õ¸µÀ» °¡´ÉÇÏ°Ô ÇØ ÁÖ´Â concurrent ¸ðµå
-
-
1Àå ¸®¾×Æ® ÇÁ·ÎÁ§Æ® ½ÃÀÛÇϱâ
1.1 ¸®¾×Æ®¶õ ¹«¾ùÀΰ¡
1.2 ¸®¾×Æ® °³¹ß ȯ°æ Á÷Á¢ ±¸ÃàÇϱâ
1.2.1 Hello World ÆäÀÌÁö ¸¸µé±â
1.2.2 ¹Ùº§ »ç¿ëÇØ º¸±â
1.2.3 À¥ÆÑÀÇ ±âº» °³³ä ÀÌÇØÇϱâ
1.2.4 À¥ÆÑ »ç¿ëÇØ º¸±â
1.3 create-react-appÀ¸·Î ½ÃÀÛÇϱâ
1.3.1 create-react-app »ç¿ëÇØ º¸±â
1.3.2 ÁÖ¿ä ¸í·É¾î ¾Ë¾Æº¸±â
1.3.3 ÀÚ¹Ù½ºÅ©¸³Æ® Áö¿ø ¹üÀ§
1.3.4 ÄÚµå ºÐÇÒÇϱâ
1.3.5 ȯ°æ º¯¼ö »ç¿ëÇϱâ
1.4 CSS ÀÛ¼º ¹æ¹ý °áÁ¤Çϱâ
1.4.1 ÀϹÝÀûÀÎ CSS ÆÄÀÏ·Î ÀÛ¼ºÇϱâ
1.4.2 css-module·Î ÀÛ¼ºÇϱâ
1.4.3 Sass·Î ÀÛ¼ºÇϱâ
1.4.4 css-in-js·Î ÀÛ¼ºÇϱâ
1.5 ´ÜÀÏ ÆäÀÌÁö ¾ÖÇø®ÄÉÀÌ¼Ç ¸¸µé±â
1.5.1 ºê¶ó¿ìÀú È÷½ºÅ丮 API
1.5.2 react-router-dom »ç¿ëÇϱâ
2Àå ES6+¸¦ Ç°Àº ÀÚ¹Ù½ºÅ©¸³Æ®, ¸Å·ÂÀûÀÎ ¾ð¾î°¡ µÇ´Ù
2.1 º¯¼ö¸¦ Á¤ÀÇÇÏ´Â »õ·Î¿î ¹æ¹ý: const, let
2.1.1 var°¡ °¡Áø ¹®Á¦
2.1.2 varÀÇ ¹®Á¦¸¦ ÇØ°áÇÏ´Â const, let
2.2 °´Ã¼¿Í ¹è¿ÀÇ »ç¿ë¼º °³¼±
2.2.1 °´Ã¼¿Í ¹è¿À» °£ÆíÇÏ°Ô »ý¼ºÇÏ°í ¼öÁ¤Çϱâ
2.2.2 °´Ã¼¿Í ¹è¿ÀÇ ¼Ó¼º°ªÀ» °£ÆíÇÏ°Ô °¡Á®¿À±â
2.3 °ÈµÈ ÇÔ¼öÀÇ ±â´É
2.3.1 ¸Å°³º¯¼ö¿¡ Ãß°¡µÈ ±â´É
2.3.2... ÇÔ¼ö¸¦ Á¤ÀÇÇÏ´Â »õ·Î¿î ¹æ¹ý: È»ìÇ¥ ÇÔ¼ö
2.4 Çâ»óµÈ ºñµ¿±â ÇÁ·Î±×·¡¹Ö 1: ÇÁ·Î¹Ì½º
2.4.1 ÇÁ·Î¹Ì½º ÀÌÇØÇϱâ
2.4.2 ÇÁ·Î¹Ì½º È°¿ëÇϱâ
2.4.3 ÇÁ·Î¹Ì½º »ç¿ë ½Ã ÁÖÀÇÇÒ Á¡
2.5 Çâ»óµÈ ºñµ¿±â ÇÁ·Î±×·¡¹Ö 2: async await
2.5.1 async await ÀÌÇØÇϱâ
2.5.2 async await È°¿ëÇϱâ
2.6 ÅÛÇø´ ¸®ÅÍ·²·Î µ¿ÀûÀÎ ¹®ÀÚ¿ »ý¼ºÇϱâ
2.7 ½ÇÇàÀ» ¸ØÃâ ¼ö ÀÖ´Â Á¦³Ê·¹ÀÌÅÍ
2.7.1 Á¦³Ê·¹ÀÌÅÍ ÀÌÇØÇϱâ
2.7.2 Á¦³Ê·¹ÀÌÅÍ È°¿ëÇϱâ
3Àå Áß¿äÇÏÁö¸¸ Çò°¥¸®´Â ¸®¾×Æ® °³³ä ÀÌÇØÇϱâ
3.1 »óÅÈ°ª°ú ¼Ó¼º°ªÀ¸·Î °ü¸®ÇÏ´Â UI µ¥ÀÌÅÍ
3.1.1 ¸®¾×Æ®¸¦ »ç¿ëÇÑ ÄÚµåÀÇ Æ¯Â¡
3.1.2 ÄÄÆ÷³ÍÆ®ÀÇ ¼Ó¼º°ª°ú »óÅÈ°ª
3.1.3 ÄÄÆ÷³ÍÆ® ÇÔ¼öÀÇ ¹Ýȯ°ª
3.2 ¸®¾×Æ® ¿ä¼Ò¿Í °¡»ó µ¼
3.2.1 ¸®¾×Æ® ¿ä¼Ò ÀÌÇØÇϱâ
3.2.2 ¸®¾×Æ® ¿ä¼Ò°¡ µ¼ ¿ä¼Ò·Î ¸¸µé¾îÁö´Â °úÁ¤
3.3 ¸®¾×Æ® ÈÅ ±âÃÊ ÀÍÈ÷±â
3.3.1 »óÅÈ°ª Ãß°¡Çϱâ: useState
3.3.2 ÄÄÆ÷³ÍÆ®¿¡¼ ºÎ¼ö È¿°ú ó¸®Çϱâ: useEffect
3.3.3 ÈÅ Á÷Á¢ ¸¸µé±â
3.3.4 ÈÅ »ç¿ë ½Ã ÁöÄÑ¾ß ÇÒ ±ÔÄ¢
3.4 ÄÜÅؽºÆ® API·Î µ¥ÀÌÅÍ Àü´ÞÇϱâ
3.4.1 ÄÜÅؽºÆ® API ÀÌÇØÇϱâ
3.4.2 ÄÜÅؽºÆ® API È°¿ëÇϱâ
3.4.3 ÄÜÅؽºÆ® API »ç¿ë ½Ã ÁÖÀÇÇÒ Á¡
3.5 ref ¼Ó¼º°ªÀ¸·Î ÀÚ½Ä ¿ä¼Ò¿¡ Á¢±ÙÇϱâ
3.5.1 ref ¼Ó¼º°ª ÀÌÇØÇϱâ
3.5.2 ref ¼Ó¼º°ª È°¿ëÇϱâ
3.5.3 ref ¼Ó¼º°ª »ç¿ë ½Ã ÁÖÀÇÇÒ Á¡
3.6 ¸®¾×Æ® ³»Àå ÈÅ »ìÆ캸±â
3.6.1 Consumer ÄÄÆ÷³ÍÆ® ¾øÀÌ ÄÜÅؽºÆ® »ç¿ëÇϱâ: useContext
3.6.2 ·»´õ¸µ°ú ¹«°üÇÑ °ª ÀúÀåÇϱâ: useRef
3.6.3 ¸Þ¸ðÀÌÁ¦ÀÌ¼Ç ÈÅ: useMemo, useCallback
3.6.4 ÄÄÆ÷³ÍÆ®ÀÇ »óÅÈ°ªÀ» ¸®´ö½ºÃ³·³ °ü¸®Çϱâ: useReducer
3.6.5 ºÎ¸ð ÄÄÆ÷³ÍÆ®¿¡¼ Á¢±Ù °¡´ÉÇÑ ÇÔ¼ö ±¸ÇöÇϱâ: useImperativeHandle
3.6.6 ±âŸ ¸®¾×Æ® ³»Àå ÈÅ: useLayoutEffect, useDebugValue
4Àå ¸®¾×Æ® ½ÇÀü È°¿ë¹ý
4.1 °¡µ¶¼º°ú »ý»ê¼ºÀ» °í·ÁÇÑ ÄÄÆ÷³ÍÆ® ÄÚµå ÀÛ¼º¹ý
4.1.1 ÃßõÇÏ´Â ÄÄÆ÷³ÍÆ® ÆÄÀÏ ÀÛ¼º¹ý
4.1.2 ¼Ó¼º°ª ŸÀÔ Á¤ÀÇÇϱâ: prop-types
4.1.3 °¡µ¶¼ºÀ» ³ôÀÌ´Â Á¶°ÇºÎ ·»´õ¸µ ¹æ¹ý
4.1.4 °ü½É»ç ºÐ¸®¸¦ À§ÇÑ ÇÁ·¹Á¨Å×À̼Ç, ÄÁÅ×ÀÌ³Ê ÄÄÆ÷³ÍÆ® ±¸ºÐÇϱâ
4.2 useEffect ÈÅ ½ÇÀü È°¿ë¹ý
4.2.1 ÀÇÁ¸¼º ¹è¿À» °ü¸®ÇÏ´Â ¹æ¹ý
4.2.2 ÀÇÁ¸¼º ¹è¿À» ¾ø¾Ö´Â ¹æ¹ý
4.3 ·»´õ¸µ ¼Óµµ¸¦ ¿Ã¸®±â À§ÇÑ ¼º´É ÃÖÀûÈ ¹æ¹ý
4.3.1 React.memo·Î ·»´õ¸µ °á°ú Àç»ç¿ëÇϱâ
4.3.2 ¼Ó¼º°ª°ú »óÅÈ°ªÀ» ºÒº¯ º¯¼ö·Î °ü¸®ÇÏ´Â ¹æ¹ý
4.3.3 °¡»ó µ¼¿¡¼ÀÇ ¼º´É ÃÖÀûÈ
5Àå ·¹°Å½Ã ÇÁ·ÎÁ§Æ®¸¦ À§ÇÑ Å¬·¡½ºÇü ÄÄÆ÷³ÍÆ®
5.1 Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ®ÀÇ »ý¸í Áֱ⠸޼µå
5.1.1 constructor ¸Þ¼µå
5.1.2 getDerivedStateFromProps ¸Þ¼µå
5.1.3 render ¸Þ¼µå
5.1.4 componentDidMount ¸Þ¼µå
5.1.5 shouldComponentUpdate ¸Þ¼µå
5.1.6 getSnapshotBeforeUpdate ¸Þ¼µå
5.1.7 componentDidUpdate ¸Þ¼µå
5.1.8 componentWillUnmount ¸Þ¼µå
5.1.9 getDerivedStateFromError, componentDidCatch ¸Þ¼µå
5.2 Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ® ±âº» »ç¿ë¹ý
5.2.1 setState ¸Þ¼µå ÀÌÇØÇϱâ
5.2.2 Ŭ·¡½º Çʵ带 ÀÌ¿ëÇØ À̺¥Æ® ó¸® ¸Þ¼µå ÀÛ¼ºÇϱâ
5.2.3 »ý¸í Áֱ⠸޼µå¿¡¼ ÄÁÅؽºÆ® µ¥ÀÌÅÍ »ç¿ëÇϱâ
5.3 ÄÄÆ÷³ÍÆ®ÀÇ °øÅë ±â´É °ü¸®Çϱâ
5.3.1 °íÂ÷ ÄÄÆ÷³ÍÆ®¸¦ ÀÌ¿ëÇÑ °øÅë ±â´É °ü¸®
5.3.2 ·»´õ ¼Ó¼º°ªÀ» ÀÌ¿ëÇÑ °øÅë ±â´É °ü¸®
5.4 Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ®¿Í ÈÅÀÇ °ü°è
5.5 Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ®¸¦ ÈÅÀ¸·Î º¯È¯Çϱâ
5.5.1 constructor ¸Þ¼µå
5.5.2 componentDidUpdate ¸Þ¼µå
5.5.3 getDerivedStateFromProps ¸Þ¼µå
5.5.4 forceUpdate ¸Þ¼µå
5.6 ±âÁ¸ Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ®¸¦ °í·ÁÇÑ Ä¿½ºÅÒ ÈÅ ÀÛ¼º¹ý
5.6.1 Ä¿½ºÅÒ ÈÅÀÇ ¹Ýȯ°ªÀÌ ¾ø´Â °æ¿ì
5.6.2 Ä¿½ºÅÒ ÈÅÀÇ ¹Ýȯ°ªÀÌ ÀÖ´Â °æ¿ì
6Àå ¸®´ö½º·Î »óÅ °ü¸®Çϱâ
6.1 ¸®´ö½º »ç¿ë ½Ã µû¶ó¾ß ÇÒ ¼¼ °¡Áö ¿øÄ¢
6.2 ¸®´ö½ºÀÇ ÁÖ¿ä °³³ä ÀÌÇØÇϱâ
6.2.1 ¾×¼Ç
6.2.2 ¹Ìµé¿þ¾î
6.2.3 ¸®µà¼
6.2.4 ½ºÅä¾î
6.3 µ¥ÀÌÅÍ Á¾·ùº°·Î »óÅÈ°ª ³ª´©±â
6.3.1 »óÅÈ°ª ³ª´©±â ¿¹Á¦¸¦ À§ÇÑ »çÀü ÀÛ¾÷
6.3.2 ¸®µà¼¿¡¼ °øÅë ±â´É ºÐ¸®Çϱâ
6.4 ¸®¾×Æ® »óÅÈ°ªÀ» ¸®´ö½º·Î °ü¸®Çϱâ
6.4.1 react-redux ÆÐÅ°Áö ¾øÀÌ Á÷Á¢ ±¸ÇöÇϱâ
6.4.2 react-redux ÆÐÅ°Áö »ç¿ëÇϱâ
6.5 reselect ÆÐÅ°Áö·Î ¼±ÅÃÀÚ ÇÔ¼ö ¸¸µé±â
6.5.1 reselect ÆÐÅ°Áö ¾øÀÌ ±¸ÇöÇØ º¸±â
6.5.2 reselect ÆÐÅ°Áö »ç¿ëÇϱâ
6.5.3 reselect¿¡¼ ÄÄÆ÷³ÍÆ®ÀÇ ¼Ó¼º°ª ÀÌ¿ëÇϱâ
6.5.4 ÄÄÆ÷³ÍÆ® ÀνºÅϽºº°·Î µ¶¸³µÈ ¸Þ¸ðÀÌÁ¦ÀÌ¼Ç Àû¿ëÇϱâ
6.6 ¸®´ö½º »ç°¡¸¦ ÀÌ¿ëÇÑ ºñµ¿±â ¾×¼Ç ó¸®
6.6.1 ¸®´ö½º »ç°¡ ½ÃÀÛÇϱâ
6.6.2 ¿©·¯ °³ÀÇ ¾×¼ÇÀÌ Çù¾÷ÇÏ´Â »ç°¡ ÇÔ¼ö
6.6.3 »ç°¡ ÇÔ¼öÀÇ ¿¹¿Ü ó¸®
6.6.4 ¸®´ö½º »ç°¡·Î µð¹Ù¿î½º ±¸ÇöÇϱâ
6.6.5 »ç°¡ ÇÔ¼ö Å×½ºÆ®Çϱâ
7Àå ¹Ùº§°ú À¥ÆÑ ÀÚ¼¼È÷ µé¿©´Ùº¸±â
7.1 ¹Ùº§ ½ÇÇà ¹× ¼³Á¤Çϱâ
7.1.1 ¹Ùº§À» ½ÇÇàÇÏ´Â ¿©·¯ °¡Áö ¹æ¹ý
7.1.2 È®À强°ú À¯¿¬¼ºÀ» °í·ÁÇÑ ¹Ùº§ ¼³Á¤ ¹æ¹ý
7.1.3 Àüü ¼³Á¤ ÆÄÀÏ°ú Áö¿ª ¼³Á¤ ÆÄÀÏ
7.1.4 ¹Ùº§°ú Æú¸®ÇÊ
7.2 ¹Ùº§ Ç÷¯±×ÀÎ Á¦ÀÛÇϱâ
7.2.1 AST ±¸Á¶ µé¿©´Ùº¸±â
7.2.2 ¹Ùº§ Ç÷¯±×ÀÎÀÇ ±âº» ±¸Á¶
7.2.3 ¹Ùº§ Ç÷¯±×ÀÎ Á¦ÀÛÇϱâ: ¸ðµç ÄÜ¼Ö ·Î±× Á¦°Å
7.2.4 ¹Ùº§ Ç÷¯±×ÀÎ Á¦ÀÛÇϱâ: ÇÔ¼ö ³»ºÎ¿¡ ÄÜ¼Ö ·Î±× Ãß°¡
7.3 À¥ÆÑ ÃʱÞÆí
7.3.1 À¥ÆÑ ½ÇÇàÇϱâ
7.3.2 ·Î´õ »ç¿ëÇϱâ
7.3.3 Ç÷¯±×ÀÎ »ç¿ëÇϱâ
7.4 À¥ÆÑ °í±ÞÆí
7.4.1 ³ª¹« Èçµé±â
7.4.2 ÄÚµå ºÐÇÒ
7.4.3 ·Î´õ Á¦ÀÛÇϱâ
7.4.4 Ç÷¯±×ÀÎ Á¦ÀÛÇϱâ
8Àå ¼¹ö»çÀÌµå ·»´õ¸µ ±×¸®°í Next.js
8.1 ¼¹ö»çÀÌµå ·»´õ¸µ ÃʱÞÆí
8.1.1 Ŭ¶óÀ̾ðÆ®¿¡¼¸¸ ·»´õ¸µÇØ º¸±â
8.1.2 ¼¹ö»çÀÌµå ·»´õ¸µ ÇÔ¼ö »ç¿ëÇØ º¸±â: renderToString
8.1.3 ¼¹ö µ¥ÀÌÅ͸¦ Ŭ¶óÀ̾ðÆ®·Î Àü´ÞÇϱâ
8.1.4 ½ºÅ¸ÀÏ Àû¿ëÇϱâ
8.1.5 À̹ÌÁö ¸ðµâ Àû¿ëÇϱâ
8.2 ¼¹ö»çÀÌµå ·»´õ¸µ °í±ÞÆí
8.2.1 ÆäÀÌÁö¸¦ ¹Ì¸® ·»´õ¸µÇϱâ
8.2.2 ¼¹ö»çÀÌµå ·»´õ¸µ ij½ÌÇϱâ
8.2.3 ¼¹ö»çÀÌµå ·»´õ¸µ ÇÔ¼ö »ç¿ëÇØ º¸±â: renderToNodeStream
8.3 ³Ø½ºÆ® ÃʱÞÆí
8.3.1 ³Ø½ºÆ® ½ÃÀÛÇϱâ
8.3.2 À¥ÆÑ ¼³Á¤ º¯°æÇϱâ
8.3.3 ¼¹ö¿¡¼ »ý¼ºµÈ µ¥ÀÌÅ͸¦ Àü´ÞÇϱâ
8.3.4 ÆäÀÌÁö À̵¿Çϱâ
8.3.5 ¿¡·¯ ÆäÀÌÁö ±¸ÇöÇϱâ
8.4 ³Ø½ºÆ® °í±ÞÆí
8.4.1 ÆäÀÌÁö °øÅë ±â´É ±¸ÇöÇϱâ
8.4.2 ³Ø½ºÆ®¿¡¼ÀÇ ÄÚµå ºÐÇÒ
8.4.3 À¥ ¼¹ö Á÷Á¢ ¶ç¿ì±â
8.4.4 ¼¹ö»çÀÌµå ·»´õ¸µ ij½ÌÇϱâ
8.4.5 ÆäÀÌÁö ¹Ì¸® ·»´õ¸µÇϱâ
8.4.6 styled-components »ç¿ëÇϱâ
9Àå Á¤Àû ŸÀÔ ±×¸®°í ŸÀÔ½ºÅ©¸³Æ®
9.1 ŸÀÔ½ºÅ©¸³Æ®¶õ?
9.1.1 µ¿Àû ŸÀÔ ¾ð¾î¿Í Á¤Àû ŸÀÔ ¾ð¾î
9.1.2 ŸÀÔ½ºÅ©¸³Æ®ÀÇ ÀåÁ¡
9.1.3 ½Ç½ÀÀ» À§ÇÑ Áغñ
9.2 ŸÀÔ½ºÅ©¸³Æ®ÀÇ ¿©·¯ °¡Áö ŸÀÔ
9.2.1 ŸÀÔ½ºÅ©¸³Æ®ÀÇ ´Ù¾çÇÑ Å¸ÀÔ
9.2.2 ¿°ÅÇü ŸÀÔ
9.2.3 ÇÔ¼ö ŸÀÔ
9.3 ÀÎÅÍÆäÀ̽º
9.3.1 ÀÎÅÍÆäÀ̽º·Î °´Ã¼ ŸÀÔ Á¤ÀÇÇϱâ
9.3.2 ÀÎÅÍÆäÀ̽º·Î Á¤ÀÇÇÏ´Â À妽º ŸÀÔ
9.3.3 ±× ¹Û¿¡ ÀÎÅÍÆäÀ̽º·Î ÇÒ ¼ö ÀÖ´Â °Í
9.4 ŸÀÔ È£È¯¼º
9.4.1 ¼ýÀÚ¿Í ¹®ÀÚ¿ÀÇ Å¸ÀÔ È£È¯¼º
9.4.2 ÀÎÅÍÆäÀ̽ºÀÇ Å¸ÀÔ È£È¯¼º
9.4.3 ÇÔ¼öÀÇ Å¸ÀÔ È£È¯¼º
9.5 ŸÀÔ½ºÅ©¸³Æ® °í±Þ ±â´É
9.5.1 Á¦³×¸¯
9.5.2 ¸Êµå ŸÀÔ
9.5.3 Á¶°ÇºÎ ŸÀÔ
9.6 »ý»ê¼ºÀ» ³ôÀ̴ ŸÀÔ½ºÅ©¸³Æ®ÀÇ ±â´É
9.6.1 ŸÀÔ Ãß·Ð
9.6.2 ŸÀÔ °¡µå
9.7 ŸÀÔ½ºÅ©¸³Æ® ȯ°æ ±¸ÃàÇϱâ
9.7.1 create-react-app°ú ³Ø½ºÆ®¿¡¼ ŸÀÔ½ºÅ©¸³Æ® »ç¿ëÇϱâ
9.7.2 ÇÁ·¹ÀÓ¿öÅ©¸¦ »ç¿ëÇÏÁö ¾Ê°í ŸÀÔ½ºÅ©¸³Æ® ȯ°æ ±¸ÃàÇϱâ
9.7.3 ±âŸ ȯ°æ ¼³Á¤Çϱâ
9.8 ¸®¾×Æ®¿¡ ŸÀÔ Àû¿ëÇϱâ
9.8.1 ¸®¾×Æ® ÄÄÆ÷³ÍÆ®¿¡¼ ŸÀÔ Á¤ÀÇÇϱâ
9.8.2 ¸®´ö½º¿¡¼ ŸÀÔ Á¤ÀÇÇϱâ
10Àå ´Ù°¡¿Ã ¸®¾×Æ®ÀÇ º¯È: concurrent ¸ðµå
10.1 ºí·ÎÅ· vs. ³íºí·ÎÅ· ·»´õ¸µ
10.2 ÀÛ¾÷ÀÇ ¿ì¼±¼øÀ§¸¦ ÅëÇÑ È¿À²ÀûÀÎ CPU »ç¿ë
10.3 ¼½ºÆ潺·Î °¡´ÉÇØÁø ÄÄÆ÷³ÍÆ® ÇÔ¼ö ³» ºñµ¿±â ó¸®
10.3.1 ÄÄÆ÷³ÍÆ® ÇÔ¼ö ³»¿¡¼ ºñµ¿±â·Î ¸ðµâ °¡Á®¿À±â
10.3.2 ÄÄÆ÷³ÍÆ® ÇÔ¼ö ³»¿¡¼ API·Î µ¥ÀÌÅÍ ¹Þ±â
-
-
|
ÀÌÀç½Â [Àú]
|
|
-
´ëÇб³ 1Çг⠶§ C ¾ð¾î¸¦ óÀ½ ¹è¿ì¸é¼ Å͹̳ο¡¼ µ¿ÀÛÇÏ´Â Å×Æ®¸®½º¸¦ ¹ã»õ¸ç ¸¸µé¾ú´Ù. ¸¿¼Ò»ç! ¼¼»ó¿¡ ÀÌ·¸°Ô Àç¹Õ´Â °Ô ÀÖ´Ù´Ï. KAIST ÀΰøÁö´É ¿¬±¸½Ç¿¡¼ ¼®»ç °úÁ¤À» ¹â´ø Áß ¿¬±¸º¸´Ù´Â Á¦Ç°À» ¸¸µå´Â ¿£Áö´Ï¾î°¡ Àû¼º¿¡ ¸Â´Â´Ù´Â °ÍÀ» È®½ÇÈ÷ ±ú´Ý°í, ¸®¾×Æ®¸¦ ÅëÇØ À¥ ÇÁ·ÐÆ®¿£µå °³¹ßÀÚ·Î ÀüÇâÇß´Ù. ¸®¾×Æ®¿¡ ºüÁ® Áö³»´Ù º¸´Ï ¸®¾×Æ® °ø½Ä ÇÁ·ÎÁ§Æ®¿¡ º¸³½ PRÀÌ ¸ÓÁöµÇ´Â °æÇèµµ Çß´Ù. ºí·Î±×¿¡ ¾´ 'Ä«Ä«¿ÀÆäÀÌÁö À¥ React Æ÷Æà Èıâ'¶ó´Â ±ÛÀÌ ¸¹ÀÌ ÀÐÈ÷±âµµ Çß´Ù. ¿äÁòÀº Ä«Ä«¿ÀÆäÀÌÁö ÇØ¿Ü ¹öÀü À¥ °³¹ß¿¡ ÁýÁßÇÏ°í ÀÖ´Ù.
-
-
Àüü 0°³ÀÇ ±¸¸ÅÈıⰡ ÀÖ½À´Ï´Ù.
|
ÀÎÅÍÆÄÅ©µµ¼´Â °í°´´ÔÀÇ ´Ü¼ø º¯½É¿¡ ÀÇÇÑ ±³È¯°ú ¹ÝÇ°¿¡ µå´Â ºñ¿ëÀº °í°´´ÔÀÌ ÁöºÒÄÉ µË´Ï´Ù.
´Ü, »óÇ°À̳ª ¼ºñ½º ÀÚüÀÇ ÇÏÀÚ·Î ÀÎÇÑ ±³È¯ ¹× ¹ÝÇ°Àº ¹«·á·Î ¹ÝÇ° µË´Ï´Ù. |
|
±³È¯ ¹× ¹ÝÇ°ÀÌ °¡´ÉÇÑ °æ¿ì |
»óÇ°À» °ø±Þ ¹ÞÀº ³¯·ÎºÎÅÍ 7ÀÏÀ̳» °¡´É
°ø±Þ¹ÞÀ¸½Å »óÇ°ÀÇ ³»¿ëÀÌ Ç¥½Ã, ±¤°í ³»¿ë°ú ´Ù¸£°Å³ª ´Ù¸£°Ô ÀÌÇàµÈ °æ¿ì¿¡´Â °ø±Þ¹ÞÀº ³¯·ÎºÎÅÍ 3°³¿ù À̳», ȤÀº ±×»ç½ÇÀ» ¾Ë°Ô µÈ ³¯ ¶Ç´Â ¾Ë ¼ö ÀÖ¾ú´ø ³¯·ÎºÎÅÍ 30ÀÏ À̳»
»óÇ°¿¡ ¾Æ¹«·± ÇÏÀÚ°¡ ¾ø´Â °æ¿ì ¼ÒºñÀÚÀÇ °í°´º¯½É¿¡ ÀÇÇÑ ±³È¯Àº »óÇ°ÀÇ Æ÷Àå»óÅ µîÀÌ ÀüÇô ¼Õ»óµÇÁö ¾ÊÀº °æ¿ì¿¡ ÇÑÇÏ¿© °¡´É |
|
±³È¯ ¹× ¹ÝÇ°ÀÌ ºÒ°¡´ÉÇÑ °æ¿ì |
±¸¸ÅÈ®Á¤ ÀÌÈÄ(¿ÀǸ¶ÄÏ»óÇ°¿¡ ÇÑÇÔ)
°í°´´ÔÀÇ Ã¥ÀÓ ÀÖ´Â »çÀ¯·Î »óÇ° µîÀÌ ¸ê½Ç ¶Ç´Â ÈÑ¼ÕµÈ °æ¿ì
(´Ü, »óÇ°ÀÇ ³»¿ëÀ» È®ÀÎÇϱâ À§ÇÏ¿© Æ÷Àå µîÀ» ÈѼÕÇÑ °æ¿ì´Â Á¦¿Ü)
½Ã°£ÀÌ Áö³²¿¡ µû¶ó ÀçÆǸŰ¡ °ï¶õÇÒ Á¤µµ·Î ¹°Ç°ÀÇ °¡Ä¡°¡ ¶³¾îÁø °æ¿ì
Æ÷Àå °³ºÀµÇ¾î »óÇ° °¡Ä¡°¡ ÈÑ¼ÕµÈ °æ¿ì |
|
´Ù¹è¼ÛÁöÀÇ °æ¿ì ¹ÝÇ° ȯºÒ |
´Ù¹è¼ÛÁöÀÇ °æ¿ì ´Ù¸¥ Áö¿ªÀÇ ¹ÝÇ°À» µ¿½Ã¿¡ ÁøÇàÇÒ ¼ö ¾ø½À´Ï´Ù.
1°³ Áö¿ªÀÇ ¹ÝÇ°ÀÌ ¿Ï·áµÈ ÈÄ ´Ù¸¥ Áö¿ª ¹ÝÇ°À» ÁøÇàÇÒ ¼ö ÀÖÀ¸¹Ç·Î, ÀÌÁ¡ ¾çÇØÇØ Áֽñ⠹ٶø´Ï´Ù. |
|
Áß°í»óÇ°ÀÇ ±³È¯ |
Áß°í»óÇ°Àº Á¦ÇÑµÈ Àç°í ³»¿¡¼ ÆǸŰ¡ ÀÌ·ç¾îÁö¹Ç·Î, ±³È¯Àº ºÒ°¡´ÉÇÕ´Ï´Ù. |
|
¿ÀǸ¶ÄÏ »óÇ°ÀÇ È¯ºÒ |
¿ÀǸ¶ÄÏ»óÇ°¿¡ ´ëÇÑ Ã¥ÀÓÀº ¿øÄ¢ÀûÀ¸·Î ¾÷ü¿¡°Ô ÀÖÀ¸¹Ç·Î, ±³È¯/¹ÝÇ° Á¢¼ö½Ã ¹Ýµå½Ã ÆǸÅÀÚ¿Í ÇùÀÇ ÈÄ ¹ÝÇ° Á¢¼ö¸¦ ÇϼžßÇϸç, ¹ÝÇ°Á¢¼ö ¾øÀÌ ¹Ý¼ÛÇϰųª, ¿ìÆíÀ¸·Î º¸³¾ °æ¿ì »óÇ° È®ÀÎÀÌ ¾î·Á¿ö ȯºÒÀÌ ºÒ°¡´ÉÇÒ ¼ö ÀÖÀ¸´Ï À¯ÀÇÇϽñ⠹ٶø´Ï´Ù. |
|
|
|
¹è¼Û¿¹Á¤ÀÏ ¾È³» |
ÀÎÅÍÆÄÅ© µµ¼´Â ¸ðµç »óÇ°¿¡ ´ëÇØ ¹è¼Û¿Ï·á¿¹Á¤ÀÏÀ» À¥»çÀÌÆ®¿¡ Ç¥½ÃÇÏ°í ÀÖ½À´Ï´Ù.
|
<ÀÎÅÍÆÄÅ© Á÷¹è¼Û »óÇ°> |
»óÇ°Àº ¿ù~Åä¿äÀÏ ¿ÀÀü 10½Ã ÀÌÀü ÁÖ¹®ºÐ¿¡ ´ëÇÏ¿© ´çÀÏ Ãâ°í/´çÀÏ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÏ´Â »óÇ°ÀÔ´Ï´Ù. |
»óÇ°Àº ¼¿ïÁö¿ª/ÆòÀÏ ÁÖ¹®ºÐÀº ´çÀÏ Ãâ°í/ÀÍÀÏ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇϸç,
¼¿ï¿ÜÁö¿ª/ÆòÀÏ ÁÖ¹®ºÐÀÇ °æ¿ì´Â ¿ÀÈÄ 6½Ã±îÁö ÁÖ¹®ºÐ¿¡ ´ëÇÏ¿© ÀÍÀÏ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÏ´Â »óÇ°ÀÔ´Ï´Ù.
(´Ü, ¿ù¿äÀÏÀº 12½Ã±îÁö ÁÖ¹®¿¡ ÇÑÇÔ)
|
»óÇ°Àº, ÀÔ°í¿¹Á¤ÀÏ(Á¦Ç°Ãâ½ÃÀÏ)+Åùè»ç¹è¼ÛÀÏ(1ÀÏ)¿¡ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÕ´Ï´Ù. |
~
»óÇ°Àº À¯ÅëƯ¼º»ó ÀÎÅÍÆÄÅ©¿¡¼ Àç°í¸¦ º¸À¯ÇÏÁö ¾ÊÀº »óÇ°À¸·Î ÁÖ¹®ÀÏ+±âÁØÃâ°íÀÏ+Åùè»ç¹è¼ÛÀÏ(1ÀÏ)¿¡ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÕ´Ï´Ù.(Åä/°øÈÞÀÏÀº ¹è¼Û±â°£¿¡ Æ÷ÇÔµÇÁö ¾Ê½À´Ï´Ù.)
¡Ø±âÁØÃâ°íÀÏ:ÀÎÅÍÆÄÅ©°¡ »óÇ°À» ¼ö±ÞÇÏ¿© ¹°·ùâ°í¿¡¼ Æ÷Àå/Ãâ°íÇϱâ±îÁö ¼Ò¿äµÇ´Â ½Ã°£
|
|
<¾÷ü Á÷Á¢¹è¼Û/¿ÀǸ¶ÄÏ »óÇ°> |
~
»óÇ°Àº ¾÷ü°¡ ÁÖ¹®À» È®ÀÎÇÏ°í, Ãâ°íÇϱâ±îÁö °É¸®´Â ½Ã°£ÀÔ´Ï´Ù. ÁÖ¹®ÀÏ+±âÁØÃâ°íÀÏ+Åùè»ç¹è¼ÛÀÏ(2ÀÏ)¿¡ ¹è¼Û¿Ï·á¸¦ º¸ÀåÇÕ´Ï´Ù.(Åä/°øÈÞÀÏÀº ¹è¼Û±â°£¿¡ Æ÷ÇÔµÇÁö ¾Ê½À´Ï´Ù.)
¡Ø5ÀÏÀ̳» Ãâ°í°¡ ½ÃÀÛµÇÁö ¾ÊÀ»½Ã, ¿ÀǸ¶ÄÏ »óÇ°Àº ÀÚµ¿À¸·Î ÁÖ¹®ÀÌ Ãë¼ÒµÇ¸ç, °í°´´Ô²² Ç°Àýº¸»ó±ÝÀ» Áö±ÞÇØ µå¸³´Ï´Ù.
|
|
|
¹è¼Ûºñ ¾È³» |
µµ¼(Áß°íµµ¼ Æ÷ÇÔ)¸¸ ±¸¸ÅÇϽøé : ¹è¼Ûºñ 2,000¿ø (1¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û) À½¹Ý/DVD¸¸ ±¸¸ÅÇϽøé : ¹è¼Ûºñ 1,500¿ø (2¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
ÀâÁö/¸¸È/±âÇÁÆ®¸¸ ±¸¸ÅÇϽøé : ¹è¼Ûºñ 2,000¿ø (2¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
µµ¼¿Í À½¹Ý/DVD¸¦ ÇÔ²² ±¸¸ÅÇϽøé : ¹è¼Ûºñ 1,500¿ø 1¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
µµ¼¿Í ÀâÁö/¸¸È/±âÇÁÆ®/Áß°íÁ÷¹è¼Û»óÇ°À» ÇÔ²² ±¸¸ÅÇϽøé : 2,000¿ø (1¸¸¿øÀÌ»ó ±¸¸Å ½Ã ¹«·á¹è¼Û)
¾÷üÁ÷Á¢¹è¼Û»óÇ°À» ±¸¸Å½Ã : ¾÷üº°·Î »óÀÌÇÑ ¹è¼Ûºñ Àû¿ë
* ¼¼Æ®»óÇ°ÀÇ °æ¿ì ºÎºÐÃë¼Ò ½Ã Ãß°¡ ¹è¼Ûºñ°¡ ºÎ°úµÉ ¼ö ÀÖ½À´Ï´Ù.
* ºÏÄ«Æ®¿¡¼ ¹è¼Ûºñ¾ø¾Ö±â ¹öÆ°À» Ŭ¸¯Çϼż, µ¿ÀϾ÷ü»óÇ°À» Á¶±Ý ´õ ±¸¸ÅÇϽøé, ¹è¼Ûºñ¸¦ Àý¾àÇÏ½Ç ¼ö ÀÖ½À´Ï´Ù.
|
|
Çؿܹè¼Û ¾È³» |
ÀÎÅÍÆÄÅ©µµ¼¿¡¼´Â ±¹³»¿¡¼ ÁÖ¹®ÇϽðųª ÇØ¿Ü¿¡¼ ÁÖ¹®ÇÏ¿© ÇØ¿Ü·Î ¹è¼ÛÀ» ¿øÇÏ½Ç °æ¿ì DHL°ú Ư¾àÀ¸·Î Ã¥Á¤µÈ ¿ä±ÝÇ¥¿¡
ÀÇÇØ °³ÀÎÀÌ ÀÌ¿ëÇÏ´Â °æ¿ìº¸´Ù ¹è¼Û¿ä±ÝÀ» Å©°Ô ³·Ã߸ç DHL(www.dhl.co.kr)·Î Çؿܹè¼Û ¼ºñ½º¸¦ Á¦°øÇÕ´Ï´Ù.
Çؿܹè¼ÛÀº µµ¼/CD/DVD »óÇ°¿¡ ÇÑÇØ ¼ºñ½ºÇÏ°í ÀÖÀ¸¸ç, ´Ù¸¥ »óÇ°À» ºÏÄ«Æ®¿¡ ÇÔ²² ´ãÀ¸½Ç °æ¿ì Çؿܹè¼ÛÀÌ ºÒ°¡ÇÕ´Ï´Ù.
ÇØ¿ÜÁÖ¹®¹è¼Û ¼ºñ½º´Â ÀÎÅÍÆÄÅ© µµ¼ ȸ¿ø °¡ÀÔÀ» Çϼž߸¸ ½Åû °¡´ÉÇÕ´Ï´Ù. |
|
¾Ë¾ÆµÎ¼¼¿ä!!! |
µµ¸Å»ó ¹× Á¦ÀÛ»ç »çÁ¤¿¡ µû¶ó Ç°Àý/ÀýÆÇ µîÀÇ »çÀ¯·Î Ãë¼ÒµÉ ¼ö ÀÖ½À´Ï´Ù.
¿ÀǸ¶ÄϾ÷üÀÇ ¹è¼ÛÁö¿¬½Ã ÁÖ¹®ÀÌ ÀÚµ¿À¸·Î Ãë¼ÒµÉ ¼ö ÀÖ½À´Ï´Ù.
Ãâ°í°¡´É ½Ã°£ÀÌ ¼·Î ´Ù¸¥ »óÇ°À» ÇÔ²² ÁÖ¹®ÇÒ °æ¿ì Ãâ°í°¡´É ½Ã°£ÀÌ °¡Àå ±ä ±âÁØÀ¸·Î ¹è¼ÛµË´Ï´Ù.
À¯ÅëÀÇ Æ¯¼º»ó Ãâ°í±â°£Àº ¿¹Á¤º¸´Ù ¾Õ´ç°ÜÁö°Å³ª ´ÊÃçÁú ¼ö ÀÖ½À´Ï´Ù.
Åùè»ç ¹è¼ÛÀÏÀÎ ¼¿ï ¹× ¼öµµ±ÇÀº 1~2ÀÏ, Áö¹æÀº 2~3ÀÏ, µµ¼, »ê°£, ±ººÎ´ë´Â 3ÀÏ ÀÌ»óÀÇ ½Ã°£ÀÌ ¼Ò¿äµË´Ï´Ù. |
|
|
|
|