Network에서 API KEY 숨기기

상황

API KEY를 .env 파일에 넣어 사용해도 개발자 도구의 Network창에서 노출 된다.

Untitled

적용한 방법

rewrites
- next.config.js 파일
- useSubscription.tsx
  - get 요청 url 변경

문제

Untitled

[http://localhost:3000/](<http://localhost:3000/>)api/default 로 들어가면 rewrites로 인해 api로 받아온 정보가 보여야 하는데 404 페이지 error가 뜬다.
rewirtes가 아예 적용이 안 되는 것 같다.

시도

redirects도 안 되는지 시도

async redirects() {
    return [
      {
        source: '/contact',
        destination: '/new-contact',
        permanent: false,
      },
    ];
  },

적용 안 됨. http://localhost:3000/contact - 404 error가 뜬다.

해결

module.exports가 2개여서 문제가 생긴 것

warning에 뜬 메시지

→ “Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload"

해당 링크로 들어가니 다른 exports가 있을 때 이런 오류 발생이라고 나옴
“const withImages~” 를 주석 처리하고 서버를 다시 실행하니 데이터가 잘 불러와진다.

module.exports = {
  reactStrictMode: false,

  async rewrites() {
    return [
      {
        source: '/api/default',
        destination: `${BASE_URL}/${METHOD_APT_ALL}?page=1&perPage=1500&&cond%5BRCRIT_PBLANC_DE%3A%3AGTE%5D=2023-01-01&serviceKey=${SERVICE_KEY}`,
      },
      {
        source: '/api/detail',
        destination: `${BASE_URL}/${METHOD_APT_DETAIL}?page=1&perPage=10000&serviceKey=${SERVICE_KEY}`,
      },
      {
        source: '/end',
        destination: '/my',
      },
    ];
  },
};

// const withImages = require('next-images');
// module.exports = withImages();

Network에서 API KEY가 보이지 않는다.

Untitled