프로그래밍/FrontEnd (6) 썸네일형 리스트형 [Vue.js] How to use external Json File 1. Json 파일 import 하기. 2. 가져다 쓰기 {{tmp}} [Vue.js] page-loader 만들기. 1. vue.js 내 v-show 를 사용해서 만들면 된다. - loader는 fontawesome를 사용했다. [Vue.js] 1-2. 시작하기 : vue-cli 1. 프로젝트 생성하기(vue-cli) 1) vue-cli 설치하기. - Global로 설치하기npm install -g vue-cli 2) project 생성하기.mkdir {PROJECT_NAME} cd {PROJECT_NAME} vue init webpack-simple - vue 명령어 설명 비고 init generate a new project from a template vue init {project template type} {PROJECT_NAME} list list available official templates vue list [Vue.js] 1-1. 시작하기 : CDN 링크로 배워보자. 1. Vue란? - front-end framework - 배우기 쉽다. - view에 최적화 되어 있다. - MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인 2. 간단하게 시작해보자. - index.html 파일을 만들고, 아래 링크를 포함한 페이지를 만들어보자.https://unpkg.com/vue orhttps://cdn.jsdelivr.net/npm/vue 1) index.html {{ msg }} - 결과 3. Declarative Rendering - 디렉티브는 vue에서 제공하는 속성, v- 로 접두어가 붙는다. 1) v-if - 조건문 사용할 때 사용. 로그인 되었습니다. 로그아웃 되었습니다. 로그인이 필요합니다. - template 에도 사용가능 로그인 되었습니다... [Angular] 2.Angular Tutorial 따라하기 1-2 1. 따라하기 2편 - https://angular.io/tutorial/toh-pt0 - src/app 으로 이동한 상태에서의 내용입니다. 2. AppComponent 파일 수정 1) app.component.tsimport { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Tour of Heroes'; } 2) app.component.html{{title}} 3. app전체에 적용할 css 적용 1) src/style.css .. [Angular] 1.Angular Tutorial 따라하기 1-1 해당 블로깅은 Angular Tutorial을 따라하면서 작성한 내용입니다. https://angular.io/guide/quickstart 1. Angular 설치하기npm install -g @angular/cli 2. 새로운 어플리케이션 만들기ng new angular-tour-of-heroes - 여기서 ng new는 "새로운 프로젝트를 '현재 디렉토리'에 프로젝트명으로 디렉토리를 만들어준다." - 생성하면 아래와 같은 구조로 내용이 생성될 것이다. 3. 어플리케이션 시작하기cd angular-tour-of-heroes ng serve -open - 여기서 ng serve 는 어플리케이션을 빌드하고, 개발서버를 시작한다. 또한 소스파일이 변경될 때 어플리케이션을 알아서 자동시작해준다. '--ope.. 이전 1 다음
