ÄÜÅÙÃ÷ »ó¼¼º¸±â
¸®¾×Æ®¸¦ ´Ù·ç´Â ±â¼ú(°³Á¤ÆÇ)


¸®¾×Æ®¸¦ ´Ù·ç´Â ±â¼ú(°³Á¤ÆÇ)

¸®¾×Æ®¸¦ ´Ù·ç´Â ±â¼ú(°³Á¤ÆÇ)

<±è¹ÎÁØ> Àú | ±æ¹þ

Ãâ°£ÀÏ
2019-09-24
ÆÄÀÏÆ÷¸Ë
ePub
¿ë·®
86 M
Áö¿ø±â±â
PC½º¸¶Æ®ÆùÅÂºí¸´PC
ÇöȲ
½Åû °Ç¼ö : 0 °Ç
°£·« ½Åû ¸Þ¼¼Áö
ÄÜÅÙÃ÷ ¼Ò°³
ÀúÀÚ ¼Ò°³
¸ñÂ÷
ÇÑÁÙ¼­Æò

ÄÜÅÙÃ÷ ¼Ò°³

¸®¾×Æ® º£½ºÆ®¼¿·¯ 1À§, º»¹®°ú ¼Ò½º Àü¸é ¾÷±×·¹À̵å!

±âº»±â¸¦ ²Ä²ÄÇÏ°Ô! ½ÇÀü¿¡¼­ È¿°úÀûÀ¸·Î È°¿ëÇÏ´Â ¹æ¹ý±îÁö ¾ËÂ÷°Ô ¹è¿ìÀÚ!



<¸®¾×Æ®¸¦ ´Ù·ç´Â ±â¼ú> °³Á¤ÆÇÀÌ ³ª¿Ô½À´Ï´Ù. ¸®¾×Æ® 16.8 ¹öÀü¿¡ Hooks¶ó´Â ±â´ÉÀÌ µµÀԵǸ鼭 ÇÔ¼öÇü ÄÄÆ÷³ÍÆ®¿¡¼­µµ »óÅ °ü¸®¸¦ ÇÒ ¼ö ÀÖ°Ô µÇ¾ú½À´Ï´Ù. ÀÌ¿¡ ¸ÂÃç Ã¥¿¡ »ç¿ëµÈ ÁÖ¿ä ¿¹½Ã¸¦ ¸ðµÎ ÇÔ¼öÇü ÄÄÆ÷³ÍÆ® ÇüÅ·ΠÀüȯÇß½À´Ï´Ù. ±âÁ¸ ³»¿ëÀ» º¸°­ ¹× °³¼±ÇÏ°í, ÃÊÆÇ¿¡ ´Ù·çÁö ¾Ê¾Ò´ø »õ·Î¿î ³»¿ëµµ ¸¹ÀÌ ¼ö·ÏÇß½À´Ï´Ù. ¸®¾×Æ®ÀÇ ºò ÆÒÀÌÀÚ Çö¾÷ ÇÁ·Î±×·¡¸Ó·Î¼­ ¸®¾×Æ®¸¦ ²ÙÁØÈ÷ È°¿ëÇØ ¿Â ÀúÀÚÀÇ ¸íÄèÇÑ ¼³¸í°ú ³ëÇÏ¿ì°¡ ´õ¿í ¾ËÂ÷°Ô ´ã±ä °³Á¤ÆÇÀÔ´Ï´Ù.

¶ÇÇÑ, ¸®¾×Æ®¸¦ °øºÎÇÒ ¶§ ¾Ë¾Æ¾ß ÇÒ ÀÚ¹Ù½ºÅ©¸³Æ® ±âÃÊ ¹× ES6 ¹®¹ýÀ» ´Ù·é ¸µÅ©(º§·ÎÆÛÆ®¿Í ÇÔ²²ÇÏ´Â ¸ð´ø ÀÚ¹Ù½ºÅ©¸³Æ®)¿Í Ã¥¿¡¼­ »ç¿ëÇÑ ¸®¾×Æ® ¶óÀ̺귯¸®¿Í °ü·Ã µµ±¸ÀÇ ¹öÀüÀÌ ¾÷±×·¹À̵åµÇ¸é ÇÊ¿äÇÑ º¯°æ »çÇ×À» °øÁöÇÏ´Â ¸µÅ©(ÀúÀÚ ±êÇãºê)µµ Á¦°øÇÕ´Ï´Ù.



¸®¾×Æ®, ÇöÀå ¹ÐÂø ÀÔ¹®¼­´Â µû·Î ÀÖ´Ù!



ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ±âº» ±â´É°ú ¹®¹ýÀ» ¼÷ÁöÇÑ´Ù

¸®¾×Æ®ÀÇ ±âº»±â¸¦ ÀÍÈ÷·Á¸é ÀÚ¹Ù½ºÅ©¸³Æ®´Â Çʼö! Àß ¸ð¸£´Â ÀÚ¹Ù½ºÅ©¸³Æ® ¹®¹ýÀÌ ³ª¿À¸é ¹Ýµå½Ã üũÇÏÀÚ. ¸®¾×Æ® °³¹ß¿¡ ÇÊ¿äÇÑ ES6 ¹®¹ýÀº ÀûÀçÀû¼Ò¿¡ ¹èÄ¡Çß´Ù.



¿ø¸®¸¦ ¾Ë¸é ´õ È¿À²ÀûÀ¸·Î »ç¿ëÇÒ ¼ö ÀÖ´Ù

µ¿ÀÛ ¿ø¸®¸¦ ÀÌÇØÇÏ¸é ¸®¾×Æ®¸¦ ¿Ö »ç¿ëÇØ¾ß ÇÏ´ÂÁö, ¾î¶»°Ô »ç¿ëÇϸé ÁÁÀºÁö Å« ±×¸²À» ±×¸± ¼ö ÀÖ´Ù. ÀÛÀº ÇÁ·ÎÁ§Æ®¸¦ Çغ¸¸é¼­ ¸®¾×Æ®¸¦ ÅëÇØ °³¹ßÀÚ °æÇèÀ» Çâ»ó½ÃÅ°´Â ¹æ¹ýÀ» ¹è¿ìÀÚ.



À¥ ¾ÖÇø®ÄÉÀ̼ǿ¡ ¸®¾×Æ®¸¦ Àû¿ëÇغ»´Ù.

¸®¾×Æ®¸¦ Àû¿ëÇغ¸¸é¼­ ½ÇÀü °¨°¢À» ÀÍÈù´Ù. UI ¾÷µ¥ÀÌÆ® °úÁ¤À» °£°áÇÏ°Ô, º¹ÀâÇÑ ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ßµµ ÄÄÆ÷³ÍÆ® ±â¹ÝÀ¸·Î ½±°Ô, ÀÚ¹Ù½ºÅ©¸³Æ® °³¹ßÀ» ¼Õ½±°Ô.


¸®¾×Æ®¸¦ ÀÌÇØÇϱâ À§ÇÑ ÇÙ½É °³³äÀº ¹°·ÐÀÌ°í ¾î¶² »óȲ¿¡¼­ ¾î¶»°Ô »ç¿ëÇØ¾ß ÇÏ´ÂÁö, ¿Ö ÀÌ·¸°Ô »ç¿ëÇÏ´Â °ÍÀÌ È¿°úÀûÀÎÁö, °ø½Ä ¹®¼­¿¡´Â ³ª¿ÀÁö ¾Ê´Â ½ÇÀü ³ëÇÏ¿ì¿Í ÆÁÀ» dzºÎÇÏ°Ô ´ã¾Ò´Ù.


¶ÇÇÑ, ÇÁ·ÎÁ§Æ® »ý¼ººÎÅÍ Äڵ带 ÀÛ¼º ¹× °³¼±ÇÏ°í, ¹èÆ÷Çϱâ±îÁö ½Ç¹«¿¡ ¹Ù·Î ÀÀ¿ëÇÒ ¼ö ÀÖµµ·Ï ¿¹Á¦¸¦ ÁغñÇß´Ù. ¸ÕÀú ÀÏÁ¤ °ü¸® ¾ÖÇø®ÄÉÀ̼ÇÀ» ¸¸µé¸é¼­ ¸®¾×Æ®ÀÇ ±âº»±â¸¦ ´ÙÁö°í, ´ÙÀ½À¸·Î ¿©·¯ ½Ç½À ¿¹Á¦¸¦ ÁøÇàÇϸ鼭 ÄÄÆ÷³ÍÆ® ½ºÅ¸Àϸµ, »óÅ °ü¸®, API ¿¬µ¿, ¶ó¿ìÆÃ, ÄÚµå ½ºÇø®ÆÃ, ¼­¹ö»çÀÌµå ·»´õ¸µ µî ¸®¾×Æ®¸¦ È°¿ëÇÑ ´Ù¾çÇÑ ±â¼úÀ» »ç¿ëÇغ»´Ù. ¸¶Áö¸·À¸·Î ÇÁ·±Æ®¿£µå ÇÁ·ÎÁ§Æ®¸¦ ÅëÇØ ¹è¿î Áö½ÄÀ» Á¾ÇÕÀûÀ¸·Î È°¿ëÇغ»´Ù.

ÀúÀÚ¼Ò°³

°³¹ßÀº ¾ðÁ¦³ª Áñ°Ì°í Àç¹Õ¾î¾ß ÇÑ´Ù´Â »ý°¢À» °®°í ÀÖ´Â °³¹ßÀÚÀ̸ç, IT ±â¼úÀ» °¡¸£Ä¡´Â °ÍÀ» ±²ÀåÈ÷ ÁÁ¾ÆÇÏ´Â ±³À°ÀÚÀÌ´Ù. ¶ÇÇÑ, »ç¿ëÀÚ¸¦ ÇູÇÏ°Ô ¸¸µå´Â ¼­ºñ½º¸¦ ¸¸µå´Â °ÍÀÌ °¡Àå Áß¿äÇÏ´Ù°í ¿©±ä´Ù. ÇöÀç ¸®µð(ÁÖ)¿¡¼­ ¾Ö´Ï¸ÞÀÌ¼Ç ½ºÆ®¸®¹Ö ¼­ºñ½º ¶óÇÁÅÚ(laftel.net)ÀÇ ÇÁ·±Æ®¿£µå °³¹ßÀ» ÇÏ°í ÀÖ´Ù. ±×¸®°í °³¹ßÀÚµéÀÇ ºí·Î±× ¼­ºñ½ºÀÎ º§·Î±×(velog.io)¸¦ ¿î¿µ ¹× °³¹ßÇÏ°í ÀÖ´Ù.

¸ñÂ÷

1Àå ¸®¾×Æ® ½ÃÀÛ

__1.1 ¿Ö ¸®¾×Æ®Àΰ¡?

____1.1.1 ¸®¾×Æ® ÀÌÇØ

__1.2 ¸®¾×Æ®ÀÇ Æ¯Â¡

____1.2.1 Virtual DOM

____1.2.2 ±âŸ Ư¡

__1.3 ÀÛ¾÷ ȯ°æ ¼³Á¤

____1.3.1 Node.js¿Í npm

____1.3.2 yarn

____1.3.3 ¿¡µðÅÍ ¼³Ä¡

____1.3.4 Git ¼³Ä¡

____1.3.5 create-react-appÀ¸·Î ÇÁ·ÎÁ§Æ® »ý¼ºÇϱâ



2Àå JSX

__2.1 ÄÚµå ÀÌÇØÇϱâ

__2.2 JSX¶õ?

__2.3 JSXÀÇ ÀåÁ¡

____2.3.1 º¸±â ½±°í Àͼ÷ÇÏ´Ù

____2.3.2 ´õ¿í ³ôÀº È°¿ëµµ

__2.4 JSX ¹®¹ý

____2.4.1 °¨½ÎÀÎ ¿ä¼Ò

____2.4.2 ÀÚ¹Ù½ºÅ©¸³Æ® Ç¥Çö

____2.4.3 If ¹® ´ë½Å Á¶°ÇºÎ ¿¬»êÀÚ

____2.4.4 AND ¿¬»êÀÚ(&&)¸¦ »ç¿ëÇÑ Á¶°ÇºÎ ·»´õ¸µ

____2.4.5 undefined¸¦ ·»´õ¸µÇÏÁö ¾Ê±â

____2.4.6 ÀζóÀÎ ½ºÅ¸Àϸµ

____2.4.7 class ´ë½Å className

____2.4.8 ²À ´Ý¾Æ¾ß Çϴ ű×

____2.4.9 ÁÖ¼®

__2.5 ESLint¿Í Prettier Àû¿ëÇϱâ

____2.5.1 ESLint

____2.5.2 Prettier

__2.6 Á¤¸®



3Àå ÄÄÆ÷³ÍÆ®

__3.1 Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ®

__3.2 ù ÄÄÆ÷³ÍÆ® »ý¼º

____3.2.1 src µð·ºÅ͸®¿¡ MyComponent.js ÆÄÀÏ »ý¼º

____3.2.2 ÄÚµå ÀÛ¼ºÇϱâ

____3.2.3 ¸ðµâ ³»º¸³»±â ¹× ºÒ·¯¿À±â

__3.3 props

____3.3.1 JSX ³»ºÎ¿¡¼­ props ·»´õ¸µ

____3.3.2 ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÒ ¶§ props °ª ÁöÁ¤Çϱâ

____3.3.3 props ±âº»°ª ¼³Á¤: defaultProps

____3.3.4 ÅÂ±× »çÀÌÀÇ ³»¿ëÀ» º¸¿© ÁÖ´Â children

____3.3.5 ºñ±¸Á¶È­ ÇÒ´ç ¹®¹ýÀ» ÅëÇØ props ³»ºÎ °ª ÃßÃâÇϱâ

____3.3.6 propTypes¸¦ ÅëÇÑ props °ËÁõ

____3.3.7 Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ®¿¡¼­ props »ç¿ëÇϱâ

__3.4 state

____3.4.1 Ŭ·¡½ºÇü ÄÄÆ÷³ÍÆ®ÀÇ state

____3.4.2 ÇÔ¼öÇü ÄÄÆ÷³ÍÆ®¿¡¼­ useState »ç¿ëÇϱâ

__3.5 state¸¦ »ç¿ëÇÒ ¶§ ÁÖÀÇ »çÇ×

__3.6 Á¤¸®



4Àå À̺¥Æ® Çڵ鸵

__4.1 ¸®¾×Æ®ÀÇ À̺¥Æ® ½Ã½ºÅÛ

____4.1.1 À̺¥Æ®¸¦ »ç¿ëÇÒ ¶§ ÁÖÀÇ »çÇ×

____4.1.2 À̺¥Æ® Á¾·ù

__4.2 ¿¹Á¦·Î À̺¥Æ® Çڵ鸵 ÀÍÈ÷±â

____4.2.1 ÄÄÆ÷³ÍÆ® »ý¼º ¹× ºÒ·¯¿À±â

____4.2.2 onChange À̺¥Æ® Çڵ鸵Çϱâ

____4.2.3 ÀÓÀÇ ¸Þ¼­µå ¸¸µé±â

____4.2.4 input ¿©·¯ °³ ´Ù·ç±â

____4.2.5 onKeyPress À̺¥Æ® Çڵ鸵

__4.3 ÇÔ¼öÇü ÄÄÆ÷³ÍÆ®·Î ±¸ÇöÇØ º¸±â

__4.4 Á¤¸®



5Àå ref: DOM¿¡ À̸§ ´Þ±â

__5.1 ref´Â ¾î¶² »óȲ¿¡¼­ »ç¿ëÇØ¾ß ÇÒ±î?

____5.1.1 ¿¹Á¦ ÄÄÆ÷³ÍÆ® »ý¼º

____5.1.2 App ÄÄÆ÷³ÍÆ®¿¡¼­ ¿¹Á¦ ÄÄÆ÷³ÍÆ® ·»´õ¸µ

____5.1.3 DOMÀ» ²À »ç¿ëÇØ¾ß ÇÏ´Â »óȲ

__5.2 ref »ç¿ë

____5.2.1 Äݹé ÇÔ¼ö¸¦ ÅëÇÑ ref ¼³Á¤

____5.2.2 createRef¸¦ ÅëÇÑ ref ¼³Á¤

____5.2.3 Àû¿ë

__5.3 ÄÄÆ÷³ÍÆ®¿¡ ref ´Þ±â

____5.3.1 »ç¿ë¹ý

____5.3.2 ÄÄÆ÷³ÍÆ® Ãʱ⠼³Á¤

____5.3.3 ÄÄÆ÷³ÍÆ®¿¡ ¸Þ¼­µå »ý¼º

____5.3.4 ÄÄÆ÷³ÍÆ®¿¡ ref ´Þ°í ³»ºÎ ¸Þ¼­µå »ç¿ë

__5.4 Á¤¸®



6Àå ÄÄÆ÷³ÍÆ® ¹Ýº¹

__6.1 ÀÚ¹Ù½ºÅ©¸³Æ® ¹è¿­ÀÇ map() ÇÔ¼ö

____6.1.1 ¹®¹ý

____6.1.2 ¿¹Á¦

__6.2 µ¥ÀÌÅÍ ¹è¿­À» ÄÄÆ÷³ÍÆ® ¹è¿­·Î º¯È¯Çϱâ

____6.2.1 ÄÄÆ÷³ÍÆ® ¼öÁ¤Çϱâ

____6.2.2 App ÄÄÆ÷³ÍÆ®¿¡¼­ ¿¹Á¦ ÄÄÆ÷³ÍÆ® ·»´õ¸µ

__6.3 key

____6.3.1 key ¼³Á¤

__6.4 ÀÀ¿ë

____6.4.1 Ãʱ⠻óÅ ¼³Á¤Çϱâ

____6.4.2 µ¥ÀÌÅÍ Ãß°¡ ±â´É ±¸ÇöÇϱâ

____6.4.3 µ¥ÀÌÅÍ Á¦°Å ±â´É ±¸ÇöÇϱâ

__6.5 Á¤¸®



7Àå ÄÄÆ÷³ÍÆ®ÀÇ ¶óÀÌÇÁ»çÀÌŬ ¸Þ¼­µå

__7.1 ¶óÀÌÇÁ»çÀÌŬ ¸Þ¼­µåÀÇ ÀÌÇØ

__7.2 ¶óÀÌÇÁ»çÀÌŬ ¸Þ¼­µå »ìÆ캸±â

____7.2.1 render( ) ÇÔ¼ö

____7.2.2 constructor ¸Þ¼­µå

____7.2.3 getDerivedStateFromProps ¸Þ¼­µå

____7.2.4 componentDidMount ¸Þ¼­µå

____7.2.5 shouldComponentUpdate ¸Þ¼­µå

____7.2.6 getSnapshotBeforeUpdate ¸Þ¼­µå

____7.2.7 componentDidUpdate ¸Þ¼­µå

____7.2.8 componentWillUnmount ¸Þ¼­µå

____7.2.9 componentDidCatch ¸Þ¼­µå

__7.3 ¶óÀÌÇÁ»çÀÌŬ ¸Þ¼­µå »ç¿ëÇϱâ

____7.3.1 ¿¹Á¦ ÄÄÆ÷³ÍÆ® »ý¼º

____7.3.2 App ÄÄÆ÷³ÍÆ®¿¡¼­ ¿¹Á¦ ÄÄÆ÷³ÍÆ® »ç¿ë

____7.3.3 ¿¡·¯ Àâ¾Æ³»±â

__7.4 Á¤¸®



8Àå Hooks

__8.1 useState

____8.1.1 useState¸¦ ¿©·¯ ¹ø »ç¿ëÇϱâ

__8.2 useEffect

____8.2.1 ¸¶¿îÆ®µÉ ¶§¸¸ ½ÇÇàÇÏ°í ½ÍÀ» ¶§

____8.2.2 ƯÁ¤ °ªÀÌ ¾÷µ¥ÀÌÆ®µÉ ¶§¸¸ ½ÇÇàÇÏ°í ½ÍÀ» ¶§

____8.2.3 µÞÁ¤¸®Çϱâ

__8.3 useReducer

____8.3.1 Ä«¿îÅÍ ±¸ÇöÇϱâ

____8.3.2 ÀÎDz »óÅ °ü¸®Çϱâ

__8.4 useMemo

__8.5 useCallback

__8.6 useRef

____8.6.1 ·ÎÄà º¯¼ö »ç¿ëÇϱâ

__8.7 Ä¿½ºÅÒ Hooks ¸¸µé±â

__8.8 ´Ù¸¥ Hooks

__8.9 Á¤¸®



9Àå ÄÄÆ÷³ÍÆ® ½ºÅ¸Àϸµ

__9.1 °¡Àå ÈçÇÑ ¹æ½Ä, ÀÏ¹Ý CSS

____9.1.1 À̸§ Áþ´Â ±ÔÄ¢

____9.1.2 CSS Selector

__9.2 Sass »ç¿ëÇϱâ

____9.2.1 utils ÇÔ¼ö ºÐ¸®Çϱâ

____9.2.2 sass-loader ¼³Á¤ Ä¿½ºÅ͸¶ÀÌ¡Çϱâ

____9.2.3 node_modules¿¡¼­ ¶óÀ̺귯¸® ºÒ·¯¿À±â

__9.3 CSS Module

____9.3.1 classnames

____9.3.2 Sass¿Í ÇÔ²² »ç¿ëÇϱâ

____9.3.3 CSS ModuleÀÌ ¾Æ´Ñ ÆÄÀÏ¿¡¼­ CSS Module »ç¿ëÇϱâ

__9.4 styled-components

____9.4.1 Tagged ÅÛÇø´ ¸®ÅÍ·²

____9.4.2 ½ºÅ¸ÀϸµµÈ ¿¤¸®¸ÕÆ® ¸¸µé±â

____9.4.3 ½ºÅ¸ÀÏ¿¡¼­ props Á¶È¸Çϱâ

____9.4.4 props¿¡ µû¸¥ Á¶°ÇºÎ ½ºÅ¸Àϸµ

____9.4.5 ¹ÝÀÀÇü µðÀÚÀÎ

__9.5 Á¤¸®



10Àå ÀÏÁ¤ °ü¸® À¥ ¾ÖÇø®ÄÉÀÌ¼Ç ¸¸µé±â

__10.1 ÇÁ·ÎÁ§Æ® ÁغñÇϱâ

____10.1.1 ÇÁ·ÎÁ§Æ® »ý¼º ¹× ÇÊ¿äÇÑ ¶óÀ̺귯¸® ¼³Ä¡

____10.1.2 Prettier ¼³Á¤

____10.1.3 index.css ¼öÁ¤

____10.1.4 App ÄÄÆ÷³ÍÆ® ÃʱâÈ­

__10.2 UI ±¸¼ºÇϱâ

____10.2.1 TodoTemplate ¸¸µé±â

____10.2.2 TodoInsert ¸¸µé±â

____10.2.3 TodoListItem°ú TodoList ¸¸µé±â

__10.3 ±â´É ±¸ÇöÇϱâ

____10.3.1 App¿¡¼­ todos »óÅ »ç¿ëÇϱâ

____10.3.2 Ç׸ñ Ãß°¡ ±â´É ±¸ÇöÇϱâ

____10.3.3 Áö¿ì±â ±â´É ±¸ÇöÇϱâ

____10.3.4 ¼öÁ¤ ±â´É

__10.4 Á¤¸®



11Àå ÄÄÆ÷³ÍÆ® ¼º´É ÃÖÀûÈ­

__11.1 ¸¹Àº µ¥ÀÌÅÍ ·»´õ¸µÇϱâ

__11.2 Å©·Ò °³¹ßÀÚ µµ±¸¸¦ ÅëÇÑ ¼º´É ¸ð´ÏÅ͸µ

__11.3 ´À·ÁÁö´Â ¿øÀÎ ºÐ¼®

__11.4 React.memo¸¦ »ç¿ëÇÏ¿© ÄÄÆ÷³ÍÆ® ¼º´É ÃÖÀûÈ­

__11.5 onToggle, onRemove ÇÔ¼ö°¡ ¹Ù²îÁö ¾Ê°Ô Çϱâ

____11.5.1 useStateÀÇ ÇÔ¼öÇü ¾÷µ¥ÀÌÆ®

____11.5.2 useReducer »ç¿ëÇϱâ

__11.6 ºÒº¯¼ºÀÇ Á߿伺

__11.7 TodoList ÄÄÆ÷³ÍÆ® ÃÖÀûÈ­Çϱâ

__11.8 react-virtualized¸¦ »ç¿ëÇÑ ·»´õ¸µ ÃÖÀûÈ­

____11.8.1 ÃÖÀûÈ­ Áغñ

____11.8.2 TodoList ¼öÁ¤

____11.8.3 TodoListItem ¼öÁ¤

__11.9 Á¤¸®



12Àå immer¸¦ »ç¿ëÇÏ¿© ´õ ½±°Ô ºÒº¯¼º À¯ÁöÇϱâ

__12.1 immer¸¦ ¼³Ä¡ÇÏ°í »ç¿ë¹ý ¾Ë¾Æº¸±â

____12.1.1 ÇÁ·ÎÁ§Æ® Áغñ

____12.1.2 immer¸¦ »ç¿ëÇÏÁö ¾Ê°í ºÒº¯¼º À¯Áö

____12.1.3 immer »ç¿ë¹ý

____12.1.4 App ÄÄÆ÷³ÍÆ®¿¡ immer Àû¿ëÇϱâ

____12.1.5 useStateÀÇ ÇÔ¼öÇü ¾÷µ¥ÀÌÆ®¿Í immer ÇÔ²² ¾²±â

__12.2 Á¤¸®



13Àå ¸®¾×Æ® ¶ó¿ìÅÍ·Î SPA °³¹ßÇϱâ

__13.1 SPA¶õ?

____13.1.1 SPAÀÇ ´ÜÁ¡

__13.2 ÇÁ·ÎÁ§Æ® Áغñ ¹× ±âº»ÀûÀÎ »ç¿ë¹ý

____13.2.1 ÇÁ·ÎÁ§Æ® »ý¼º ¹× ¶óÀ̺귯¸® ¼³Ä¡

____13.2.2 ÇÁ·ÎÁ§Æ®¿¡ ¶ó¿ìÅÍ Àû¿ë

____13.2.3 ÆäÀÌÁö ¸¸µé±â

____13.2.4 Route ÄÄÆ÷³ÍÆ®·Î ƯÁ¤ ÁÖ¼Ò¿¡ ÄÄÆ÷³ÍÆ® ¿¬°á

____13.2.5 Link ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÏ¿© ´Ù¸¥ ÁÖ¼Ò·Î À̵¿Çϱâ

__13.3 Route Çϳª¿¡ ¿©·¯ °³ÀÇ path ¼³Á¤Çϱâ

__13.4 URL ÆĶó¹ÌÅÍ¿Í Äõ¸®

____13.4.1 URL ÆĶó¹ÌÅÍ

____13.4.2 URL Äõ¸®

__13.5 ¼­ºê ¶ó¿ìÆ®

__13.6 ¸®¾×Æ® ¶ó¿ìÅÍ ºÎ°¡ ±â´É

____13.6.1 history

____13.6.2 withRouter

____13.6.3 Switch

____13.6.4 NavLink

__13.7 Á¤¸®



14Àå ¿ÜºÎ API¸¦ ¿¬µ¿ÇÏ¿© ´º½º ºä¾î ¸¸µé±â

__14.1 ºñµ¿±â ÀÛ¾÷ÀÇ ÀÌÇØ

____14.1.1 Äݹé ÇÔ¼ö

____14.1.2 Promise

____14.1.3 async/await

__14.2 axios·Î API È£ÃâÇؼ­ µ¥ÀÌÅÍ ¹Þ¾Æ ¿À±â

__14.3 newsapi API Å° ¹ß±Þ¹Þ±â

__14.4 ´º½º ºä¾î UI ¸¸µé±â

____14.4.1 NewsItem ¸¸µé±â

____14.4.2 NewsList ¸¸µé±â

__14.5 µ¥ÀÌÅÍ ¿¬µ¿Çϱâ

__14.6 Ä«Å×°í¸® ±â´É ±¸ÇöÇϱâ

____14.6.1 Ä«Å×°í¸® ¼±Åà UI ¸¸µé±â

____14.6.2 API¸¦ È£ÃâÇÒ ¶§ Ä«Å×°í¸® ÁöÁ¤Çϱâ

__14.7 ¸®¾×Æ® ¶ó¿ìÅÍ Àû¿ëÇϱâ

____14.7.1 ¸®¾×Æ® ¶ó¿ìÅÍÀÇ ¼³Ä¡ ¹× Àû¿ë

____14.7.2 NewsPage »ý¼º

____14.7.3 Categories¿¡¼­ NavLink »ç¿ëÇϱâ

__14.8 usePromise Ä¿½ºÅÒ Hook ¸¸µé±â

__14.9 Á¤¸®



15Àå Context API

__15.1 Context API¸¦ »ç¿ëÇÑ Àü¿ª »óÅ °ü¸® È帧 ÀÌÇØÇϱâ

__15.2 Context API »ç¿ë¹ý ÀÍÈ÷±â

____15.2.1 »õ Context ¸¸µé±â

____15.2.2 Consumer »ç¿ëÇϱâ

____15.2.3 Provider

__15.3 µ¿Àû Context »ç¿ëÇϱâ

____15.3.1 Context ÆÄÀÏ ¼öÁ¤Çϱâ

____15.3.2 »õ·Î¿öÁø Context¸¦ ÇÁ·ÎÁ§Æ®¿¡ ¹Ý¿µÇϱâ

____15.3.3 »ö»ó ¼±Åà ÄÄÆ÷³ÍÆ® ¸¸µé±â

__15.4 Consumer ´ë½Å Hook ¶Ç´Â static contextType »ç¿ëÇϱâ

____15.4.1 useContext Hook »ç¿ëÇϱâ

____15.4.2 static contextType »ç¿ëÇϱâ

__15.5 Á¤¸®



16Àå ¸®´ö½º ¶óÀ̺귯¸® ÀÌÇØÇϱâ

__16.1 °³³ä ¹Ì¸® Á¤¸®Çϱâ

____16.1.1 ¾×¼Ç

____16.1.2 ¾×¼Ç »ý¼º ÇÔ¼ö

____16.1.3 ¸®µà¼­

____16.1.4 ½ºÅä¾î

____16.1.5 µð½ºÆÐÄ¡

____16.1.6 ±¸µ¶

__16.2 ¸®¾×Æ® ¾øÀÌ ¾²´Â ¸®´ö½º

____16.2.1 Parcel·Î ÇÁ·ÎÁ§Æ® ¸¸µé±â

____16.2.2 °£´ÜÇÑ UI ±¸¼ºÇϱâ

____16.2.3 DOM ·¹ÆÛ·±½º ¸¸µé±â

____16.2.4 ¾×¼Ç ŸÀÔ°ú ¾×¼Ç »ý¼º ÇÔ¼ö Á¤ÀÇ

____16.2.5 Ãʱ갪 ¼³Á¤

____16.2.6 ¸®µà¼­ ÇÔ¼ö Á¤ÀÇ

____16.2.7 ½ºÅä¾î ¸¸µé±â

____16.2.8 render ÇÔ¼ö ¸¸µé±â

____16.2.9 ±¸µ¶Çϱâ

____16.2.10 ¾×¼Ç ¹ß»ý½ÃÅ°±â

__16.3 ¸®´ö½ºÀÇ ¼¼ °¡Áö ±ÔÄ¢

____16.3.1 ´ÜÀÏ ½ºÅä¾î

____16.3.2 Àбâ Àü¿ë »óÅÂ

____16.3.3 ¸®µà¼­´Â ¼ø¼öÇÑ ÇÔ¼ö

__16.4 Á¤¸®



17Àå ¸®´ö½º¸¦ »ç¿ëÇÏ¿© ¸®¾×Æ® ¾ÖÇø®ÄÉÀÌ¼Ç »óÅ °ü¸®Çϱâ

__17.1 ÀÛ¾÷ ȯ°æ ¼³Á¤

__17.2 UI ÁغñÇϱâ

____17.2.1 Ä«¿îÅÍ ÄÄÆ÷³ÍÆ® ¸¸µé±â

____17.2.2 ÇÒ ÀÏ ¸ñ·Ï ÄÄÆ÷³ÍÆ® ¸¸µé±â

__17.3 ¸®´ö½º °ü·Ã ÄÚµå ÀÛ¼ºÇϱâ

____17.3.1 counter ¸ðµâ ÀÛ¼ºÇϱâ

____17.3.2 todos ¸ðµâ ¸¸µé±â

____17.3.3 ·çÆ® ¸®µà¼­ ¸¸µé±â

__17.4 ¸®¾×Æ® ¾ÖÇø®ÄÉÀ̼ǿ¡ ¸®´ö½º Àû¿ëÇϱâ

____17.4.1 ½ºÅä¾î ¸¸µé±â

____17.4.2 Provider ÄÄÆ÷³ÍÆ®¸¦ »ç¿ëÇÏ¿© ÇÁ·ÎÁ§Æ®¿¡ ¸®´ö½º Àû¿ëÇϱâ

____17.4.3 Redux DevToolsÀÇ ¼³Ä¡ ¹× Àû¿ë

__17.5 ÄÁÅ×ÀÌ³Ê ÄÄÆ÷³ÍÆ® ¸¸µé±â

____17.5.1 CounterContainer ¸¸µé±â

____17.5.2 TodosContainer ¸¸µé±â

__17.6 ¸®´ö½º ´õ ÆíÇÏ°Ô »ç¿ëÇϱâ

____17.6.1 redux-actions

____17.6.2 immer

__17.7 Hooks¸¦ »ç¿ëÇÏ¿© ÄÁÅ×ÀÌ³Ê ÄÄÆ÷³ÍÆ® ¸¸µé±â

____17.7.1 useSelector·Î »óÅ Á¶È¸Çϱâ

____17.7.2 useDispatch¸¦ »ç¿ëÇÏ¿© ¾×¼Ç µð½ºÆÐÄ¡Çϱâ

____17.7.3 useStore¸¦ »ç¿ëÇÏ¿© ¸®´ö½º ½ºÅä¾î »ç¿ëÇϱâ

____17.7.4 TodosContainer¸¦ Hooks·Î ÀüȯÇϱâ

____17.7.5 useActions À¯Æ¿ HookÀ» ¸¸µé¾î¼­ »ç¿ëÇϱâ

____17.7.6 connect ÇÔ¼ö¿ÍÀÇ ÁÖ¿ä Â÷ÀÌÁ¡

__17.8 Á¤¸®



18Àå ¸®´ö½º ¹Ìµé¿þ¾î¸¦ ÅëÇÑ ºñµ¿±â ÀÛ¾÷ °ü¸®

__18.1 ÀÛ¾÷ ȯ°æ Áغñ

__18.2 ¹Ìµé¿þ¾î¶õ?

____18.2.1 ¹Ìµé¿þ¾î ¸¸µé±â

____18.2.2 redux-logger »ç¿ëÇϱâ

__18.3 ºñµ¿±â ÀÛ¾÷À» ó¸®ÇÏ´Â ¹Ìµé¿þ¾î »ç¿ë

____18.3.1 redux-thunk

____18.3.2 redux-saga

__18.4 Á¤¸®



19Àå ÄÚµå ½ºÇø®ÆÃ

__19.1 ÀÚ¹Ù½ºÅ©¸³Æ® ÇÔ¼ö ºñµ¿±â ·Îµù

__19.2 React.lazy¿Í Suspense¸¦ ÅëÇÑ ÄÄÆ÷³ÍÆ® ÄÚµå ½ºÇø®ÆÃ

____19.2.1 state¸¦ »ç¿ëÇÑ ÄÚµå ½ºÇø®ÆÃ

____19.2.2 React.lazy¿Í Suspense »ç¿ëÇϱâ

____19.2.3 Loadable Components¸¦ ÅëÇÑ ÄÚµå ½ºÇø®ÆÃ

__19.3 Á¤¸®



20Àå ¼­¹ö »çÀÌµå ·»´õ¸µ

__20.1 ¼­¹ö »çÀÌµå ·»´õ¸µÀÇ ÀÌÇØ

____20.1.1 ¼­¹ö »çÀÌµå ·»´õ¸µÀÇ ÀåÁ¡

____20.1.2 ¼­¹ö »çÀÌµå ·»´õ¸µÀÇ ´ÜÁ¡

____20.1.3 ¼­¹ö »çÀÌµå ·»´õ¸µ°ú ÄÚµå ½ºÇø®Æà Ãæµ¹

__20.2 ÇÁ·ÎÁ§Æ® ÁغñÇϱâ

____20.2.1 ÄÄÆ÷³ÍÆ® ¸¸µé±â

____20.2.2 ÆäÀÌÁö ÄÄÆ÷³ÍÆ® ¸¸µé±â

__20.3 ¼­¹ö »çÀÌµå ·»´õ¸µ ±¸ÇöÇϱâ

____20.3.1 ¼­¹ö »çÀÌµå ·»´õ¸µ¿ë ¿£Æ®¸® ¸¸µé±â

____20.3.2 ¼­¹ö »çÀÌµå ·»´õ¸µ Àü¿ë À¥ÆÑ È¯°æ ¼³Á¤ ÀÛ¼ºÇϱâ

____20.3.3 ºôµå ½ºÅ©¸³Æ® ÀÛ¼ºÇϱâ

____20.3.4 ¼­¹ö ÄÚµå ÀÛ¼ºÇϱâ

____20.3.5 Á¤Àû ÆÄÀÏ Á¦°øÇϱâ

__20.4 µ¥ÀÌÅÍ ·Îµù

____20.4.1 redux-thunk ÄÚµå ÁغñÇϱâ

____20.4.2 Users, UsersContainer ÄÄÆ÷³ÍÆ® ÁغñÇϱâ

____20.4.3 PreloadContext ¸¸µé±â

____20.4.4 ¼­¹ö¿¡¼­ ¸®´ö½º ¼³Á¤ ¹× PreloadContext »ç¿ëÇϱâ

____20.4.5 ½ºÅ©¸³Æ®·Î ½ºÅä¾î Ãʱ⠻óÅ ÁÖÀÔÇϱâ

____20.4.6 redux-saga ÄÚµå ÁغñÇϱâ

____20.4.7 User, UserContainer ÄÄÆ÷³ÍÆ® ÁغñÇϱâ

____20.4.8 redux-saga¸¦ À§ÇÑ ¼­¹ö »çÀÌµå ·»´õ¸µ ÀÛ¾÷

____20.4.9 usePreloader Hook ¸¸µé¾î¼­ »ç¿ëÇϱâ

__20.5 ¼­¹ö »çÀÌµå ·»´õ¸µ°ú ÄÚµå ½ºÇø®ÆÃ

____20.5.1 ¶ó¿ìÆ® ÄÄÆ÷³ÍÆ® ½ºÇø®ÆÃÇϱâ

____20.5.2 À¥ÆÑ°ú babel Ç÷¯±×ÀÎ Àû¿ë

____20.5.3 ÇÊ¿äÇÑ Ã»Å© ÆÄÀÏ °æ·Î ÃßÃâÇϱâ

____20.5.4 loadableReady¿Í hydrate

__20.6 ¼­¹ö »çÀÌµå ·»´õ¸µÀÇ È¯°æ ±¸ÃàÀ» À§ÇÑ ´ë¾È

____20.6.1 Next.js

____20.6.2 Razzle

__20.7 Á¤¸®



21Àå ¹é¿£µå ÇÁ·Î±×·¡¹Ö: Node.jsÀÇ Koa ÇÁ·¹ÀÓ¿öÅ©

__21.1 ¼Ò°³Çϱâ

____21.1.1 ¹é¿£µå

____21.1.2 Node.js

____21.1.3 Koa

__21.2 ÀÛ¾÷ ȯ°æ Áغñ

____21.2.1 Node ¼³Ä¡ È®ÀÎ

____21.2.2 ÇÁ·ÎÁ§Æ® »ý¼º

____21.2.3 ESLint¿Í Prettier ¼³Á¤

__21.3 Koa ±âº» »ç¿ë¹ý

____21.3.1 ¼­¹ö ¶ç¿ì±â

____21.3.2 ¹Ìµé¿þ¾î

__21.4 nodemon »ç¿ëÇϱâ

__21.5 koa-router »ç¿ëÇϱâ

____21.5.1 ±âº» »ç¿ë¹ý

____21.5.2 ¶ó¿ìÆ® ÆĶó¹ÌÅÍ¿Í Äõ¸®

____21.5.3 REST API

____21.5.4 ¶ó¿ìÆ® ¸ðµâÈ­

____21.5.5 posts ¶ó¿ìÆ® »ý¼º

__21.6 Á¤¸®



22Àå mongoose¸¦ ÀÌ¿ëÇÑ MongoDB ¿¬µ¿ ½Ç½À

__22.1 ¼Ò°³Çϱâ

____22.1.1 ¹®¼­¶õ?

____22.1.2 MongoDB ±¸Á¶

____22.1.3 ½ºÅ°¸¶ µðÀÚÀÎ

__22.2 MongoDB ¼­¹ö Áغñ

____22.2.1 ¼³Ä¡

____22.2.2 MongoDB ÀÛµ¿ È®ÀÎ

__22.3 mongooseÀÇ ¼³Ä¡ ¹× Àû¿ë

____22.3.1 .env ȯ°æº¯¼ö ÆÄÀÏ »ý¼º

____22.3.2 mongoose·Î ¼­¹ö¿Í µ¥ÀÌÅͺ£À̽º ¿¬°á

__22.4 esmÀ¸·Î ES ¸ðµâ import/export ¹®¹ý »ç¿ëÇϱâ

____22.4.1 ±âÁ¸ ÄÚµå ES Module ÇüÅ·Π¹Ù²Ù±â

__22.5 µ¥ÀÌÅͺ£À̽ºÀÇ ½ºÅ°¸¶¿Í ¸ðµ¨

____22.5.1 ½ºÅ°¸¶ »ý¼º

____22.5.2 ¸ðµ¨ »ý¼º

__22.6 MongoDB CompassÀÇ ¼³Ä¡ ¹× »ç¿ë

__22.7 µ¥ÀÌÅÍ »ý¼º°ú Á¶È¸

____22.7.1 µ¥ÀÌÅÍ »ý¼º

____22.7.2 µ¥ÀÌÅÍ Á¶È¸

____22.7.3 ƯÁ¤ Æ÷½ºÆ® Á¶È¸

__22.8 µ¥ÀÌÅÍ »èÁ¦¿Í ¼öÁ¤

____22.8.1 µ¥ÀÌÅÍ »èÁ¦

____22.8.2 µ¥ÀÌÅÍ ¼öÁ¤

__22.9 ¿äû °ËÁõ

____22.9.1 ObjectId °ËÁõ

____22.9.2 Request Body °ËÁõ

__22.10 ÆäÀÌÁö³×ÀÌ¼Ç ±¸Çö

____22.10.1 °¡Â¥ µ¥ÀÌÅÍ »ý¼ºÇϱâ

____22.10.2 Æ÷½ºÆ®¸¦ ¿ª¼øÀ¸·Î ºÒ·¯¿À±â

____22.10.3 º¸ÀÌ´Â °³¼ö Á¦ÇÑ

____22.10.4 ÆäÀÌÁö ±â´É ±¸Çö

____22.10.5 ¸¶Áö¸· ÆäÀÌÁö ¹øÈ£ ¾Ë·Á ÁÖ±â

____22.10.6 ³»¿ë ±æÀÌ Á¦ÇÑ

__22.11 Á¤¸®



23Àå JWT¸¦ ÅëÇÑ È¸¿ø ÀÎÁõ ½Ã½ºÅÛ ±¸ÇöÇϱâ

__23.1 JWTÀÇ ÀÌÇØ

____23.1.1 ¼¼¼Ç ±â¹Ý ÀÎÁõ°ú ÅäÅ« ±â¹Ý ÀÎÁõÀÇ Â÷ÀÌ

__23.2 User ½ºÅ°¸¶/¸ðµ¨ ¸¸µé±â

____23.2.1 ¸ðµ¨ ¸Þ¼­µå ¸¸µé±â

____23.2.2 ½ºÅÂƽ ¸Þ¼­µå ¸¸µé±â

__23.3 ȸ¿ø ÀÎÁõ API ¸¸µé±â

____23.3.1 ȸ¿ø°¡ÀÔ ±¸ÇöÇϱâ

____23.3.2 ·Î±×ÀÎ ±¸ÇöÇϱâ

__23.4 ÅäÅ« ¹ß±Þ ¹× °ËÁõÇϱâ

____23.4.1 ºñ¹ÐÅ° ¼³Á¤Çϱâ

____23.4.2 ÅäÅ« ¹ß±ÞÇϱâ

____23.4.3 ÅäÅ« °ËÁõÇϱâ

____23.4.4 ÅäÅ« Àç¹ß±ÞÇϱâ

____23.4.5 ·Î±×¾Æ¿ô ±â´É ±¸ÇöÇϱâ

__23.5 posts API¿¡ ȸ¿ø ÀÎÁõ ½Ã½ºÅÛ µµÀÔÇϱâ

____23.5.1 ½ºÅ°¸¶ ¼öÁ¤Çϱâ

____23.5.2 posts Ä÷º¼Ç ºñ¿ì±â

____23.5.3 ·Î±×ÀÎÇßÀ» ¶§¸¸ API¸¦ »ç¿ëÇÒ ¼ö ÀÖ°Ô Çϱâ

____23.5.4 Æ÷½ºÆ® ÀÛ¼º ½Ã »ç¿ëÀÚ Á¤º¸ ³Ö±â

____23.5.5 Æ÷½ºÆ® ¼öÁ¤ ¹× »èÁ¦ ½Ã ±ÇÇÑ È®ÀÎÇϱâ

__23.6 username/tags·Î Æ÷½ºÆ® ÇÊÅ͸µÇϱâ

__23.7 Á¤¸®



24Àå ÇÁ·±Æ®¿£µå ÇÁ·ÎÁ§Æ®: ½ÃÀÛ ¹× ȸ¿ø ÀÎÁõ ±¸Çö

__24.1 ÀÛ¾÷ ȯ°æ ÁغñÇϱâ

____24.1.1 ¼³Á¤ ÆÄÀÏ ¸¸µé±â

____24.1.2 ¶ó¿ìÅÍ Àû¿ë

____24.1.3 ½ºÅ¸ÀÏ ¼³Á¤

____24.1.4 Button ÄÄÆ÷³ÍÆ® ¸¸µé±â

____24.1.5 ¸®´ö½º Àû¿ë

__24.2 ȸ¿ø°¡ÀÔ°ú ·Î±×ÀÎ ±¸Çö

____24.2.1 UI ÁغñÇϱâ

____24.2.2 ¸®´ö½º·Î Æû »óÅ °ü¸®Çϱâ

____24.2.3 API ¿¬µ¿Çϱâ

____24.2.4 ȸ¿ø°¡ÀÔ ±¸Çö

____24.2.5 ·Î±×ÀÎ ±¸Çö

____24.2.6 ȸ¿ø ÀÎÁõ ¿¡·¯ ó¸®Çϱâ

__24.3 Çì´õ ÄÄÆ÷³ÍÆ® »ý¼º ¹× ·Î±×ÀÎ À¯Áö

____24.3.1 Çì´õ ÄÄÆ÷³ÍÆ® ¸¸µé±â

____24.3.2 ·Î±×ÀÎ »óŸ¦ º¸¿© ÁÖ°í À¯ÁöÇϱâ

____24.3.3 ·Î±×¾Æ¿ô ±â´É ±¸Çö

__24.4 Á¤¸®



25Àå ÇÁ·±Æ®¿£µå ÇÁ·ÎÁ§Æ®: ±Û¾²±â ±â´É ±¸ÇöÇϱâ

__25.1 ¿¡µðÅÍ UI ±¸ÇöÇϱâ

__25.2 ¿¡µðÅÍ ÇÏ´Ü ÄÄÆ÷³ÍÆ® UI ±¸ÇöÇϱâ

____25.2.1 TagBox ¸¸µé±â

__25.3 ¸®´ö½º·Î ±Û¾²±â »óÅ °ü¸®Çϱâ

____25.3.1 EditorContainer ¸¸µé±â

____25.3.2 TagBoxContainer ¸¸µé±â

____25.3.3 ±Û¾²±â API ¿¬µ¿Çϱâ

__25.4 Á¤¸®



26Àå ÇÁ·±Æ®¿£µå ÇÁ·ÎÁ§Æ®: Æ÷½ºÆ® Á¶È¸ ±â´É ±¸ÇöÇϱâ

__26.1 Æ÷½ºÆ® Àбâ ÆäÀÌÁö ±¸ÇöÇϱâ

____26.1.1 PostViewer UI ÁغñÇϱâ

____26.1.2 API ¿¬µ¿Çϱâ

__26.2 Æ÷½ºÆ® ¸ñ·Ï ÆäÀÌÁö ±¸ÇöÇϱâ

____26.2.1 PostList UI ÁغñÇϱâ

____26.2.2 Æ÷½ºÆ® ¸ñ·Ï Á¶È¸ API ¿¬µ¿Çϱâ

____26.2.3 HTML ÇÊÅ͸µÇϱâ

____26.2.4 ÆäÀÌÁö³×ÀÌ¼Ç ±¸ÇöÇϱâ

__26.3 Á¤¸®



27Àå ÇÁ·±Æ®¿£µå ÇÁ·ÎÁ§Æ®: ¼öÁ¤/»èÁ¦ ±â´É ±¸Çö ¹× ¸¶¹«¸®

__27.1 Æ÷½ºÆ® ¼öÁ¤

____27.1.1 PostActionButtons ÄÄÆ÷³ÍÆ® ¸¸µé±â

____27.1.2 ¼öÁ¤ ¹öÆ° Ŭ¸¯ ½Ã ±Û¾²±â ÆäÀÌÁö·Î À̵¿Çϱâ

__27.2 Æ÷½ºÆ® »èÁ¦

__27.3 react-helmet-async·Î meta ÅÂ±× ¼³Á¤Çϱâ

__27.4 ÇÁ·ÎÁ§Æ® ¸¶¹«¸®

____27.4.1 ÇÁ·ÎÁ§Æ® ºôµåÇϱâ

____27.4.2 koa-staticÀ¸·Î Á¤Àû ÆÄÀÏ Á¦°øÇϱâ

____27.4.3 ´õ ÇÒ ¼ö ÀÖ´Â ÀÛ¾÷

__27.5 Á¤¸®



28Àå ±×´ÙÀ½Àº?

__28.1 ¸®¾×Æ® °ü·Ã Ä¿¹Â´ÏƼ

____28.1.1 ±¹³» Ä¿¹Â´ÏƼ

____28.1.2 ±¹¿Ü Ä¿¹Â´ÏƼ

__28.2 Ã¥ÀÇ ¿¬Àå¼±

__28.3 »çÀ̵å ÇÁ·ÎÁ§Æ® »ý¼º



ã¾Æº¸±â