Next.js는 정말 zero config였다.

Transcript

1. Next.jsח ੿݈
   zero-config৓׮.
   2019֙ 4ਘ 11ੌ ѐߊࣃఠझೖ஖
   © RIDI Corp.
   ҅੿౱ ӣ੿Ӕ
   

   View Slide

2. 2
   Next.jsо ޥо?
   Next.jsח ੿݈ zero-config৓׮.
   SSRਸ ӝࠄਵ۽ ೞח React ೐ۨ੐ਕ௼
   

   View Slide

3. 3
   Next.jsо ޥо?
   Next.jsח ੿݈ zero-config৓׮.
   ೐ۨ੐ਕ௼ ׹ѱ ׮নೠ ӝמ ನೣೞҊ, zero-configܳ ૑ೱೠ׮.
   

   View Slide

4. 4
   Next.jsо ޥо?
   Next.jsח ੿݈ zero-config৓׮.
   ਢ ղ ࢲ੤ী ѐߊೞݶࢲ SSRਸ ૑ਗೞѱ عणפ׮.
   

   View Slide

5. 5
   Next.js੄ ੢੼(੉ۄ ו՛੼)
   Next.jsח ੿݈ zero-config৓׮.
   1. zero-config
   ѐߊࢲߡ
   

   View Slide

6. 6
   Next.js੄ ੢੼(੉ۄ ו՛੼)
   Next.jsח ੿݈ zero-config৓׮.
   1. zero-config
   ೐۽؋࣌ ࠽٘
   

   View Slide

7. 7
   Next.js੄ ੢੼(੉ۄ ו՛੼)
   Next.jsח ੿݈ zero-config৓׮.
   1. zero-config
   ೐۽؋࣌ ࢲߡ
   

   View Slide

8. 8
   Next.js੄ ੢੼(੉ۄ ו՛੼)
   Next.jsח ੿݈ zero-config৓׮.
   2. ೂࠗೠ ӝמ
   - Populating Head(react-helmet)
   - Routing (react-router, react-redux-router)
   - Link Component
   - HOC (inject Router)
   - Programmatic Routing
   - Prefetching Page
   - Export for static page
   - ١١١
   

   View Slide

9. 9
   Next.js੄ ੢੼(੉ۄ ו՛੼)
   Next.jsח ੿݈ zero-config৓׮.
   3. ೂࠗೠ ࢤక҅
   Typesciptی ॳҊ र਷ؘਃ?
   

   View Slide

10. 10
    Next.js੄ ੢੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    3. ೂࠗೠ ࢤక҅
    Typesciptی ॳҊ र਷ؘਃ?
    

    View Slide

11. 11
    Next.js੄ ੢੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    3. ೂࠗೠ ࢤక҅
    SSR நद ೞҊ र਷ؘ…
    

    View Slide

12. 12
    Next.js੄ ੢੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    3. ೂࠗೠ ࢤక҅
    SSR நद ೞҊ र਷ؘ…
    

    View Slide

13. 13
    Next.js੄ ੢੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    3. ೂࠗೠ ࢤక҅
    Ӓ ৻ীب ׮নೠ ৘ઁ৬ ۄ੉࠳۞ܻٜ੉ ਍৔غҊ ੓׮.
    mobx, emotion, apollo ١١
    

    View Slide

14. 14
    Next.js੄ ੢੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    4. ࢲߡ৬ ௿ۄܳ ҳ࠙ೞ૑ ঋইب غח ҳઑ
    

    View Slide

15. 15
    Next.js੄ ױ੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    1. ੿݈ zero-config (SSR)
    ݅ড, SSRਸ ՍҊ CSR۽ ਍৔ೞҊ रਵݶ যڌѱ ೞભ??
    

    View Slide

16. 16
    Next.js੄ ױ੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    1. ੿݈ zero-config (SSR)
    ݅ড, SSRਸ ՍҊ CSR۽ ਍৔ೞҊ रਵݶ যڌѱ ೞભ??
    Ӓ۠ ӝמ਷ হणפ׮…. Next.jsח CSR Only۽ ਍৔ೡ ࣻо হযਃ.
    ࢚కо হח ੿੸ࢎ੉౟ۄݶ оמ
    

    View Slide

17. 17
    Next.js੄ ױ੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    1. ੿݈ zero-config (ۄ਋౴)
    ۄ਋౴ ߑधਸ ߄ԲҊ रযਃ.
    

    View Slide

18. 18
    Next.js੄ ױ੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    1. ੿݈ zero-config (ۄ਋౴)
    Next.js੄ ۄ਋౴ ߑध
    

    View Slide

19. 19
    Next.js੄ ױ੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    1. ੿݈ zero-config (ۄ਋౴)
    Parameterܳ pathী ֍যঠೡٸח..?
    Server Client
    

    View Slide

20. 20
    Next.js੄ ױ੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    1. ੿݈ zero-config (ۄ਋౴)
    ѾҴ ౵ੌ߬੉झ ӝמਸ ੹ࠗ ՍҊ ࣻزਵ۽ ҙܻ೧ঠ ೠ׮.
    ׮ܲ ߑधਸ ખ ଺ইࠌחؘ হ׮ :\
    

    View Slide

21. 21
    Next.js੄ ױ੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    2. ࢲߡ৬ ௿ۄܳ ҳ࠙ೞ૑ ঋח ҳઑ
    

    View Slide

22. 22
    Next.js੄ ױ੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    2. ࢲߡ৬ ௿ۄܳ ҳ࠙ೞ૑ ঋח ҳઑ
    Ӕؘ ঌইঠ غݶ??
    

    View Slide

23. 23
    Next.js੄ ױ੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    2. ࢲߡ৬ ௿ۄܳ ҳ࠙ೞ૑ ঋח ҳઑ
    

    View Slide

24. 24
    Next.js੄ ױ੼(੉ۄ ו՛੼)
    Next.jsח ੿݈ zero-config৓׮.
    2. ࢲߡ৬ ௿ۄܳ ҳ࠙ೞ૑ ঋח ҳઑ
    

    View Slide

25. 25
    Ѿۿ
    Next.jsח ੿݈ zero-config৓׮.
    - Zeitۄח ഥࢎীࢲ ੿݈ ৌब൤ ҙܻೠ׮.
    - ࢤక҅ ೂࠗೞҊ ۞׬ ழ࠳ب ծ਷ ಞ੉׮. SSR ҃೷੉ হਸ ٸ بੑ೧ঠೞݶ Ҋ۰ೡ݅ೞ׮.
    - ஂೱਸ ఋח ҳઑо ઓ੤ೠ׮. Ӓؘ۠ ӒѦ ஂೱী ݏѱ ࣻ੿ೡ ࣻо হ׮.
    - zero-configۄࢲ ழझథೡ ࣻ ੓ח Ѫب zero-config׮.
    - ೠߣ ೧ࠌ׮Ҋ “૒੽ ҳഅೞח Ѫب જ૑ ঋਸө”ۄח ࢤп੉ ٚ׮.
    

    View Slide

26. 26
    Q & A
    

    View Slide

27. 27
    Next.jsীࢲ CSR۽ ਍৔ೞӝ!!
    Next.jsח ੿݈ zero-config৓׮.
    ୐ ಕ੉૑ SSR ੉റࠗఠח CSR۽ ੹ജػ׮.
    

    View Slide

28. 28
    Next.jsীࢲ CSR۽ ਍৔ೞӝ!!
    Next.jsח ੿݈ zero-config৓׮.
    Next.js੄ exportӝמਸ ࢎਊ೧ࢲ ࠼ index.html ಕ੉૑ܳ ݅ٚ׮
    

    View Slide

29. 29
    Next.jsীࢲ CSR۽ ਍৔ೞӝ!!
    Next.jsח ੿݈ zero-config৓׮.
    ࠼ ಕ੉૑ܳ ٜ݅যࢲ ݽٚ URIܳ ࠼ಕ੉૑۽ োѾदఅ׮.
    with s3, cloudfront
    

    View Slide

30. 30
    Next.jsীࢲ CSR۽ ਍৔ೞӝ!!
    Next.jsח ੿݈ zero-config৓׮.
    ࠼ ಕ੉૑ী ٜযоݶ pathܳ ੍য ৢ߄ܲ ಕ੉૑۽ redirectೠ׮.
    

    View Slide

31. 31
    Next.jsীࢲ CSR۽ ਍৔ೞӝ!!
    Next.jsח ੿݈ zero-config৓׮.
    ౟ܼ੄ ൔ੸
    

    View Slide

32. 32
    THANK YOU
    хࢎ೤פ׮
    

    View Slide