Next.js로 포트폴리오 만들기

POST 와 GET의 차이 알아보기

GET은 서버의 리소스에서 데이터를 요청할 때, POST는 서버의 리소스를 새로 생성하거나 업데이트할 때 사용한다.

즉, GET은 SELECT, POST는 Create라고 생각하면 된다.

노션 DB API 사용법

해당 페이지에서 알려주는 코드는 POST 방식이다. Query a database 는 DB를 요청한다는 말인데..? 노션으로 만든 데이터베이스를 가지고 오는데 왜 POST를 사용해야하지? 싶었다.

method: 'POST'

근데 내가 지식이 한 없이 짧았다는 것을 알았다!!!

POST는 요청된 자원을 생성(CREATE)한다. 그러니까! 새로 작성된 리소스가 아니어도, 자원을 생성해준다는 말이다.

내가 알고있던 개념은 바로! 새로 작성된 리소스인 경우 HTTP헤더 항목 Location : URI주소를 포함하여 응답. 이것이었다.

Next.js로 data fetching하기

Next.js Data Fetching 공식 문서

NextJS에서 getStaticProps란, 빌드 시 데이터를 fetch하여 static 페이지를 생성해주는 것을 의미한다.

  1. 공식문서의 힘을 빌려 해당 코드를 데이터를 불러올 page에 작성해준다.

(이 부분은 개발 후 새로운 폴더와 파일로 분리해 관리할 예정)

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}
  1. NOTION API 사용법 문서를 활용하여 위의 코드에 넣어준다.
  • NOTION_DATABASE_ID 와 권한 키값은 따로 관리해주어야하지만, 나는 결과를 보는데 급해서 우선 코드에 직접적으로 넣었다. 보안을 위해 private한 문서에 작성하여 불러와주어야한다.
  • 처음에 res.json을 해주지 않으면 새로운 데이터가 추가된다.
  • image
export async function getStaticProps(context) {
const options = {
    method: "POST",
    headers: {
      accept: "application/json",
      "Notion-Version": "2022-06-28",
      "Content-Type": "application/json",
      Authorization:
        "Bearer secret_*****",  //자신의 secret키를 넣어주면 된다.
    },
    body: JSON.stringify({ page_size: 100 }),
  };

  const res = await fetch(
    `https://api.notion.com/v1/databases/${NOTION_DATABASE_ID}/query`,
    options
  );

  const projects = await res.json();

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


  return {
    props: {projects}, // will be passed to the page component as props
  }
}
  • 여기 console창은 서버에서 볼 수 있기 때문에 vscode의 터미널에서 값을 확인할 수 있다.
  • props에 return 값으로 값을 넘겨주어, 사용할 클라이언트 페이지에 props를 사용해주면 된다.

image

클라이언트에 띄우기

image

성격 급한 나.. ㅎㅎ 허겁지겁 하나라도 띄우려고 빠르게 대충 작성했다.

이제는 css를 다듬을건데 tailwindCSS를 잘 이용해서 꾸며볼 생각이다. (회사에서 썼던 방식과 굉장히 유사하다.)

이번 포트폴리오는 기본적인 걸로 후딱 만들고! 이걸 토대로 디자인도 멋지고 다른 기능들도 넣어서 발전 시킬 것이다!

          {!projects && <h4>Loading...</h4>}
          {projects.results?.map((project: any) => (
            <div key={project.id}>
              <h4>{project.created_time}</h4>
            </div>
          ))}