Next.js 뽀개기 #4

📆221103-04

Next.js와 tailwindCSS 연습겸 복습겸 강의 듣기

🪐강의는 "개발하는 정대리"님의 Next.js 나만의 포트폴리오 만들기

• 챕터: 총 16개
• 강의시간 : 2:37:05

📌오늘의 목표
14. Next.js 데이터 가져오기

14. Next.js 데이터 가져오기

Notion API로 데이터베이스를 가져오기 위해선 Notion API 통합토큰과 그 데이터베이스의 ID가 필요하다. 둘 모두 중요한 개인 정보임으로 .env파일에 넣어놓는다. 정확히는 .env.local 파일에 넣어놨는데 .env파일이 정확히 어떤건지 궁금해서 찾아봤다. (지난 프로젝트때도 당연히 썼지만 그땐 그냥 단순히.. 중요한 정보를 넣어놓고 gitignore에 추가해서 git에 올라가지 않도록하는.. 파일 정도로만 이해하고 있었다.)

.env파일?

.env파일은 개발자가 직접 필요한 환경변수를 정의하는 파일을 말한다. 어떤 .env파일이냐에 따라 구동환경에 맞는 파일이 적용된다.

1) .env 파일 : 모든 환경에서 공통적으로 적용할 디폴트 환경변수를 정의한다. 가장 우선순위가 낮다.

2) .env.development 파일: 개발 환경(process.env.NODE_ENV === 'development') 에서 적용된다.

3) .env.production 파일: 배포/빌드 환경(process.env.NODE_ENV === 'production') 에서 적용된다.

4) .env.test 파일: 테스트 환경(process.env.NODE_ENV === 'test') 에서 적용된다.

5) .env.local 파일 : 가장 우선순위가 높다. 다른 파일들에 정의된 값들을 모두 덮어쓴다.(오버라이드)

아무튼 그 중요한 토큰과 DB ID를 .env.local 파일에 넣어놓고, config>index.js 파일을 만들어서 이러한 설정에 관련된 파일들을 넣었다.

npm i dotenv

그리고 dotenv를 설치하여,

export const DATABASE_ID = process.env.NOTION_DATABASE_ID;
export const TOKEN = process.env.NOTION_TOKEN;

env파일에 있는 DB ID와 토큰을 가져와서 새로 DATABASE_ID와 TOKEN에 각각 저장했다.

import { TOKEN, DATABASE_ID } from "../config";

그리고 DB를 가져와 화면에 띄울 파일인 projects.js에서 import를 해주었다.

Next.js Docs > Data Fetching > getStaticsProps

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

Notion API > Query a database Sample

const options = {
  method: 'POST',
  headers: {
    accept: 'application/json',
    'Notion-Version': '2022-06-28',
    'content-type': 'application/json',
    authorization: 'Bearer token'
  },
  body: JSON.stringify({page_size: 100})
};

fetch('https://api.notion.com/v1/databases/database_id/query', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

이 샘플 코드들을 합쳐서 DB를 가져오기 위한 코드를 작성한다.

샘플에서는 가차없이 토큰과 DB ID를 그대로 적었지만 우리의 소중한 개인정보를 그런식으로 공개할수도, 앞에서 env 파일을 만들고 어쩌고 한 보람을 날려버릴 수도 없으니 import 해둔 DB ID와 토큰 변수를 넣어준다.

☑ 변수가 들어가는 부분은 백틱으로 바꾸어주고 변수는 ${}로 감싸줘야 한다.

그리고 마지막으로 console.log(result);를 통해 테스트를 해봤는데

띠용 😦 토큰이 유효하지 않답니다
혹시 빠뜨린게 있나 싶어서 강의를 돌려봤지만,, 잘따라했는데!

다시 침착하게 변수말고 토큰과 DB ID를 그대로 넣어보니 데이터를 잘받아왔다. 그말은 일단 토큰과 DB ID는 문제가 없다는 것이고, 그럼 .env파일에 문제가 있다는 거구나 하고 폭풍 구글링

"기본적으로 환경변수는 서버에서만 참조할 수 있다. 서버와 브라우저 모두 환경변수를 사용하려면, 변수명 앞에 'NEXT_PUBLIC_'을 붙여줘야한다." [참고]

바로 .env.local 파일에 있는 변수에 NEXT_PUBLIC_을 붙여주었고, config/index.js에도 추가해주었다. 그런 다음 실행하니

데이터가 잘 들어온걸 확인할 수 있다.
다만 의문인건 왜 강의에선 NEXT_PUBLIC_을 붙이지 않아도 잘 실행이 된건지..? 댓글을 보니 나랑 비슷한 경우가 있긴 한 거 같은데 흔해보이진 않고.. 일단 해결은 했으니 넘어가지만 시간내서 공식문서를 다시 읽어봐야겠다.

데이터파싱

응답값을 json으로 만들어서 저장한다.

const projects = await res.json();

이 Json 파일을 Json Formatter에서 확인해보면

위처럼 편하게 확인할 수 있다.
만약 프로젝트명을 가져오고 싶다면 results > properties > Name > title[0] > plain_text를 가져와야 한다.

  const projectNames = projects.results.map(
    (aProject) => aProject.properties.Name.title[0].plain_text
  );

가져온 프로젝트명을 확인해보기 위해 콘솔에 찍어봤다.

console.log(`projectNames : ${projectNames}`);

콘솔에 잘찍힌걸 확인할 수 있다.

이렇게 가져온 데이터를 props에 넣어 화면에 출력할 수 있는데, 프로젝트 데이터 각각을 가져오는게 아니라 전체 데이터를 한번에 가져오기로 한다. 아까 응답값을 저장한 json 파일인 projects를 props에 넣는다.

return {
    props: { projects },
  };

그리고 화면에 출력할 함수인 Projects()에 props를 추가한다.

{projects.results.length}로 총 프로젝트의 개수를 가져오고, results를 다시 map으로 돌려 프로젝트명만 화면에 출력해본다.

데이터들이 잘 출력된다. 😎
필요한 다른 데이터들도 같은 방식으로 쉽게 출력할 수 있다.

🍦 코멘트

노션 프로젝트 정리한 내용을 next.js 포트폴리오 데이터베이스에 예쁘게 잘 옮기는 것도 잊지말자. 그리고 이왕 만드는거 포트폴리오 디자인도 좀 신경쓰고 싶어서 ㅎㅎ.. 틈틈이 꾸미자

은근 머리로 이해한 내용을 글로 적는게 쉽지 않다. 아직 내가 이해도와 개념정립에 부족하다는 뜻이겠지? 그래도 벨로그에 적기 위해 평소였으면 그냥 지나쳤을 것들도 한번 두번 더 곱씹고 생각하게 되는 것 같다.
캡처하고 정리하는 거 생각보다도 더 번거롭다.. (대충하는 주제에 ^^,,ㅎ) 꾸준히 정리하는 분들이 얼마나 대단하고 성실한지 다시 한번 느꼈다. 정말 존경합니당..🐹

참고

.env파일 관련 참고 블로그
https://curryyou.tistory.com/503