ÄÁÅÙÃ÷»ó¼¼º¸±â

½ÇÀü¿¡¼­ ¹Ù·Î ¾²´Â Next.js : ¾ÈÁ¤ÀûÀÎ À¥ ÇÁ·ÎÁ§Æ® ¿î¿µÀ» À§ÇÑ Å¸ÀÔ½ºÅ©¸³Æ®ÀÇ ¸ðµç °Í
½ÇÀü¿¡¼­ ¹Ù·Î ¾²´Â Next.js : ¾ÈÁ¤ÀûÀÎ À¥ ÇÁ·ÎÁ§Æ® ¿î¿µÀ» À§ÇÑ Å¸ÀÔ½ºÅ©¸³Æ®ÀÇ ¸ðµç °Í
  • ÀúÀڹ̼Р¸®¹Ù Àú/¹Ú¼öÇö ¿ª
  • ÃâÆÇ»çÇѺû¹Ìµð¾î
  • ÃâÆÇÀÏ2023-02-13
  • µî·ÏÀÏ2024-07-15
º¸À¯ 1, ´ëÃâ 0, ¿¹¾à 0, ´©Àû´ëÃâ 0, ´©Àû¿¹¾à 0

Ã¥¼Ò°³

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 ´ÙÀ½ ´Ü°è

Á¤¸®Çϱâ

ÇÑÁÙ ¼­Æò