✔️웹팩이란?모듈 번들러이다.서로 연관이 있는 모듈 간의 관계를 해석하여 정적인 자원으로 변환해 주는 변환 도구이다.(= 파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해 주는 변환 도구)기본적인 취지: 애플리케이션 동자고가 관련된 여러개의 파일(html, css js, images etc)들을 1개의 자바스크립트 파일 안에 넣고, 해당 자바스크립트 파일만 로딩해도 웹앱이 돌아가게 하자는 것 💪✔️주요 속성entry : 웹팩으로 빌드(변환)할 대상 파일을 지정하는 속성. entry로 지정한 파일의 내용에는 전체 애플리케이션의 로직과 필요한 라이브러리를 로딩하는 로직이 들어간다.output : 웹팩으로 빌드한 결과물의 위치와 파일 이름 등 세부 옵션을 설정하는 속성loader : 웹팩으로..

에러 발생Header와 Footer component 생성 후 빌드 시 아래와 같은 에러 발생Component name "Header" should always be multi-word vue/multi-word-component-names Component name "Footer" should always be multi-word vue/multi-word-component-names  에러 원인에러 문구에 나와 있듯이 에러의 원인은 컴포넌트 명칭이 하나의 단어로 되어 있기 때문에 발생하고 있다.Vue에서는 컴포넌트나 name을 만들 때, 두 단어의 조합으로 해야한다는 규칙이 있다.그래서 위와 같이 Header나 Footer 등의 일반적인 이름도 에러로 인식한다.  해결 방법1. package.jso..

.vue 페이지 네 태그를 입력 후 빌드되지 않는 오류가 있었다. OpenSSL 레거시 모드 활성화로 해결했다. 1. 터미널 창을 열어 cross-env 패키지 설치npm install cross-env --save-dev  2. 프로젝트 내 package.json 파일 수정 ( "scripts" 부분만 수정해야 함.) "scripts": { "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --mode development", "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --mode production"}

이번 포스트에서는 SPA에서 가장 중요하다 이야기 되는 컴포넌트에 관해 이야기 할 것입니다.1. 기본 예제// Define a new component called button-counterVue.component('button-counter', { data: function () { return { count: 0 } }, template: 'You clicked me {{ count }} times.'});위의 예제는 라는 이름으로 재사용이 가능한 컴포넌트입니다. Vue.component('button-counter', { data: function () { return { count: 0 } }, template: 'You clicked me {..

이번 포스트에서는 Vue.JS에서 비슷한 특징을 가진 computed 속성과 watch 속성의 특징을 이야기 하려고 합니다.1. computed 속성템플릿 문법([Vue.JS] 템플릿 문법 참고)에서 JavaScript 표현식을 사용하면, 쉽게 원하는 데이터를 DOM에 그릴 수 있습니다. 하지만 복잡한 연산을 템플릿 안에서 하게 되면, 코드를 이해하고, 유지보수하기 어려워집니다. {{ message.split('').reverse().join('') }}위의 예제는 템플릿 문법 안에서 JavaScript를 사용하여 message를 역순으로 출력한 예제입니다. 지금은 단순해 보일 수도 있지만 좀 더 복잡한 로직을 사용한다면 computed 속성을 사용하는 것이 좋습니다.computed 사용 방법 원본 ..

1. 이벤트 리스너v-on 디렉티브는 이벤트 리스너입니다. v-on 디렉티브는 DOM 이벤트가 발행하는지 듣고 있다가 이벤트가 발생 했을 때 JavaScript를 실행합니다. Add 1 위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다.new Vue({ el: '#app', data: { counter: 0 }});위의 예제는 v-on이라는 이벤트 리스너가 click 이벤트가 발행하는지 듣고 있다가 이벤트가 발생 되었을 때 간단한 JavaScript를 실행하는 예제입니다. CodePen에서 결과를 확인 할 수 있습니다.2. 메소드 이벤트 핸들러대부분의 이벤트 핸들러의 로직은 복잡하기 때문에 v-on에 JavaScript로 넘겨주기 어렵습니다. 그렇기 때문에 v-on에 method..