Vue와 Spring Boot에서의 JavaScript 교차 출처 문제 해결
환경 구성
소프트웨어버전
JDK8
Spring Boot2.1.8.RELEASE
Vue CLI4.3.1
문제 개요
Vue와 Element UI로 개발한 프론트엔드가 Spring Boot 백엔드와 통신 시 다음 오류 발생:
no 'access-control-allow-origin' header is present on the requested resource
이는 브라우저의 동일 출처 정책(Same-Origin Policy)에 기인한 교차 출처 문제입니다.
핵심 개념
동 ...
7월 6일 20:26에 게시됨
Vue 프로젝트 기본 설정 가이드
1. 프로젝트 초기화
Vue.js 기반 프로젝트를 구축하려면 먼저 Node.js를 설치해야 합니다. 설치 후 NPM을 통해 Vue CLI 3.0 이상 버전을 전역으로 설치합니다. CLI는 vue ui 명령어로 그래픽 인터페이스를 제공하거나, vue create <project-name> 명령어로 터미널에서 직접 프로젝트를 생성할 수 있습니다.
프로젝트 생성 시 중요한 점은 설정 파일을 분리하는 것입 ...
7월 5일 20:31에 게시됨
Vue 컴포넌트 간 데이터 전달 및 메서드 호출 완벽 가이드
서론
Vue 프로젝트에서 컴포넌트 간의 데이터 전달과 메서드 호출은 빈번하게 필요한 기능이다. Vuex 상태 관리를 사용하여 모든 데이터 전달 문제를 해결할 수도 있지만, 상황에 따라 적절한 방법을 선택하는 것이 중요하다. 이 글에서는 Vue에서 사용할 수 있는 다양한 컴포넌트 통신 방식을 상세히 다룬다.
컴포넌트 통신 방식의 분류
부모 → 자식 (props)
자식 → 부모 ...
7월 3일 22:29에 게시됨
Vue 프로젝트에서 vue-plugin-hiprint를 이용한 커스텀 인쇄 템플릿 구축 및 핵심 트러블슈팅
Vue 기반의 백오피스나 관리 시스템 개발 시, 주문서나 보고서 같은 문서를 사용자가 직접 디자인하고 출력하는 기능은 필수적입니다. 하지만 WYSIWYG(위지윅) 방식의 템플릿 에디터를 직접 구현하거나 무거운 외부 라이브러리를 도입하면, 동적 데이터 바인딩이나 페이지네이션 등에서 예상치 못한 문제에 직면하기 쉽습니다. 이러한 상황에서 가볍고 확장성이 뛰어난 vue ...
7월 3일 05:50에 게시됨
Vue 3와 Element Plus 초기 설정 및 구성 방법
웹 애플리케이션 개발에서 Vue만 사용하는 것은 제한적이며, 원래의 HTML 태그만으로는 시각적 요소를 충분히 다루기 어렵습니다. 이를 해결하기 위해 주로 Vue와 전용 UI 컴포넌트 라이브러리를 결합하여 사용합니다.
Element Plus 소개
Element Plus는 Vue 3 기반의 최신 UI 라이브러리입니다. 이 라이브러리는 로그인 페이지, 레이아웃 컨테이너, 네비게이션 바, 테이 ...
7월 2일 21:11에 게시됨
Konsta UI와 React, Vue, Svelte 통합 완벽 가이드
Konsta UI는 Tailwind CSS 기반으로 제작된 모바일 UI 컴포넌트 라이브러리로, 현대적인 프론트엔드 프레임워크를 위한 다양한 사전 구축 컴포넌트를 제공합니다. 본 가이드에서는 React, Vue, Svelte와 Konsta UI를 통합하는 방법과 실제 프로젝트에서 활용할 수 있는 실용적인 기법을详细介绍합니다.
1. Konsta UI 설치 및 프로젝트 설정
각 프레임워크에 맞는 패키지 ...
6월 22일 17:09에 게시됨
Vue-Admin 템플릿: 권한 기반 내비게이션 및 전체화면 기능 구현
이번 글에서는 이전에 작업한 Vue-admin 프로젝트에 Breadcrumb(이동 경로)와 Screenfull(전체화면) 기능을 추가하는 과정을 다룹니다.
Breadcrumb 컴포넌트 구현
Element-UI의 el-breadcrumb와 el-breadcrumb-item을 활용하여 현재 경로를 표시하는 내비게이션을 만듭니다. 기본적인 사용 예시는 다음과 같습니다.
<el-breadcrumb separator-class="el-icon-arrow-r ...
6월 18일 23:23에 게시됨
Vue.js 시작하기 - ES6 기초부터 프로젝트 설정까지
프론트엔드 기술 스택 이해하기
현대 웹 개발에서는 HTML이 구조(Structure), CSS가 표현(Style), JavaScript가 동작(Behavior)을 담당합니다. 기존의 jQuery 라이브러리는 JavaScript의 DOM 조작을 단순화했고, Bootstrap은 CSS 프레임워크로 클래스 기반의 스타일링을 제공했습니다. 현재主流 SPA 프레임워크로는 Facebook이 개발한 React, Google이 만든 Angular, 그리 ...
6월 18일 21:16에 게시됨
Vue 프로젝트에서 WeChat H5 결제 연동 구현하기
WeChat 브라우저 환경 결제 연동 개요
모바일 웹 환경(H5) 에서 WeChat 내부 결제를 수행하려면 사용자의 OpenID 확보와 JSBridge 를 통한 결제 요청 전송이 필수적입니다. 일반적으로 Vue 프레임워크를 기반으로 하더라도 WeChat 특유의 인증 프로세스를 먼저 통과해야 하며, 이후 서버 측에서 발급받은 결제 토큰을 사용하여 정산 흐름을 시작합니다.
1. 사용자 인증 ...
6월 17일 04:19에 게시됨
DataV 5분 완성: 전문가급 데이터 시각화 대시보드 구축 가이드
DataV 5분 완성: 전문가급 데이터 시각화 대시보드 구축 가이드
데이터 기반의 시대에서, 지루한 숫자를 직관적이고 생생한 시각 자료로 변환하는 것은 모든 개발자와 데이터 분석가가 직면하는 과제입니다. DataV는 이러한 문제를 해결하기 위해 탄생한 전문 Vue 데이터 시각화 컴포넌트 라이브러리입니다. 풍부한 SVG 테두리, 장식 요소, 차트 컴포넌트를 제공하여, 알 ...
6월 12일 16:58에 게시됨