본문 바로가기
반응형

VueJS57

[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.
[VueJS] vuejs 기본 템플릿 자동 완성 기능 사용하기 (ft. SFC) VSCode로 VueJS 프로젝트를 생성해서 작업을 하다보면 SFC 형식의 .vue 파일을 만들게 된다. HTML 템플릿처럼 SFC역시 템플릿 자동완성 기능이 있는데 한번 사용해보자. 1. 우측 하단에 파일 형식이 Vue가 맞는지 부터 확인해보자. (뭔가 HTML 템플릿도 저 파일 형식을 확인하는거보니 이것도 확인해주는게 좋을듯 하다. 자동감지라 맞을것이다.) 2. 그리고 "vue"를 입력하고 엔터를 눌러주면... (아래 이미지처럼 저렇게 자동완성이 나타나야한다.) 3. 이제 기본 탬플릿이 자동 완성된다. 2022. 5. 4.
[VueJS] Error : vue/multi-word-component-names https://simplevue.gitbook.io/intro/02.-component 02. Component 구성해보기 - simpleVue component 별로 html, script, style 을 관리 할 수 있기 때문에 관림사 분리화, 모듈화가 쉬워졌습니다. component 를 잘 쪼갤수록 복잡한 tag, style 관리 또한 없어집니다 :) simplevue.gitbook.io 위 과정을 따라 하다 보면 아래와 같은 에러가 발생한다. Component name "Menu" should always be multi-word vue/multi-word-component-names 쉽게 따라 해 보라고 해놓곤 두 번째 챕터부터 에러가 발생해 따라 할 수 없는 안타까운 상황이 발생해 버렸다. 이.. 2022. 5. 3.
[VueJS] VSCode에서 개발환경 세팅하기 (ft. node.js / vue-cli) VSCode에서 Vue.js 개발 환경을 구축해보자. VueJS는 단일 페이지 애플리케이션을 빠르게 구축할 수 있는 공식 CLI인 Vue CLI를 제공한다. 우선 VSCode와 Node.js가 당연히 있다는 가정하에 시작해보도록 한다. 아래 명령어를 통해 vue/cli를 설치한다. npm install -g @vue/cli 이제 설치가 완료되었다면 vue가 설치가 잘 된 건지 확인할 겸 아래 명령어를 입력해주자. vue --version 여기서 주의할 점이 몇가지 오류가 발생하는지 모르겠는데, 총 두 가지 에러가 발생할 수 있다고 한다. (나 같은 경우는 윈도우 정책에 막혀서 설치는 됐으나 실행이 안 되는 오류가 발생하였다.) 우선 1. 보안 오류 - 이 시스템에서 스크립트를 실행할 수 없으므로 ... .. 2022. 5. 3.
반응형
TOP

티스토리툴바