VUE

VueJS는 인터랙티브 웹 인터페이스를 구축하기 위한 라이브러리로 간단하고 유연하게 사용 가능한 데이터-반응성 컴포넌트 API를 제공합니다. 다수의 개발자들이 VueJS를 사용하는 이유는 가볍고, 쉽기 때문입니다. 쉽다고는 하지만 컴포넌트 간 통신을 위해 부모/자식 컴포넌트 간 props를 전달하거나, 변경해야하는 문제가 발생합니다. 종종 props를 사용하지 않고 this.$parent.data와 같은 접근 방식을 사용할 수 있습니다. 자식 컴포넌트는 부모 컴포넌트에 $emit()을 사용하여 이벤트를 발신하는 방법으로 통신합니다. 이러한 방법이 부모 컴포넌트의 데이터를 변경하는 간단한 방법일지 모르지만, 프로젝트 규모가 커지고 컴포넌트가 많아짐에 따라 받는 스트레스 또한 가중됩니다. 예를 들어 30개의..

개발환경 Nuxt.js 2 Vue.js 2 Spring Boot 3요청사항 ❓ API에 권한을 입히면서 특정 API 사용 시 alert를 노출시키고 페이지 이동은 원하지 않는다는 요청사항이 있어 이를 구현하였습니다.개발 내용 💭 Back End에서 권한을 체크하는 AOP를 하나 만들어 체크를 원하는 API에 Annotation을 넣어 Exception처리를 하도록 구현하였습니다. Front End에서 해당 Error를 보고 권한에 대한 Error일 경우 alert를 발생시켜야 합니다. 문제발생 ❗ 공통적으로 처리하기위해 axiox.onError({})로직에 처리를 하려다 보니 무조건 적으로 Error 페이지로 이동하는 현상 발생 이는 Nuxt 설정으로 헤더 정보를 보고 Error 발생 시 error.vu..

Nuxt.js는 Vue.js 프레임워크를 기반으로 한 서버 사이드 렌더링(SSR)을 지원하는 웹 애플리케이션 프레임워크이다. 페이지 이동은 Vue Router를 사용하여 처리할 수 있다. 아래는 Nuxt.js에서 페이지 이동을 위한 몇 가지 기본적인 방법이다. 링크를 사용한 페이지 이동: Nuxt.js에서 페이지 간의 이동은 컴포넌트를 사용하여 처리할 수 있다. 이 컴포넌트를 사용하면 Vue Router가 내부적으로 처리하므로 페이지 전환 시 SSR을 유지할 수 있다. 사용자 페이지로 이동 위의 예제에서는 userId 변수를 사용하여 동적으로 URL을 생성하고 nuxt-link 컴포넌트를 통해 페이지 간 이동을 수행하고 있다. 또한 user 페이지에서 이 파라미터를 받아와 사용할 수 있다. 이때 user..

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(vue)를 사용함에 있어 component간의 데이터 바인딩을 위해 props와 emit을 사용한다 일단 두 기능의 특성을 알아보자 props prop는 부모 Component의 정보를 자식 Component로 전달하기 위해 사용하는 사용자 지정 특성이다. 자식 Component는 props 옵션을 사용하여 수신 할 것으로 기대되는 props를 명시적으로 선언해 사용한다. emit emit은 다른 Component에게 현재 Component의 Event나 Data를 전달하기 위해 사용할 수 있다. EX : 자식 컴포넌트에서 사용자지정 이벤트를 만들어 부모 컴포넌트에게 전달 받아올 다른 Component에서는 @emit으로받아올event명="현재 컴포넌트에서 사용할 Event 명" 형식으로 선언하..