Portfolio 페이지 만들고 배포하기 (5-2) Notion API 연결하기

Data Fetching 방법 고르기 

그러면 이제 Next.js 에서 Notion에 있는 데이터를 가져오는것을 구현해야되는데, Next.js 에서 제공하고있는 Data Fetching 함수 중 내가 고려하고 있는것은 getStaticProps라는 함수와 getServerSideProps 라는 함수다.

 

getServerSideProps는 요청이 있을때마다  서버에서 데이터를 가져오는데 이 경우는 데이터가 자주변경되거나 동적인 경우에 사용된다고 하는데 내 프로젝트 같은경우엔 자주 변경되지도 않고 정적인 데이터이기 때문에 굳이 ServerSideProps 함수를 이용할 필요가 없다고 생각한다.

 

getStaticProps를 사용할 것이고 사용방법은 다음 링크에서 자세히 알려준다.

 

https://nextjs.org/docs/basic-features/data-fetching/get-static-props

Data Fetching: getStaticProps | Next.js

 

getStaticProps 사용예제

// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog

대충 중요한 부분들을 읽어보면 빌드 타임에 실행이 될것이고 이 함수는 서버측에서만 빌드가 되고 클라이언트 측에선 실행이되지 않는다고한다. 이전 포스팅에서 확인헀던 POSTMAN 에서 데이터 전송을 하던것처럼 NOTION DB 토큰과 NOTION_ID를 입력해서 데이터를 긁어와서 뿌려야하는데 이런 환경변수는 외부에 노출되면 안된다.

 

이를 막기위해 .env 파일을 따로 만들어서 보호할것이고 dotenv라는 외부 라이브러리를 이용해 요것들을 좀더 편리하게 관리할 것이다. 사실 이런 쪼꼬만한 프로젝트에선 안써도될것같은데 다 경험이라고 생각한다.

 

dotenv 라이브러리 설정과 적용

 

https://www.daleseo.com/js-dotenv/

dotenv로 환경 변수를 .env 파일로 관리하기

루트 디랙토리에 .env.local 이라는 파일을 생성하고 다음과 같이 환경변수를 입력헀다.

#Notion DB API 환경변수
NOTION_TOKEN="ㅁㅁㅁㅁㅁㅁㅁㅁ"
NOTION_DATABASE_ID="ㅁㅁㅁㅁㅁㅁ"

그리고 요걸 외부 유출없이 사용하기 위해서 config 폴더를 만들고 index.js 파일로 요걸 감춘상태에서 쓰는 방식이다.

// config 폴더에 있는 index.js 파일
export const DATABASE_ID = process.env.NOTION_DATABASE_ID
export const TOKEN = process.env.NOTION_TOKEN

export를 사용했지렁

 

dotenv를 이용해서 환경변수를 외부유출없이 사용한다. 개꿀

 

 

그리고 요런 설정을 통해서 뽑아낸 데이터를 한번 확인해보는 것이 필요하다. 내가 필요한 데이터들만 사용해야 화면 렌더링이 가능할 것이다. 먼저 Postman을 통해서 뽑아낸 내 JSON데이터들을 이해하기 쉽게 보려면 JSON formatter 라는 사이트에서 변환으로 보기 쉽게 변환함.

여기서 내가 필요한건 results에 있는 데이터들이다. 이놈들을 뿌려보려면 다음과 같이 코드를 작성해야한다.

List 타입이라 map으로 순회하면서 하나씩 다 꺼내는데 ... 이게 const 로 선언하다보니 나중에 코드가 복잡해지면 골아플것 같다.

왜 다들 타입스크립트로 넘어가는지 알것같음..

하여튼 이렇게 작성하고 페이지를 빌드하면 아래와 서버측에서 아래와 같은 결과를 뽑아낸다

요걸 어따써; 페이지를 구성하는데 필요없는 내용이다. 그럼 내가 필요로 하는 프로젝트 명과 사용 기술스택과 등등을 뽑아내려면 어디에있는걸 뽑아야 하나 살펴봐야겠다. JSON Formatter를 다시 보자.

 

 

프로젝트 명을 뽑아내고 싶다고 하면 그게 JSON 파일의 어디에 위치하고 있는지 봐야하는데

results > properties > Name > title > plain_text 요거다.

 

한번 뽑아보자.

 

위와 같이 코드를 작성하면 서버측 로그는?

내가 DB에 등록한 포트폴리오 3개를 잘 뽑아냄. 그럼 요걸 Props로 밖으로 내보내기 위해서 (클라이언트 측에서 볼 수 있게) return 에다가 해당 데이터를 프롭스로 보내줘야한다. 

 

요렇게 프롭스에 json 타입인 projects를 넘겨주면,

 

프로젝트 컴포넌트가 해당 props를 받아서 화면 랜더링에 사용함.

 

여기서 각각의 프로젝트를 project-item이라는 컴포넌트로 분리하는것이 화면 구성에 더 알맞을것이다. 분리하면서 해당 props를 하위 컴포넌트로 넘겨줘야하는데 그건 다음과 같이 작성했다.

 

 

projects(JSON)의 results.map() 을 통해 뽑아낸 list 타입의 요소인 aProject를 넘겨줘서 프로젝트 하나하나를 ProjectItem 이라는 하위 컴포넌트에서 사용할 것이다. 그럼 넘겨준걸 하위 컴포넌트에선 어떻게 사용하나?

 

 

이런식으로 매개변수에 받은 aProject의 이름을 data로 명명하고 넘겨받은 JSON 데이터를 파싱하는 작업이다. TypeScript를 썻다면 좋았을텐데.. 다음 프로젝트는 무조건 타입스크립트를 사용해야겠다.

 

요런식으로 내가 필요한 데이터를 뽑아내고 화면 구성에 필요한 데이터를 

뽑아낸다.