+++++++
한국기술교육대학교(천안) 제2캠퍼스 능력개발교육원
2021.05.01(토) ~ 2021.05.02(일) / 1박2일(12시간)
[파이썬(Python)을 활용한 데이터 시각화 - 그래프 제작]
(정보기술 개발자 직종)
[CUI 하드코딩]
Jupyter Notebook(anaconda 3) / Pandas / Matplotlib
[RGB & CMYK Color]
+++++++
'■■▶빅데이터 분석◀' 카테고리의 다른 글
| Bigdata00-파이썬&웹크롤링 데이터 수집과 전처리 (API: pandas, numpy) (1) | 2024.07.26 |
|---|---|
| Bigdata00-파이썬&라이브러리 (Selenium) 설치 & 웹 크롤러 / 데이터 크롤링 (0) | 2024.07.26 |
| Bigdata00- R / 서울특별시 홈페이지 민원신청 게시판 글, 빅데이터 시각화 분석 (0) | 2018.05.31 |
| Bigdata00-빅데이터 시각화 작업, 자바 가상머신 JDK 설치 (0) | 2018.05.29 |
| Bigdata00-빅데이터 시각화 작업, R 프로그래밍을 위한 R 프로그램 설치 (0) | 2018.05.25 |
자바스크립트(JavaScript /Jas) 동일한 언어로 프로그래밍 할때, 프런트엔드 개발자가 작업하는 내용과 목적이 프런트엔드 디자이너가 작업하는 내용과 목적이 서로 다르다.
++ (Jas+Vue or React) 프런트엔드 개발자
서버 연동 및 백 데이터 피드백
++ (Jas+CSS) 프런트엔드 디자이너
사용자 인터렉티브 UI/UX 디자인 구현(개발)
'■■▶뷰_Vue.js◀(' 카테고리의 다른 글
| 08-Vue.js / vue-router (0) | 2024.06.09 |
|---|---|
| 07-Vue.js / Single File Component (0) | 2024.06.09 |
| 06-Vue.js / Directive (0) | 2024.06.09 |
| 05-Vue.js / Component Communication (0) | 2024.06.08 |
| 04-Vue.js / Component (0) | 2024.06.08 |
- 1.타동사 (우편물 따위를 행선지에 따라) 분류하다.
- 2.타동사 [해양] (배의) 항로를 선정하다.
- 명사 라우터(네트워크에서 데이터의 전달을 촉진하는 중계 장치)
1. vue-router
최근 개발되는 웹 어플리케이션은 SPA(Single Page Application)구조입니다. SPA는 여러 화면을 하나의 페이지 안에서 제공하면서도 화면을 별도로 로딩하지 않습니다. 따라서 화면마다 고유의 식별자를 기반으로 화면을 렌더링해야 합니다. 고유 식별자로 사용하기에 가장 적절한 정보는 바로 URI(Uniform Resource Identifier)입니다.
💡 vue-router는 vue.js의 공식 라우터 라이브러리 입니다.
vue-router에서 가장 중요한 것은 vue-router 라이브러리의 createRouter() 함수를 호출해 router객체를 생성하는 것입니다.
createRouter() 함수를 호출할 때 전달하는 인자 객체의 history 속성에는 사용할 라우팅 모드를 지정하고 routes 속성에는 요청 경로에 따라 어떤 컴포넌트를 렌더링할지를 지정합니다.
다음의 명령을 이용해서 프로젝트를 생성하고 필요한 라이브러리를 설치합니다.
npx @vue/cli create router-test
cd router-test
npm install vue-router@4
이번 예제의 어플리케이션 컴포넌트의 계층 구조는 다음과 같습니다.
'■■▶뷰_Vue.js◀(' 카테고리의 다른 글
| 09-Vue.js / 프런트엔드 디자이너(CSS, Jas) vs (Jas, React, Vue)프런트엔드 개발자 (0) | 2024.06.09 |
|---|---|
| 07-Vue.js / Single File Component (0) | 2024.06.09 |
| 06-Vue.js / Directive (0) | 2024.06.09 |
| 05-Vue.js / Component Communication (0) | 2024.06.08 |
| 04-Vue.js / Component (0) | 2024.06.08 |
1. 프로젝트 설정 도구
기본적인 내용에 대해 배웠으니 이제 Single File Component 기반으로 Vue application을 개발하는 방법에 대해서 알아보도록 하죠.
Single File Component는 컴포넌트 하나를 .vue 파일 하나에 작성하기 때문에 붙여진 이름입니다. 한 파일에 컴포넌트 구성을 위해 필요한 template, script, style 정보를 모두 포함하기 때문에 컴포넌트 단위로 관심사 분리(Seperation of Concern)가 이루어질 수 있습니다.
Single File Component 기반으로 Vue application을 개발위해서는 Webpack과 같은 모듈 번들러와 ES6, TypeScript와 같은 트랜스파일러를 함께 사용하도록 개발 프로젝트 환경을 설정해야 합니다. 하지만 이 과정이 순탄치는 않습니다. 그래서 몇가지 프로젝트 설정도구를 사용해서 조금 손쉽게 구현합니다.
2. Vue CLI 도구
Vue CLI는 Webpack기반의 Vue 공식 프로젝트 설정도구 였습니다.
이 Vue CLI는 공식 설정도구였지만 프로젝트를 생성하고 개발용 웹서버를 구동할 때 까지 시간이 꽤 오래 걸립니다. Webpack이 기능은 좋지만 관련된 모듈들이 덩치가 커서 다운로드하고 빌드, 번들링 과정을 거쳐야 하기 때문입니다.
그래서 2021년 까지만 해도 Vue 프로젝트를 생성할 때의 표준 도구로 사용되었지만 현재는 vite 기반의 create-vue 도구를 사용하는걸 권장하고 있습니다. 두가지 모두 알아두시는게 좋습니다.
일단 먼저 npx를 사용하기 위해서 최신버전으로 update를 진행해야 해요!
💡 npm install -g npm
설치가 완료되면 다음의 명령어를 이용해서 프로젝트를 생성해요!
💡 npx @vue/cli create test-vue-app
'■■▶뷰_Vue.js◀(' 카테고리의 다른 글
| 09-Vue.js / 프런트엔드 디자이너(CSS, Jas) vs (Jas, React, Vue)프런트엔드 개발자 (0) | 2024.06.09 |
|---|---|
| 08-Vue.js / vue-router (0) | 2024.06.09 |
| 06-Vue.js / Directive (0) | 2024.06.09 |
| 05-Vue.js / Component Communication (0) | 2024.06.08 |
| 04-Vue.js / Component (0) | 2024.06.08 |
1. Directive ?
디렉티브란 HTML 태그 안에 v- 접두사를 가지는 모든 속성을 의미합니다. 주로 사용되는 directive에 대해서 예를 들어가며 하나씩 알아보도록 하죠. 더 많은 directive가 있지만 필수적인 것들을 위주로 살펴보겠습니다.
1.1 v-text, v-html directive
데이터를 출력하기 위해서는 일반적으로 {{ }} (콧수염 문법)를 이용해요. 그런데 이거 말고 데이터를 출력하기 위한 directive가 따로 존재해요!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{ message }}</h2>
<h2 v-text="message"></h2>
<h2 v-html="message"></h2>
</div>
<script src='https://unpkg.com/vue'></script>
<script>
var vm = Vue.createApp({
name: 'App',
data() {
return {
message: '<i>안녕하세요!</i>'
}
}
}).mount('#app')
</script>
</body>
</html>
1.2 v-bind directive
v-bind directive는 Element의 속성(attribute)을 바인딩 하기 위해 사용합니다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
데이터 입력 : <input type="text" v-bind:value="msg">
<br><br>
<img :src="imgPath">
</div>
<script src='https://unpkg.com/vue'></script>
<script>
const vm = Vue.createApp({
name: 'App',
data() {
return {
msg: 'v-bind directive예요!',
imgPath: 'https://images.unsplash.com/photo-1532974297617-c0f05fe48bff?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8fA%3D%3D'
}
}
}).mount('#app')
</script>
</body>
</html>
위와 같이 v-bind directive를 통해 HTML Element의 속성이 변경된것을 확인할 수 있습니다.
이러한 기법을 데이터 바인딩 이라고 부릅니다. 많이 사용하는 방법인데 v-bind를 항상 명시하려다보니 너무 깁니다. 그래서 줄여쓰는 방법이 있는데 v-bind를 생략하는 것입니다. 즉, 아래와 같이 사용하면 됩니다.
한가지 주의해야 할 점은 v-bind는 단방향으로만 데이터를 바인딩합니다.
즉, Vue instance의 데이터나 속성이 바뀌면 UI를 갱신하게 되는데 반대로 화면의 바인딩된 요소에서 값을 변경하더라고 데이터가 바뀌는지 않는다는 것입니다. 이를 단방향 데이터 바인딩 이라고 합니다.
1.3 v-model directive
앞에서 살펴본 directive는 모두 단방향 데이터 바인딩을 지원합니다. 하지만 사용자로부터 입력값을 받고 싶은 경우에는 양방향 데이터 바인딩을 사용하면 편리합니다. 이럴때 사용하는 directive가 바로 v-model directive입니다.
기본코드부터 알아보아요!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
데이터 입력 : <input type="text" v-model="msg">
</div>
</div>
<script src='https://unpkg.com/vue'></script>
<script>
const vm = Vue.createApp({
name: 'App',
data() {
return {
msg: 'v-bind directive예요!'
}
}
}).mount('#app')
</script>
</body>
</html>
많이 사용하는 기능이기 때문에 다른예제 하나만 더 해보아요!
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<h2>취미생활</h2>
<input type="checkbox" id="hobbyA"
v-model="hobby" value="A">
<label for="hobbyA">운동</label>
<br>
<input type="checkbox" id="hobbyB"
v-model="hobby" value="B">
<label for="hobbyB">독서</label>
<br>
<input type="checkbox" id="hobbyC"
v-model="hobby" value="C">
<label for="hobbyC">음악</label>
<br>
<input type="checkbox" id="hobbyD"
v-model="hobby" value="D">
<label for="hobbyD">영화</label>
<br>
<br><br>
<select v-model="category">
<option value="code1">가전</option>
<option value="code2">음식</option>
<option value="code3">여행</option>
</select>
</div>
</div>
<script src='https://unpkg.com/vue'></script>
<script>
const vm = Vue.createApp({
data() {
return {
hobby: [],
category: ''
}
}
}).mount('#app')
</script>
</body>
</html>
1.4 조건 렌더링(v-show)
v-show는 화면에 보여줄지 말지를 결정하는 directive입니다. 렌더링은 수행(즉, HTML 요소는 생성)하지만 화면에 보여주지 않을 수 있다는 거죠.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
예금액 : <input type="text" v-model="amount">
<br><br>
현재 금액 : <span v-text="amount"></span>
<br><br>
대출 잔여 : <span v-text="amount" v-show="amount > 0"></span>
</div>
</div>
<script src='https://unpkg.com/vue'></script>
<script>
const vm = Vue.createApp({
data() {
return {
amount: 0
}
}
}).mount('#app')
</script>
</body>
</html>
1.5 v-if, v-else, v-else-if directive
v-if는 조건에 부합되지 않을 경우 렌더링을 수행하지 않습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
잔고: <input type="text" v-model="balance">
<br><br>
회원등급:
<span v-if="balance >= 1000000">Gold</span>
<span v-else-if="balance >= 100000">Silver</span>
<span v-else-if="balance >= 10000">Bronze</span>
<span v-else>Basic</span>
</div>
</div>
<script src='https://unpkg.com/vue'></script>
<script>
const vm = Vue.createApp({
data() {
return {
balance: 0
}
}
}).mount('#app')
</script>
</body>
</html>
1.6 v-for directive
반복적인 데이터를 렌더링하기 위해서 v-for directive를 사용합니다. 사용하는 방법은 JavaScript의 for문과 유사합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<table border="1">
<thead>
<tr>
<th>순번</th>
<th>번호</th>
<th>이름</th>
<th>전화번호</th>
</tr>
</thead>
<tbody>
<tr v-for="(contact, idx) in contacts" :key="contact.no">
<td>{{ idx + 1 }}</td>
<td>{{ contact.no }}</td>
<td>{{ contact.name }}</td>
<td>{{ contact.mobile }}</td>
</tr>
</tbody>
</table>
</div>
<script src='https://unpkg.com/vue'></script>
<script>
const vm = Vue.createApp({
data() {
return {
contacts: [{
no: 1000,
name: '홍길동',
mobile: '010-1111-2222'
},{
no: 2000,
name: '신사임당',
mobile: '010-3333-4444'
},{
no: 3000,
name: '강감찬',
mobile: '010-5555-6666'
}]
}
}
}).mount('#app')
</script>
</body>
</html>
+++++++
'■■▶뷰_Vue.js◀(' 카테고리의 다른 글
| 08-Vue.js / vue-router (0) | 2024.06.09 |
|---|---|
| 07-Vue.js / Single File Component (0) | 2024.06.09 |
| 05-Vue.js / Component Communication (0) | 2024.06.08 |
| 04-Vue.js / Component (0) | 2024.06.08 |
| 03-Vue.js / Instance (0) | 2024.06.08 |
