본문 바로가기

Front-end85

34. Vue - vuex 기본구조(store, module) 1. 설치 - 터미널 입력: npm i vuex@next (vue 3버전 사용시) 2. 설정 a) src - store 폴더 생성 - index.js 파일 생성 import {createStore} from 'vuex' export default createStore({ modules: { // Store 모듈이 구성되는 곳 } }) b) main.js에 index.js를 연결하기 import {createApp} from 'vue' import App from './App' import router from './routes/index.js' import store from './store' // 원래는 './store/index.js' 이렇게 경로를 작성해야 하는데, // 어떤 폴더안에 있는 inde.. 2021. 6. 8.
33. Vue - Vuex(뷰엑스) 1. 컴포넌트 간의 데이터 교류 - Vue 에서는 기본적으로 상/하위 또는 부모/자식 컴포넌트 관계에 한해서 데이터를 주고 받을 수 있다. - 이전 포스팅에서 다뤘던 부분인데, 이번 기회를 통해서 복습해보자. a) props - props는 상/하위 관계를 이용하여 데이터를 교류하는 방법이다. - 위 사진처럼, props는 반드시 중간에 존재하는 컴포넌트를 거쳐서 데이터를 전달해야 한다는 단점이 있다. - 즉, 하위 컴포넌트가 깊을수록 거쳐야 하는 컴포넌트가 많아지는 것이다. - props에 대한 자세한 내용이 궁금하다면 아래의 이전 포스팅을 참고하자. https://devraphy.tistory.com/212 20. Vue - 컴포넌트 기초(props, slot) 0. 예제코드 a) App.vue b.. 2021. 6. 4.
32. Vue - Router Link 1. Router Link란? - 홈페이지를 만들면 네비게이션이라는 것을 만들게 된다. - 네비게이션은 쉽게 말하면 메뉴다. - 흔히 a태그를 이용해서 만들지만, Vue에서는 Router Link라는 컴포넌트를 사용하기를 권장한다. 2. 동작원리 - Router Link는 Router View와 함께 사용된다. - index.js에 할당된 라우팅 페이지들이 Router View에서 출력된다. - 그리고 Router Link를 사용하여 특정 Vue 페이지를 URL에 할당하는 것이다. - 예제코드를 직접 보면서 이야기 하자. [파일경로] [Header.vue] {{ nav.name }} [App.vue] [index.js] import {createRouter, createWebHashHistory} fro.. 2021. 6. 1.
31. Vue - 부트스트랩(Bootstrap) 1. Bootstrap 버전 5 설치 터미널 입력: npm i bootstrap@next 2. Bootstrap 설정 [파일 경로] [main.scss] @import "../../node_modules/bootstrap/scss/bootstrap" // 부트스트랩 [App.vue] 3. Bootstrap Customization https://getbootstrap.com/docs/5.0/customize/sass/ Sass Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project. getbootstrap.c.. 2021. 6. 1.
30. Vue - 라우터(Router, Routing) 1. 설치 https://next.router.vuejs.org/installation.html Installation | Vue Router Installation Direct Download / CDN https://unpkg.com/vue-router@4 Unpkg.com provides npm-based CDN links. The above link will always point to the latest release on npm. You can also use a specific version/tag via URLs like https://unpkg.com/vue-router@4.0. next.router.vuejs.org a) Vue Router를 개발 의존성( -D) 으로 설치하지 않는이유.. 2021. 5. 31.
29. 컴포지션 API 활용(lifecycle, refs, props, context) 1. 반드시 읽어야 하는 공식 문서 - 지금까지 배운 내용을 컴포지션 API 형태로 작성하기 위해서 반드시 읽는 것을 권장합니다. - 전혀 어렵지 않으니 한번쯤 꼭 훑어보고 아래의 전환 예제를 따라 해보기를 권장합니다. 컴포지션 API의 Setup 공식문서 컴포지션 API의 라이프사이클 훅 공식문서 컴포지션 API의 provide와 inject 공식문서 컴포지션 API의 refs 공식문서 2. 컴포지션 API로 코드 전환 예제 [기존의 작성 방식] {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} [컴포지션 API 작성방식] {{ count }} / {{ doubleCount }} {{ message }} / {{ reversed.. 2021. 5. 28.
28. Vue - 컴포지션 API 작성방법 1. 예제 코드 [App.vue] {{ count }} [출력화면] [코드 설명] - 위의 코드는 화면의 숫자를 클릭하면 increase 메소드가 작동하여 숫자가 증가하는 방식이다. - this를 사용하여 데이터 객체인 count를 참조하여 반응성을 활용한 코드이다. - 위의 코드를 기반으로 컴포지션 API를 작성해보자. 2. 컴포지션 API 전환 a) 1차 전환 - 반응성이 구현되지 않은 상태 [App.vue] {{ count }} - 위의 코드를 구현한 뒤, 실제로 숫자를 클릭해보면 increase가 작동하지 않는 것을 확인할 수 있다. - 더 정확히 이야기 해보면 increase 메소드가 작동하지 않는 것이 아니라 화면이 업데이트(= 새로고침)되지 않는 것이다. - 즉, 반응성의 구현이 되지 않은 .. 2021. 5. 28.
27. Vue - 컴포지션 API란? 1. 공식 문서 공식문서 바로가기 소개 | Vue.js 소개 컴포지션 API가 필요한 이유 Vue 컴포넌트를 만들면 재사용 가능한 코드 조각으로 결합되어진 인터페이스의 반복가능한 부분들을 추출할 수 있습니다. 이것만으로도 어플리케이션에서 유지 v3.ko.vuejs.org 2. 컴포지션 API란? - Vue 객체를 만들다 보면 다양한 속성(data, computed, methods, etc)들을 작성하게 된다. - 이전의 포스팅에서도 많이 사용해 보았지만, 단순한 예제코드를 이용했기 때문에 코드를 이해하고 읽는데에 큰 불편함이 없었다. - 하지만, 코드가 복잡해지면 속성의 내용이 복잡해지면서 어떤 코드가 어떤 기능을 하는지 구분하기가 힘들어진다. - 정리하자면, 코드의 가독성과 이해도가 떨어진다. - 이처.. 2021. 5. 28.
26. Vue - 컴포넌트 Refs 1. Refs란? - Vue에서만 제공하는 개념으로, 특정한 컴포넌트 또는 요소를 참조하는 방식을 말한다. - 기존에 JS를 사용하여 컴포넌트를 참조하는 방법을 개선시킨 형태다. 2. Refs를 사용하는 이유 a) 예제코드 [App.vue] Hello world! - h1태그가 갖고있는 내용을 콘솔에 출력하고 싶은 경우, 위와 같은 코드를 작성할 수 있다. - 그러나 Vue에서 제공하는 Refs를 사용하면 보다 적은 줄의 코드로 동일한 기능을 사용할 수 있다. b) Refs 예제코드 [App.vue] Hello world! [출력화면] c) 코드해설 - HTML 엘리먼트에 id 또는 class 명으로 선택자를 사용했다면, Vue Refs에서는 ref라는 속성값을 사용하여 선택자를 생성한다. - ref 선.. 2021. 5. 28.

티스토리툴바