와이어 프레임이란? 와이어 프레임은 구조 수준에서 웹 사이트 서비스를 설계하는 방법입니다. 와이어 프레임은 일반적으로 사용자의 요구와 사용자 여정을 고려하여 페이지에 내용과 기능을 배치하는 데 사용됩니다. 와이어 프레임은 시각적 디자인과 내용이 추가되기 전에 페이지의 기본 구조를 설정하기 위해 개발 프로세스 초기에 사용됩니다.
어도비에서 Sketch에 대항하여 만든 프로그램입니다. UI가 상당히 유사하고 쉽기 때문에 적응하기 쉽습니다. 하지만 Adobe라는게 약점일 수 있습니다. 라이브러리가 많이 없으며 아직 불안정합니다. 이걸로 기획하다가 그냥 꺼지기를 여러번…. Sketch와는 다르게 자동으로 저장되지도 않아 자료를 여러번 날려먹었습니다. 제 작업용 컴퓨터를 맥으로 바꾸는데 제일 큰 역할을 했습니다. 하하
저는 우선 저번에 만들었던 second페이지에서 받아오는 정보를 다시 보여주는 페이지를 만들었습니다. 일단 폼을 만들고 라우터 연결 등등의 연결을 해줄겁니다. vue > front > src > components에 새로운 members폴더를 생성합니다.
members.html 생성
1
2
3
<div>
<h1>members</h1>
</div>
members.vue파일 생성
1
2
3
4
5
<template src = "./members.html"></template>
<style scoped src = "./members.css"></style>
<script>
</script>
그리고 주소 라우터를 생성해줍니다. 위치는 front > src > router > index.js
1
2
3
4
5
6
7
8
9
...
import members from'@/components/members/members'
...
{
path: '/members',
name: 'members',
component : members
}
...
3.api 미들웨어로 등록
app.js에 api를 미들웨어로 등록해줍니다.
1
2
app.use('/api', route);
//데이터만 응답하는 서버 api
4. test 페이지 라우터 만들기
이제 테스트 페이지의 라우터를 만들어줍니다. 라우트는 vue(최상위 위치) > routes 에서 셋팅해줍니다. index.js에서는
1
2
3
let accountRoute = require('./account.route');
module.exports = accountRoute;
account.route.js를 만들어 라우팅
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var express = require('express');
var db = require('../db.config');
var accountRoute = express.Router();
var ref = db.ref("/");
//firebase에서 들어가는 경로 설정
accountRoute.get('/test',(req, res) => {
var usersRef = ref.child("users")
//child 로 하위 메뉴로 들어감
usersRef.once('value')
.then((data)=>{
console.log(data);
res.send(data);
//then은 성공했을 때 행동양식
})
.catch(err => {
res.statusCode(500)
console.log(err)
//catch는 실패했을 때 행동양식
})
});
module.exports = accountRoute;
5. http 비동기 통신을 위해 axios라이브러리 설치
이 부분은 Vue.js 한국 사용자 모임에 잘 정리되어 있습니다. HTTP 요청을 위한 axios axios는 비동기 통신을 위한 플러그인입니다.
비동기 전송 방식은 요청과 그 결과가 동시에 일어나지 않습니다. 송, 수신간 동기를 맞추지 않고(?) 문자단위로 구분하여 전송합니다. 상대방의 상태와 관계없이 일방적으로 다음 동작을 발생시킵니다. 구현이 간단하고 비용이 적게드나 데이터 전송 시 많은 오버헤드(?)를 가진다고 합니다.
1
npm install --save axios
npm으로 axios를 설치해줍니다. 그리고 front > src에 들어있는 main.js에서 import.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from'vue'
import App from'./App'
import router from'./router'
import axios from'axios'
Vue.prototype.$http = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
6. localhost:3000 의 데이터를 받아오기
이제부터 좀 헷갈리기 시작합니다. 돌아가는 상황을 보면 second 파일에서 자료를 보낼때 그것을 캐치해서 members에 뿌리는 건가 싶기도 합니다.
일단 members에서는 localhost:3000의 데이터를 가져와보기로 합니다. members.vue에서 다음과 같은 태그를 넣어 줍니다.
저번에 만들었던 파일을 재활용합니다. public 폴더 안에 login.html 과 output.html 파일 만들어주기. 타이틀에서도 알 수 있듯이 login에서 ID와 password를 입력하면 output.html에서 보여지게 할겁니다.
1
2
3
4
5
6
7
8
9
10
11
12
//login.html
...
<body>
<formmethod="post"action = "/output">
<h4>아이디</h4>
<inputtype="text"name="id">
<h4>패스워드</h4>
<inputtype="password"name="password">
<buttontype="submit">전송</button>
</form>
</body>
...
Route 설정하기
라우팅은 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말합니다. 쉽게는 그냥 url을 지정하는 것이라고 생각하시면 될 듯 합니다. 이전에는 url에 정보를 담아 던지는 방법밖에 없어서 url자체가 길어지고 지저분 할 수 밖에 없었다고 하는데 라우팅을 통해서 간단한 url을 제공할 수 있습니다.
하지만 너무 제멋대로 실제 파일구조와 너무 다른 url을 생성한다면 같이 일하는 사람에게 욕먹음…
login.html 파일을 /login으로 url지정하기
1
2
3
router.route('/login').get((req, res)=>{
res.render('login.html');
});
위에서 /public 경로를 지정해 주었기 때문에 render에서는 이후 파일 이름만 넣어 줍니다.여기에서 확장자도 같이 넣어 주도록 합니다. 안그럼 오류나.. route에는 실제 url에 들어갈 이름 지정.
oupput.html파일을 /output으로 url지정
1
2
3
router.route('/output').post((req, res)=>{
res.render('output.html');
});
그리고 맨 끝에는 미들웨어에 router객체를 등록하는 태그를 넣어줍니다.
1
2
app.use('/', router);
//미들웨어에 router객체를 등록
login.html에서 넘어온 정보를 output.html에 뿌려주기
생각보다 넘나 간단한 것. 위에서 라우터 등록하는 부분에 user정보를 렌더합니다(?)
1
2
3
4
5
6
//app.js
router.route('/output').post((req, res)=>{
console.log('output 처리함')
var user = {id:req.body.id, password:req.body.password}
res.render('out.html', user);
});
그리고 헷갈려서 여태 보지 않았던 output.html을 봅시다. body안에 정보를 넣어 줍니다. 이때 태그는 <%= %>이런 형식의 태그를 씁니다.
1
2
3
4
5
6
7
8
9
10
//output.html
<body>
<h1>Express서버에서 응답한 결과입니다.</h1>
<p>
<%=id %>
</p>
<p>
<%=password %>
</p>
</body>
app.js에서 user의 id와 password를 키값으로 등록을 했기 때문에 HTML안에서는 간단하게 키값으로만 쓸 수 있습니다.
이제 node app.js로 노드를 서버를 실행시키고 localhost:3000/login에 들어가 정보를 입력하면 output으로 이동하는 것을 확인할 수 있습니다.
이렇게 하면 여전히 브라우저의 화면에서는 아무것도 나오지 않지만 명령프롬프트에서는 다음과 같이 출력되는 것을 확인 할 수 있다.
1
2
3
4
PS C:\workspace\test_02\node_02> node index.js
웹 서버가 시작되었습니다.
클라이언트가 접속했습니다. : ::1 3000
클라이언트 요청이 들어왔습니다.
눈에 보이지는 않지만 접속 함으로서 요청이 들어오긴 한 모양.
웹 서버에 요청을 보내는 방식(method)
GET : header에 요청정보를 넣어 보냄
POST : 본문에 요청정보를 넣어 보냄
PUT
DELETE
익스프레스로 웹 서버 만들기
실무에서 웹 서버를 구성할 때에는 express모듈을 주로 사용. express모듈을 사용하더라도 express모듈은 http모듈을 기초로 만들어진 것. 익스프레스 모듈에서는 미들웨어와 라우터를 제공하는데 이걸 알면 시능을 만드는게 훨씬 편리해 진다고 한다.
그럼 express모듈 설치
npm install express --save로 익스프레스 모듈을 설치 한다.
파일 생성해서 익스프레스 시작
1
2
3
4
5
6
7
8
9
//express 기본 모듈 불러오기
var express = require('express')
, http = require('http');
//express 객체 생성
var app = express();
//기본 포트를 app 객체에 속성으로 설정
app.set('port', process.env.PORT || 3000);
여기에서 축약한 형태가 들어가면서 눈에 잘 안보이는 형태가 있는데 이것은 var data = {};
data.port = 3000; 이렇게 들어가 있는 형태라고 생각하면 됨. ||이 연산자는 or연산자로 지금은 3000으로 들어가 있지만 만약에 process.env.PORT 가 설정되어 있다면 일단 그것으로 셋팅이 됨.
간단히 들은 설명으로는 인터넷 서버(브라우저)에서 결과를 볼 수 있던 자바 스크립트를 로컬서버(내 컴터)에서도 간단히 볼 수 있도록 하기 위해 노드를 쓰는 것이라고 한다. 서버에 올리지 않고도 볼 수 있는 것. 노드는 또한 모듈로 각 부분을 쪼개 놓는 것을 가능하게 한다. 모듈로 쪼개면 보기도 편해지고, 가벼워지고, 관리도 쉬워지는 장점이 있다.
Hello node
노드를 실행하는 방법은 생각보다 간단했다. 일단 뭔가 볼 수 있는 자바 스크립트 파일을 만든다.
1
console.log('Hello Node');
노드를 깔고 명령 프롬프트에 node + 해당 파일 이름을 입력한다.
1
node index.js
그럼 명령 프롬프트에서 결과를 볼 수 있음.
node 기초
내부 모듈 만들기
내부 모듈을 함 만들어 보겠음. calc.js 라는 이름으로 파일을 하나 만듦니다.
1
2
3
4
5
6
7
var calc = {};
clac.add = function(a,b){
return a+b;
}
module.exports = calc;
얘가 모듈, 더하기 기능을 밖으로 뺐다고 생각하자… 그리고 이것을 다른 파일에서 불러다 써보도록 하자
1
2
3
4
var calc = require('./calc.js');
//내부 모듈은 모듈의 위치를 적어준다.
console.log(calc.add(20, 45));
//65
외부 모듈 가져다 써보기
외부 모듈을 만들기 전에 일단 어떻게 외부 모듈을 가져와서 쓸 수 있는지 알아보자.
폴더를 만들어서 노드 프로젝트로 등록하자. mymoment라는 폴더를 생성. 이 위치에 npm init라는 명령어로 package.json 파일을 생성. 패키지 제이슨 파일에서 이 프로젝트에 쓰이는 외부 패키지들을 관리(?)할 수 있다.(“dependencies”) 이 패키지 파일을 프로젝트 별로 생성하게 되는데 그 이유는 프로젝트별로 사용하는 패키지와 버전이 각기 다르기 때문 script에서는 특정 동작에 대한 명령어를 만들 수 있다. ex)hexo s
moment.js 를 설치해보자. mymoment 폴더 위치에 npm install moment --save 를 입력. 그럼 자동으로 모멘트 js가 깔린다. 참고로 모멘트는 날짜 계산을 쉽게 도와주는 모듈. 모듈을 설치하면 package.json 파일의 dependencies에 "moment": "^2.21.0" 가 추가된 것을 확인할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"name": "mymoment",
"version": "1.0.0",
"description": "",
"main": "01.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"moment": "^2.21.0"
}
}
moment.js불러오기
1
2
3
4
5
6
7
var moment = require('moment');
functionnextMonth(){
return moment().add(1, 'M');
}
module.exports = {nextMonth};
모멘트를 불러온 후, 다음달을 계산하는 함수를 생성해서 내보내는 모듈 이렇게 하면 이제 외부 모듈을 가져와서 사용할 수 있다.
모듈을 만들어보자
.gitignore 파일 만들기 git에 올려야 하는데 node_modules은 제외하고 올려야 하니 .gitignore파일 만들어서 /node_modules적어주기
git에 새로운 repository 만들어서 올리기 그리고 주소 복사.
설치하는 방법은 아까와 마찬가지로 해당 파일 위치로 가서 npm install git주소(복사한 것)을 입력하는 것.
그러면 package.json 에서도 mymoment 라는 외부 모듈이 깔린 것을 확인 할 수 있다.
구글 차트 라이브러리는 총 29종의 기본적인 차트를 제공하는데, 멀티터치를 지원하고 호환성이 좋아서 모바일에서도 많이 사용하는 것 같다. 하지만 인터넷이 잘 되지 않는 환경이라면 보이지 않는나는 듯 써 놓고 보니 좀 이상하네. 웹에 띄우는 거면 인터넷이 되어야 뭐든 보일텐데…
내가 써야하는 베가 라이트. 베가는 D3라이브러리를 기반으로 하고 있는데 다른 차트들이 “내가 차트들을 준비했으니 맘에 드는 것을 골라서 써보렴” 하는 느낌이라면 베가는 “니가 다양하게 커스터마이징 할 수 있게 우리가 보조할게” 하는 느낌. 다양한 커스터 마이징이 가능하다. 관련 커뮤니티가 꾸준히 성장하고 있는 것도 장점 중의 하나.
무료로 사용가능. 더 많은 기능을 지원하는 vega와 간단하고 심플하게 사용 할 수 있는 vega-lite가 있다. 많은 장점이 있으나 ie8버전 이하는 지원하고 있지 않아 좀 고민이 있다.
이번에 차트 라이브러리 찾아보면서 알게된 중국에서 만든 차트. 바이두에서 만든 오픈소스 라이브러리이며 ie8이하까지 지원된다는 막강한 장점이 있다. 차트의 종류가 진짜 어마어마하게 많다. 니가 뭘 좋아할지 몰라서 다 준비해 봤어
개발자분께 이것저것 물어보니 자바스크립트 차트 라이브러리는 오조 오억개 정도 되는 느낌이다. 각자 다 장점과 단점이 있으니 살펴보고 프로젝트에 맞는 차트 라이브러리를 고르면 되겠다. 다만 한번 만든뒤로 업데이트가 되고 있지 않은 라이브러리들이 많은데 관련 커뮤니티가 꾸준히 성장하고 있는 라이브러리를 고르는 것이 좋을 것 같다.
vega-lite 기본 셋팅
본격적으로 베가 라이트를 살펴봅시당. 베가 라이트 예제에 들어가면 여러가지 예제를 살펴볼 수 있다. 이중에 나는 여러개의 라인으로 만들어진 라인차트가 필요. 베가라이트가 커스터 마이징으로 다양한 차트를 그릴 수 있지만 나는 일단 초심자이니 비슷한 것을 수정해 가면서 하나하나 배우기로 한다.
음 한번 예제를 구경 했으니 실제로 써보도록 하자. 사용하기에 가보면 어떻게 기본 셋팅을 해야 하는지 나와있다. 실시간으로 가져와도 되고 라이브러리 다운받아도 되고, 노드로 설치해도 되고…
이외에도 vega로 바꿀 수 있는 부분이 많이 있습니다. 베가 홈페이지의 Documentation에 보면 뭔가 많이 있습니다. 수정하고 싶으신 부분을 찾으시거나 비슷한 그래프를 인터넷에 찾아보시면 도움이 되실 거라고 생각합니다. 배울 건 언제나 넘치네요. 하지만 나는 귀찮을 뿐이고
