본문 바로가기

Vue44

[Vue] Webpack 프로젝트에서 ESLint 설정해주기 ESLint 설치해주기 npm i -D eslint eslint-plugin-vue babel-eslint .eslint.json 파일 생성 .eslint.json 파일에 코드 넣기 (기호따라 변경 가능) module.exports = { env: { browser: true, node: true, }, extends: [ 'plugin:vue/vue3-strongly-recommended', 'eslint:recommended', ], parserOptions: { parser: 'babel-eslint', }, rules: { 'vue/html-self-closing': [ 'error', { html: { void: 'always', normal: 'never', component: 'always'.. 2022. 8. 22.
[Vue] 라우터로 특정 컴포넌트에서만 Header 보여주는 방법 (Named Views) index.js import { createRouter, createWebHashHistory } from 'vue-router' // ~ === src/components import TheHeader from '~/components/TheHeader.vue' import Home from './Home.vue' export default createRouter({ // 해시모드 모드 선택 history: createWebHashHistory(), // 라우터가 변경될때마다 top: 0으로 페이지 스크롤 자동변환 scrollBehavior: () => ({ top: 0 }), // 페이지 정보 명시 routes: [ { path: '/', // component를 components로 변경 compo.. 2022. 8. 14.
[Vue] vue-router 사용법 vue-router 사용법 https://router.vuejs.org/guide/ Getting Started | Vue Router Getting Started Creating a Single-page Application with Vue + Vue Router feels natural: with Vue.js, we are already composing our application with components. When adding Vue Router to the mix, all we need to do is map our components to the routes and let router.vuejs.org 1. router를 일반 의존성 패키지로 설치 npm install vue-router .. 2022. 8. 12.
[Vue] 페이지가 전환될때마다 스크롤이 처음으로 돌아가게 하는 라우터 함수 Routes > index.js 파일에서 scrollBehavior 함수를 createRouter에 등록해준다 일반함수 import { createRouter } from 'vue-router'; const router = createRouter({ scrollBehavior() { return { top: 0 } } }) 화살표함수 import { createRouter } from 'vue-router'; const router = createRouter({ scrollBehavior: () => ({ top: 0 }) }) 2022. 8. 12.
[Vue] 스토어 등록한 데이터 vuex helper로 사용하는 방법 1. state state는 computed 옵션 안에서 사용한다 store에 등록한 state 사용하는법 store에 등록한 state를 vuex helper로 사용하는법 2. getters getters는 computed 옵션 안에서 사용한다 store에 등록한 getters 사용하는법 store에 등록한 getters를 vuex helper로 사용하는법 3. mutations mutations는 methods 옵션 안에서 사용한다 store에 등록한 mutations 사용하는법 store에 등록한 mutations를 vuex helper로 사용하는법 4. actions actions는 methods 옵션 안에서 사용한다 store에 등록한 mutations 사용하는법 store에 등록한 mutati.. 2022. 8. 12.
[Vue] 스타일 데이터 바인딩시 케이스스타일 문제 해결하기 Vue에서 데이터를 바인딩할때는 대쉬 케이스(dash case) - 기호를 가진 데이터를 사용할 수 없다. 대신 카멜 케이스(camel case)를 사용하면 자동으로 스타일 속성에 알맞게 변경이 된다. 또는 대쉬 케이스를 따옴표로 묶어주면 사용이 가능하다. 1. camel case 사용 2. 따옴표로 대쉬 케이스를 묶어준 후 사용 결과 2022. 8. 9.
[Vue] 데이터값을 바인딩해서 클래스 이름 요소에 부여하는 방법 클래스 이름으로 데이터를 바인딩하기 위해서 :을 class 앞에 부여하였다 absolute는 false이므로 class 이름으로 들어가지 않고 fixed는 true이므로 class 이름으로 들어간다 참고로 객체에서 key와 value의 이름이 같을때 하나를 생략해줄 수 있다 결과적으로 아래의 코드와 같은 결과물이 나온다 2022. 8. 9.
[Vue] template에서 데이터 접근시 사용하는 키워드 $data 사용법 $data로 data() 옵션에 선언한 데이터에 접근할 수 있다 첫번째 방법: 점 표기법 $data.type은 'movie'를 의미하고 $data.number는 10을 의미한다 두번째 방법: 대괄호 표기법 $data['type']은 'movie'를 의미하고 $data['number']는 10을 의미한다 예제 2022. 8. 5.
[Vue] props로 문자 데이터가 아닌 다른 데이터(숫자, 객체, 선언한 데이터 등)을 전달하는 방법 props로 문자 데이터 전달 App.vue HelloWorld.vue {{ message }} props로 문자가 아닌 다른 데이터 전달 props를 전달할때 v-bind: 디렉티브를 사용해 데이터를 전달한다. 이때 v-bind는 생략하고 :만 사용할 수 있다. App.vue :v-bind를 사용해 props값으로 숫자데이터를 전달하고 있다. 만약 :v-bind를 사용해 props값으로 문자데이터를 전달하고 싶다면 쿼트로 한번 더 감싸준다. 선언한 데이터를 속성으로 가질때도 v-bind: 디렉티브를 사용한다. // data 옵션에서 생성한 message라는 데이터를 연결했다 // v-bind:로 연결했기 때문에 message는 문자열이 아니다 2022. 7. 6.
[Vue] Vuex 개념, 설치, 사용 방법 (스토어 모듈화시키기) Vuex 개념 Vuex는 왜 필요한가? Vue에서 사용할 데이터는 data 옵션에 정의해준다. 그리고 선언한 data를 props를 사용해 하위 컴포넌트에 전달할해준다. 여기서 문제가 생긴다. 만약 선언한 data를 상위 컴포넌트에서 사용할 경우에는 data를 전달해줄 방법이 없다. 또한 어떤 컴포넌트의 하위 컴포넌트의 하위 컴포넌트가 선언한 data를 필요로할때 이 값을 전달하기 위해서는 해당 값을 필요로 하지 않는 컴포넌트도 props를 전달하기위해 선언해주어야한다는 번거로움이 있다. 이렇게 컴포넌트 내부에서 데이터를 선언해 사용하면 다른 컴포넌트에서 접근이 쉽지 않다. 이를 해결하기 위해 전역 데이터 저장소인 vuex를 사용한다. Vuex란 무엇인가? 위에서 vuex는 전역 데이터 저장소라고 하였다.. 2022. 7. 6.
[Vue/한줄정리] 싱글 파일 컴포넌트(SFC)란? CLI로 뷰 프로젝트를 생성하고 나면 App.vue라는 파일이 자동으로 생성되는데 코드에는 HTML, CSS, JS를 넣을 수 있는 섹션이 구분되어져 있다. App.vue 파일처럼 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법으로 vue 확장자를 가진 파일을 싱글 파일 컴포넌트라고 말한다. App.vue 2022. 6. 30.
[Vue] 컴포넌트 전역등록, 지역등록 전역등록 TheHeader 라는 컴포넌트를 전역적으로 등록해주었다. import { createApp } from 'vue'; import App from './App.vue'; import HelloWorld from './components/HelloWorld.vue'; createApp(App) .component('hello-world', HelloWorld); .mount('#app'); 지역등록 모듈 시스템에서 컴포넌트를 다른 컴포넌트에 지역적으로 등록하는 방법이다. 등록하고 싶은 컴포넌트를 import해준다. 2022. 6. 30.
[Vue] vite.js로 Vue 프로젝트 시작하고 ESLint, 경로 별칭까지 설정해주기 vite.js로 Vue 프로젝트 시작하기 npm으로 설치하기 npm create vite@latest yarn으로 설치하기 yarn create vite 원하는 프레임워크 선택하기 원하는 옵션 선택하기 (자바스크립트 or 타입스크립트) package.json에 명시된 패키지들 설치해주기 npm install 프로젝트 시작하기 npm run dev eslint 설정해주기 eslint 설치해주기 npm i -D eslint eslint-plugin-vue .eslintrc.json 파일 만들어주고 eslint 설정해주기 .eslint.json 파일 생성 .eslint.json 파일에 코드 넣기 (기호따라 변경 가능) { "env": { "browser": true, "node": true }, "extend.. 2022. 6. 30.
[Vue] 컴포지션 API 사용법 컴포지션 API란? Vue 프로젝트의 구성요소 data, computed, methods... 등을 유연하게 구성하여 사용할 수 있도록 도와주는 API를 말한다. 컴포지션 API가 필요한 이유 규모가 큰 어플리케이션에서 코드 공유와 재사용을 높이기 위해 컴포지션 API를 사용한다. 일반 Vue 프로젝트에서는 data 옵션에 데이터를 등록하고 computed 옵션 안에 연산된 데이터를 등록하며 methods 옵션 안에서는 함수를 등록해 사용해준다. 프로젝트의 규모가 커져 관리해야할 data, computed data, methods 등이 늘어나게 되면 관련된 기능을 가진 코드끼리 묶어주는 것이 좋다. 이를 도와주는 API가 composition API다. 일반 Vue 프로젝트(Options API)의 로직.. 2022. 6. 19.
[Vue] 요소나 컴포넌트를 참조할 수 있는 refs 사용법 refs 특정한 요소나 컴포넌트를 등록한 이름으로 참조하는데 사용하는 속성 1. 요소 참조하기 h1 요소에 ref를 hello라는 이름으로 등록해주었다. h1요소는 등록한 ref로 참조할 수 있게 된다. 참조한 요소는 HTML 구조에 연결이 된 이후에 엑세스 할 수 있으므로 mounted 라이프사이클 안에서만 등록한 요소를 ref로 찾을 수 있다. 해당 요소를 참조할때는 this.$refs.이름으로 찾아준다. Hello World 2. 컴포넌트 참조하기 요소를 참조한 것과 마찬가지로 참조하고 싶은 컴포넌트에 ref="이름"을 등록해준다. ref를 등록해주면 컴포넌트의 가장 최상위 요소를 참조해준다. 등록해준 컴포넌트의 최상위 요소는 this.$refs.컴포넌트이름.$el로 접근해준다. Hello Worl.. 2022. 6. 18.
[Vue] Provide와 Inject를 사용해 데이터 전달해주기 자식의 자식 컴포넌트에게 데이터 넘겨주기 1. props ChildComp.vue ⊂ ParentComp.vue ⊂ App.vue App 컴포넌트가 자식 컴포넌트로 ParentComp를 가지고 있고 ParentComp가 자식 컴포넌트로 ChildComp를 가지고 있다고 할때 ChildComp도 역시 App 컴포넌트의 자식 컴포넌트가 된다. 이때 App 컴포넌트에서 데이터를 ChildComp에게 props로 보내주게 되면 props가 ParentComp를 거쳐갈 수 밖에 없다. 이렇게 사용하지 않을 props를 하위 컴포넌트에게 전달하기 위해 받는 현상을 props drilling이라고 한다. 예제 App 컴포넌트의 하위 컴포넌트인 ParentComp 에게 props로 msg를 전달해주었다. ParentC.. 2022. 6. 18.
[Vue] Slot을 이용한 컨텐츠 제공 slot을 사용해 부모 컴포넌트에서 텍스트 전달해주기 slot 태그는 자식 컴포넌트에서 부모 컴포넌트가 전달해주는 텍스트를 출력할때 사용한다. App.vue에서 Apple이라는 텍스트를 자식 컴포넌트 MyBtn에 전달해주고 전달해준 텍스트는 slot 태그 안에 삽입된다. Apple slot 태그 안에 텍스트가 있는 경우 부모 컴포넌트에서 전달해준 텍스트가 더 높은 우선순위를 가지므로 출력되지 않는다. 부모 컴포넌트 안에 전달해줄 텍스트가 없는 경우에만 slot 태그 안에 있는 문자가 출력된다. Banana v-slot을 사용해 전달해줄 텍스트 순서 보장해주기 v-slot 디렉티브는 같은 이름을 가진 자식 컴포넌트의 요소에 해당하는 텍스트를 전달해준다. v-slot은 #으로 축약해서 사용할 수 있다. (B.. 2022. 6. 18.
[Vue] 이벤트를 상속시켜주는 Emit 부모 컴포넌트의 이벤트 상속받기 부모 컴포넌트의 속성을 자식 컴포넌트가 상속받을 수 있었던 것처럼 이벤트도 자식 컴포넌트에 상속 시킬 수 있다. Banana 부모 컴포넌트에서 받은 이벤트는 최상위 요소(루트 요소)에게만 전달된다. 아래 예제에서 최상위 컴포넌트는 btn이라는 클래스를 가진 div 요소이므로 해당 요소에 이벤트 @click="log"가 추가된다. 만약 부모 컴포넌트의 이벤트를 상속받고 싶지 않다면 inheritAttrs에 false값을 주면 된다. 만약 최상위 요소가 여러개면 부모 컴포넌트의 이벤트는 상속되지 않는다. I love fruits 한개 이상의 최상위 요소가 있을때 부모 컴포넌트의 이벤트를 상속받을 수 있는 방법 1. 부모 컴포넌트에서 상속받고 싶은 이벤트를 emits의 배열에 .. 2022. 6. 17.
[Vue] v-bind="$attrs"를 사용해 컴포넌트의 속성 상속시키기 부모 컴포넌트의 속성 상속받기 부모 컴포넌트 App.vue에서 MyBtn에게 class와 style 속성을 전달해주었다. Banana 부모 컴포넌트에서 받은 속성은 최상위 요소(루트 요소)에게만 전달된다. 아래 예제에서 최상위 컴포넌트는 btn이라는 클래스를 가진 div 요소이므로 해당 요소에 maple이라는 클래스가 추가되고 color: red라는 style 속성도 추가되어 화면에 출력된다. 만약 부모 컴포넌트의 속성을 상속받고 싶지 않다면 inheritAttrs에 false값을 주면 된다. 만약 최상위 요소가 여러개면 부모 컴포넌트의 속성은 상속되지 않는다. I love fruits 한개 이상의 최상위 요소가 있을때 부모 컴포넌트의 속성을 상속받을 수 있는 방법 $attrs로 부모 컴포넌트의 속성에 .. 2022. 6. 17.
[Vue] 컴포넌트 만들기 (props 전달 방법, slot 사용하기) ⚠️ 이 포스팅은 Vue3(한국어): 컴포넌트 기초를 공부하고 정리한 블로그 포스팅입니다. ⚠️ 컴포넌트란? 컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 의미한다. 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의하고 목적에 맞는 기능들을 모아놓는다. 컴포넌트는 단순한 템플릿 이상이며 데이터가 생겼을때 이에 맞춰 UI를 만들어준다 컴포넌트의 장점 1. 캡슐화 (모듈화) 2. 재사용성 증가 컴포넌트 만들어 불러오기 컴포넌트 만들어주기 컴포넌트를 불러오기 App.vue에서 MyBtn 컴포넌트를 불러왔기 때문에 두 컴포넌트의 관계는 App.vue(부모) MyBtn(자식) 관계가 된다. 부모 컴포넌트(상위 컴포넌트): 자식 컴포넌트를 불러오는 컴포넌트 자식 컴포넌트(하위 컴포넌트).. 2022. 6. 16.

티스토리툴바