1. Json 파일 import 하기.

<script>
import externalJsonFile from './externalJsonFile.json'
export default{
data(){
return{
jsonFile: externalJsonFile
}
}
}
</script>


2. 가져다 쓰기

<ul v-for="tmp in jsonFile">
<li>{{tmp}}</li>
</ul>


1. vue.js 내 v-show 를 사용해서 만들면 된다.

 - loader는 fontawesome를 사용했다.


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 <-- 아래 내용 참고

 build

 prototype a new project

 

 help

 display help for [cmd] 


 - vue template

 

 설명

비고 

 browserify

 A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

 

 browserify-simple

 A simple Browserify + vueify setup for quick prototyping.

 

 pwa

 PWA template for vue-cli based on the webpack template

 

 simple

 The simplest possible Vue setup in a single HTML file

 하나의 index.html 파일만 생성해줌.

 webpack

 A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

 

 webpack-simple

 A simple Webpack + vue-loader setup for quick prototyping.

 


2. 프로젝트 분석하기

 1) 기본 구조 설명


 2) 상세설명

  (1) main.js

- 프로젝트의 기본이 되는 파일입니다. 프로젝트의 Entry Point 이기도 하다.

  (2) App.vue

- Root 컴포넌트

- Vue를 로드하고 해당 파일을 로드하면서 어플리케이션을 초기화한다.

- 참고로 *.vue 파일은 "HTML 템플릿", 단일 vue 컴포넌트를 정의하는 javascript, 특정 스타일 css 의 조합이다.


  (3) assets

- 외부 자원들에 대한 폴더이다. image, css 등이 들어간다.


 3) 그외 설명

  (1) components

- vue 파일을 저장하는 곳.

- 입맛에 따라 알아서 변경해서 쓰면 된다.


  (2) route

-backend에서 제공하는 라우팅 기능을 제공함.

- index.js 관련해서는 추후 설명할 예정


3. 프로젝트 시작하기

 1) 위에서 생성한 프로젝트 내에서

 2) 우선 npm으로 라이브러리들을 설치해야한다.

npm install


 3) 개발버전으로 프로젝트를 시작하자.

  - compile, ESLint 를 진행하고, 로컬 서버를 동작시켜준다.

  - ESLint, hot-reload 동작(변경된 상태만 변경)

npm run dev


 4) 실서비스 시

  - webpack 설정등에 따라 달라지겠지만, /dist 폴더로 hash 값이 포함된 파일명으로 파일들이 생성됨.

npm run build



참고링크

 - https://medium.com/witinweb/vue-cli-%EB%A1%9C-vue-js-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-browserify-webpack-22582202cd52

 - https://blog.storyg.co/vue-js-posts/todos-tutorial

1. Vue란?

 - front-end framework

 - 배우기 쉽다.

 - view에 최적화 되어 있다.

 - MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인


2. 간단하게 시작해보자.

 - index.html 파일을 만들고, 아래 링크를 포함한 페이지를 만들어보자.

https://unpkg.com/vue


or

https://cdn.jsdelivr.net/npm/vue


 1) index.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Vue.js Sample</title>
</head>
<body>

<div id="root">
<p>{{ msg }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#root',
data: {
msg: 'Hello Vue.js!'
}
})
</script>
</body>
</html>

  - 결과


3. Declarative Rendering

  - 디렉티브는 vue에서 제공하는 속성, v- 로 접두어가 붙는다.


 1) v-if

  - 조건문 사용할 때 사용.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Vue.js Sample</title>
</head>
<body>

<div id="root">
<div v-if="type === 'LOGIN'">로그인 되었습니다.</div>
<div v-else-if="type === 'LOGOUT'">로그아웃 되었습니다.</div>
<div v-else> 로그인이 필요합니다.</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#root',
data: {
type: "LOGOUT"
}
})
</script>
</body>
</html>


  - template 에도 사용가능

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Vue.js Sample</title>
</head>
<body>

<div id="root">
<template v-if="type === 'LOGIN'">
<div>
로그인 되었습니다.
</div>
</template>
<template v-else-if="type === 'LOGOUT'">
<div>
로그아웃 되었습니다.
</div>
</template>
<template v-else>
<div>
로그인이 필요합니다.
</div>
</template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#root',
data: {
type: "LOGIN"
}
})
</script>
</body>
</html>




 2) v-show

  - 보여질지, 숨길지에 대해서 설정할 수 있는 값이다.

  - 일단 뷰 렌더링이 진행되고, css로 숨길지 나타낼지를 정한다.

  - 샘플코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Vue.js Sample</title>
</head>
<body>

<div id="root">
<div v-show="visible">보이나?</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#root',
data: {
visible: true
}
})
</script>
</body>
</html>

  - v-if는 토글 비용이 높고 v-show는 초기 렌더링 비용이 더 높다. 자주 바꾸기를 원한다면 v-show를, 런타임 시 조건이 바뀌지 않으면 v-if를 권장한다..

 - chrome 개발자 console 창에 'app.visible = false;'를 입력해보면 해당 div가 사라지는 걸 확인 할 수 있다.


 3) v-for

  - for loop

  - 목록 구현할때 많이 쓰이는 디렉티브

  - 샘플 코드

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Vue.js Sample</title>
</head>
<body>

<div id="root">
<ul>
<li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#root',
data: {
fruits: ['apple', 'banana', 'orange']
}
})
</script>
</body>
</html>

  - 결과



 4) 기타

  - v-on, v-bind, v-model 등이 있다.



* 참고

 - https://vuejs.org/v2/guide/index.html , https://kr.vuejs.org/v2/guide/index.html

1. 따라하기 2편

 - https://angular.io/tutorial/toh-pt0

 - src/app 으로 이동한 상태에서의 내용입니다.


2. AppComponent 파일 수정

 1) app.component.ts

import { 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

<h1>{{title}}</h1> <app-heroes></app-heroes>


3. app전체에 적용할 css 적용

 1) src/style.css

/* Application-wide Styles */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; } body, input[text], button { color: #888; font-family: Cambria, Georgia; } /* everywhere else */ * { font-family: Arial, Helvetica, sans-serif; 

}


4. here component CLI로 생성

 1) 명령어

ng generate component heroes


 2) 확인


5. 컴포넌트 수정

 1) app/hero.ts 파일 추가

hero: Hero = { id: 1, name: 'Windstorm' 

};


 2) app/heroes/heroes.component.ts

import { Component, OnInit } from '@angular/core';

import { Hero } from '../hero'; @Component({ selector: 'app-heroes', /* the components CSS element selector */ templateUrl: './heroes.component.html', /* the location of the component's template file. */ styleUrls: ['./heroes.component.css'] /* the location of the component's private CSS styles. */ }) export class HeroesComponent implements OnInit { hero: Hero = { id: 1, name: 'Windstorm' };

constructor() { } ngOnInit() { }  

}


3) app/heroes/heroes.component.html

<!-- {{ hero.name | uppercase }} UppercasePipe -->

<h2>{{ hero.name }} Details</h2> <div><span>id: </span>{{hero.id}}</div> 

<div><span>name: </span>{{hero.name}}</div>


4) src/app/app.module.ts

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
  4.  
  5. import { AppComponent } from './app.component';
  6. import { HeroesComponent } from './heroes/heroes.component';
  7.  
  8. @NgModule({
  9. declarations: [
  10. AppComponent,
  11. HeroesComponent
  12. ],
  13. imports: [
  14. BrowserModule,
  15. FormsModule
  16. ],
  17. providers: [],
  18. bootstrap: [AppComponent]
  19. })
  20. export class AppModule { }




6. 확인

7. 이어서는...

 - 이후 내용은 하나씩 따라하다보니 입력을 못함.

 - 크게 어려운건 없어보임.

해당 블로깅은 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 는 어플리케이션을 빌드하고, 개발서버를 시작한다. 또한 소스파일이 변경될 때 어플리케이션을 알아서 자동시작해준다. '--open 옵션은 브라우저를 켜주는 옵션이다.'


4. 확인

 - 위 명령어로 실행시킬 경우 'http://localhost:4200/' 로 알아서 브라우저가 열리고, 아래처럼 내용이 나올 것이다.




5. 구성요소 확인 및 기본 내용 수정해보기

 1) src/app 으로 이동

cd src/app


 2) 편집

vi ./app.component.ts


3) 제목 수정

export class AppComponent { title = 'My First Angular App'; }


4) 확인


5) Css 수정

h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; 

}


6) 확인



+ Recent posts