Nuxt 서비스 배포 방법 Nuxt.js 서비스를 배포하는 방법은 프로젝트를 생성할 때 선택한 Universal 모드의 배포 방식에 따라 다르다. 아래 2가지 유형에 따른 배포 방법을 살펴보자. SSR(Server Side Rendering) SSR 모드는 위 그

Nuxt의 폴더 구조 넉스트의 프로젝트 생성 며령어를 실행하고 난 뒤 생성된 넉스트의 기본 폴더 구조를 살펴보겠다. 다음은 넉스트의 기본 폴더 구조이다. Nuxt의 폴더 구조 넉스트의 프로젝트 생성 며령어를 실행하고 난 뒤 생성된 넉스트의 기본 폴더 구조를 살펴보겠

Nuxt란? Nuxt는 Vue.js로 빠르게 웹을 제작할 수 있게 도와주는 프레임워크이다. 웹 어플리케이션을 제작할 때 필요한 뷰엑스, 라우터, axios와 같은 라이브러리들을 미리 구성하여 싱글 페이지 어플리케이션(Single Page Application), 서버

뷰 테스트 코드 시작하기 뷰 테스트 유틸 라이브러리를 이용하여 간단한 테스트 코드를 작성해보겠다. 뷰 컴포넌트 테스트 코드 예시 아래의 코드를 가지고 npm t를 실행한다. 코드가 실행되면 HelloWorld 컴포넌트가 정상적으로 로딩되면서 테스트가 통과된다. >

테스트 코드가 필요한 이유 개발자에게 테스트 코드가 필요한 이유는 아래 2가지에 소모되는 시간을 줄이기 위해서이다.

컴포넌트 디자인 패턴을 배워보자

뷰 프로젝트 폴더 구조, 코드 분할, 네비게이션 가드, Transition & Animation에 대해 알아보자.

타입스크립트에서 가리키는 모듈이라는 개념은 ES6+의 Modules(https://babeljs.io/docs/en/learn모듈은 전역 변수와 구분되는 자체 유효 범위를 가지며 export, import와 같은 키워드를 사용하지 않으면 다른 파일에 접근할 수

타입스크립트 기본 타입 타입 스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있다. 타입스크립트의 기본 타입에는 크게 12가지가 있다. Boolean Number String Object Array Tuple Enum Any Void Null Und

타입스크립트는 자바스크립트에 타입을 부여한 언어이다.자바스크립트의 확장된 언어라고 볼 수 있다.타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 한다.이 변환 과정을 우리는 컴파일(complile) 이라고 부른다.타입스크립트는 아래 2가

웹팩 데브 서버는 웹 애플리케이션을 개발하는 과정에서 유용하게 쓰이는 도구이다.웹팩의 빌드 대상 파일이 변경 되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해준다.매번 명령어를 치는 시간과 브라우저를 새로

웹팩의 빌드 (파일 변환) 과정을 이해하기 위해서는 아래 4가지 주요 속성에 대해서 알고 있어야 한다.entryoutputloaderplugin각 주요 속성에 대해서 자세히 살펴보자.entry 속성은 웹팩에서 웹 자원을 반환하기 위해 필요한 최초 진입점이자 자바스크립트

웹팩을 사용하기 위해서는 Node.js와 NPM이 컴퓨터에서 설치되어 있어야 한다.그리고 이 도구들에 대해 어느 정도 배경 지식이 있으면 웹팩을 다루는데 도움이 된다.Node.js는 브라우저 밖에서도 자바스크립트를 실행할 수 있는 환경을 의미한다.간단하게 줄여서 Jav

웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)이다.모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과

상태 관리란 현대 프론트엔드 프레임워크에서 모두 사용하는 개발 패턴이다.뷰에서는 뷰엑스(Vuex)라는 상태 관리 패턴을 사용한다.상태 관리가 필요한 이유는 컴포넌트의 숫자가 많아졌을 때 컴포넌트 간의 데이터 전달이나 관리가 어렵기 때문이다.데이터 전달을 더 명시적이고

Vue.js 프레임워크에서 재사용성을 높일 수 있는 Slot 외의 기능들을 알아보고자 한다.믹스인(Mixins)은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법이다.믹스인에 정의할 수 있는 재사용 로직은 data, methods, creat

Vue.js 프레임워크에서 제공하는 함수들로 컴포넌트의 재사용성을 높일 수 있다. 슬롯 슬롯(slot)은

뷰의 메서드는 특정 기능 별로 묶을 수 있는 자바스크립트 함수를 의미한다.메서드는 흔히 뷰 템플릿의 버튼 이벤트 처리부터 HTTP 통신까지 다양한 성격의 코드로 구성된다.메서드를 선언하는 방법은 아래와 같다.메서드를 이용해서 버튼 클릭 이벤트를 처리하면 다음과 같다.위

뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미한다.템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다.가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)이다.div

다른 주요 프론트엔드 프레임워크(Angular, React)와 비교했을 때 뷰(Vue)의 가장 큰 강점은 바로 시작하기가 정말 쉽다는 점이다.CDN으로 Vue.js 코드를 가져와 바로 Vue 인스턴스를 하나 생성하여 간단한 페이지를 생성해보았다. 기존의 구현된 시스템에