메로그

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

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..

Nuxt.js에서 서버 미들웨어를 사용하여 CORS(Cross-Origin Resource Sharing)를 허용하는 방법은 아래와 같습니다.CORS를 허용하려면 서버 미들웨어를 만들어야 합니다. 1. Nuxt.js 프로젝트의 루트 디렉토리에 middleware 디렉토리를 만듭니다 (만약 없다면).2. middleware 디렉토리 안에 새로운 파일을 생성하고 원하는 이름을 부여합니다. 예를 들어, cors.js로 파일을 저장합니다.3. cors.js 파일에 다음과 같이 서버 미들웨어 코드를 작성합니다.// middleware/cors.jsexport default function (req, res, next) { res.setHeader('Access-Control-Allow-Origin', '*');..

asyncData lifecycle 에서 asyncData 는 프론트 서버 사이드 렌더링 시점에 발생하며 페이지 로딩 시점에 발생합니다. 또한, 기존 Vue 와 달리 asyncData 를 활용하면 서버사이드에서 처리하기 때문에 SEO 최적화를 할 수 있습니다. nuxt 에서 pages 폴더 아래에 위치하는 컴포넌트에서만 사용할 수 있는 속성으로 페이지 진입전에 호출하고 this 를 사용하지 않음. export default { // params의 id가 1이라고 가정 async asyncData({ params, $http }) { const response = await axios.get(`/users/${params.id}`); const user = response.data; return { use..

nuxt 에서 static 밑에 폴더 헤더정보 보내는 방법 //nuxt.config.js render: { static: { // 여기서 static 폴더 아래에 파일들에 대한 header 정보를 담을 수 있음. setHeaders(res, path, stat) { if (path.indexof('.css') > -1) { res.setHeader('Cache-Control', 'public, max-age=604800') } }

로그인이 되어 있지 않은 경우, 로그인 창으로 보내는 미들웨어 생성 middleware/login.js export default ({ store, route, redirect }) => { // store 에 로그인이 되어 있지 않으면 login 페이지로 리다이렉트함. if (!store.state.isLogin) return redirect('/login') } 해당 미들웨어의 경우, 전역 미들웨어로 nuxt.config.js 에서 router: {middleware: ['login']} 으로 등록해주면 전역으로 사용한다.