$30 off During Our Annual Pro Sale. View Details »

Next.js는 정말 zero config였다.

RIDI
April 11, 2019

Next.js는 정말 zero config였다.

RIDI

April 11, 2019
Tweet

More Decks by RIDI

Other Decks in Programming

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