Vue 3.0 강의

https://code.visualstudio.com/Live Server: 작성된 html을 자체 내장 서버에서 실행시켜 준다.Vue Language Features(Volar): Vue 공식 추천 extensionVue 3 Snippets: Snippets

Node.js 업데이트 하기1) node -v2) npm cache clean -f3) npm install -g n4) n lts1) Node.js 현재 버전 확인2) npm 캐쉬 삭제 (오류발생 할 수 있음)3) n 플러그인 설치 : 노드 버전관리 플러그인 4) N

npm install @vue/clinpm install -g @vue/clinpm update @vue/clinpm uninstall @vue/clinpm config get prefixhttps://bjy2.tistory.com/180

Vue CLI 설치 Vue CLI: Vue 프로젝트를 빠르게 구성하고 빌드, 디플로이 할 수 있게 도와주는 도구 npm install -g @vue/cli 명령어로 설치 Default 옵션으로 프로젝트 설치하기 Vue 프로젝트 생성 vue cr

데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API 를 지원하는데에 궁극적인 목적이 있음Angular에서 지원하는 양방향 데이터 바인딩 을 동일하게 제공하지만 컴포넌트 간 통신의 기본 골격은 React의 단방향 데이터 흐름(부모 -> 자식)을 사용다른

이 이벤트라는게 존재하는 이유는 어떠한 이벤트가 발생했을 때 그에 맞는 반응을 해주기 위해서겠죠~! 따라서 이벤트는 일반적으로 함수에 연결되며, 이 함수를 이벤트 핸들러(Event Handler) 라고 합니다.https://jhyonhyon.tistory.co

웹팩에서, 애플리케이션 코드를 각각 다른 파일로 나눈것을 chunk라고 부른다.하나의 번들 파일을 효과적으로 다루기 위해 여러가지의 파일로 다시 나누는 것사용자가 서비스를 이용하기 위해 기다리는 시간을 최소화하기 위해 사용되는 것사용자가 필요한 리소스들의 복사본서버에

Props 중심 컴포넌트의 문제점 위와 같이 Props가 거대해 지면 컴포넌트 이해와 확장이 어려워 진다. slot이란? 슬롯을 이용하면 정해진 공간을 마음대로 채울 수 있다. 슬롯은 표준 html 요소처럼 컨텐츠를 넘길 수 있도록 해주는 도구다. 여러개의

직계 부모보다 더 상위의 부모로부터도 데이터를 주입을 받을 수 있다.따라서 템플릿에 속성으로 데이터 전달을 명시하는 props와는 달리 provide/inject는 데이터 흐름을 직관적으로 알 수 없고, devtools 에서도 확인할 수 없다. Vue.js 공식 가이드

Vue2 버전의 앱 생성구문import Vue, { createApp } from 'vue';​createApp(App).use(store).mount("\~\~~Vue2Vue3 Vue 3에서는 필요한 모든 객체를 반환하는 함수로 데이터를 간주Vue 3에서는 데이터를

Vue component와 component의 데이터 전달을 하기 위한 방법 중 하나component와 component는 부모와 자식 관계가 성립 되어야 한다.단반향 데이터 흐름을 가진다.(one-way-down binding) 👉 아래는 부모 자식 관계가 성립 되

숫자 n 을 파라미터로 받아와서 다섯번에 걸쳐 1초마다 1씩 더해서 출력하는 작업을 setTimeout 으로 구현코드 읽기가 복잡하죠? 이런 식의 코드를 Callback Hell (콜백지옥)const myPromise = new Promise((resolve, reje

async와 await의 사용법은 매우 간단함수앞에 async를 붙이면 해당 함수는 자동으로 프로미스를 반환하게 됩니다비동기로 처리되는 부분에 await를 붙이면 해당 프로미스가 끝날때까지 기다립니다. (동기적으로 처리)await은 async가 붙은 함수 안에서만 사용

target 감싸질 객체. Proxy의 대상이 되는 객체handler target의 여러 트랩을 정의📌 예제 코드1️⃣ Proxy: \[Get]이번에는 proxy에 핸들러를 추가해서 가장 기본적인 동작인 get부터 사용해보자get은 객체의 값을 읽을 때 호출된다get

https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%83%80%EC%9E%85-%EC%84%A0%EC%96%B8-%EC%A

const state = reactive({ msg: 'Hello TypeScript' as string,});interface State { msg: string;}const state = reactive({ msg: 'Hello TypeScript',});con

자바스크립트로 개발을 하다보면 this를 다룰일이 많이 있다.자바스크립트에서 this는 현재 코드가 실행되는 상황에 따라 할당되는 값이 달라지는데, 언제 어떤 값이 this에할당되는지 제대로 이해하지 않고 대충 얼버무리고 넘어간다면 어디가서 JS좀 한다 같은 소리는 고

<input :value="text" @input="event => text = event.target.value">위를 간단하게 v-model 을 이용하면 아래와 같이 간단하게 표현 이 가능 하다.한마디로 v-model 은 data + event 를 동시에

아래의 코드를 실행 시키면, reverseMessage는 4번 호출 되지만 comptedMessage는 한번 밖에 호출 되지 않는다.methods의 경우 함수를 의미하는 ()붙여서 호출해야한다.computed에서는 인자를 넘길 수 없음computed에서는 반드시 ret

📌 Computed? Watch? Computed 사용법 omputed 내에 fullName이 정의되어 있고, firstName과 lastName을 합쳐서 반환해주는 함수로 정의되어 있다. 여기서 함수 명인 fullName은 함수이자 동시에, Vue 인스턴스 데이

prettier 사용중 html 태그들까지 자동 줄바꿈 처리가 됨 아래처럼 한 줄로 나오게 하기.. 해결방법 완전히 방지할 수 있는 방법은 찾지 못했고 길이에 따라서 줄바꿈 되도록하는 법을 찾았다 prettier 설정파일 .prettierrc에서 줄바꿈 적용 길

설치 링크https://www.postman.com/downloads/설치를 한 후에 sign in을 한다.use authorization token to sign in을 누르면 token이 나오는데 그 token을 Postman 프로그램에서 sign in 할

로또를 아래와 같이 만들어 보자 CLI 세팅 순서 >$ npm install -g @vue/cli >$ vue.cmd create {프로젝트 명} vue Basic 선택 > npm install 최신 버전 에러를 위해 아래의 명령어 실행 npm config s

아래의 사이트에 들어가https://github.com/coreybutler/nvm-windows/releasesnvm-setup.zip 을 다운로드 한다.zip파일 안에는 setup 파일이 하나 있는데 이를 열고 설치해줍시다.따로 설정할 거 없이 동의만 해주

createdbeforeMountmounteddestroyed

npm i vue-router@next명령어를 실행 후 package.json 파일에 dependencies에 vue-router가 있는지 확인합니다.있으면 설치가 잘 된 것입니다.src 아래 router 폴더를 만들어 줍니다.router 폴더 안에 index.js 파

1.Vuex 란? >상태를 관리하는 라이브러리 >Vuex라는 저장소를 두고 같이 쓰는 값들은 하나의 저장소를 통해 관리하고 저장소를 바라보도록 함 2.설치 방법 >npm install vuex --save https://mine-it-record.tistory.co

더 적은 상용구로 더 간결한 코드 작성 가능순수 TypeScript 를 사용해 props 및 emit 이벤트를 선언하는 기능더 뛰어난 런타임 성능 ( 템플릿은 중간 프록시 없이 동일한 범위의 렌더 함수로 컴파일됨 )더 뛰어난 IDE 유형의 타입 추론 성능 ( 언어 서버