자몽아이스티맛의 기술 블로그 자몽아이스티맛의 기술 블로그

뷰 라우터라우팅이란 웹 페이지 간 이동 방법을 뜻한다.라우팅은 싱글 페이지 애플리케이션에서 주로 사용된다. 라우팅을 이용하면 화면 간 전환이 매끄러워진다.페이지 이동을 라우팅으로 처리하면 매끄럽게 전환할 수 있고, 더 빠르게 화면을 조작할 수 있다. 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리다.뷰 라우터를 이용해 뷰로 만들어진 페이지 간 자유롭게 이동할 수 있다.뷰 라우터를 구현할 때 필요한 특수 태그와 기능은 아래와 같다. 태그 설명 페이지 이동 태그. 화면에서는 로 표시되며, 클릭하면 to에 지정한 URL로 이동된다. 페이지 표시 태그.변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역이다. 뷰 라우터를 이용해 예제를 작성해보자. (뷰 라우터를 이용해 만든 예제이다..

뷰 컴포넌트 통신뷰의 경우 컴포넌트 단위로 화면을 구성하기 때문에 같은 웹 페이지라 하더라도 데이터를 서로 공유할 수가 없다는 특징이 있다.그 이유는 컴포넌트마다 자체적으로 유효 범위를 갖기 때문인데, 각 컴포넌트마다 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 상 - 하위 컴포넌트 관계컴포넌트간 데이터 전달을 하기 위해서는 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 한다. 상위 컴포넌트 - 하위 컴포넌트를 등록한 인스턴스 - new Vue() (부모 컴포넌트)하위 컴포넌트 - 지역 또는 전역으로 등록한 컴포넌트 - Vue.component() or new Vue({components}) (자식 컴포넌트) 상 - 하위 컴포넌트 간 통신 방식(Do..

뷰 컴포넌트컴포넌트는 화면을 구성하는 블록을 의미한다.컴포넌트를 활용하면 화면을 빠르게 구조화하여 정해진 패턴으로 개발할 수 있게 된다.화면을 컴포넌트 단위로 재활용하는 형태로 관리하면 코드를 재사용하기 편리해진다. 특히 코드를 직관적으로 이해할 수 있다는 것이 큰 장점이다. 컴포넌트 종류컴포넌트를 사용하는 방법은 전역 선언과 지역 선언 두 가지 방식이 존재한다.지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다. 전역 컴포넌트전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근이 가능한 Vue 생성자를 이용해 등록한다.Vue 생성자에 .component()를 호출하여 수행한다. 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 ..

뷰 인스턴스 생성자뷰를 new Vue()와 같이 인스턴스를 생성할 때 이를 생성자라 표현한다.Vue 인스턴스를 생성하고 나면 뷰 라이브러리를 로딩하게되고, 이후에 접근할 수 있다. 뷰 인스턴스 유효 범위뷰 인스턴스는 HTML의 특정한 범위 내에서만 속성들이 적용된다.이를 인스턴스의 유효 범위라고 한다. 인스턴스를 생성하고 난 후(new Vue()), 화면에 인스턴스 속성을 적용하는 과정은 아래와 같다. 뷰 라이브러리 로딩▼인스턴스 객체 생성(옵션 속성 포함)▼특정 화면 요소에 인스턴스를 붙임▼인스턴스 내용이 화면 요소로 변환▼변환된 화면 요소를 사용자가 확인 뷰 인스턴스 라이프 사이클뷰 인스턴스는 생성될 때 8개의 라이프 사이클이 존재한다.(Do it! Vue.js 입문 책의 저자 캡틴 판교님의 설명 참..

자바스크립트 런타임노드는 자바스크립트 런타임이다.런타임이란 특정 언어로 만든 프로그램을 실행할 수 있는 환경을 이야기한다. 이전에는 자바스크립트라는 언어를 브라우저에서만 사용할 수 있었다.그러나 2008년 구글에서 V8 엔진을 발표하기 시작하고난 후 자바스크립트를 독립적으로 사용할 수 있게 되었다. 라이언 달(Ryan Dahl)은 2009년 V8 엔진을 기반으로한 노드 프로젝트를 진행하며 지금의 노드가 탄생되었다. 노드는 V8과 libuv라는 라이브러리를 사용한다. V8과 libuv는 C와 C++로 구현되어 있는데, 우리가 작성하는 자바스크립트 코드를 노드가 V8과 libuv 라이브러리로 연결해준다. libuv 라이브러리는 노드의 특성인 이벤트 기반, 논블로킹 I/O 모델을 구현한다. 이 글은 다음과 같..

Node.js란Node.js는 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임이다.Node.js는 이벤트 기반, 논블로킹 I/O 모델을 사용해 가볍고 효율적이다.Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이다. Node.js는 자바스크립트 코드를 실행시켜주는 프로그램이다. 이 글은 다음과 같은 내용을 참고하여 공부한 챕터를 정리한 내용입니다.Node.js 교과서 - 길벗 출판사

변수명으로 사용할 수 없는 예약어변수명은 하나의 문자나 그 뒤를 이어서 하나 이상의 문자. 숫자, _(언더바)가 붙는 문자열로 문장, 변수, 매개변수, 속성명, 연산자, 라벨 등에 사용한다.아래의 예약어들은 변수명으로 사용할 수 없는 리스트이다. A abstract B boolean, break, byte C case, catch, char, class, const, continue D debugger, default, delete, do, double E else, enum, export, extends F false, final, finally, float, for, function G goto I if, implements, import, in, instanceof, int, interface, l..

XMLHttpRequest 객체비동기 통신을 위한 XMLHttpRequest 객체 사용방법을 적어보려한다.지금까지 jQuery 플러그인의 $.ajax()로만 비동기 통신을 처리하다시피해서 XMLHttpRequest 객체를 사용하는 방법을 잊었다.최근 다시 순수 Javascript문법으로 코드를 짜려고 노력하고 있다. XMLHttpRequest 객체 생성가장먼저 비동기 통신을 위해서는 XMLHttpRequest객체를 사용해야하는데, 이 객체를 사용하기 위해서는 브라우저별로 객체 생성처리를 다르게 해야한다.XMLHttpRequest는 브라우저를 통해 객체를 가져올 수 있는데, MS사의 IE 브라우저와 타 크롬, 파이어폭스, 오페라 등의 브라우저에서 제공하는 XMLRequest객체를 생성하는 방법이 다르다.1..