»ó¼¼Á¤º¸
Ã¥¼Ò°³
Next.jsÀÇ ¸ðµç ±â´ÉÀ» ³¹³¹ÀÌ ÆÄÇìÄ¡°í, ¿Â¶óÀÎ »ó°Å·¡ »çÀÌÆ®±îÁö Á÷Á¢ ±¸ÃàÇغ¸´Â À¥ °³¹ß ½ÇÀü¼
ÀÌ Ã¥ÀÇ °Á¡Àº ¸®¾×Æ®-Next.js¸¦ ÇÔ²² »ç¿ëÇÏ´Â ¹æ¹ý°ú Next.js¸¦ ´Üµ¶À¸·Î »ç¿ëÇÒ ¼ö ÀÖ´Â ½ÇÁúÀûÀÎ ¹æ¹ýÀ» ¸ðµÎ Á¦°øÇÑ´Ù´Â Á¡ÀÔ´Ï´Ù. µû¶ó¼ ±âÁ¸ ¸®¾×Æ® °³¹ßÀÚ»Ó¸¸ ¾Æ´Ï¶ó ¸®¾×Æ®¸¦ »ç¿ëÇÏÁö ¾Ê´Â À¥ °³¹ßÀÚ¿¡°Ôµµ ½Ç¿ëÀûÀÔ´Ï´Ù.
ƯÈ÷ ¼¹ö »çÀÌµå ·»´õ¸µ(SSR)°ú Á¤Àû »çÀÌÆ® »ý¼º(SSG)À» ºñ·ÔÇÏ¿© ½ºÅ¸Àϸµ, ÀÎÁõ, API È£Ãâ µî ´ë±Ô¸ð ¾ÖÇø®ÄÉÀÌ¼Ç °³¹ß¿¡ ÇÊ¿äÇÑ ³»¿ë±îÁö ´Ù·ç±â ¶§¹®¿¡ ½ÇÀü¿¡¼ ¹Ù·Î È°¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ¶ÇÇÑ ÀÌ ¸ðµç ³»¿ëÀ» Åä´ë·Î ¿Â¶óÀÎ »ó°Å·¡ À¥ »çÀÌÆ®¸¦ Á÷Á¢ ±¸ÇöÇÏ°í ¹èÆ÷Çغ¸¸ç Next.js¿Í ¸®¾×Æ® °³¹ß ½Ç·ÂÀ» ÇÑÃþ ´õ ³ôÀÏ ¼ö ÀÖ½À´Ï´Ù.
À¥ ¾ÖÇø®ÄÉÀ̼ÇÀÇ SEO, »ç¿ëÀÚ °æÇè, °³¹ßÀÚ ¸¸Á·µµ¸¦ ¸ðµÎ Çâ»ó½ÃÅ°°í ½ÍÀº°¡¿ä? ±× ´äÀº Next.js¿¡ ÀÖ½À´Ï´Ù.
ÀúÀÚ¼Ò°³
ÀÌÅ»¸®¾Æ ¹Ð¶ó³ë¿¡¼ ±¸±Û °³¹ßÀÚÀÌÀÚ ¼ÒÇÁÆ®¿þ¾î ¾ÆÅ°ÅØÆ®·Î ÀÏÇØ¿Â ¿Á¤ ³ÑÄ¡´Â °³¹ßÀÚÀÔ´Ï´Ù. ¼ö³â°£ ¸¹Àº ¿ÀǼҽº ÇÁ·ÎÁ§Æ®¿¡ ±â¿©ÇßÀ¸¸ç Haskell, Elixir, Go, ŸÀÔ½ºÅ©¸³Æ® µî ´Ù¾çÇÑ ÇÁ·Î±×·¡¹Ö ¾ð¾î¸¦ »ç¿ëÇÕ´Ï´Ù. ¶ÇÇÑ ¿©·¯ °¡Áö ÁÖÁ¦·Î ±ÛÀ» ¾²°í ÀÖÀ¸¸ç ¸¹Àº ±¹Á¦ ÄÜÆÛ·±½º¿¡¼ ¿¬»ç·Î È°µ¿ÇÏ°í ÀÖ½À´Ï´Ù. Ã¥À» ¾²´Â µ¿¾È¿¡´Â ÆĶ󸶿îÆ® ±Û·Î¹ú ¾ÆÅ°ÅØó ÆÀ¿¡¼ ½Ã´Ï¾î ¼ÒÇÁÆ®¿þ¾î ¿£Áö´Ï¾î·Î ±Ù¹«ÇÏ¸ç ½ºÆ®¸®¹Ö À¥ »çÀÌÆ®ÀÇ ÇÙ½ÉÀÎ ¸ÖƼÅ׳ÍÆ® Node.js ¾ÖÇø®ÄÉÀ̼ÇÀ» °³¹ßÇß½À´Ï´Ù. ÇöÀç´Â ¾ÆÀÏ·£µå Æ®¶ó¸ð·¹¿¡ ÀÖ´Â ¼ÒÇÁÆ®¿þ¾î ȸ»ç NearForm¿¡¼ ½Ã´Ï¾î ¼ÒÇÁÆ®¿þ¾î ¾ÆÅ°ÅØÆ®·Î ÀÏÇÏ°í ÀÖ½À´Ï´Ù.
¸ñÂ÷
PART 1 Next.jsÀÇ ¼¼°è·Î
CHAPTER 1 Next.js ¾Ë¾Æº¸±â
1.1 ÁغñÇϱâ
1.2 Next.js¶õ?
1.3 Next.js¿Í ºñ½ÁÇÑ ÇÁ·¹ÀÓ¿öÅ©
1.4 ¿Ö Next.jsÀϱî?
1.5 ¸®¾×Æ®¿¡¼ Next.js·Î
1.6 Next.js ½ÃÀÛÇϱâ
-ÇÁ·ÎÁ§Æ® ±âÁ¸ ±¸Á¶
-ŸÀÔ½ºÅ©¸³Æ® Áö¿ø
-¹Ùº§¿Í À¥ÆÑ ¼³Á¤ Ä¿½ºÅ͸¶ÀÌ¡
Á¤¸®Çϱâ
CHAPTER 2 ·»´õ¸µ Àü·«
2.1 ¼¹ö »çÀÌµå ·»´õ¸µ (SSR)
2.2 Ŭ¶óÀ̾ðÆ® »çÀÌµå ·»´õ¸µ (CSR)
-React.useEffect ÈÅ
-process.browser º¯¼ö
-µ¿Àû ÄÄÆ÷³ÍÆ® ·Îµù
2.3 Á¤Àû »çÀÌÆ® »ý¼º (SSG)
Á¤¸®Çϱâ
CHAPTER 3 Next.js ±âÃÊ¿Í ³»Àå ÄÄÆ÷³ÍÆ®
3.1 ¶ó¿ìÆà ½Ã½ºÅÛ
-ÆäÀÌÁö¿¡¼ °æ·Î ¸Å°³º¯¼ö »ç¿ëÇϱâ
-ÄÄÆ÷³ÍÆ®¿¡¼ °æ·Î ¸Å°³º¯¼ö »ç¿ëÇϱâ
-Ŭ¶óÀ̾ðÆ®¿¡¼ÀÇ ³»ºñ°ÔÀ̼Ç
3.2 Á¤Àû ÀÚ¿ø Á¦°ø
-ÀÚµ¿ À̹ÌÁö ÃÖÀûÈ
-¿ÜºÎ ¼ºñ½º¸¦ ÅëÇÑ ÀÚµ¿ À̹ÌÁö ÃÖÀûÈ
3.3 ¸ÞŸµ¥ÀÌÅÍ
-°øÅë ¸ÞŸ ÅÂ±× ±×·ì
3.4 _app.js¿Í _document.js ÆäÀÌÁö Ä¿½ºÅ͸¶ÀÌ¡
-_app.js ÆäÀÌÁö
-_document.js ÆäÀÌÁö
Á¤¸®Çϱâ
PART 2 Next.js ½ÇÀü °¨°¢ ÀÍÈ÷±â
CHAPTER 4 ÄÚµå ±¸¼º°ú µ¥ÀÌÅÍ ºÒ·¯¿À±â
4.1 µð·ºÅ͸® ±¸Á¶ ±¸¼º
-ÄÄÆ÷³ÍÆ® ±¸¼º
-À¯Æ¿¸®Æ¼ ±¸¼º
-Á¤Àû ÀÚ¿ø ±¸¼º
-½ºÅ¸ÀÏ ÆÄÀÏ ±¸¼º
-lib ÆÄÀÏ ±¸¼º
4.2 µ¥ÀÌÅÍ ºÒ·¯¿À±â
-¼¹ö°¡ µ¥ÀÌÅÍ ºÒ·¯¿À±â
-¼¹ö¿¡¼ REST API »ç¿ëÇϱâ
-Ŭ¶óÀ̾ðÆ®°¡ µ¥ÀÌÅÍ ºÒ·¯¿À±â
-Ŭ¶óÀ̾ðÆ®¿¡¼ REST API »ç¿ëÇϱâ
-GraphQL API »ç¿ëÇϱâ
Á¤¸®Çϱâ
CHAPTER 5 Áö¿ª ¹× Àü¿ª »óÅ °ü¸®
5.1 Áö¿ª »óÅ °ü¸®
5.2 Àü¿ª »óÅ °ü¸®
-ÄÜÅؽºÆ® API
-Redux
Á¤¸®Çϱâ
CHAPTER 6 CSS¿Í ³»Àå ½ºÅ¸Àϸµ ¸Þ¼µå
6.1 Styled JSX
6.2 CSS Module
6.3 SASS
Á¤¸®Çϱâ
CHAPTER 7 UI ÇÁ·¹ÀÓ¿öÅ©
7.1 UI ¶óÀ̺귯¸®
7.2 Chakra UI
7.3 Tailwind CSS
7.4 Headless UI
Á¤¸®Çϱâ
CHAPTER 8 Ä¿½ºÅÒ ¼¹ö
8.1 Ä¿½ºÅÒ ¼¹ö°¡ ÇÊ¿äÇÑ °æ¿ì
8.2 Express.js ¼¹ö
8.3 Fastify ¼¹ö
Á¤¸®Çϱâ
CHAPTER 9 Å×½ºÆ®
9.1 Å×½ºÆ®¶õ?
9.2 Jest¸¦ »ç¿ëÇÑ ´ÜÀ§ Å×½ºÆ®¿Í ÅëÇÕ Å×½ºÆ®
9.3 Cypress¸¦ »ç¿ëÇÑ ¿£µå Åõ ¿£µå Å×½ºÆ®
Á¤¸®Çϱâ
CHAPTER 10 SEO¿Í ¼º´É °ü¸®
10.1 SEO¿Í ¼º´É
10.2 SEO¿Í ¼º´É °üÁ¡¿¡¼ÀÇ ·»´õ¸µ Àü·«
-½ÇÁ¦ À¥ »çÀÌÆ®¸¦ ÅëÇØ »ìÆ캻 ·»´õ¸µ Àü·«ÀÇ ¼±Åà ÀÌÀ¯
-»çÁø ¼¼ºÎ Á¤º¸ ÆäÀÌÁö
-ÇÁ¶óÀ̺ø ¶ó¿ìÆ®
-¼±ÅÃÇÑ ·»´õ¸µ Àü·« Á¤¸®
10.3 SEO ´Ù·ç±â
10.4 ¼º´É ´Ù·ç±â
Á¤¸®Çϱâ
CHAPTER 11 ¹èÆ÷ Ç÷§Æû
11.1 ´Ù¾çÇÑ ¹èÆ÷ Ç÷§Æû
11.2 Vercel¿¡ ¹èÆ÷Çϱâ
11.3 CDN¿¡ Á¤Àû »çÀÌÆ® ¹èÆ÷Çϱâ
11.4 ÀûÀýÇÑ CDN °í¸£±â
11.5 ¾Æ¹« ¼¹ö¿¡³ª Next.js ¹èÆ÷Çϱâ
11.6 µµÄ¿ ÄÁÅ×À̳ʿ¡¼ Next.js ¾ÖÇø®ÄÉÀÌ¼Ç ½ÇÇàÇϱâ
Á¤¸®Çϱâ
PART 3 Next.js·Î »ó¿ë ¾ÖÇø®ÄÉÀÌ¼Ç ¸¸µé±â
CHAPTER 12 ÀÎÁõ°ú »ç¿ëÀÚ ¼¼¼Ç °ü¸®
12.1 ÀÎÁõ°ú »ç¿ëÀÚ ¼¼¼Ç
12.2 JSON web token
12.3 Ä¿½ºÅÒ ÀÎÁõ
12.4 Auth0
12.5 Auth0 Ä¿½ºÅ͸¶ÀÌ¡
Á¤¸®Çϱâ
CHAPTER 13 GraphCMS·Î ¿Â¶óÀÎ »ó°Å·¡ À¥ »çÀÌÆ® ¸¸µé±â
13.1 ¿Â¶óÀÎ »ó°Å·¡ À¥ »çÀÌÆ® ¸¸µé±â
13.2 GraphCMS ¼³Á¤Çϱâ
13.3 »óÁ¡ Ȩ ÆäÀÌÁö, Àå¹Ù±¸´Ï ¹× Á¦Ç° »ó¼¼ ÆäÀÌÁö ¸¸µé±â
13.4 Stripe·Î °áÁ¦ ±¸ÇöÇϱâ
Á¤¸®Çϱâ
CHAPTER 14 ¿¹Á¦ ÇÁ·ÎÁ§Æ®·Î »ìÆ캸´Â Next.jsÀÇ ´ÙÀ½ ´Ü°è
14.1 ¹«±Ã¹«ÁøÇÑ °¡´É¼ºÀ» °¡Áø ÇÁ·¹ÀÓ¿öÅ©
14.2 Next.js ¿¬½ÀÀ» À§ÇÑ ÇÁ·ÎÁ§Æ®
-½ºÆ®¸®¹Ö À¥ »çÀÌÆ®
-ºí·Î±ë Ç÷§Æû
-½Ç½Ã°£ äÆà À¥ »çÀÌÆ®
14.3 ´ÙÀ½ ´Ü°è
Á¤¸®Çϱâ