전체 글

뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미한다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다. 데이터 바인딩 데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다. 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag) 다. {{ message }} new Vue({ data : { message : 'Hello Vue.js' } }) div 태그에 콧수염 괄호를 이용해 뷰 인스턴스의 message 속성을 연결했다. 코드를 실행하면 화면에 Hello Vue.js 라는 코드가 출력된다. 디렉티브 디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법이다. 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있다. 예를 들어 아래..

뷰에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)다. Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양하다. 1. 액시오스 설치(CDN 방식) 2. 액시오스 HTTP 요청 메소드 종류 ① axios.get(url[, config]) : 불러오기 서버에서 데이터를 가져올 때 사용하는 메소드다. 두 번째 파라미터 config 객체에는 헤더(header), 응답 초과시간(timeout), 인자 값(params) 등의 요청 값을 같이 넘길 수 있다. axios.get('users/1') ② axios.post(url[, data[, config]]) : 입력하기 서버에 데이터를 새로 생성할 때 사용하는 메소드다...

async와 await이란? async와 await은 자바스크립트의 비동기 처리 패턴 중 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수의 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다. 개발자에게 읽기 좋은 코드란? var user = { id : 1, name : 'joah' } if(user.id === 1){ console.log(user.name); // joah } 위 코드는 user 라는 변수에 객체를 할당한 뒤 조건문으로 사용자의 아이디를 확인하고 콘솔에 사용자의 name을 찍는 간단한 코드다. 우리는 이렇게 위에서부터 아래로 한 줄 한 줄 차근 차근 읽으면서 사고하는것이 편하다. 읽기 좋은 코드와 async & await가 무슨 상관인가? 위에..

Promise란? "A promise is an object that may produce a single value some time in the future" 프로미스는 자바스크립트 비동기 처리에 사용되는 객체다. 여기서 자바스크팁트 비동기 처리란 '특정 코드의 실행이 완료될 때 까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성'을 의미한다. Promise가 필요한 이유 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용한다. $.get('url 주소/products/1', function(response) { // ... }); 위 API가 실행되면 서버에다 ..

비동기란? 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. 비동기 사례1. jquery의 Ajax 비동기 처리의 가장 흔한 사례는 jquery의 Ajax다. 보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야하는데 이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문이다. function getData(){ var tableData; $.get('http://domain.com/products/1', function(response){ tableData = response; }); return tableData; } console.log(getData()); // undefine..

뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리다. 페이지 변경을 위해서 DOM을 새로 갱신하는 것이 아닌 변경된 요소영역(컴포넌트)만 갱신한다. 1. 뷰 라우터 설치(CDN 방식) 2. 뷰 라우터 등록 뷰 라우터를 설치하고 나면 아래 코드와 같이 라우터 인스턴스를 하나 생성하고 뷰 인스턴스를 동록해야한다. // 라우터 인스턴스 생성 var router = new VueRouter({ // 라우터 옵션 }) // 뷰 인스턴스 생성 new Vue({ el : '#app', // 뷰 인스턴스에 라우터 인스턴스 등록 router : router }) 3. 뷰 라우터 옵션 대부분의 SPA앱에서는 아래와 같이 2개의 옵션을 필수로 지정한다. routes : 라우팅 할..

1. Vue 컴포넌트 컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능이다. 컴포넌트 기반으로 화면을 개발하게 되면 재사용성이 올라가고 빠르게 화면을 제작할 수 있다. 화면을 조합해서 구성할 수 있게 블럭형태로 분할 된 화면영역(Component)을 의미 컴포넌트 간의 관계는 일반적으로 Tree 구조 화면 구성요소의 재활용 각 컴포넌트는 각각의 고유한 유효범위를 가짐 전역(Global) 컴포넌트 여러 인스턴스에서 공통으로 사용할 수 있는 컴포넌트 Vue 변수를 사용해서 등록하는 컴포넌트 일반적으로 전역 컴포넌트를 선언해서 사용하는 경우는 거의 없음, 대부분 플러그인, 3thParty 라이브러리 사용 시 활용 됨 // 전역 컴포넌트 등록방법 // vue.component('컴포넌트 이름', 컴포..

'모두의 네트워크' 를 읽고 1장. 네트워크 첫걸음 2장. 네트워크 기본규칙 3장. 물리 계층 : 데이터를 전기 신호로 변환하기 4장. 데이터 링크 계층 : 랜에서 데이터 전송하기 5장. 네트워크 계층 : 목적지에 데이터 전달하기 6장. 전송 계층 : 신뢰할 수 있는 데이터 전송하기 7장. 응용 계층 : 애플리케이션에 데이터 전송하기 8장. 네트워크의 전체 흐름 살펴보기 9장. 무선 랜 이해하기 1장. 네트워크 첫걸음 컴퓨터 간의 연결을 컴퓨터 네트워크라고 부른다. 인터넷은 전 세계의 큰 네트워크로부터 작은 네트워크까지 연결하는 거대한 네트워크다. 패킷은 컴퓨터 간의 데이터를 주고받을 때 네트워크를 통해 흘러가는 작은 데이터 조각이다. 큰 데이터는 작은 패킷으로 분할한다. 컴퓨터는 0과 1밖에 이해하지 ..

Vue를 사용하기 위해 필수적으로 생성해야 하는 기본 단위(new Vue();) Vue인스턴스는 Vue를 통해 생성하는 하나의 오브젝트 인스턴스를 사용함으로써 Vue에서 미리 선언되어 있는 속성,API를 재사용 및 활용 할 수 있음 인스턴스 생성 new Vue(); 인스턴스를 생성하고 나면 아래와 같이 인스턴스 안에 어떤 속성과 API가 있는지 콘솔창에서 확인 가능 var vm = new Vue(); console.log(vm); 인스턴스에서 사용할 수 있는 속성과 API는 다음과 같음 new Vue({ el : , template : , data : , methods : , created : , watch : , }) el: Vue가 실행되는 html DOM요소를 지정, CSS선택자를 사용(ex. id..

사용자 인터페이스를 만들기 위한 동적 javascript 프레임워크 MVVM패턴의 ViewModel에 해당하여, UI코드와 데이터제어 제어 로직을 분리 View(html DOM): 사용자에게 보이는 화면. Model(JS): 데이터를 담는 용기, 보통 서버에서 가져온 데이터를 javascript 객체로 저장 ViewModel: View와 Model의 중간 영역으로 DomListener와 DataBinding을 제공하는 영역 DOM: HTML 문서에 들어가는 요소(tag, class, attribute 등)의 정보를 담고 있는 데이터 트리 DOM Listener: DOM의 변경에 대한 즉각적으로 반응하여 특정 로직을 수행하는 장치 Data Binding: View에 표시되는 내용과 모델의 데이터를 동기화 ..