본문 바로가기
반응형

Library & Framework/VueJS33

[VueJS] (Vue 3) - Vuex 타입 추론 설정하기 본문을 시작하기에 앞 서 아래 링크를 통해 우선 Vuex에서 Typesciprt를 사용하는 방법에 대해 알아온 다음에 이 게시글을 보도록 하자 (아래 게시글을 토대로 작성하였다.) * [VueJS] (Vue 3) - Vuex를 Typescript로 사용하기 [VueJS] (Vue 3) - Vuex를 Typescript로 사용하기 본 글은 vue-cli로 생성한 vue 프로젝트 기준으로 작성하였으며, vuex를 잘 모르겠다면 아래 글을 참고하자. * [VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API) * [Vue.. mine-it-record.tistory.com 일단 서론부터 시작하자면 Vuex에서 Typescript를 사용하게 된다면 별다른 설.. 2022. 7. 14.
[VueJS] (Vue 3) - Vuex를 Typescript로 사용하기 본 글은 vue-cli로 생성한 vue 프로젝트 기준으로 작성하였으며, vuex를 잘 모르겠다면 아래 글을 참고하자. * [VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API) * [VueJS] Vuex 사용하기 (2) - 기능 상세 설명 및 다양한 사용법 (ft. Composition API) store/index.ts 보통 vue-cli를 통해 프로젝트를 생성하게 되면 index.ts가 기본적으로 생성이 되어있을 텐데, 타입 스크립트를 사용할 때는 index.ts의 경우에는 모든 타입들과, 각각의 저장소들을 한 곳에 모아주는 역할만 담당한다. import { createStore } from "vuex"; import { CreateState, .. 2022. 6. 17.
[VueJS] (Vue 3 + TypeScript) - 설정 및 컴포넌트 정의하기 Vue3의 가장 큰 특징 중 하나가 바로 TypeScript와의 호환성이 좋아졌다는 특징이다. Vue2에서는 typescript를 사용하기 위해서는 큰 비용이 들었는데, Vue3에서는 이 단점들을 최대한 보완해서 타입 스크립트와 함께 사용하기 편하도록 개선이 되었다고 한다. 이번 글에서는 TypeScript를 사용하게 되었을때 컴포넌트 정의하는 방식이 어떻게 변했는지 알아보고자 한다. 프로젝트 생성 이쯤되면 Vue CLI를 사용한 프로젝트를 만드는 건 누구나 할 수 있을 거라 생각된다. Vue CLI를 사용하면 당연히 TypeScript를 설치하기 쉽고 설정도 기본적으로 되어있기 때문에 사용하기 편하다. # 1. Install Vue CLI, if it's not already installed npm .. 2022. 6. 14.
[VueJS] vue 프로젝트에서 CSS 전처리기(Pre-Processor) 전역 스타일 설정하기 vue 프로젝트에서 CSS 전처리기(예를 들어 sass, scss, less 같은 것들)를 사용할 때 가장 난감한 게, vue는 싱글 파일 컴포넌트 형식으로 .vue 파일 안에 스타일 역시 존재하는데, 여기서 전역으로 설정된 변수 같은 것들을 항상 import 해서 사용해줘야 하는 불편함이 생긴다. 그렇기 때문에 자주 사용하는 변수나, mixin같은 경우 전역 스타일로 설정하여 사용을 해야한다. 전역 스타일 설정은 vue.config.js 파일에서 설정해 주면 된다. // vue.config.js module.exports = { css: { loaderOptions: { // pass options to sass-loader // @/ is an alias to src/ // so this assume.. 2022. 6. 13.
[VueJS] vue 프로젝트에서 webpack 설정하는 방법 (vue-cli 와 webpack) 초기 세팅 우선 webpack 설정에 대해 알아보기 위해 vue-cli를 이용한 vue 프로젝트가 만들어져야 한다. [VueJS] VSCode에서 개발환경 세팅하기 (ft. node.js / vue-cli) [VueJS] VSCode에서 개발환경 세팅하기 (ft. node.js / vue-cli) VSCode에서 Vue.js 개발 환경을 구축해보자. VueJS는 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 공식 CLI인 Vue CLI를 제공한다. 우선 VSCode와 Node.js가 당연히 있다는 가정하에 시작해보도록 한 mine-it-record.tistory.com vue 프로젝트에서 이제 webpack설정을 하기 앞서 vue-cli의 버전이 몇인지부터 알아야 한다. 아무래도 아주 예전부터 사용하.. 2022. 6. 13.
[VueJS] Vuex 사용하기 (2) - 기능 상세 설명 및 다양한 사용법 (ft. Composition API) 이 게시글 이전에 [VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API)라는 게시글을 통해 초기 설정을 잡고 가볍게 사용해 보았다. 이번 글에서는 Vuex의 Core Concepts에 대해서 알아보도록 하자. 물론 Composition API와 같이 사용할 것이다. Vuex의 store 내에는 크게 5가지의 속성이 존재하는데 state getters mutations actions modules 이렇게 5가지의 속성에 대해 하나씩 알아가 보도록 하자. 1. state Vuex는 단일 상태 트리를 사용하는데, 하나의 애플리케이션은 하나의 store만 가진다는 의미이다. 단일 상태 트리를 사용하면 특정 상태를 쉽게 찾을 수 있으며 디버깅 목적으로 현재 .. 2022. 5. 4.
[VueJS] Vuex 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. Composition API) Vuex는 상태(state)를 관리하는 라이브러리이다. Vuex 같은 상태 관리자는 prop Drilling을 방지하거나 그 외 다양한 라이브러리와 연동시켜 사용하기 위해 사용된다. (*Prop Drilling은 중간 component를 그냥 데이터 전달용으로만 사용하는 이동하는 과정을 일컫는다.) 사실 Vuex가 없어도 Provide와 Inject라는 녀석을 사용하면 Prop Drilling 방지는 물론 여러 가지 다른 컴포넌트로 전달이 가능한데, 반응형으로 만들려면 computed를 사용하거나 소스 추적이 어려워지는 현상 때문에 잘 사용하지는 않는다. 그러므로 Vuex라는 저장소를 두고 같이 쓰는 값들은 하나의 저장소를 통해 관리하고 저장소를 바라보도록 하는게 취지이다. 추가적으로 vuex-persi.. 2022. 5. 4.
[VueJS] 뷰 라우터(vue-router) 사용하기 (2) - 기능 상세 설명 및 다양한 사용법 (ft. router-link) 뷰 라우터의 기본 사용법에 대해 익혀봤으니 좀 더 상세하게 들어가 보자. 우선 참고 사이트를 다른 곳으로 변경하였다. vue3 router를 사용한 tutorial 사이트이다. https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/ Vue Router: A Tutorial for Vue 3 | Vue Mastery If you’re looking to learn the new Vue Router that uses Vue 3, you’re in the right place. Many things are the same in Vue 3 using Vue Router, but there are a few small differences from Vu.. 2022. 5. 4.
[VueJS] 뷰 라우터(vue-router) 사용하기 (1) - 설치, 세팅 및 기본 사용법 (ft. router-view) VueJS의 주요 기능 중 하나인 뷰 라우터(vue-router)에 대해 알아보자. 뷰 라우터는 뷰 라이브러리를 이용하여 SPA를 구현할 때 사용하는 라이브러리인데, 페이지 이동하는 기능을 뷰 라우터로 구현할 수 있다. 그렇기 때문에 페이지를 이동할 때 url이 변경되면, 변경된 요소의 영역에 컴포넌트를 갱신해주는 역할을 한다. (DOM을 새로 갱신하는게 아니라 SPA의 특징대로 컴포넌트만 갱신해서 화면에 보여주는 것이다.) simpleVue 실습을 따라가면서 한번 익혀보도록 하자. 일단 vue-router를 설치해줘야한다. 아래 명령어를 통해 설치해주도록 하자. npm i --save vue-router 자 설치가 완료됐다면 이제 라우터에 사용할 router.js라는 파일을 추가해 사용해볼텐데, 일반적.. 2022. 5. 4.
반응형
TOP