[Next.js] 데이터 불러오기

Jimi Choi·2023년 3월 15일

next.js

Next.js

목록 보기

4/6

데이터 불러오기

서버가 데이터를 불러올 수 있는 상황 2가지

정적페이지 만들 때 getStaticProps() 통해 빌드 시점
페이지 렌더링할 때 getServerSideProps()를 통해 실행 도중

서버에서 REST API 사용하기

const { status, data } = await axios.get(
    `$ttps://localhost:3000/api/04/users/${username}`,
    {
      headers: {
        authorization: process.env.API_TOKEN,
      },
    }
  );

axios 사용하여 헤더로 보낼 인증 토큰 추가
process.env.API_TOKEN 쓴 이유 → git에 올리면 민감한 정보 읽을 수 있음, 유지보수 편리 (.env 파일 만들어서 구현)

클라이언트가 데이터 불러오기

동적 웹 애플리케이션은 클라가 데이터 불러오는 경우가 많지만, 서버가 불러오는 쪽이 더 안전하다
- 믿을 수 있는 곳에만 요청 보내야함
- SSL 인증서를 통해 안전하게 접근할 수 있는 곳의 HTTP API만 사용해야함
- 브라우저에서 원격 데이터베이스에 직접 연결하면 안됨

클라이언트에서 REST API 사용하기

브라우저 내장 fetch나 axios 사용해서 http 요청 보내기

useEffect(() => {
    async function fetchData() {
      const req = await fetch(`/api/04/users?${username}`);
      const data = await req.json();
  
      setLoading(false);
      setData(data);
    }
    fetchData();
  }, []);

return (
    <div>
      <div>
        <Link href="/" passHref>
          Back to home
        </Link>
      </div>
      <hr />
      {loading && <div>Loading user data...</div>}
      {data && <UserData user={data} />}
    </div>
  );
}

서버에서 생성한 HTML 파일은 Loding users… 문자열만 갖고 있고, 리액트 하이드레이션이 일어난 후에야 사용자 목록을 볼 수 있음
- 클라이언트가 컴포넌트 마운트할때까지 기다리고 그 후 브라우저의 fetch를 통해 http 요청 보냄

CORS (교차 출처 리소스 공유)

브라우저에서 서로 다른 도메인에 API 요청 보낼때 발생할 수 있는 보안 위험 제어
다른 원격 서버에서 데이터를 가져오는 경우 문제 발생

인증 토큰 노출 문제

pages/api/singleUser.js 파일 만들어서 해결
서버가 요청 보내서 그 결과만 클라이언트로 전송

export default async function handler(req, res) {
  if (!req.query.username) {
    res.status(403).json({
      error: 'Missing "username" query parameter',
    });
    return;
  }

  const username = req.query.username;
  const API_ENDPOINT = process.env.API_ENDPOINT;
  const API_TOKEN = process.env.API_TOKEN;

  const userReq = await axios.get(`${API_ENDPOINT}/api/04/users/${username}`, {
    headers: { authorization: API_TOKEN },
  });

  res.status(200).json(userReq.data);
}