Next.js: κ°€λ‚œν•œ μ‚¬λžŒμ˜ REST API둜 파일 μ‹œμŠ€ν…œ μ‚¬μš©

에 λ§Œλ“  2016λ…„ 11μ›” 10일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: vercel/next.js

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 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μœ„ν•œ μ΅œμ†Œν•œμ˜ ν”„λ ˆμž„μ›Œν¬

λͺ¨λ“  3 λŒ“κΈ€

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λ₯Ό μ‹œμ²­ν•˜μ‹­μ‹œμ˜€. 경둜λ₯Ό μžλ™μœΌλ‘œ λ“±λ‘ν•˜κ³  μ΄ˆκΈ°ν™”ν•œ μ‚¬μš©μž 지정 μ„œλ²„μ— μ—°κ²°ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰