하수도키의 성장일기

개발일기/Nuxt.js

[Nuxt] Nuxt란? (Nuxt 메인 페이지 분석)

열심히 글 쓴 게 날아가서 후다닥 씁니다... 후아... Nuxt3 정식 배포된 기념으로 튜토리얼 형식으로 공식문서 격파 포스팅! 여기부터 Nuxt 메인 페이지에 있는 내용들 정리(구글 번역, 심각한 수준의 의역) 틀린 거 있으면 알려주세요! https://nuxt.com/ Nuxt: The Intuitive Web Framework Global Maintainers Summit Event 2021 globalmaintainersummit.github.com nuxt.com Nuxt란? 직관적인 웹 프레임워크라고 공식 홈페이지에 대문짝 하게 걸려있다. Build your next Vue.js application with confidence using Nuxt. An open source framewor..

개발일기/Vue.js

[Vue.js] 이벤트 전파(버블링, 캡쳐링) 살펴보기

오랜만에 쓰는 포스팅이다. 이번에는 Vue에서 이벤트 전파에 관련된 포스팅을 쓰고자 한다. 자바스크립트 이벤트 버블링, 캡쳐링, 위임, 전파 등 여러 가지 아마 살펴봤을 걸로 기억한다. 면접이나 기술 질문에도 대부분 포함되는걸로 알고 있다. 그럴 때마다 공부하고 이해하고 다시 까먹고 반복 중이다. 이해가 안 되거나 잘 모르겠으면 우선 외우는 게 중요한 것 같다. 여기까지 온 사람이라면 아마 우선 외워야 할 것 같다. 개요 Vue를 통해 이벤트 Phase를 알아보기 버블링, 캡쳐링 살펴보기 Vue event modifier (prevent, self, stop) 살펴보기 예제 코드 Outer first Inner Inner 예제는 어떤 포스팅에서 보고 테스트한 거 같은데 출처를 잃어버렸다. 우선 이벤트에 ..

개발일기/Vue.js

[Vue.js] Vue 애니메이션(Animate) #3 - GSAP 3

[Vue.js] Vue 애니메이션(Animate) #3 - GSAP 3 이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버 상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 애니메이션을 적용해 집중력을 높일 수 있다. 목차 Transition Page Transition Transition Group Javascript Hooks + Velocity GSAP(이번 포스팅) 개요 이전 포스팅에서는 Velocity.js 라이브러리를 사용했다. 이번 포스팅에선 GSAP(Green Sock Animation Platform) 강력하고 인기 있는 애니메이션 라이브러리를 Vue 에 적용하고 사용하는 법을 알아보자. GSAP이..

개발일기/Vue.js

[Vue.js] Vue 3 + TypeScript #3 - 컴포넌트 만들기(Creating Components with TypeScript)

지난 포스팅에서 Vue3 + TypeScript를 세팅 완료했으니 이제 컴포넌트를 만들어보자. 타입 스크립트에서는 어떻게 Single File Components가 변경되었는지 살펴보자. TypeScript 컴포넌트 변화(TypeScript Changes in Single File Components) 개발 언어 속성(The Language Attribute) 싱글 파일 컴포넌트에서 script 태그에 보면 lang 속성이 추가되었다. 자바스크립트 사용할때는 없었는데 타입 스크립트 사용 시에는 명시를 해줘야 한다. 타입스크립트로 전환하기 위해서 해야 될 일 1. script 태그에 lang 속성 정의 2. 헬퍼 메서드(defineComponent) import 하기 3. 헬퍼 메서드(defineCompo..

개발일기/Vue.js

[Vue.js] Vue 3 + TypeScript #2 - 세팅하기(Setting Up Vue 3 & TypeScript)

이번 포스팅에서는 Vue 3 + TypeScript 세팅하는 법과 기존 Vue 3 프로젝트에 TypeScript를 추가하는 법을 알아보자. 2021/03/05 - [개발일기/Vue.js] - [Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript) [Vue.js] Vue3+Typescript #1 - Vue, TypeScript 사용하는 이유(Why Vue & TypeScript) 이번 포스팅 주제는 Vue3와 TypeScript 사용하기이다. 이 포스팅 전체는 아래 강의를 바탕으로 의역하면서 정리한 내용이다. Why Vue & TypeScript - Vue 3 + Typescript | Vue Mastery Learn abo..

개발일기/Vue.js

[Vue.js] 모달 컴포넌트(Modal Component) 만들기

이번에는 Vue.js에서 모달 컴포넌트를 만드는 방법을 살펴보겠다. 항상 궁금했다. 모달 팝업, 모달 컴포넌트 등등 모달을 부르는 말을 듣고 대충 어떤건지 감이 오는데 정확히 어떤건지 몰라서 찾아봤다. 모달(Modal)이란? 간단하게 설명하면, 자식 윈도우에서 부모 윈도우로 돌아기전에 뜨는 창을 말한다. 예를 들면, '정말 종료하시겠습니다?','뒤로 가시겠습니까?' 이런 대화의 종류이다. 웹에서는 어떤 액션을 취한 뒤 알려주는 용도나, 긴급상황을 알려주는 용도 등으로 많이 사용 된다. 개요 App, Content, ModalView 컴포넌트를 생성하기 버튼 누르면 모달이 보여지고 컨텐츠 밖을 클릭하면 사라진다. App 컴포넌트 만들기 Content, ModalView 컴포넌트..

개발일기/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] 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 ..