WEB개발이야기/Vue.js 2019. 7. 24.
개발하면서 경험으로 알게 된 Vuex에서 Store활용 방법
Vue의 개발을 편리하게 도와 주는 공식 툴 중에 Vuex가 있습니다. Vuex의 주요 기능은 개발하는 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역활 및 관리 입니다. 만약 이게 없다면 컴포넌트간 데이터를 주고받기 위해서 부모는 자식에서 props의 방법으로, 자식은 부모에게 Emit event의 방법으로 데이터를 주고 받아야 합니다. 또한 형제 컴포넌트간 데이터를 주고 받으려면 너무 복잡해져서 EventBus를 활용해야 그나마 사용을 할 수 있게 됩니다. 간단한 프로젝트인 경우에야 사용이 가능하겠지만 대형 프로젝트인 경우에는 이러한 방법으로는 도저히 감당이 되지 않고 개발 후 운영을 한다고 해도 거의 맨붕이 올 것입니다. 이러한 문제를 해결해 주는 것이 Vuex라고 보시면 됩니다. 데이터..
WEB개발이야기/Vue.js 2019. 6. 28.
Vue의 Nuxt로 개발할 떄 자동으로 브라우저 띄우는 방법
Nuxt로 Vue를 개발하다 보면 항상 사용하는 명령어가 npm run dev 또는 npm dev 또는 yarn run dev 또는 yarn dev 일 것입니다. 모두 동일하게 Nuxt를 개발 모드로 띄워라 인데.. 몇가지 명령어를 덫붙히면 dev모드 실행과 동시에 브라우저를 자동으로 띄 울 수 있는 몇가지 방법이 있습니다. 첫번째 방법 아주 간단한 첫번째 방법은 package.json을 사용하는 방법입니다. 아래와 같이 package.json의 scripts명령어 중에 원하는 실행 명령 뒤에 "dev": "nuxt --open"와 같이 --open을 붙히는 것입니다. { //... "scripts": { "dev": "nuxt --open", "build": "nuxt build", "start": "..
WEB개발이야기/Vue.js 2019. 6. 21.
Vue의 NUXT에서 SASS를 적용해서 사용하는 방법(feat. BULMA)
웹화면은 HTML, CSS, JAVASCRIPT로 구성되어 있습니다. 웹개발자 분은 보통 HTML과 JAVASCIPT로 작업을 하고, 웹디자이너는 HTML과 CSS로 작업을 합니다. 하지만 점차 시간이 지남에 따라 HTML, CSS, JAVASCRIPT, 심지어 백오피스까지 손을 대는 풀스텍 개발자가 나오게 되었습니다. 그러면서 자연스럽게 CSS 마저도 마치 프로그램처럼 작성하고 싶은 요구가 생겨나기 시작했습니다. 그런 요구에 따라 CSS도 프로그램처럼 개발하는 언어가 생겼는데 그것을 CSS 프리프로세서, 한국말로 CSS 전처리기라고 합니다. CSS 프리프로세서로 코딩을 하고 컴파일을 하면 결과물은 기존의 CSS 형태로 되어져서 나옵니다. CSS프리프로세서의 종류는 LESS, SASS(SCSS), Sty..
WEB개발이야기/Vue.js 2019. 6. 18.
Vue의 NUXT 템플릿을 쉽게 설치하는 3가지 방법
Vuejs의 장점은 매우 가볍고 쉽고 빠르게 기존에 있는 웹서비스에 접목해서 사용하는 것입니다. 새로운 웹프로젝트에도 쉽고 빠르게 적용을 할 수 있습니다. 하지만 쉽다고 해도 Vuejs의 최대 성능을 끌어 올려서 처음부터 파일을 만든다는 것은 생각보다 쉽지 않습니다. 더욱이 개발자 마다, 또는 개발할때마다 기본 틀이 달라진다면 혼자 개발할때는 문제가 없지만 통일된 규격을 가지고 있어야 할 대규모 프로젝트를 진행하기에는 어려운 점이 너무나 많습니다. 그래서 React의 NEXT처럼 Vue에서도 NUXT를 제공하고 있습니다. NUXT는 일반적인 Vue.js 어플리케이션을 정해진 규격에 맞게 만드는 프레임워크라고 할 수 있습니다. NUXT 설치하기 NUXT에 대한 설명은 나중에 포스팅을 하도록 하겠습니다. 여..
