메로그

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', '*');..

SEO 모니터링 중에 Naver 진단에서 요소에 동일한 제목인 웹문서 다수 발견 라는 이슈가 발생하였다. 무슨 일인지 확인해보니 하나의 페이지에 여러 url 이 만들어지는 문제가 발생한 것이다. 원인을 분석해보니, 페이지의 url 을 동적으로 만들 때 몇가지 정보를 혼합하는데, 여기서 네이버가 seo 봇을 이용해서 랜덤하게 url 을 넣다가 해당 정보들에 매칭되는 url 이 몇가지 나오기 시작해보임. 이것의 근본적인 문제는 url 을 동적으로 만들어주는데 만들기만 할 뿐 거기에 대한 검증을 제대로 하지 못한 것이었다. 예를 들어, 아래의 url이 달라보이지만 실제로는 의미론적으로는 같은 url 인 경우가 발생하여 봇이 인식하는 경우가 발생한 것이다. 예시) /detail/abcd1234 /detail/z..

Nuxt 란? Vue.js 를 가지고 SSR + CSR 같은 웹을 제작할 수 있도록 해주는 프레임워크입니다. CSR vs SSR 기본적으로 SPA 는 CSR 방식으로 최초 페이지를 로딩한 시점부터 페이지 렌더링 없이 부분부분 만을 렌더링하는 방법이다. react, vue 또는 webpack 에 핫로딩이 있다. 하지만, 서버에서 뷰를 렌더링하는 방식이 아닌, 클라이언트에서 HTML, JS, CSS 등 각종 리소스를 다운받은 이후, 렌더링 작업을 하기 때문에 SSR 보다는 초기 화면이 보이는 시간이 길어진다. 이런 방식 때문에 검색엔진에서는 검색시 빈 페이지로 인식하기 때문에 CSR 을 사용하지 않고 SSR 기법을 사용한다. SSR 은 서버에서 사용자에게 보여줄 페이지를 모두 렌더링하여 띄우는 방식으로 요청..