메로그

Nuxt2를 사용해 프로젝트를 진행하면서 이미지를 AWS CDN에서 불러와 클라이언트에서 fetch로 요청하던 중, CORS(Cross-Origin Resource Sharing) 문제를 겪게 되었습니다. 이 글에서는 발생한 문제와 해결 과정을 단계별로 정리하고, 각각의 선택과 이유를 설명하겠습니다.1. 문제 상황: AWS CDN에서 이미지 로딩 시 CORS 발생이미지 파일은 AWS S3를 기반으로 한 CDN(Content Delivery Network)에서 제공되었습니다. 클라이언트 측에서 해당 이미지를 fetch로 가져오려 하자, CORS 에러가 발생했습니다.CORS 문제란?CORS는 다른 도메인에서 리소스를 요청할 때 보안상의 이유로 브라우저에서 제약을 거는 정책입니다. 서버가 CORS 헤더를 통해..

레거시라고 하기에는 민망하지만, nuxt2 가 EOL 이 되었기 때문에 레거시 프로젝트라고 지칭하겠습니다.기존 사용했던 nuxt2 프로젝트는 node@16 기반으로 프로젝트가 진행되었고 그 이후로 특별한 버전 업데이트틀 진행하지 않았습니다.하지만, 계속해서 프로젝트는 진행되며 보안, 성능, 최신 기술, 호환성 등의 문제가 발생할 수 있다 판단하여 node 버전을 최신 LTS (20.17.0) 으로 올리는 판단을 진행하였습니다.노드 버전 업데이트 후... 문제 발생우선 node 버전을 최신 LTS 에 상향 시킨 후, 호환성 문제와 OpenSSL 에러 문제(Node 17 부터 OpenSSL 3 을 기본적으로 사용하는데 구버전의 API 에서는 사용하지 않아)가 발생하기 시작하였습니다.OpenSSL 해결방법일단..

Vue Composition API 는 Vue2 에서도 사용할 수 있도록 라이브러리를 지원한다. Nuxt2 에서도 해당 라이브러리를 사용할려고 했는데 호환이 맞지 않는 문제가 발생했다. (Nuxt 에서 Vue 관련 에러가 발생...) 그래서 찾아보니 @nuxtjs/composition-api 라는 것을 지원한다. 이를 사용해보자. 참고: https://composition-api.nuxtjs.org/getting-started/introduction 설치 방법 yarn add @nuxtjs/composition-api 모듈 설치 이후, nuxt.config.js 에 가서 아래 설정을 해주자. // nuxt.config.js { ..., buildModules: [ '@nuxtjs/composition-a..