Slackκ³Ό λ€μν GitHub λ¬Έμ μμ μΌμ’ μ λ°±μλ μ루μ μ μꡬνλ λ§μ μ¬λλ€μ λ΄ λλ€. "λ°μ΄ν° κ°μ Έμ€κΈ°λ κ°λ°μμ λͺ« "μ΄λΌλ
λ°λΌμ /api/posts.jsonμ μλμΌλ‘ GET 컬λ μ λμ http://example.com/api/posts/λ₯Ό λ§λλλ€ http://example.com/api/posts/123/ λλ http:// νμμ GET λμ μΌλ‘ λ ΈμΆλ©λλ€
ꡬνμ μΈ‘(μ: @nkzawa λ° λλ¨Έμ§ zeit ν)μ 볡μ‘μ±μ λν μꡬμ λ°λΌ μ΄ κΈ°λ³Έ REST APIλ μ½κΈ° μ μ©μ΄κ±°λ μ°κΈ° κ°λ₯νλ©° λ§μ§λ§ κ²½μ°μλ κ°λν μ¬λμ λ°μ΄ν°λ² μ΄μ€ μν μ ν©λλ€. μ΄κ²μ μλ§λ λμ°ν μ ν(λμμ± λ¬Έμ ?)μΌλ‘ κ³ ν΅λ°μ κ²μ΄μ§λ§ κ·ΈλΌμλ λΆκ΅¬νκ³ μκ·λͺ¨ μκ·λͺ¨ μ¬μ΄νΈμ μ¬μ©ν μ μκ³ μ΄λ³΄μμκ²λ μμ€ν κ²μ λλ€.
μ΄λ₯Ό ν΅ν΄ next.jsλ μ΄λ³΄μλ₯Ό μν μμ€ν± νμ€ν webdev μ루μ μ΄ λ μ μμΌλ©° micro, express, koa/koa2, hapi λλ feathersJS μ€ νλλ₯Ό μ¬μ©νμ¬ μ ννκ³ λ°°μμΌ νλ μΈμ§ κ³ΌλΆνλ₯Ό μ κ±°νμ¬ API μ§μ (λ°±μλμ node.jsλ₯Ό μ¬μ©νλ€κ³ κ°μ ) λλ RethinkDB+Horizon, Firebase, Parse, Graph.cool λλ κΈ°ν λ°μ΄ν°λ² μ΄μ€ λ ΈμΆκ³Ό κ°μ μΌλΆ Backend-as-a-Serviceλ₯Ό μ¬μ©νλ λ°©λ²μ μ ννκ³ νμ΅ JSON REST API λλ GraphQL API. λ¬Όλ‘ μ΄λ¬ν μ κ·Ό λ°©μ μ€ μΌλΆλ νλ‘λμ λ°°ν¬μ ν¨μ¬ λ λμ μ νμ΄ λ κ²μ΄μ§λ§ μ¬μ©μκ° κΈ°λ³Έ μ 곡 νμΌ κΈ°λ° JSON REST APIλ₯Ό μμνλ©΄ μ체 λΉλ APIμ μ€μ νμ¬λ‘ μ½κ² λ§μ΄κ·Έλ μ΄μ ν μ μμ΅λλ€.
μ΄κ²μ κ΅¬μ± μμ APIμ λν @rauchg μ μ μμ λ°λΌ μ‘°μ λ μ μμ΅λλ€. μμΈν λ΄μ©μ #149μ λμ μμ΅λλ€.
Meteorμ λν μ’μ κ²½νμ΄ μμ΅λλ€. μ 체 μ€ν νλ μμν¬λ μ₯κΈ°μ μΌλ‘ μλνμ§ μμ΅λλ€. μ°λ¦¬λ κ·Έκ²μ μ΄λ €μ΄ λ°©λ²μΌλ‘ λ°°μλλ€.
νλ‘ν νμ΄ν λ¨κ³μμλ κ½€ μ’μ μ루μ
μ΄ λ κ²μ΄μ§λ§ μ΄ νλ‘μ νΈμμ μ°λ¦¬κ° νλ €λ κ²μ κ·Έλ μ§ μκΈ°λ₯Ό λ°λλλ€.
λ°±μλ/λ°μ΄ν°λ μλΉν 볡μ‘ν μμ
μ
λλ€. νμ λ€λ₯Έ μΌμ νλλ‘ λ΄λ²λ € λλ κ²μ΄ μ’μ΅λλ€.
Nextμ λν μ€λͺ μμ μΈκΈνλ―μ΄ μ°λ¦¬μ μ΄μ μ μ΄κ²μ μμ΄μΌ νλ€κ³ μκ°ν©λλ€.
μλ² λ λλ§ React μ ν리μΌμ΄μ μ μν μ΅μνμ νλ μμν¬
μ΄μλ₯Ό μ΄ν΄νμ§λ§ μΈμ§ κ³ΌλΆνκ° νμ€μ΄κ³ λ§μ μ¬λλ€μ΄ μ νμ μν΄ λ§λΉλλ κ²μ΄ μ¬μ€μ λλ€. node.jsλ₯Ό μ²μ μ νλ μ¬λλ€μ JSON REST APIλ₯Ό λΉλνκΈ° μν κ³Όλ€ν μ΅μ μ λΉν©ν©λλ€. next.jsμ μ΅μνμ κ²μ΄ μμΌλ©΄ λ§μ μ΄λ³΄μκ° next.jsλ₯Ό μλ‘μ΄ μ νμ fullstack μ€ νλλ‘ μ¦μ μ¬μ©ν μ μμ΅λλ€. ECMAScript 6μ μμ ν μμ©νμμμ€.
λ§μ΄ν¬λ‘κ° μ€μ λ‘ λ§μ΄ν¬λ‘λΌλ μ¬μ€μ μμ§ λ§μ. μ½ 100μ€μ μ½λμ λλ€. μ΅μνμ REST API μμ±μ μ§μνκΈ° μν΄ microλ₯Ό next.jsμ λ³ν©νκ±°λ ν΅ν©νλ κ²μ κ°λ¨ν©λλ€.
next.jsκ° λ§μ΄ν¬λ‘κ° νμ§ λͺ»ν μ κ²½μ μμ£Ό λͺ ννκ² μ³€λ€λ μ μ κ³ λ €ν λ μ΄κ²μ νΉν 맀λ ₯μ μ λλ€. μ«μλ κ±°μ§λ§μ νμ§ μμ΅λλ€. next.jsλ μΆμλ μ§ 2μ£Όκ° μ‘°κΈ λμ μμ μ GitHubμμ 241κ°μ λ¬Έμ μ ν 리νμ€νΈλ₯Ό μμ±νμ΅λλ€. μ΄ μμΉλ₯Ό κ±°μ 2λ μ μ 첫 λ²μ§Έ 컀λ°μ΄ μμ±λ νλ‘μ νΈμ λ§μ΄ν¬λ‘: 73κ° λ¬Έμ λ° ν 리νμ€νΈ(νμ¬ μ΄λ € μλ κ²μ μμ)μ λΉκ΅νμμμ€.
νμ¬ μ΅μ node.js μΉ νλ μμν¬μ μΈκ³μλ κ±°λν κ³΅λ°±μ΄ μμ΅λλ€. Express, Koa, Koa2, Hapi, FeathersJSλ ES6, React, λ²μ© λ λλ§ λ° next.jsμ κ°μ μ§κ΄μ μΈ λΌμ°ν μ μμ©νμ§ μμ΅λλ€. Express κ°λ°μ΄ μ£½μ κ² κ°κ³ Koaκ° Koa 2λ‘μ μ νμ λΉ μ Έ μκ³ μ»€λ° κ·Έλνλ₯Ό λ³Ό λ κ°λ°μ μλμ§λ₯Ό λ§μ΄ μμ±νμ§ μλ κ² κ°λ€λ μ¬μ€μ λ§ν κ²λ μμ΅λλ€. FeathersJSλ Expressμ μ°κ²°λμ΄ μμΌλ©° Koaλ‘ μ΄λνλλΌλ Koa μμ μ λ¬Έμ λ₯Ό μμλ°μ λΏμ λλ€. νμ¬ λ λ§μ μν°νλΌμ΄μ¦ μΉ μ±μ λμμΌλ‘ νλ κ²μΌλ‘ 보μ΄λ Hapiλ λ¨κ²¨λκ³ λ΄κ° λ³Ό μ μλ ν 보νΈμ μΈ React λλ μΌλ° Reactλ₯Ό μ§μνλ κ²μ κ³ μ¬νκ³ μ¬μ ν ES6μ μμ©νμ§ μμμ΅λλ€.
next.js νλ‘μ νΈκ° μ λ§ μ»€μ§ μ μλ κΈ°νκ° μμ΅λλ€. λλ μ΄λ―Έ νμ΄μ€λΆμ μ체 μ μ λ°μ μ±μ΄ κ°λ°μμ νΈμλ ₯ μΈ‘λ©΄μμ λμ λ²κ³ μλ κ²μ 보μμ΅λλ€.
λ§μ§λ§μΌλ‘ Armin Ronacherκ° 4μμ λ°λ³΄ κ°μ λλ΄μΌλ‘ κ·Έμ μ΅μ μΉ νλ μμν¬μΈ Flaskλ₯Ό μΆμνμ λ Python μΈκ³μμ λ¬΄μ¨ μΌμ΄ μΌμ΄λ¬λμ§ μκ°ν΄ 보μμμ€. κ·Έμ μκ°μλ Werkzeug μλ²μ ν νλ¦Ώ μΈμ΄μΈ Jinja2λ₯Ό κ²°ν©ν μΌμ’ μ ꡬ문 μ€νμ λΆκ³Όνμ΅λλ€. λ€νμ€λ½κ²λ κ·Έλ Flaskμ μ¦κ°μ μΈ μΈκΈ°μμ κ·Έκ° λ¬΄μΈκ°λ₯Ό νκ³ μλ€λ κ²μ μΈμν λ§νΌ μΆ©λΆν 민첩νμ΅λλ€. κ·Έ κ²°κ³Ό (κ²λ³΄κΈ°μ) κ°μκΈ° μ겨λ Flaskλ Python μΈκ³μμ μΉ κ°λ°μ μν Djangoμ λν κ°λ ₯ν λ λ²μ§Έ μ νμ΄ λμμ΅λλ€(κ·Έλ¦¬κ³ Djangoμ κ°μ λͺ¨λ리μ ν΅ν© κ±°λ κΈ°μ μ κΈ°νΌνλ λ§μ μ¬λλ€μκ² μ²« λ²μ§Έ μ ν).
μ¬μ©μμ λ§μ λ€μ΄λ³΄μΈμ. λ§μ μ¬λλ€μ΄ μλ²μΈ‘ κΈ°λ₯μ μꡬνκ³ μμ΅λλ€. μ΄ μμ΄λμ΄λ PHP μ΅κ³ μ μμ΄λμ΄λ₯Ό νλ₯νκ² μ¬μ μ©νλ€λ λμΌν μ¬μ©μ μΉνμ μΈ μ μ μ μ§μ§νλ νμΌ κΈ°λ° JSON REST APIμ λν λ΄μ₯ μ§μμ ν¬ν¨νλλ‘ μ½κ² νμ₯λ μ μμ΅λλ€. API.
@arunodaλ λ§μμ μ μ μΌλ‘ λμν©λλ€. Next.jsμ κ°μ₯ ν° _κΈ°λ₯_μ _λ°±μλκ° μλλΌλ κ²μ λλ€. @getify κ° _middle-end_λΌκ³ λΆλ₯΄λ κ²μ λ κ°κΉμ΅λλ€. λ²μ© λ λλ§ νλ‘ νΈμλ.
μ΄κ²κ³Ό κ²°ν©λ μ΅κ³ μ μν€ν
μ²λ getInitialProps
Next.js _queries_ λ°μ΄ν° μλΉμ€μ
λλ€. REST λ§μ΄ν¬λ‘ μλΉμ€, API λ° GraphQLμ μ΄ μν€ν
μ²λ₯Ό ν¬κ² 보μν©λλ€.
μ¬μ©μ μμμμ μ΄λ₯Ό μνν μ μλλ‘ #25λ₯Ό μμ²νμμμ€. κ²½λ‘λ₯Ό μλμΌλ‘ λ±λ‘νκ³ μ΄κΈ°νν μ¬μ©μ μ§μ μλ²μ μ°κ²°ν μ μμ΅λλ€.
κ°μ₯ μ μ©ν λκΈ
Meteorμ λν μ’μ κ²½νμ΄ μμ΅λλ€. μ 체 μ€ν νλ μμν¬λ μ₯κΈ°μ μΌλ‘ μλνμ§ μμ΅λλ€. μ°λ¦¬λ κ·Έκ²μ μ΄λ €μ΄ λ°©λ²μΌλ‘ λ°°μλλ€.
νλ‘ν νμ΄ν λ¨κ³μμλ κ½€ μ’μ μ루μ μ΄ λ κ²μ΄μ§λ§ μ΄ νλ‘μ νΈμμ μ°λ¦¬κ° νλ €λ κ²μ κ·Έλ μ§ μκΈ°λ₯Ό λ°λλλ€.
λ°±μλ/λ°μ΄ν°λ μλΉν 볡μ‘ν μμ μ λλ€. νμ λ€λ₯Έ μΌμ νλλ‘ λ΄λ²λ € λλ κ²μ΄ μ’μ΅λλ€.
Nextμ λν μ€λͺ μμ μΈκΈνλ―μ΄ μ°λ¦¬μ μ΄μ μ μ΄κ²μ μμ΄μΌ νλ€κ³ μκ°ν©λλ€.
μλ² λ λλ§ React μ ν리μΌμ΄μ μ μν μ΅μνμ νλ μμν¬