홈화면도 얼추 마무리되었으니 이제 갤러리 메뉴에 들어가면 무한스크롤을 이용해 Ed Sheeran 사진을 보여주려고 한다!

원래는 Pinterest API를 사용하고 싶었다. 이미지 수집 SNS 답게 타사이트와 다르게 고퀄 이미지도 많고, 무엇보다 같은 주제의 사진이더라도 좀 더 감성적이고 독특한 사진들이 정말 많다.

하지만 아무래도 오픈 API를 이용해 혼자서 사이트를 개발하는 게 처음이라 이왕이면 문서화도 잘 되어있고, 다른 사람들의 작업물을 참고하면서 개발하는 게 나을 거라는 생각이 들었다. (그나마 네이버나 카카오 이미지 검색 api 활용한 건 찾아볼 수 있는데, 핀터레스트 이용한 사람은 단 한명도 발견하지 못했다ㅠ^ㅠ) 기간이 한정되어 있고, 디자인보다는 기능에 충실하자는 게 이 프로젝트의 목적이었기에, 이번은 네이버 이미지 검색 api를 이용해보고자 한다.

네이버 검색 API

네이버 개발자 센터에 들어가 검색 API 신청을 하고 client Id, client secret을 발급받았다.

포스트맨으로 실험해보니까 잘 작동한다!
그럼 이제 본격적으로 프로젝트에 적용해보도록 하자

발급받은 Id를 사용하기 위해선 환경변수 설정이 필요하기 때문에 추가적인 작업을 하면서, 환경변수에 대해 다시 공부해보았다.

환경변수 설정

• 파일 A에 있는 전역변수는 파일 B가 접근하지 못한다. 이것을 접근할 수 있도록 하는 것이 환경변수인데, 변수를 프로그램이 실행되는 환경(시스템)에 저장하여 해당 시스템의 모든 프로그램들이 사용할 수 있는 변수이다. 즉,전역변수보다 한단계 위!

• 뿐만 아니라, 데이터베이스의 비밀번호나 3rd-party 서비스의 API 키와 같이 민감한 인증정보는 깃허브 같은 코드 저장소에 올리면 위험할 수 있기 때문에 환경 변수로 저장해놓고 사용하는 것이 권장된다.

• 환경변수는 운영 체제에 따라서 다른 방법으로 설정된다. VITE의 경우, prefix를 VITE_로 적어줘야 되고, 앱에서는 import.meta.env로 접근하면 된다.

• .env는 최상위 경로에 위치해야 한다.

이미지 삽입

public 폴더

import.meta.env.VITE_PUBLIC_URL
운영체제마다 환경변수가 다르기에 VITE 역시 CRA와 다른 환경변수를 사용한다. 보통 process.env는 CRA에서 사용하는 거고, VITE는 import.meta.env라는 형식으로 작성해줘야 한다.

src 폴더 안에 있는 내용들은 전부 압축이 되는데, public 폴더에 있는 것들은 압축이 되지 않고 위치도 보존시켜준다고 한다. 그래서 public 내의 절대 경로를 이용해 작성하면 배포할 때 오류도 나지 않는다! 배포시 hanakorea.com 경로에 배포하면 아무 문제가 없지만 hanakorea.com/어쩌구/ 경로에 배포하면 /logo192.png 이렇게 쓰면 파일을 찾을 수 없다고 나올수도 있다고 한다. 그래서 /어쩌구/를 뜻하는 import.meta.env.VITE_PUBLIC_URL를 더해주면 된다.

//.env
VITE_PUBLIC_URL='http://localhost:5173/'

//src/components/Banner/index.tsx
import { StyledBanner } from './style';

function Banner() {
  return (
    <div>
      <StyledBanner>
        <img
          src={import.meta.env.VITE_PUBLIC_URL + '/images/ed.jpg'}
          style={{ width: '100%', height: '70vh', objectFit: 'cover'}}
        />
      </StyledBanner>
    </div>
  );
}

export default Banner;

결과물

CORS 에러

프론트엔드 개발자라면 한 번쯤은 꼭 만난다는 CORS 에러!
개념은 알고 있었는데, 내가 직접 해결한 적은 없어서 사실 처음 봤을 때는 아주 쪼끔 반갑기도 했다.

이전에 CORS에 대해 정리한 글

프록시 서버

• ❌https://cors-anywhere.herokuapp.com 데모 제한됨
• ❌https://proxy.cors.sh 안됨
• ❌yarn add http-proxy-middleware 라이브러리 설치했으나 안됨
  슬슬 열이 받을때쯤, 생각해보니까 위 방법들은 다 CRA 에 적용된 것들이라는 걸 깨닫고 vite porxy error로 키워드를 고쳐서 검색해봤다.

vite.config.ts

//vite.config.ts
  server: {
    proxy: {
      '/api': {
        target: 'https://openapi.naver.com/v1/search/image.json',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        secure: false,
        ws: true,
      },
    },
  },
  plugins: [react(), tsconfigPaths()],
});

// api 사용할 페이지
import axios from 'axios';
import { useEffect } from 'react';

function Photos() {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios
          .get('/api', {
            params: { query: 'cat' },
            headers: {
              'X-Naver-Client-Id':
              import.meta.env.VITE_NAVER_CLIENT_ID,
              'X-Naver-Client-Secret':
              import.meta.env.VITE_CLIENT_SECRET,
            },
          })
          .then((response) => {
            console.log('response', response.data);
          });
        return response;
      } catch {
        console.log('error');
      }
    };
    fetchData();
  }, []);
  return <>Photos</>;
}

export default Photos;

드디어 콘솔에 잘 찍히는 걸 볼 수 있었다!!

Access-Control-Allow-Origin

직접 서버에서 HTTP 응답헤더 설정을 통해 출처를 허용하게 설정하는 게 가장 정석적인 해결책이긴 하다.
서버의 종류도 노드 서버, 스프링 서버 등등 있는데 각 서버의 문법에 맞게 HTTP 헤더를 추가해주면 된다.

//헤더에 작성된 출처만 브라우저가 리소스를 접근할 수 있도록 허용함.
// *이면 모든 곳에 공개되어 있음을 의미한다. 와일드카드이긴하지만, 그만큼 보안이 취약해진다.
Access-Control-Allow-Origin: https://naver.com

참고사이트:
React와 Node.js에서 네이버 책 검색 API 활용하기(feat.axios) by dev-sjko
CORS 에러를 프론트에서 해결? 무시? 아무튼? 해보자! by jeong-min.com
React에서 Proxy로 CORS 에러 다루기 by 데굴데굴
vite에서 proxy 설정하기 by crocus
[React] public 폴더의 용도by 슬기로운 다영생활
악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 by Inpa Dev

---

오늘의 일기:
왜 면접관님들이 클론코딩한거랑 직접 만든 거 좀만 얘기나누면 금방 구별할 수 있다고 하는지 알겠다. 이렇게 눈물로 만든 플젝은 결과물이 어떻든지간에 결코 못 잊을 거 같다....ㅎ