# vue3

22개의 포스트
post-thumbnail

Vue3 Lifecycle

composition api lifecycle

2021년 7월 4일
·
0개의 댓글
post-thumbnail

Vue3 Composition API

Vue3는 리액트냄새나...

2021년 7월 4일
·
0개의 댓글
post-thumbnail

Vue.js #2 템플릿 문법(v-model, v-html, mustache)

화면을 구성해주는 👉 template실질적인 기능을 담당하는 👉 script화면의 디자인을 담당하는 👉 styleVue파일에서 변수처럼 작성해주기 위해서 export default안에 data라는 메서드를 작성해준다.data를 작성하는 방법1.data:()=>{}

2021년 6월 30일
·
0개의 댓글
post-thumbnail

Vue.js #1 시작하기

vue/cli 설치 해주기npm install -g @vue/clivue project 생성vue create vue-practice옵션선택(새로나온 vue3 연습)Default (Vue 3) (Vue 3 babel, eslint)설치가 다 된 다음 $ cd vue-p

2021년 6월 30일
·
0개의 댓글
post-thumbnail

vue3에서 전역 변수 선언하기

최근에 vue3으로 채팅 기능이 있는 웹을 만들고 있다. main.js에서 선언된 socket 인스턴스를 다른 컴포넌트에서도 쓸 수 있게 전역 변수로 두려고 했는데, 잘 안 되는 것이다. vue2에서 vue3으로 넘어가면서 워낙 업데이트가 잦다 보니 한참 구글링 하고 나서야 찾았다. vue3에서 전역 변수 선언하기 이 글에서의 vue 버전은 3.0.0이...

2021년 6월 25일
·
0개의 댓글
post-thumbnail

[Vue 3] Vue-CLI 4 설치방법

프로젝트를 설치할 폴더를 하나 생성 후,cmd에서 이동 후 설치하자.frontend 는 프로젝트 이름으로 원하는 걸로 바꿔서 설치하자.2번째 라인의 'Default (Vue3) (Vue 3 babel, eslint)' 선택이제 'http://localhost:

2021년 6월 16일
·
0개의 댓글
post-thumbnail

[Vue3] Vue 3 기초

Vue CLI로 생성한 Vue 프로젝트를 비교해보자.화살표 함수를 통해 함수를 정의할 수 있다.return 해주면 template 태그에서 접근이 가능하다.greeting 함수의 값을 greet에 저장하여 사용할 수도 있다.

2021년 6월 3일
·
0개의 댓글
post-thumbnail

Composition API를 활용해보자 😉

새로운 반응형 시스템의 가장 중요한 포인트는 주입된 반응형을 Vue 컴포넌트 외부에서도 조작 할 수 있다는것이다.

2021년 5월 26일
·
0개의 댓글
post-thumbnail

Vue 3.1.0-beta 마이그레이션 빌드 문서 번역

릴리즈된 Vue 3.1.0-beta 버전에 포함된 마이그레이션 빌드 문서 요약내용이다. @vue/compat(일명 "마이그레이션 빌드")은 Vue 2의 동작이 호환되는 구성을 제공하는 Vue 3의 빌드이다.

2021년 5월 9일
·
0개의 댓글
post-thumbnail

Vue.js 3 정리하기 (Vue-CLI 4, Vue 3, Composition API, TypeScript, Vuex 4)

Vue-CLI 4, Vue 3, Composition API, TypeScript, Vuex 4, 프로젝트 구성, Vue 3 컨퍼런스(Vueconf.US) 키노트 내용을 정리해놓은 글입니다.

2021년 4월 15일
·
1개의 댓글
post-thumbnail

vue로 ios 스타일 actionSheet 만들어보기

web-view에서 dropdown을 띄울 경우 os별 기본 브라우저의 dropdown이 나오는데 기획상 android와 ios 둘 다 같은 ui를 제공해야 했다. 결국은 커스텀 디자인으로 가게 되었지만 그전에 목표로 했던 ios의 기본 actionSheet 구현과정

2021년 2월 21일
·
0개의 댓글
post-thumbnail

xlsx를 이용한 엑셀 임포터 구현하기

엑셀 파일을 업로드하면 내부적으로 처리할 수 있도록 엑섹의 내용을 json형식으로 변환하는 컴포넌트를 구현해보려한다. XLSX?공식 문서여러 스프레트시트 포맷의 데이터 파싱 또는 작성을 쉽게 해주는 라이브러리이다. 크로스브라우징 대응도 잘되어있고 issue관리나 버전

2021년 2월 14일
·
0개의 댓글
post-thumbnail

v-model의 IME 입력방식 이슈와 custom input mask

input masking을 라이브러리를 사용않고 구현하다가 한글입력시 키보드 입력에 바로바로 v-model값이 업데이트가 안되는 문제를 발견했다.문제 발견 전: v-model과 keyup으로 구현된 마스킹H:MM:SS 형식의 마스킹을 원했기 때문에 keyup 이벤트가

2021년 2월 2일
·
2개의 댓글
post-thumbnail

Vue3 에 Google OAuth2.0 붙이기!

비록 express 로 서버를 만들고는 있지만 가능한 간편하게 하기 위해서 frontend 선에서 인증 기능을 구현하기로 했다. 더불어 내가 인증 기능을 만들긴 싫어서 Google OAuth를 쓰기로 한다.

2021년 1월 17일
·
1개의 댓글

Vue3 에 vue-route 추가하기

멋모르고 npm install vue-router 추가했었는데 잘 안되더라. 알고보니 vue-router@next 를 설치해야했었다.

2021년 1월 15일
·
0개의 댓글
post-thumbnail

Vue + Express 웹 사이트 만들기 (2) Vuex 4.0 Migration

vuex 신규 버전이 있다는 소식을 접했고 새 거 처돌이는 마이그레이션을 하기로 했다! Vuex 4.0을 사용하려면 Vue 역시 2.x에서 3.x 로 버전업해주어야 한다.이전 작업에서 frontend 소스를 건드린게 없으니 과감하게 지워버리고 vue 3를 새로 설치한다

2021년 1월 13일
·
2개의 댓글
post-thumbnail

[Vue.js] vue-router #3 - 중첩된 라우트

실제 앱 UI는 일반적으로 여러 단계로 중첩된 컴포넌트로 이루어져 있다.

2021년 1월 9일
·
0개의 댓글
post-thumbnail

[Vue.js] vue-router #1

Vue 라이브러리를 이용하여 SPA를 구현할 때 사용하는 페이지 이동 라이브러리

2021년 1월 9일
·
0개의 댓글
post-thumbnail

TIL | Vue.js 구조 파악 하기

Vue CLI 를 이용하여 복잡합 웹팩을 이용하지 않고 기본 세팅이 완료되어 있는 상태로 개발을 시작 할 수 있다.공부할 때 사용했던 파일이라 기본적인 세팅이 정확이 이렇다긴 어렵지만 기본적으로 App.Vue를 거쳐 Index.html를 통해 내용이 화면에 랜더된다.

2020년 12월 27일
·
0개의 댓글
post-thumbnail

Vue 프로젝트를 단일 HTML 파일로 빌드하기

Vue3를 이용하여 작성하였는데, vue.config 사용방식은 동일하여 Vue2에도 적용이 가능합니다.vue-router 이전버전에서는 router mode를 hash로 변경해야 합니다.어쩌다가 가벼운(?) 어드민을 만들었는데, 하나의 HTML 파일로 번들링을 하게되

2020년 12월 16일
·
0개의 댓글