지혜를 창출할 창고

안녕하세요. webpack에서 제공하는 자동 빌드와 dev-server 옵션 추가에 대해 기록하고자 합니다. 먼저 저는 기본적으로 intellij 를 사용하고 있습니다. 이 IDE 툴은 자동 저장은 있지만, live server 같은 기능은 없습니다. (제가 모르는 것일 수 있습니다.) 간단한 html을 작성할 때에는 visual studio code에 plugin인 Live Server를 추가하여 활용합니다. 명령어 Alt + L, Alt + O 주로 java 기반의 server 쪽 로직을 다루기에 이번 Vue 공부를 시작으로 front 쪽 편의 기능들을 기록하게 되었습니다. webpack auto build npm run build 기본적으로 webpack의 관리로 front 코드가 수정되면 위의 명..

안녕하세요. webpack.config.js 파일을 익히던 중 에러를 마주한 내용을 기재하려고 합니다. 문제는 npm run build를 실행했을 때 확인된 내용이고, 설정에는 이상이 없었습니다. 그렇지만 npm 설치를 여러가지 한 상황에 의존성 모두 failed를 뿜어내는 log는 마주하는 순간 오늘 잠 못자려나 싶었습니다. 관련된 error 내용은 불필요하다 싶은 부분은 다 지웠고 templateLoader, vue loader 이러한 애들이 작업할 때 오류가 난다는 것인데 막막했던 부분입니다. ● 에러 내용입니다. Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js): / 더보기 ERROR in ./Bas..

안녕하세요. Vue js의 문법을 습득하며 다시 정리해보기 위해 글을 작성합니다. CDN 먼저 vue를 사용하기 위해 필요한 cdn입니다. 가장 최신 버전의 vue를 제공합니다. VUE INSTANCE -인스턴스 생성 VUE COMPONENT 1. 전역 컴포넌트 전역 컴포넌트의 경우 주로 공통의 template 형태의 컴포넌트를 재사용하여 사용합니다. 2. 지역 컴포넌트 render 결과 위 두 예제에서 render 이후의 결과물은 아래와 같습니다. My Component!! PROPERTIES 뷰 인스턴스를 생성할 때 자주 사용될 속성입니다. el: '' 뷰 인스턴스를 붙일 Element를 지정합니다. el: "#root" data: {} 뷰 인스턴스가 사용할 데이터를 정의합니다. data: { msg..

안녕하세요. 저희 팀에서 요즘 공부 방향으로 삼은 front framework 중 하나인 vue.js를 공부하면서 webpack에 대한 정리가 필요할 것 같아 기록하게 되었습니다. Vue를 위한 간단한 webpack 이라고 생각하시면 될 것 같습니다. 먼저 필요한 자원은 node와 node를 설치한 후 npm, 그리고 vue입니다. npm 초기화 명령어 npm init 생성되는 파일 package.json package-lock.json 파일의 내용과 설명 내가 쓰는 남의 소스를 정리해 두는 파일이다 - 제로초 님 방송 이후에 npm i vue 와 같은 npm에서 install 하는 것들의 의존성(?) 또는 파일의 버전들이 dependency 됩니다. ex) { "name": "npm-init-test"..