seong.on2e

Vue.js 에서 async 와 await 사용도중 아래와 같은 regeneratorRuntime is not defined 에러가 발생했는데 해결방법은 아래와 같다. 해결방법 : babel-polyfill 관련 모듈을 설치해준다음 import를 해주면 해결된다! npm install --save-dev babel-polyfill npm install --save-dev babel-plugin-transform-regenerator npm i babel-plugin-transform-runtime import 'regenerator-runtime/runtime' 참조: [vuejs]regeneratorruntime is not defined vue async 에러 해결 vuejs 에서 store 관련 a..

Computed 속성 computed 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성이다 {{ message.split('').reverse().join('') }} 위 코드는 message라는 데이터 속성의 문자열 순서를 역으로 변환해주는 코드이다. 이와 같은 계산식이 템플릿에 많아지면 템플릿의 가독성이 현저히 떨어진다. 따라서 아래와 같이 computed 속성을 활용한다. {{ reversedMessage }} 해당 기능을 Methods 속성을 사용 할 수도 있지만 computed는 data 속성에 변화가 있을때 자동으로 다시 연산을 한다. computed에서 사용하고 있는 data속성인 message라는 프로퍼티가 변화가 있을때만 다시 연산을하고 한번 연산한 값을 캐싱 해놓았다가..

Vue.js에서 체크박스에 바인딩 된 모델의 값은 기본적으로 true / false 이지만 특정 상황에선 다른 문자로 치환이 필요한경우가있다 이럴때 체크 유무를 따져서 값을 변경해주는 방법 이외에 input의 true-value와 false-value props를 사용한다. 이때 주의할점은 form submit시 체크 되지않은 값은 전송되지 않는다. 참고 https://kr.vuejs.org/v2/guide/forms.html#%EC%B2%B4%ED%81%AC%EB%B0%95%EC%8A%A4-1 폼 입력 바인딩 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org

이전글: [Web/Vue] - [Vue] 4-1. Component 부모에서 자식으로 데이터전송 [Vue] 4-1. Component 부모에서 자식으로 데이터전송 https://kr.vuejs.org/v2/guide/components.html 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 컴포넌트 작성 컴포넌트는 부모-자식 관계에서 가장 일반적으로 함께 사용하기.. tjddnjs625.tistory.com Emit : 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때 사용됩니다. 먼저, 상위 클래스에서 컴포넌트를 삽입할 때 v-on:xxx(약어 @xxx)를 사용해 커스텀 이벤트를 만듭니다. 여기서 cChangeName은 자식컴포넌트에서 this...

컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 컴포넌트 작성 컴포넌트는 부모-자식 관계에서 가장 일반적으로 함께 사용하기 위한 것입니다. 컴포넌트 A는 자체 템플릿에서 컴포넌트 B를 사용할 수 있습니다. 그들은 필연적으로 서로 의사 소통이 필요합니다. 부모는 자식에게 데이터를 전달해야 할 수도 있으며, 자식은 자신에게 일어난 일을 부모에게 알릴 필요가 있습니다. 그러나 부모와 자식이 명확하게 정의된 인터페이스를 통해 가능한한 분리된 상태로 유지하는 것도 매우 중요합니다. 이렇게하면 각 컴포넌트의 코드를 상대적으로 격리 할 수 있도록 작성하고 추론할 수 있으므로 유지 관리가 쉽고 잠재적으로 쉽게 재사용 할 수 있습니다. Vue.js에서 부모-자식 컴포넌..

setInterval let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...) setInterval은 함수를 주기적으로 실행하게 만듭니다. 함수 호출을 중단하려면 clearInterval(timerId)을 사용하면 됩니다. 예제 Vue 에서 3분타이머 만들기 export default { name: "Timer", data: function() { return { Timer: null, TimeCounter: 180, TimerStr: "03:00" }; }, mounted: function() { //문자발송성공시 호출 if(this.Timer != null){ this.timerStop(this.Timer); this.Timer = nul..

[Vue] 2-2. 프로젝트 생성 (Manually select features) 2021.03.10 - [Programing/Vue] - [Vue] 2-1. 프로젝트 생성 Defualt ([Vue2] bavel , es.." data-og-host="tjddnjs625.tistory.com" data-og-source-url="https://tjddnjs625.tistory.com/17" data-og-url="https.. tjddnjs625.tistory.com 1. 페이지 생성 앞선 포스팅에서 생성한 프로젝트의 Views 폴더안에 vue 파일을 생성한뒤 template 태그 안에 Html 내용을 작성한다. 위처럼 생성한 Index.vue 파일을 Router 에 등록 해줘야 페이지 라우팅이 가능하므..

[Vue] 2-1. 프로젝트 생성 1. CMD 실행 하여 프로젝트 파일 설치 경로 이동 cd D:\WorkSpace_Study d: 2. Vue 프로젝트생성 vue create study-project 해당명령어 입력시 아래와 같은 옵션선택창이 노출된다. > Defualt ([Vue2] bavel , es.. tjddnjs625.tistory.com 위글에서 셋팅한 방법은 Java 에서 Legacy Project 처럼 하나하나 직접 셋팅해줘야하는 불편함이 있었다. spring boot 처럼 자동으로 설치하기 위해선 Manually select features 로 자동셋팅이 가능하다. 1. Vue 프로젝트생성 vue create study-project 해당명령어 입력시 아래와 같은 옵션선택창이 노출된다...

1. CMD 실행 하여 프로젝트 파일 설치 경로 이동 cd D:\WorkSpace_Study d: 2. Vue 프로젝트생성 vue create study-project 해당명령어 입력시 아래와 같은 옵션선택창이 노출된다. > Defualt ([Vue2] bavel , eslint) > Defualt (Vue3 Preview) ([Vue3]bavel , eslint) > Manually select features 위옵션중 Vue 버전을 선택하면된다. vue3는 아직 preview 이기때문에 vue2 로 설치 3. VS Code에서 해당 프로젝트 열기 위와 같이 프로젝트가 생성되었다면 packpackage.json 에서 프로젝트의 정보를 정의하고, 의존하는 패키지 버전 정보를확인할수 있다. 이제 해당 프로..

1. Node 설치 npm(node package manager)을 이용해 vue를 설치하기 위해 Node.js 를 설치한다. Node.js Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치후 cmd 창을 열어 아래 명령어를 실행하여 vue 와 vue-cli 를 설치한다 Vue CLI는 Vue.js 프로젝트 생성을 돕는 vue 공식 CLI 이다. Vue CLI를 통해서 vue 명령어를 사용할 수 있게되고, 빠른 프로젝트 생성 및 관리를 할 수 있게 된다. 아래와 같이 npm, yarn 명령어를 사용해서 설치 할 수 있다. --vue.js 설치 npm install -- vue-cli설치..