Vue cli 3로 생성된 프로젝트에 컴포넌트 추가하기
오늘은 Vue cli 3로 만든 vue 프로젝트에 직접 만든 컴포넌트를 추가해보려고 합니다. 기존 Vue cli 2버전에서 다른 점은 프로젝트를 생성하는 방법과 프로젝트 구조등이 다릅니다. vue cli 3 설치 npm install -g @vue/cli vue --version 2019년 2월 18일 기준으로 3.4.0 버전이 설치됩니다...
Minwook-Shin's Tech Blog
Vue.js의 Router view에 대하여 알아보기
오늘은 Vue.js 자바스크립트 라이브러리에서의 router view에 대하여 알아보고자 합니다. 여러개의 컴포넌트들을 원하는 위치로 표시하고 싶을 때 router view를 사용해야 합니다. router <html> <body> <div id="app"> <router-link to="...
Vue.js Props와 Life cycle에 대하여 알아보기
오늘은 Vue.js 자바스크립트 라이브러리에서의 Life cycle(생명 주기)에 대하여 알아보고자 합니다. Vue 인스턴스도 객체처럼 관리되기 때문에 Life cycle(생명 주기)은 중요합니다. Lifecycle Diagram vuejs 공식 홈페이지에 있는 Lifecycle 다이어그램 그림입니다. https://vuejs.org/v2/gu...
Vue.js Props와 Event bus에 대하여 알아보기
오늘은 Vue.js 자바스크립트 라이브러리에서 통신하는 과정인 Props와 Event bus에 대하여 알아보고자 합니다. 하위 컴포넌트로부터 전송된 이벤트에 의해 상위 컴포넌트에서 하위 컴포넌트로 props를 전달하고, 서로 같은 레벨의 컴포넌트들이 Event bus로 통신하는 과정을 코드로 실습해보려 합니다. 일반적으로 하위 컴포넌트에서 상위 컴...
Vue.js 컴포넌트에 대하여 알아보기
오늘은 Vue.js 자바스크립트 라이브러리에서 HTML 엘리먼트를 확장하여 캡슐화할 때 필요한 전역 컴포넌트와 지역 컴포넌트에 대하여 알아보려합니다. CDN 사용하기 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 이미 Node.js를 설정해두었지만 간단한 실습해서는 C...
Vue.js 설치하고 간단히 알아보기
오늘은 사용자 인터페이스를 만드는 view-layer에 초점을 맞춘 Vue.js 자바스크립트 라이브러리를 node로 설치해보고, ide를 설정해보려 합니다. nodejs 설치 우선 vue cli 3를 npm으로 전역 설치하기 위해서는 node가 필요합니다. https://nodejs.org/ko/download/ 윈도우의 경우에는 위 공식 사...
flutter에서 mvc 적용하기
오늘은 flutter 프로젝트에서 mvc 구조로 만드는 방법을 작성하려 합니다. 다른 프로그래밍 언어에서도 자주 사용되는 mvc 구조는 모델과 뷰, 그리고 컨트롤러로 구분지어서 인터페이스와 로직을 분리시키는 디자인 패턴 중 하나입니다. pubspec.yaml 작성하기 dependencies: flutter: sdk: flutter ...
flutter에서 Bloc 적용하기
오늘은 flutter 프로젝트에서 bloc 구조로 만드는 방법을 작성하려 합니다. Bloc 구조는 인터페이스와 데이터를 처리하는 프로그램 로직을 분리하여 반응형 프로그래밍을 할 때 사용합니다. pubspec.yaml 작성하기 dependencies: flutter: sdk: flutter flutter_bloc: flutter로...
flutter에서 Redux 적용하기
오늘은 flutter 프로젝트에서 redux 구조로 만드는 방법을 작성하려 합니다. react에서 자주 사용하며 데이터를 처리하기에 효과적입니다. pubspec.yaml 작성하기 dependencies: flutter: sdk: flutter flutter_redux: flutter로 작성된 앱의 구조를 redux로 만들기 위해...
flutter에서 Scoped Model 적용하기
오늘은 flutter 프로젝트에서 Scoped Model 구조로 만드는 방법을 작성하려 합니다. Scope Model은 구글의 새로운 운영체제인 퓨시아(Fuchsia)에서 사용되는 gui인 flutter에 Model의 구조로 사용되고 있다고 합니다. 이 방법으로 앱의 구조를 작성하면 StatefullWidget과 State를 사용할 필요가 없어지고...