MovieApp 만들기 (문제 해결 정리)

김재훈·2023년 10월 31일

MovieApp 만들기

목록 보기

8/8

CORS 에러

CORS란 Corss-Origin Resource Sharing의 줄임말로 교차 출처 리서스 공유라고 해석된다. 교차 출처는 다른 출처라는 뜻인데 출처란 URL 내의 Protocol과 Host, Port번호까지 합친 것이다.

즉, Protocol과 Host, Port번호까지 같아야 같은 출처인데 출처가 다르기 때문에 발생하는 에러다.

해결 방법

http-proxy-middleware의 createProxyMiddleware를 사용해 해결할 수 있다.

// client/src/setupProxy.js
import { createProxyMiddleware } from "http-proxy-middleware";

export default function (server) {
  server.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:4001",
      changeOrigin: true,
    })
  );
}

target에는 URL의 endpoint를 제외한 출처를 명시한다. http://localhost:4001/user의 경우 endpoint인 /user를 제외한 부분을 명시한다.

changeOrigin은 호스트 헤더의 출처를 대상 URL로 변경하는지 여부이다. CORS 처리를 위해 출처를 수정해주어야 한다. 기본값은 false다.

userParams() 타입 에러

// client/src/pages/SearchMoviePage.tsx

const { searchWord } = useParams();

const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
  queryKey: ["search", searchWord],
  queryFn: ({ pageParam = 1 }) => getSearchMovie(searchWord, pageParam),
  getNextPageParam: (lastPage) => {
    let page = lastPage.page;
    if (lastPage.total_page === page) {
      return false;
    }
    return page + 1;
  },
});

영화 검색 페이지에서 useParams()를 사용하는데 위와 같은 에러가 발생했다.

해결 방법

구글링해본 결과 useParams에 제네릭을 추가하는 방법이 가장 많았다. 하지만 제네릭을 추가해도 여전히 undefined를 포함해 해결되지 않았다.

const { searchWord } = useParams<{searchWord: string}>();

이유는 react-router-dom v6 이상부터 제네릭을 지원하지 않기 때문인것 같다.

그래서 다른 방법을 찾던 도중 타입 표명(Type Assertion)으로 해결 가능하다는 글을 봤다.

const { searchWord } = useParams() as { searchWord: string };

위와같이 Type Assertion으로 string 타입을 명시해주니 에러가 해결되었다.
interface나 type alias 방법으로 따로 명시해주어도 가능하다.

배포 에러

처음에는 Netlify로 배포를 했었는데 백엔드 기능을 추가하고 보니 Netlify는 백엔드는 배포가 되지않아 다른 배포사이트를 찾았다.

무료 배포 사이트를 찾다가 클라우드타입이라는 서비스를 찾았다.

사이트에서 설명하는대로 배포를 진행했는데 배포 준비중(502)라는 에러가 발생했다. 클라우드타입에서는 포트 번호를 제대로 설정하지 않았다고 하는데 확인해봐도 제대로 설정을 했다.

구글링을 해도 클라우드타입을 사용하는 사람이 많지 않은건지 관련 내용을 찾을 수 없었다. 그래서 배포 설정을 하나씩 바꾸면서 계속 재배포를 해보았다. 그래도 해결이 되지않아 혼자 생각해보다가 혹시 타입스크립트를 사용해서 오류가 나는건가 하고 생각을 했다.

그래서 Express와 TypeScript, Node.js를 사용해 테스트 서버를 만들어 배포해보았더니 같은 오류가 발생하고 서버 코드를 JavaScript로 바꾸어서 배포해보니 제대로 배포되었다.

MovieApp 서버 코드를 전부 JavaScript로 바꾸고 배포하니 오류없이 정상적으로 배포가 되었다. 그런데 배포는 되는데 클라이언트에서 빌드한 index.html이 제대로 빌드되지 않았다.

클라이언트에서 프로젝트를 만들때 Vite를 사용했는데 Vite는 빌드 결과물이 저장되는 기본 디렉토리 이름이 dist이다. 그래서 혹시 빌드 디렉토리 이름때문인가 하고 dist에서 build로 바꾸어서 배포했더니 정상적으로 빌드된 결과물이 배포되었다.

해결방법

TypeScript로 작성된 서버쪽 코드를 JavaScript로 바꾸어서 배포
클라이언트 빌드 디렉토리 이름을 dist에서 build로 변경 후 배포

김재훈

이전 포스트

MovieApp 만들기 (문제 해결 정리)