Vue Js 한글 입력 과 IME
November 27, 2021IME란 한국어, 중국어, 일본어, 한자처럼 컴퓨너 자판에 있는 글자보다 더 많은 수의 문자를 계산서나 조합하여 입력해 주는 시스템 소프트웨어이다. 이러한 조합이 필요한 언어들은 v-model 디렉티브를 활용할 때 제대로 동작 안되는 문제가 있어, @input 이벤트를 활용하여 v-model 디렉티브 기능을 대신 구현해야 정확한 데이터 바인딩을 할 수 있다.
19 posts tagged with "vue"
Vue Js 서버 사이드 렌더링
May 16, 2021Vue Js 서버 사이드 렌더링 서버 사이드 렌더링이란 서버에서 페이지를 렌더링후 클라이언트(브라우저)로 보내 화면에 표시하는 기법을 의미한다. 뷰 싱글 페이지 애플리케이션을 서버 사이드 렌더링의 반대인 클라이언트 사이드 렌더링 방식이다. CSR…
Vue Js 뷰 JWT 기반 사용자 인증
May 09, 2021라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용할수 있다. 사용 법은 routes 에 name 옵션을 지정 하면 된다. 라우트 관리가 편리 하다 라는 장점이 있다.
Vue Js 소프트웨어국제화(i18n)
May 02, 2021라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용할수 있다. 사용 법은 routes 에 name 옵션을 지정 하면 된다. 라우트 관리가 편리 하다 라는 장점이 있다.
Vue Js 뷰 파일업로드
May 02, 2021라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용할수 있다. 사용 법은 routes 에 name 옵션을 지정 하면 된다. 라우트 관리가 편리 하다 라는 장점이 있다.
Vue Js Vee Validate
April 25, 2021서비스 개발시 Form 유효성 검사는 필수이다. 보통 정규표현식을 사용하여 간단하게 구현할수 있지만, Vue 에서는 VeeValidate 를 활용하여 일관성 있는 Form 유효성 검사 기능을 구현 할수 있다.
Vue Js Axios 및 Rest Api 를 활용한 CRUD 구현
April 11, 2021Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며,Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다.
Vue Js Vuex 저장소(store) 속성 및 모듈화
April 11, 2021중간 크기 이상의 복잡한 앱을 제작할 때 getters & mutations & actions 의 이름을 유일하게 정하지 않으면 namespace 충돌이 난다. 따라서, 네임스페이스를 구분하기 위해 types.js 로 각 속성의 이름들을 빼고 store.js 와 각 컴포넌트에 import 하여 사용하는 방법이 있다. 혹은 modules 라는 폴더로 만들어 각 단위별로 파일을 분리해서 관리하는 방법도 있다.
Vue Js Vuex State, Mutations, Actions, Getters 이해 및 활용
April 11, 2021Vuex State 는 데이터 상태를 관리 하며, Getters 를 사용하여 동일한 로직을 중앙에서 관리 하도록한다. Mutations 에는 순차적인 로직들만 선언하고 Actions 에는 비 순차적 또는 비동기 처리 로직들을 선언한다. 그리고 mapGetters, mapMutations, mapActions 등 헬퍼 함수가 있다.
Vue Js Vuex 설치 및 등록
April 11, 2021Vuex는 npm install vuex 로 설치 할수 있다.
Vue Js Vuex의 개념 및 구조의 이해
April 04, 2021Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 이다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다.
Vue Js Redirect / Alias
April 04, 2021리디렉션은 routes 에서 설정 할 수 있습니다. 별칭은 /user의 별칭은 /post는 사용자가 /post를 방문했을 때 URL은 /post을 유지하지만 사용자가 /user를 방문한 것처럼 매칭하는것 이다. 아래 처럼 위 라우터를 구현 할수 있다.
Vue Js 뷰 네임드 라우트
April 04, 2021라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용할수 있다. 사용 법은 routes 에 name 옵션을 지정 하면 된다. 라우트 관리가 편리 하다 라는 장점이 있다.
Vue Js 히스토리 관리
April 04, 2021vue-router의 기본 모드는 hash mode 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않는다. 해시를 제거하기 위해 라우터의 history 모드 를 사용할 수 있다. history.pushState API를 활용하여 페이지를 다시 로드하지 않고도 URL 탐색을 할 수 있다.
Vue Js 동적 라우트
April 04, 2021주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 있다. 예를 들어 게시물 상세보기에 대해 동일한 레이아웃을 가지지만 하지만 다른 게시물 ID로 렌더링되어야하는 Post 컴포넌트가 있을 수 있다. vue-router에서 경로에서 동적 세그먼트를 사용하여 아래와 같이 할 수 동적으로 라우트를 매칭하여 세그먼트를 같은 레이아웃에 다른 게시물을 보여줄수 있다.
Vue Js 뷰 중첩 라우트
April 04, 2021라우터 컴포넌트 안에 하위에 라우터 컴포넌트를 중첩하여 구성하는 방식이 중첩 라우트 이다.
Vue JS Router 설치 및 설정
April 04, 2021웹에서의 라우팅은 웹 페이지 간의 이동 방법을 뜻 한다. 예를 들면 아래와 같다. Vue.js의 공식 라우트 이고, Vue.js 코어와 긴밀하게 연결되어 SPA를 쉽게 구축 할 수 있다. 그리고 화면 간의 이동 시, 깜빡거림 없이 매끄럽게 전환 할수 있다. (HTML History API)
Vue JS 인스턴스 & 컴포넌트 소개
March 28, 2021Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 데이터가 변경되어 DOM을 업데이트하는 경우가 있다고 가정 하면, 그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클의 훅 도 호출 된다. 컴포넌트는 하나의 블록을 의미한다. 레고처럼 여러 블럭을 쌓아서 하나의 집을 모양을 만들 듯이, 컴포넌트를 활용하여 화면을 만들면 보다 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다. 이렇게 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 재사용 할수 있다. 또한 모든 사람들이 레고의 사용설명서처럼 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있다.
Vue JS 이해 및 환경설정
March 28, 2021뷰(Vue.js)는 점진적으로 채택 가능한 구조를 갖추고 있다. 코어 라이브러리는 선언형 렌더링과 컴포넌트 구성에 초점을 두며 기존 페이지에 임베드가 가능하다. 라우팅, 상태 관리, 빌드 도구화와 같이 복잡한 애플리케이션에 필요한 고급 기능들은 공식적으로 유지 보수되는 지원 라이브러리와 패키지를 통해 제공된다.
All tags