하수도키의 성장일기

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 5(Teleport)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Teleport Teleport Vue 컴포넌트 설계는 비지니스 로직 계층과 표현 계층으로 구축할 수 있다. 그러나 때때로 특정한 위치에 html 렌더링을 시켜야 되는 컴포넌트가 있을 수가 있다. 예를 들면, absolute, fixed, z-index를 활용하믄 모달 팝업, 태그앞에 와야 되는 경우 Vue 애플리케이션 페이지에서 작은 부분(또는 widget)에서 실행 될때, Vue app밖에 있는 DOM으로 이동하고 싶은 경우 해결 Teleport 컴포넌트를 사용해보자. Portal이라고 불렸으나 Teleport..

개발일기/Vue.js

Vue.Js 3 Composition API에 대해 알아보자 - 4(Sharing State, Suspense)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Sharing State Suspense Sharing State API 호출 작업을 할때, 로딩 상태, 에러 상태, try/catch구문을 사용한다. Composition API에서 사용하는 법을 살펴보자. 아래는 이전 포스팅에 연장인 예제 코드이다. /src/App.js Search for Loading: {{ loading }} Error: {{ error }} Number of events: {{ results }} Sharing State Composition API 위에 살펴본 API 호출 로직(결과, ..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 3(Modularzing, LifeCycle Hooks, Watch)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Modularizing(모듈) Lifecycle Hooks(라이프사이클 훅) Watch Modularizing(모듈) Composition API 사용하는 이유는 기능별로 구분, 코드 재활용이다. 모듈을 통해 구현해보자. 현재 코드는 아래와 같다. ... 컴포지션 함수로 빼기(Extracting into a Composition Function) ... useEventSapce() 함수를 exrpot default {} 외부에 작성하고 분리했다. 그 함수를 setup() 내부에서 사용한다. 이제 컴포지션 함수를 파..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 2(Methods, Computed, The Reactive Syntax)

Vue3 Composition API에 대해 알아보자 - 2 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Methods Computed Properties The Reactive Syntax Methods 메서드는 Vue 인스턴스에서 사용된다.(함수라고 생각하면 된다.) 아래 코드에서 capacity를 1씩 증가시키는 메서드를 만들어보자. Capacity: {{ capacity }} vue2에서 메서드 사용은 아래 코드와 같다.(data()사용했을시) methods: { increase_capacity() { this.capacity++; } } vue3에서는 setup 메서드 안에서 만든 다음 return 내..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 1(setup, reactive,methods, computed)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Vue2 한계 Setup & Reactive References Methods Computed Properties The Reactive Syntax Vue2 한계 컴포넌트가 커지면 커질수록 가독성이 떨어짐 예를 들면, 검색어를 입력하고 해당 검색어로 찾은 정렬된 결과를 보여주는 컴포넌트를 살펴보자. // Vue2 export default { data() { return { 검색어 로직(Search) 결과 정렬(Sorting) } }, methods: { 검색어 로직(Search) 결과 정렬(Sorting) } ..

개발일기/Vue.js

[Vue.js] 토큰 기반 인증(#3. 사용자 등록)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..

개발일기/Vue.js

[Vue.js] Vue 테스트 코드 작성하기(Jest)

Vue에서 Unit Test(단위테스트)를 해보자. 개요 vue를 통해 unit test를 살펴보자. vue-test-utils,jest를 사용할 예정이다. 테스트를 하는 이유는 자신감 증가, 퀄리티있는 코드, 잘 정리된 문서를 꼽을 수 있다. 테스트를 위한 세팅 터미널에서 아래 명령어를 입력 후 사진과 같이 설정한다. vue create unit-testing-vue 설치가 되고 package.json파일을 열면 아래 코드가 있는데 이걸로 테스트를 한다. "scripts": { ... "test:unit": "vue-cli-service test:unit" }, npm run test:unit tests/unit 폴더에 테스트할 파일을 넣는다. 첫번째 유닛 테스트(Data 업데이트 될때 UI 변경) 로..

개발일기/Vue.js

[Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..

개발일기/Vue.js

[Vue.js] 토큰 기반 인증(#1. 인증소개)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..

개발일기/Vue.js

[Vue.js] Vue 3 Reactivity (#1)

[Vue.js] Vue 3 Reactivity (#1) 개요 이 문서는 www.vuemastery.com 에 Vue 3 Reactivity 를 보고 정리했습니다. Vue3가 드디어 릴리즈가 되었다. 아직 베타인것 같지만... Vue3 Reactivity System(반응형)에 대해 알아보자. 이걸 알면 좋은 점은?? Vue 내부 디자인 패턴 이해 Vue 디버깅 스킬 향상 Vue3 modularzied 반응형 라이브러리 사용 Vue3 소스 코드에 기여 가능 어마어마한 혜택들이 있다. 반응형(Reactivity) 이해하기 Vue 반응형은 정말 매직과 같다. 아래 코드로 어떻게 작동하는지 살펴보자. Price: ${{ product.price }} Total: ${{ product.price * product..

개발일기/Vue.js

[Vue.js] highcharts 설치 및 세팅

highcharts 설치 및 세팅 Vue.js 사용하면서 차트를 그려야 될때 highcharts를 이용해보자. 다른 차트로 만들고 싶으면 https://madewithvuejs.com/charts 요기를 참고해보자. highcharts 설치 https://www.highcharts.com/ https://npmjs.com/ 에서 highchart를 검색해보니 vue 와 관련된 라이브러리를 발견! 3개월전 업데이트가 되었고 따끈따끈해보인다. 시작하기 위해서 필요한것들이 뭐가 있는지 보자.(Requirments 클릭) Vue, Highcharts 라이브러리가 필요하다. Vue는 설치되어있고 Highcharts를 다시 검색해보자. 설치 방법은 여러가지 있으니 환경에 맞게 하자. 나는 npm install --..

개발일기/Vue.js

[Vue.js] Vue CLI 설치 및 세팅

Vue CLI 설치 및 세팅 Vue CLI 설치 하기 - 글로벌(전역)으로 설치하여 어느 곳에서든지 Vue CLI사용할 수 있게 한다. - 터미널 또는 CMD에서 아래와 같이 명령어를 입력한다. npm i -g @vue/cli Vue project 생성하기 - vue create project명으로 Vue CLI를 이용해 프로젝트를 생성한다. vue create playground - 터미널에서 여러가지 옵션을 선택해야 되는데 아래 스크린샷과 같이 설정한다. - 대략적으로 수동으로 옵션 선택, ESLint, Linter, Router, Babel, Prettier, NPM 사용한다는 내용이다. Vue Project 실행하기 - 설치된 폴더로 이동 후 프로젝트를 실행한다. cd playground npm ..