Front_End

02. Vue.js Vue 인스턴스 옵션 and Life Cycle

Vue 인스턴스 var a = new Vue({}) 와 같이 만든 객체를 Vue 인스턴스라고 하는데 처음에 배웠던 ViewModel을 의미하기도 하죠. 이 Vue 인스턴스를 생성할 때 여러 옵션을 설정할 수 있는데 이 옵션들에 대해 알아보도록 할게요. data 옵션 var model = { number = 2 } var test = new Vue({ el: '#test', data : model });data 옵션에 주어진 모든 속성들은 Vue인스턴스 내부에서 직접 사용되는 것이 아니라 Vue 인스턴스와 Data 옵션에 주어진 객체 사이에 프록시(대리인?)를 두어 처리해요. 그리고 data 옵션은 Vue 인스턴스가 관찰하는 데이터 객체를 의미하므로 변경 사항을 즉시 감지해요. 데이터에 접근..

01. Vue.js 기본기: 각종 디렉티브

기본기 전 포스팅에서 말씀드렸듯이 단일 html페이지에서부터 vuejs를 연습해볼 생각이에요. 그리고 저는 Atom을 기본편집기로 사용하였고, 테스트용 브라우져는 Chrome을 사용하였어요. 아직 단일 html페이지 연습단계이기 때문에 를 이용해서 cdn으로 구성하셔도 Vue문법 및 빌드는 아주 잘됩니다. Hello, Vue js 01.html {{ message }} 가장 기본적이 예제 에요. model 객체는 변수명 그대로 model 객체에요. 데이터를 가지고있지요. 그 밑에 있는 app이라는 이름을 가지는 녀석도 객체인데 Vue객체(이하 뷰객체)이자 ViewModel 객체에요. 뷰객체에 있는 el이라는 속성은 HTML 요소(element의 약자)를 나타네요. html 파일에서 id값을 부여하는것을 ..

00. Vue.js 설치와 시작

Vue.js 시작하기 먼저 vue.js가 무엇인지 부터 알아봐야 겠죠? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다. 공식문서에 나와있는 Vue.js의 정의이다. 다른프레임워크에 대한 비교는 숙련된 프론트엔드 개발자라면 확인하라고 적혀있었다... 대충 한번 훑어보았습니다. React와 비교 렌더링성능이 더 우수..

05. Angular로 개발하기 - 3 - 구조 지시자

Angular로 개발하기 - 5 데코레이터 ( 이건 이전에 것 보충 ) export class simpleComponent { }컴포넌트는 하나의 클래스다 위 처럼 simpleComponent라는 클래스가 있다고 가정해보자. 이 클래스는 아직까지는 순수한 타입스크립트 클래스이다. 여기서 순수하다라는 표현은 아직까지는 컴포넌트가 아니라는 뜻이다. 즉 컴포넌트로 사용하기 위해서는 앵귤러에게 컴포넌트임을 알려주어야한다. 여기서 사용하는 것이 Component 데코레이터이다. 데코레이터가 대상을 장식한다는 의미를 가진 것처럼 컴포넌트데코레이터는 앵귤러가 평범한 타입스크립트 클래스를 컴포넌트로 인지할 수 있도록 하는 역할을 한다. import { Component } from '@angular/core&#..

04. Angular로 개발하기 - 2 - 서비스/의존성주입

Angular로 개발하기 - 2 서비스와 의존성 주입 서비스는 애플리케이션의 비즈니스 로직을 담는 클래스이다. 서비스를 이용하는 이유는 컴포넌트에서 비즈니스 로직을 분리하기 위해서이다. 일단 서비스를 만들어보자! ng g service 서비스(클래스)명 서비스를 생성하고 나면 서비스명.service.ts와 서비스명.service.ts 파일이 생성된다 ~.service.ts : 속성들과 메소드들로 이루어지는 서비스의 핵심적인 파일이다. ~.service.spec.ts : 테스트를 위해서 만들어지는 파일이다. (테스트관련은 추후 공부 예정) ser-a.service.ts import { Injectable } from '@angular/core'; @Injectable() export clas..

03. Angular로 개발하기 - 1 - src/app, Component, Data Binding

Angular로 개발하기 개발하기에 앞서 Angular라는 프레임워크를 이용해서 웹 애플리케이션을 개발하려면 크게 두가지를 생각해야 한다. 1. 사용자와 상호작용할 뷰를 구성 일반적인 웹 애플리케이션은 API혹은 배치 프로그램과 같이 다른 애플리케이션과 통신하며 구현된 기능에 따라 동작한다. 하지만 사용자용 애플리케이션의 핵심은 사용자와의 상호작용이다. 해당 애플리케이션의 실행 전반에 걸쳐 사용자와 반복적으로 상호작용하므로 사용자와 소통할 매개로서 뷰가 반드시 필요하다. 이 말이 무엇일까 고민을 많이 해보았는데 이 뷰라는 녀석이 직접 사용자와 소통을 한다는 뜻인 것 같다. 즉 사용자가 보게되는 페이지 중 에서도 사용자와 상호작용할 수 있는 뷰가 반드시 필요하다라는 것 같다. 2. 뷰와 연결된 일련의 로직..