인생쓰

컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 일단 컴포넌트가 무엇인지 알아야한다고 생각합니다. 컴포넌트란 독립적인 소프트웨어 모듈입니다. 소프트웨어 시스템에서 독립적인 업무 또는 독립적인 기능을 수행하는 모듈로서 이후 시스템을 유지보수하거나 필요로인해 사용을할때 교체 가능한 부품이라고 생각하시면 됩니다. 재사용이 가능 한 단위로 생각하시면 될것같습니다. 컴포넌트내부의 정보는 외부로부터 숨겨지기 때문에 컴포넌트가 제공하는 서비스를 정의한 인터페이스만을 제공하고 어떤 인터페이스를 사용해야 하는지만을 알 수 있습니다. 여러개의 모듈들을 각각의 트리구조로 컴포넌트를 생성해 관리합니다. 일단 전역 컴포넌트를 등록할수있습..

오늘은 Vue에서 사용되는 이벤트들을 알아보려고 합니다. 일단 저희가 일반적인 자바스크립트나 Jquery를 이용해서 하는 이벤트를 볼까요? input값에 text를 입력하면 content에 입력값이 출력되는 이벤트입니다. 하지만 Vue에서는 좀 다르게 사용합니다. Vue.js에서는 v-model로 content를 지정후 v-html에 연결해서 데이터를 뿌려주게 됩니다. 이렇게만 보면 이해가 쉽지 않으니 다른 이벤트 핸들링으로 볼까요. 숫자 버튼을 클릭할때마다 버튼안의 숫자가 올라가는 코드를 짜보겠습니다. button 안에 v-on:click 라는걸 써서 counter 에 1씩 더해줍니다. 그리고 Script문에서 보시면 example-1안에 data의 counter가 0부터 시작한다는 것을 알 수 있습니..

오늘은 Vue에서 조건문과 반복문에 대해서 알아보려고합니다. 일단 먼저 알아야 될것은 v- 로 시작하는 속성에 대해 알아보려고 합니다. 보시면 v-if 이런식으로 되어있는데 이것을 디렉티브라고 합니다. 여기서 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 조건문 v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용됩니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. 이런식으로 if else를 구성할수 있네요. 스크립트를 보시면 app3라는 돔을 연결 후 awesome속성을 true로 정해주면 Vue is awesome이 출력됩니다. 반대로 false를 써주면 else문..

1.시작하기 2.Vue앱 생성 가장 기본적인 Hello Vue를 출력해보자. 일단 html 상단에 Vue를 사용하겠다고 추가해주고, 그리고 연결할 html태그를 작성합니다. 이제 Vue를 생성해볼건데 기본 형태는 Vue 인스턴스를 생성하여 내부에 el 속성과 data 속성을 넣는 것입니다. el은 어떤 id를 가진 html 태그에 종속될 것인지를 표기하는 것입니다. 위 html 과 스크립트 의 결과 는 위와 같이 Vue 내부에 있는 message값을 호출하게 됩니다. 그리고 브라우저의 JavaScript 콘솔을 열고 app.message를 다른값으로 변경시에 변경된 값에따라 업데이트 되는것도 확인할수 있습니다. html 직접 상호작용하지않고 Vue 앱은 단일 DOM 요소 에 연결되어 DOM요소를 완전히 ..

발표준비 겸 배우다가 중도포기했던 자바스크립트 프레임워크를 배워보려고합니다. 처음에는 리액트를 준비했지만 라라벨을 준비하면서 더 어울리는건 Vue가 더 어울린다고 생각해서 공부하게 되었습니다. 일단 자바스크립트 프레임워크는 자바스크립트로 작성된 애플리케이션 프레임 워크입니다. 여기서 프레임워크는 복잡한 코드나 내용을 간단하게 해주면서 미리 규격화 모듈화 되어있는 도구를 말합니다. 라이브러리는 단순 활용가능한 도구들의 집합을 말하고 프레임워크는 뼈대나 기반구조를 떠올리면 됩니다. 이제 Vue를 사용하려는 이유에 대해서 말하자면 자바스크립트의 유연함 때문인지 코드가 조금씩 복잡해지기 시작했고 이는 유지보수에 큰 악영향을 미쳤습니다. 이렇게 자바스크립트의 인기가 내려갈때 쯤 이 문제점들을 해결해주는 프레임워크..