[ 14 ] graphql 세팅하기

 

_app.js 파일에 설정 

// import "../styles/globals.css";

import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";

export default function App({ Component }) {
  const client = new ApolloClient({
    uri: "http://backend-example.codebootcamp.co.kr/graphql",
    cache: InMemoryCache(), // 컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 임시로 저장해 놓기 => 나중에 자세히 알아보기
  });

  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

 

 

매개변수 Component 

Next.js 가 현재 페이지의 컴포넌트를 App컴포넌트의 매개변수 (Component 라는 이름)으로 전달하고, 그것을 렌더링 하는 것이다.

 

URL, URI ,URN 구분하기

# aaa 는 #footer 처럼 ID 값을 입력하면 페이지 렌더링시 해당 ID 가 있는 곳으로 스크롤을 해준다.