[번역] Next.js 시작하기 6. API 라우트

여름노래불러줘·2020년 5월 23일
0

1.

API Routes

Next.js는 API 라우트를 지원하므로, Node.js 의 함수로 API 엔드포인트를 쉽게 생성할 수 있게 해줍니다. 비록 우리 블로그 앱에 필요하지는 않지만, 이번 레슨에서 어떻게 사용하는지 간단하게 이야기 해보려고 합니다.

이번 레슨에서 배울 것들

이번 레슨에서, 이것들을 배울 겁니다:

  • API 라우트를 만드는 방법
  • API 라우트에 대한 유용한 정보들.

2.

이전 레슨부터 계속하고 있다면, 이 페이지를 건너뛰어도 됩니다. 3. 으로 이동하세요.

스타터 코드 다운로드(선택적)
이전 레슨부터 계속하고 있지 않다면, 이 레슨 아래의 스타터 코드를 다운로드, 설치 및 실행할 수 있습니다. 이전 레슨의 결과와 동일하게 'Next-js-blog' 디렉토리를 설정합니다.

다시, 만약 당신이 이전 레슨을 완료했다면 이 작업은 필요하지 않습니다.

npm init next-app nextjs-blog --example "https://github.com/zeit/next-learn-starter/tree/master/api-routes-starter"

그리고 커맨드 출력의로부터의 명령을 따라하세요. ('cd'로 디렉토리로 이동한 다음, 개발 서버를 시작하세요)

또한 다음의 파일들을 업데이트 해야합니다.

'public/images/profile.jpg' 의 이름을 가진 당신의 사진 (추천 해상도: 400px 폭/높이)
'components/layout.js' 안의 변수 'const name = '[Your Name]' 에 당신의 이름.
'pages/index.js' 안의 태그 '

[Your Self Introduction]

에 당신의 자기소개.

3.

API 라우트 생성하기

API 라우트는 Next.js 앱 내에 API 엔드포인트를 만들도록 해줍니다. 'pages/api' 디렉토리 내부에 함수를 다음과 같이 생성하는 것으로 API 엔드포인트를 만들 수 있습니다. 

// req = request data, res = response data
export default (req, res) => {
  // ...
}

서버리스 함수로도 배포될 수 있습니다. ('람다' 라고도 알려진).

4.

간단한 API 엔드포인트 생성하기

'pages/api' 디렉토리에 'hello.js' 라는 파일을 만들고, 다음과 같은 코드를 한번 만들어 봅시다.

export default (req, res) => {
  res.status(200).json({ text: 'Hello' })
}

http://localhost:3000/api/hello 에 접속해보세요. '{ "text": "Hello" }' 가 보여야 합니다. 참고하세요:

  • 'req' 는 http.IncomingMessage 의 인스턴스 입니다. 더불어 사전 구축된 미들웨어들은 여기서 볼 수 있습니다.

  • 'res' 는 http.ServerResponse 의 인스턴스 입니다. 여기서 몇 가지 도우미 기능을 볼 수 있습니다.

이게 전부 입니다! 이 레슨을 마무리 하기 전, 다음 페이지에서 API 라우트에 대한 몇가지 팁을 이야기 해봅시다.

5.

API 라우트 상세

우리 도큐먼테이션에서 API 라우트에 대한 자세한 정보를 얻을 수 있습니다. 그러나 당신이 알아야할 API 라우트에 대한 본질적인 정보들이 있습니다.

'getStaticProps' 나 'getStaticPaths' 로부터 API 라우트를 가져오지 마십시오.

'getStaticProps' 나 'getStaticPaths' 로부터 API 라우트를 가져오면 안됩니다. 대신, 'getStaticProps' 나 'getStaticPaths' 에 직접 서버 사이드 코드를 작성하십시오. (혹은 도우미 함수를 호출하십시오).

왜?: 'getStaticProps' 와 'getStaticPaths'는 오직 서버 사이드에서만 작동합니다. 절대 클라이언트 사이드에서 작동하지 않습니다. 자바스크립트 번들에도 포함되지 않습니다. 이는 브라우저로 쿼리를 전송하지 않고도 데이터베이스에 쿼리를 날리는 코드를 작성할 수 있음을 말합니다.

모범 사례: Form Input 핸들링하기

API 라우트를 모범적으로 활용한 사례는 폼 인풋을 핸들링하는 것입니다. 예를 들면, 페이지에 폼을 만들 수 있고, API 라우트에 'POST' 요청을 보낼 수 있습니다. 그러면 데이터베이스에 직접 저장하는 코드를 작성할 수 있습니다. API 라우트는 클라이언트 번들의 부분이 되지 않을 것입니다. 그래서, 안전한 서버 사이드 코드를 작성할 수 있습니다. 

export default (req, res) => {
  const email = req.body.email
  // Then save email to your database, etc...
}

미리보기 모드

정적 생성은 페이지가 헤드가 없는 CMS 로부터 데이터를 가져올 때 유용합니다.
그러나, 헤드가 없는 CMS에 초안을 작성할 때나 페이지에서 초안을 즉시 미리보기 하고 싶을 때는 이상적이지 않습니다. 당신은 Next.js 가 이런 페이지들을 빌드 시보다는 요청 시 렌더링하길 원하고 게시된 컨텐츠 대신 초안 텐츠를 가져오기를 원할 것입니다. 당신은 Next.js 가 특정한 경우에만 정적 생성을 우회하길 원할 것입니다.

Next.js 는 이런 문제를 해결한 미리보기 모드 라는 기능을 가지고 있습니다.
그리고 미리보기 모드는 API 라우트를 활용합니다. 더 학습하려면 미리보기 모드에 대 도큐먼테이션을 참조하십시오.

동적 API 라우트

API 라우트는 일반 페이지들처럼 동적일 수 있습니다. 더 학습하려면 동적 API 라우트 도큐먼테이션을 참조하십시오.

이게 전부 입니다!

다음 및 마지막 기본 레슨에서, Next.js 앱을 프로덕션에 배포 하는 방법에 대해 이야기 해보도록 하겠습니다.

profile
여름노래불러줘
이전 포스트

[번역] Next.js 시작하기 5. 동적 라우트

다음 포스트

자바스크립트 - Object, Constructor, Prototype, Class

0개의 댓글