CORS, 500, 502 등 온갖 서버 오류로 힘든 역경 끝에 성장

목차

1. Open API 이용해 제작

2. localhost 환경에 이슈가 없어, Netlify or Vercel 이용해 배포

3. CORS 문제를 해결하기 위해 프록시 서버로 시도

4. 해결하는 과정에서 온갖 서버 오류 이슈

5. Node.js 빠르게 학습하여 서버 오류 해결

6. 무료 호스팅 없어서 고민 끝에 찾아서 배포

1.  Open API 이용해 제작

https://stdict.korean.go.kr/openapi/openApiInfo.do, https://www.data.go.kr/data/3057780/openapi.do 이 사이트에 Open API 사용 신청하였고 Vite 이용해 React 설치하였다. 애자일 개발 프로세스 방식을 채택해 프로젝트를 시작하였다. 아이디어, 기능 구현, 레이아웃 등 레퍼런스를 찾아 고민하였고 피그마를 이용해 와이어프레임 구성하였다.

2.  localhost 환경에 이슈가 없어, Netlify or Vercel 이용해 배포

배포를 하였는데.. CORS.. 악ㅏㅏㅆ;쉣뻑킹..!!

localhost 환경에 이슈가 발생하지 않았고, Vercel 이용해 배포를 하였고, 확인한 결과 CORS 오류가 발생하였다.. 아 ㅆ;쉣뻑킹..!!

CORS 오류

하.. CORS 오류를 해결하기 위한 여정이 시작되었다.

 

3. CORS 문제를 해결하기 위해 프록시 서버로 시도

React 개발 환경 CORS 해결, Vercel 배포 후 CORS 해결, CORS 관련하여 검색하면서 Chat GPT 동원하여 많은 노력을 하였고, CORS 관련하여 학습도 하였고, 도움 없이 혼자 해결하기 위한 도전이었다.

https://docs.tosspayments.com/resources/glossary/cors

 

검색한 결과 여러 방법들이 있었다. (아래의 코드) 원칙은 서버쪽에서 해결해야 한다는 내용이 있었다. 여튼 아래의 코드는 내가 찾아봤던 방법이다.

 

1. vite.config.js 파일에서 proxy 코드 추가하는 방법

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  // Vite 개발 서버 설정 정의
  server: {
    // Proxy 설정
    proxy: {
      // 경로가 "/api" 로 시작하는 요청을 대상으로 proxy 설정
      "/api": {
        // 요청 전달 대상 서버 주소 설정
        target: "https://stdict.korean.go.kr/api",
        // 요청 헤더 host 필드 값을 대상 서버의 호스트 이름으로  변경
        changeOrigin: true,
        // 요청 경로에서 '/api' 제거
        rewrite: (path) => path.replace(/^\/api/, ""),
        // SSL 인증서 검증 무시
        secure: false,
        // WebSocket 프로토콜 사용
        ws: true,
      },
    },
  },
});

 

2. http-proxy-middleware 설치하고 src/setupProxy.js 경로에 파일 생성하여 아래의 코드 추가하는 방법

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/api", {
      target: `https://stdict.korean.go.kr/api`,
      changeOrigin: true,
    })
  );
};

 

3. vercel.json 파일 생성하여 아래의 코드 추가하는 방법

{
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "https://stdict.korean.go.kr/api/$1"
    }
  ]
}

 

4. 프록시 서버에서 오류가 발생하는 것으로 추정하여 프록시 서버의 대한 자료를 찾아보고 해볼 수 있는 것들 다 해봤다.

https://nordvpn.com/ko/blog/502-bad-gateway-meaning/

502 에러: 502 bad gateway 뜻과 해결 방법 | NordVPN

 

5. 공공데이터포털 문의도 하였다.

 

#4. 해결하는 과정에서 온갖 서버 오류 이슈

위에서 찾았던 방법대로 해결하였지만, 500, 502 오류가 나왔다.

 

#5. Node.js 빠르게 학습하여 서버 오류 해결

2~3일 안에 Node.js 빠르게 학습하고 Node.js 배포하는 순간이 왔지만, 서버 비용.. 나 취준생인데.. 앗.. 쉣뻑킹.. 웱..

 

#6. 무료 호스팅 없어서 고민 끝에 찾아서 배포

koyeb에서 무료로 배포할 수 있었다.

https://www.koyeb.com/

Koyeb: Push code to production, everywhere, in minutes

2024년 하반기 기준

 

# 끝으로

프론트만 알아야 하는 것이 아니라 백엔드도 알아야 한다는 것을 배울 수 있었던 경험이었다.