모르는게 많은 개발자

Vue 프로젝트를 하다보면 vuex라는 것을 당연히 사용하게 되는데 vuex가 무엇인지 정리하고자 이 글을 쓴다. 1. Vuex vue를 사용하면 부모 컴포넌트의 데이터를 자식 컴포넌트로 보내야할 일이 많다. 그럼 일반적인 방법으로는 props 기능을 이용해 아래처럼 데이터를 보내게 된다. {{test1}} 그렇다면 만약 아래처럼 또 부모의 자식의 자식 컴포넌트로 보내려면 또 props를 이용해서 보내줘야 한다. {{test1}} 결과적으로 이러한 과정을 거치고 프로젝트가 커진다면 코드가 복잡해지고 유지보수가 어렵게 만들 수 있다. 그래서 존재하는 것이 Vuex이다. Vuex는 모든 컴포넌트가 공유할 수 있는 싱글톤 방식의 데이터 저장소이다. 즉, 단일 객체에 변수를 선언하고 모든 컴포넌트에서 사용할 수..

이번 글에서 mac에 nginx에 Vue 프로젝트를 올리는 내용을 간단하게 써보려 한다. 1. Vue 프로젝트 만들기 및 Build vue 프로젝트를 만들어주자 터미널에서 Vue 프로젝트 만들폴더를 하나 만들고 이동해준다. vue-cli vue-cli가 설치되어있지 않다면 아래 명령어로 vue-cli를 설치해준다. $ npm install -g vue-cli vue init 이제 vue project를 만들자 아래 명령어를 입력해 프로젝트에 대한 설정을 하고 프로젝트를 생성한다. $ vue init webpack-simple 완료 한후 npm install을 통해 의존성을 설치해준다. $ npm install 그 후 프로젝트 구조를 보면 다음처럼 구성되있을 것이다. 다음으로 이제 nginx에 올릴 배포 ..

최근 Vue를 공부하면서 Javascript공부의 필요성을 느꼈고 차근차근 공부하다 Prototype에 대해 정리하기 해보려한다. 자바스크립트는 프로토타입 기반 언어라는 것을 많이 접했다. 그럼 프로토타입이란 무엇일까 프로토타입을 알기전에 자바스크립트의 함수와 객체의 내부구조를 먼저 알아보자 1. 함수, 객체의 내부 구조 function Person(){} var joon = new Person(); var jisoo = new Person(); 위의 코드는 간단하게 함수를 정의하고 new 연산자를 통해 함수의 객체를 생성한 코드이다. 저 코드에서는 현재 두가지의 행동이있다. 첫번째는 함수 정의, 두번째는 new를 통한 객체 생성 함수 정의 자바스크립에서는 함수를 정의하면 함수의 멤버로 prototype..

최근 프로젝트에서 프론트엔드 Jquery, Ajax를 적극 활용해보며 프론트에 약간 관심이 생겨 Vue를 한번 공부해봤다. Vue에 대한 개념은 건너뛰고 문법만 딱 정리하고자 한다. 1. Vue 인스턴스 Vue.js로 프론트엔드를 개발할때는 Vue 인스턴스를 만드는 것부터 시작한다. Vue 인스턴스에서 제공되는 옵션을 붙여 개발을 할 수 있다. new Vue({ el: "#app", data: { text: 'hello world' }, }) 기본적으로 위의 코드처럼 new Vue를 통해 인스턴스를 생성하고 안에 el, data등 옵션을 넣어 인스턴스를 생성하고 화면을 컨트롤 할 수 있다. 2. 데이터 표시 {{데이터}} ... {{ myText }} v-text 위와 같이 프로퍼티를 html에 표현할 ..