문제⛔ Front End(Nuxt.js)와 Back End(Spring boot)를 나누어 개발하다 보면 API 호출 시 CORS 정책에 따른 API 호출 불가 메세지가 발생합니다. 개발 환경에서 이를 우회하기 위한 설정을 알아보겠습니다. Node.js 서버(localhost:3000) Tomcat 서버(localhost:8080) CORS란❓ CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션에서 발생하는 보안 상의 제약을 우회하기 위해 도입된 웹 브라우저의 정책입니다. 웹 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)를 따르며, 이 정책은 한 출처(origin)에서 로드된 문서나 스크립트가 다른 출처의 자원에 접근하는 것을 제한합니다. 출..
Nuxt.js
Nuxt.js를 사용하면 편한점이 많이 있는데 이번에는 components를 사용하는 법을 알아보겠습니다. 실습순서 components 폴더 생성 component 파일 생성 기본 component 호출 다른 호출 방법 components 폴더 생성 root 아래에 components 폴더를 생성합니다. Nuxt를 설치하게되면 기본 패키지 구성으로 폴더가 생성되어 있을겁니다.(~/components) component 파일 생성 테스트를 위해 components/dept1/dept2/component-test.vue 생성 ~/components/dept1/dept2/component-test.vue 컴포넌트 입니다. 기본 component 호출 pages에 파일을 생성한 후 component를 호출합니다..
문제❓ Nuxt.js를 이용한 Highchart 예시를 만들면서 메인화면을 구성하던 도중 pages의 폴더와 파일 등을 자동으로 파악해 동적으로 변화는 메인화면을 구현하기 위해 psges에 존재하는 모든 파일 정보를 가지고 오고 싶습니다. 하지만 Nuxt.js는 SSR프로젝트다 보니 client내에서 pages의 파일 정보를 가지고 올 수 없었습니다. 해결방법❗ async asyncData()를 이용해 SSR시 require.context('~/pages', true, /.vue$/);를 호출 해 .vue 확장자를 가진 모든 파일을 가지고 옵니다. async asyncData란❓ Nuxt.js 2에서 asyncData는 페이지 컴포넌트에서 사용할 수 있는 특별한 메서드입니다. 이 메서드는 Nuxt.js의..
