Question영 이야기

오늘도 미래에 공부한 개념을 잊은 저를 위해 개념 정리 포스팅을 작성해보도록 하겠습니다. Vue 를 이용하여 프론트 작업을 하다 보면 이런경우 있으실겁니다. Component 별 데이터 공유 문제 공통 상태에 대한 관리 방법은 찾아보면 있을 겁니다. 1번은 EventBus 를 이용하여 사용하는 방법이 있고 2번은 window 객체를 이용하면 어찌어찌 되겠죠 하지만 EventBus 를 이용하면 프로젝트가 커질수록 이벤트 추적이 힘들어져 유지보수가 힘들어 지는 단점이 있고 window 객체를 이용하는 것은 어찌 성공한다고 해도 모양새가 그리 좋아보이지 않을것 같습니다. 방법을 찾다가 이런 문제를 해결해주는 Vuex 라는 라이브러리를 찾았습니다. Vuex 의 공식 홈페이지에서 설명하고 있는 이 라이브러리의 정..

Node.js 를 공부했었지만 오래되다보니 Vue 를 공부하고 있다가 익숙한 구조가 눈에 띄었습니다. 'export default' Vue 공부하면서 단순히 Vue.js 라이브러리에서 정의하고 있는 고정된 양식이겠지 라고 생각하고 그냥 넘어가려다 찜찜해서 찾아본 결과 ES6 의 모듈 구조였었습니다. ES6 의 기초를 싸그리 까먹었나봅니다... 이번 포스팅은 Vue 에서 자주 다루고 있었던 컴포넌트 구조와 ES6 의 모듈 구조 관계를 살펴보도록 하겠습니다. // HelloWorld.vue ... vue-cli 을 이용하여 프로젝트 초기 구성하게 되면 폴더에 다음과 같이 기본 Vue 파일이 생성되어 있습니다. templete, script, style 태그들은 Vue.js 의 컴포넌트를 정의하기 위한 기본 ..

안녕하세요. 이번 포스팅은 Vue 의 설치 및 프로젝트 설정에 대해 간략하게 정리하도록 하겠습니다. 시스템 환경 운영 체제 : macOS Mojave Tool : VSCode Vue.js, ES6, Node.js 시작 Vue 를 사용하기 위해서는 다음과 같은 방법이 있습니다. 공식 사이트에서 개발자 버전 혹은 배포 버전 을 다운받아 Script 로 연결하여 사용한다. CDN 에 올라간 Vue 버전을 Script 로 연결하여 사용한다. npm에 올라간 최신 버전의 URL ( https://unpkg.com/vue/ ) 로 연결 NPM 을 이용하여 설치한다. npm install vue vue-cli -g 위 방법중 마지막 3번째 방법을 이용하여 vue 를 설치하고 프로젝트를 생성해보겠습니다. NPM 을 이..

Vue 프로젝트에서 SCSS 를 설정을 진행하고 있었습니다. # scss 해석 및 적용을 위한 로더 설치 1 2 3 4 # scss 종속성 설치 npm install --save-dev node-sass sass-loader Colored by Color Scripter cs # Vue 본문에 sytle 태그 속성을 scss 로 설정 1 2 3 4 5 6 /* ... */ cs 이렇게 진행했을때 잘되던 프로젝트가 갑자기 다음과 같은 에러를 뱉어내었습니다. 구글링을 하여 npm cache clean --force 를 이용하여 캐시 삭제 및 모듈삭제 후 재 설치를 해보기도 하고 package.json 파일을 삭제 후 다시 설정 해보기도 하였으나 수정이 안되고 있다가 결국 해결 방법을 찾았습니다. 문제는 sa..

안녕하세요. 예전에 접했었던 Webpack 내용이 뒤돌아서면 잊어 먹길래 초심자의 시선에서 정리를 하고자 포스팅합니다. 정리용 포스팅이지만 과거의 제가 미래의 저에게 친절할수 있도록 자세히 내용을 기록하도록 하겠습니다. 시스템 환경 운영 체제 : macOS Mojave Tool : VSCode ES6, Webpack4, Node.js 시작 Webpack(웹팩) 이란 단어가 다소 생소하신 분들도 있고 어딘가에서 들어봤던 분들도 계실겁니다. 저는 Node.js 를 공부하면서 많이 접한 단어인데요. Node.js 의 express 가 이 기반으로 구성되어 있다는 사실은 여러 정보매체에서 다루고 있습니다. 그래서 Webpack이 몬데?! 여러 책이나 강의 사이트에서 정리한 정의를 제가 개인적으로 이해서 소화한 ..