Vim 을 셋팅해보자

옛날부터 vim을 사용해보고 싶었지만… 넘나 편리하고 강력한 IDE와 에디터들이 많아서 쓰질 못했다.(절대 내탓 아님)
또 내 주변에 vim보다는 IDE나 에디터들을 사용하는 개발자들이 많아서 필요성을 딱히 못느끼고 있었다.

하지만 vim 으로 개발하는 개발자들을 볼때면 항상

아 나도 언젠간…

이런 생각에 잠기곤 했다.

그러던 중 회사에서 vim 으로 개발하는 개발자분과 페어 프로그래밍을 하게 되었는데 vim 써보는 것을 제안했다.

나는 당연히 수락했고 이제 점점 셋팅을 하면서 익숙해져가는 중이다.

해보자

vim은 시작할 때 home directory에 있는 ~/.vimrc에 있는 설정들을 불러와서 적용한다.

회사에서 셋팅한 것과 인터넷을 보고 참고하여 일단은 대충 셋팅했다.

General Setting

.vimrc description
set history=500 편집한 500줄 까지 기억하자!
let mapleader=”,” leader key, 을 사용.
set ruler 오른쪽 하단에 현재 위치를 표시함.
set showmatch 괄호 위에 커서가 올라가면 매치되는 괄호를 표시.
set number 줄 번호를 표시함.
set relativenumber 줄 번호를 상대적으로 표시함.
syntax on 문법 체크를 하자!
color seti color scheme를 seti로 사용

leader key

vim에서 기본적으로 <leader>를 사용하는데 다른 키와 매핑하여 다른 기능을 사용한다.

편의를 위해서 ,로 바꾸자

Color Schema

http://vimcolors.com/ 에서 다양한 color scheme를 확인할 수 있는데 원래 Atom에서 쓰던 seti를 사용했다.

Search Setting

.vimrc description
set ignorecase 찾을 때 대소문자 구별 안함.
set smartcase 똑똑하게 찾는다는데…
set hlsearch 찾은 결과를 highlight
set smartcase 찾을 때 커서를 옮김.

Indent Setting

.vimrc description
set tabstop=4 Tab을 4개 space로
set shiftwidth=4 Indent를 4개 space로
set softtabstop=4 Tab 키를 눌렀을 때 4개 space로
set expandtab 모든 Tab을 space로 설정
set smarttab 똑똑한 Tab?
set ai Auto Indent
set si Smart Indent

Key Mapping

.vimrc description
nnoremap vi :tabe ~/.vimrc ,vi => .vimrc 편집 탭 띄우기
nnoremap src :source ~/.vimrc ,src => Reload .vimrc
map q :q ,q => 종료
map :w F2 => 저장
map :set nu! relativenumber! F3 => Toggle line number
inoremap jk jk => Escape insert mode

Moving tab Setting

.vimrc description
map j Ctrl+j => 아래쪽 탭으로 이동
map k Ctrl+k => 위쪽 탭으로 이동
map h Ctrl+h => 왼쪽 탭으로 이동
map l Ctrl+l => 오른쪽 탭으로 이동

그래서

최종적으로 다음과 같은 .vimrc를 만들었다.

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" General Setting
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

" Sets history line
set history=500

" Mapping <leader> => ,
let mapleader=","

" Show current position at bottom-right
set ruler

set lazyredraw

set magic

" Show matching brackets when text indicator is over them
set showmatch

" How many tenths of a second to blink when matching brackets
set mat=2

" Show line number
set number

" Set line number relative
set relativenumber


""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Search Setting
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

" Ignore case when searching
set ignorecase

" Be smart when searching
set smartcase

" Highlight search last result
set hlsearch

" Move cursor when searching
set incsearch


""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Color Setting
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

" Syntax Enable
syntax on

" Use color scheme 'seti'
color seti



""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Indent Setting
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

" tab == 4 space
set tabstop=4
set shiftwidth=4
set softtabstop=4

" Using tab like 4 space
set expandtab
set smarttab

" Auto Indent
set ai
" Smart Indent
set si


""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Key Mapping
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

" ,vi => Show edit tab .vimrc
nnoremap <leader>vi :tabe ~/.vimrc<CR>

" ,src => Reload .vimrc
nnoremap <leader>src :source ~/.vimrc<CR>

" ,q => Quit
map <leader>q <ESC><ESC>:q<CR>

" F2 => Save File
"imap <F2> <ESC><ESC>:w<CR>
map <F2> <ESC><ESC>:w<CR>

" F3 => Toggle line number
map <F3> <ESC>:set nu! relativenumber!<CR>

" jk => esc, Escape insert mode
inoremap jk <ESC>


""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Moving tab Setting
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

map <C-j> <C-W>j
map <C-k> <C-W>k
map <C-h> <C-W>h
map <C-l> <C-W>l

Node.js & Express에서 JWT(JSON Web Token) 사용하기 -2-

전 포스트에서 JWT에 관한 설명을 조금 했는데 이번엔 내가 어떻게 썻는지에 대해서 중점적으로 남겨보려한다.(나중에 까먹을까봐)

이 방법이 Best Practice인지는 잘 모르겠지만…

혹시 이것보다 더 좋은 방법이 있다면 댓글로 알려주세요!

프로젝트 생성

Express 프로젝트를 생성하고 npm install을 해주자.

1
2
$ express --ejs express-jwt
$ cd express-jwt && npm install

일단 껍데기만 있는 Auth API를 만들어 두자.

app.js에 다음과 같이 추가하자.

1
2
3
4
5
// app.js

const auth = require('./routes/auth');

app.use('/auth', auth);

routes/auth.js 파일을 생성하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// routes/auth.js

const express = require('express');
const router = express.Router();

/* Sign Up API
* - parameter email
* - parameter password
* - parameter username
*/
router.post('/signup', (req, res, next) => {
res.send('ok');
});

/* Sign In API
* - parameter email
* - parameter password
*/
router.post('/signin', (req, res, next) => {
res.send('ok');
});

module.exports = router;

JWT 미들 웨어

그리고 jsonwebtoken이라는 모듈을 설치하자

1
$ npm i --save jsonwebtoken

그리고 Express에서 미들웨어처럼 사용하기 위해 utils/tokenHelper.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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// utils/tokenHelper.js

const jwt = require('jsonwebtoken');

const TOKEN_SECRET = 'secret';

const tokenGenerator = (data, callback) => {
const token = jwt.sign(data, TOKEN_SECRET, {
algorithm: 'HS256',
expiresIn: 60 * 60 * 24 * 7
})
callback(token)
}

const isValid = (token, callback) => {
jwt.verify(token, TOKEN_SECRET, (err, decode) => {
if (err) {
// console.log("=========Token Helper: Can't decode token")
callback({isValid: false})
} else {
const exp = new Date(decode.exp * 1000)
const now = Date.now()
const day = (60 * 60 * 24 * 1000)
if (exp < now) {
// console.log("=========Token Helper: Expired Token")
callback({isValid: false})
} else if (exp < now + (5 * day)) {
// console.log("=========Token Helper: Generate New Token")
const newToken = module.exports.generateToken(decode.user.id)
callback({isValid: true, token: newToken, userInfo:decode})
} else {
// console.log("=========Token Helper: Token is valid")
callback({isValid: true, token: token, userInfo:decode})

}
}
})
}

const tokenHandler = (req, res, next) => {
const { token } = req.query

if(token) {
module.exports.isValid(token, (result) => {
req.userInfo = result;
next()
})
} else {
req.userInfo = {isValid: false}
next()
}
}

export default {
tokenGenerator,
isValid,
tokenHandler
}

Node.js & Express에서 JWT(JSON Web Token) 사용하기 -1-

두달만을 개발할 때 학습한 것들을 정리해서 올리기로 결심했다.

지금 생각나는 후보로는 다음과 같다.

  • JWT
  • Sequelize
  • Socket.io

더 있지만 일단 이 3가지의 기본 셋팅정도는 포스팅으로 올려놓으면 나중에 다시 보기에 좋을듯 싶다.

가장 처음으로 JWT를 다루기로 했다.

프로젝트 초기에는 Redis를 사용한 세션기반의 인증 방식을 사용하고 있었다.

하지만 뭔가 세련된 방법이 없을까 고민다하가 튜터님의 조언으로 JWT라는 것을 사용해 보기로 했다.

JSON Web Token

들어가기 전에 JSON Web Token의 개념을 알아두자.

JWT??

JSON Web Token은 공개된 업계 표준인 RFC 7519 방식으로 양 측의 클레임(Claims)을 안전하게 한다.
JWT.IO를 사용하여 JWT를 디코드, 검증 및 생성할 수 있다.

Claim이라는 용어가 처음에 낯설었지만 서버와 클라이언트가 주고받는 정보나 메세지 정도로 생각하면 된다.

JSON 객체로된 클레임은 디지털로 서명되었기 때문에 검증되고 신뢰할 수 있다고 한다.

또한 다음과 같은 개념을 가진다.

  • Compact: JWT는 크기가 작기 때문에 URL, POST 파라미터 또는 HTTP Header에 포함될 수 있다. 크기가 작아 전송 속도 또한 빠르다고 할 수 있다.

  • Self-contained: JWT는 Payload에 필요한 데이터를 포함한다. 따라서 토큰을 생성할 때 데이터베이스에서 정보를 가져오면 그 다음부터는 데이터베이스에 질의를 하지 않아도 된다.

언제 JWT를 사용할까?

  • Authentication: JWT를 사용하는 가장 일반적인 시나리오다. 유저가 처음 로그인을 하면, 유저 정보를 포함한 JWT를 생성해 발급해준다. 그 후 유저는 각 요청에 발급받은 토큰을 포함해 보내는데, 서버에서 토큰을 기반으로 유저의 정보, 허용되는 경로 등의 정보를 데이터베이스의 접근없이 알 수 있다. 또한 세션을 유지하지 않아도 되므로 서버의 비용이 줄어들 수 있다.

  • Information Exchange: JWT는 공개 키나 비밀 키로 서명할 수 있기 때문에 안전하게 정보를 교환할 수 있다. 게다가 서명이 헤더와 페이로드를 사용하여 계산되므로 내용이 변경되었는지도 판별할 수 있다.

JWT의 구조

JWT는 점(.)으로 구분되는 세가지 요소를 가진다.

  • Header
  • Payload
  • Signature

그래서 결과적으로 xxxxx.yyyyy.zzzzz 형태를 가지게 된다.

JWT의 첫 번째 부분은 Header 로, 헤더는 2가지 속성 값을 가진다.

  • alg: 해싱 알고리즘. 보통 HMAC SHA256 혹은 RSA가 사용된다.
  • typ: 토큰의 타입 = JWT

다음과 같이 Header를 생성할 수 있다.

1
2
3
4
{
"alg": "HS256",
"typ": "JWT"
}

Payload

두 번째 부분은 처음에 클레임을 포함하는 Payload가 들어가게 된다.

클레임은 3가지로 구분할 수 있는데, 다음과 같다.

  • Reserved claims: 이것은 필수는 아니지만 JWT를 사용함에 있어 권장되는 미리 정의된 클레임 세트이다. iss(발행자), exp(만료 시간), sub(주제), aud(고객) 등을 포함한다.

  • Public claims: 이것은 JWT사용자끼리 충돌을 방지하기 위한 값을 포함한다. 보통 충돌을 방지하기 위한 네임스페이스를 사용한다.

  • Private claims: 정보를 담는 클레임.

다음과 같이 Payload를 생성할 수 있다.

1
2
3
4
5
{
"sub": "1234567890",
"name": "John Doe",
"admin": true
}

Signature

서명을 만들기 위해서는 인코딩된 헤더, 인코딩된 페이로드, 시크릿 키, 헤더에 지정된 알고리즘을 가진다.

예를 들면 다음과 같이 서명을 만들 수 있다.

1
2
3
4
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
secret)

이렇게 만든 서명으로 메세지가 변경되지 않았음(무결성)을 확인하는데 사용할 수 있다.

확인해보자

JWT Debugger에서 JWT를 디코딩해보거나, 검증하거나 생성해볼 수 있다.

JWT를 어떻게 쓰는…?

클라이언트는 서버에 인증 요청한다.

인증이 성공된다면 서버에서 사용할 클레임을 포함한 JWT를 생성해 클라이언트에게 넘겨준다.
일반적으로 로컬 저장소에 저장되지만 쿠키를 사용할 수도 있다.

그리고 클라이언트에서 인증이 필요한 어떠한 요청을 할 경우 요청 헤더에 다음과 같이 추가해준다.(Bearer는 토큰 타입을 결정하는 자리인데 OAuth2의 토큰 인증 방식이다.)

1
Authorization: Bearer <token>

서버는 요청 헤더에서 토큰 값을 디코딩해 필요한 정보를 가져올 수 있으며 그에 따른 요청 응답을 클라이언트에게 보내준다.

그래서 JWT를 사용하면

서버에서 토큰이 유효하다고 판단하면 클레임들을 디코딩해 정보를 가져올 수 있다.
서버의 메모리와 같이 다른 곳에 따로 관리를 하지 않아도 된다는 뜻이다.

따라서 Stateless한 서버를 만들 수 있게 된다.
그러므로 서버의 확장이 용이하고 요청 도메인에 관해 문제가 되지 않아 CORS문제를 생각하지 않아도 된다.

하지만 클레임셋이 증가하면 자연스레 토큰의 길이가 증가하게 되는데 요청 헤더에 토큰을 삽입하는 방식이므로 과한 오버헤드가 발생할 수 있다.

다음 포스팅

원래 프로젝트에서 사용한 예제도 포함하려 했는데

생각보다 JWT에 대한 설명이 길어져 다음 포스팅으로 넘기려한다.

간단한 예제긴 한데 나름 고민해서(?) 만들었고 나중에도 써먹기 위해 기록해둘 생각이다.

Refer

[번역] Overview of JavaScript ES6 features (a.k.a ECMAScript 6 and ES2015+)

이 글은 Adrian MejiaOverview of JavaScript ES6 features (a.k.a ECMAScript 6 and ES2015+)을 번역한 글입니다. 오타나 오역 제보는 언제나 환영입니다!


자바스크립트는 지난 몇 년간 꽤 많은 변화가 있었습니다. 지금 당장 쓸 수 있는 새로운 12가지 기능은 다음과 같습니다.

1. JavaScript History

이번에 자바스크립트에 추가된 기능을 ECMAScript 6 이라고 부릅니다. ES6 나 ES2015+ 라고도 불리죠.

1995년 자바스크립트 개념이 도입된 이래로, 자바스크립트는 서서히 진화해 오고 있었습니다. 기능을 추가하는 작업은 몇 년에 한번씩 일어나곤 했습니다. ECMAScript는 자바스크립트의 이러한 방향을 바로 잡기 위해 1997년에 등장했습니다. ECMAScript는 ES3, ES5, ES6 등과 같은 버젼을 발표해 왔습니다.

보시다시피, ES3, ES5 와 ES6은 각각 10년과 6년의 간격이 있습니다. 새 모델은 매년 작고 점진적인 변화를 만드는 것입니다. ES6 처럼 한 번에 엄청난 변화를 하는것 대신에요.

2. Browsers Support

모든 현대 브라우저와 환경은 ES6를 이미 지원하고 있습니다!


source: https://kangax.github.io/compat-table/es6/

Chrome, MS Edge, Firefox, Safari, Node와 많은 다른 환경에서 이미 자바스크립트 ES6의 기본적인 기능을 지원합니다. 그래서 당신이 이제 배울 모든 튜토리얼은 당장 사용해 볼 수 있습니다.

ECMAScript 6를 시작해봅시다!

3. Core ES6 Features

브라우저 콘솔에서 모든 코드들을 테스트 할 수 있습니다.

그러니 글만 읽지 말고 ES5와 ES6 예제를 테스트 해보길 바랍니다. 어서 해보죠 💪

3.1 Block scope variables

ES6에서 변수를 선언하기 위해 var 대신 let/const를 사용합니다.

var에 무슨 문제가 있었을까요?

var의 문제는 for문이나 if문과 같은 코드 블록에서 변수가 누출되는 것입니다.

ES5

1
2
3
4
5
6
7
8
9
10
var x = 'outer';
function test(inner) {
if (inner) {
var x = 'inner'; // scope whole function
return x;
}
return x; // gets redefined because line 4 declaration is hoisted
}
test(false); // undefined 😱
test(true); // inner

test(false)에서 outer가 반환되길 기대했지만, undefined를 얻었습니다.

왜 일까요?

왜냐하면 if 블록이 실행되지 않더라도 네째 줄의 var x가 호이스트(hoisted)되기 때문입니다.

var 호이스팅:

  • var는 함수 범위(scope)입니다. 이것은 선언되기 전에도 전체 함수에서 사용할 수 있습니다.
  • 선언(Declarations)은 호이스트(Hoisted)됩니다. 그래서 선언되기 전에도 변수를 사용할 수 있습니다.
  • 초기화(Initializations)는 호이스트되지 않습니다. 만약 var를 사용한다면 항상 맨 위에 변수를 선언하세요.
  • 호이스팅 규칙을 적용해 본 후에 무슨 일이 일어났는지 더 잘 이해할 수 있습니다.
    ES5
1
2
3
4
5
6
7
8
9
10
> var x = 'outer';
> function test(inner) {
> var x; // HOISTED DECLARATION
> if (inner) {
> x = 'inner'; // INITIALIZATION NOT HOISTED
> return x;
> }
> return x;
> }
>

ECMAScript 2015가 도와주러 왔습니다:

ES6

1
2
3
4
5
6
7
8
9
10
let x = 'outer';
function test(inner) {
if (inner) {
let x = 'inner';
return x;
}
return x; // gets result from line 1 as expected
}
test(false); // outer
test(true); // inner

varlet으로 변경하면 예상대로 작동합니다. if 블록이 호출되지 않는다면, 변수 x는 블록 밖으로 호이스트되지 않습니다.

호이스팅(hoisting) 과 “temporal dead zone”

  • ES6에서 let은 블록의 맨 위로 호이스트 됩니다.(ES5 처럼 함수의 맨위가 아닌)
  • 그러나, 변수가 선언되기 전에 블록에서 변수를 참조하는 것은 ReferenceError를 초래합니다.
  • let은 차단된 스코프를 가집니다. 선언되기 전에 사용할 수 없습니다.
  • “Temporal dead zone”은 블락의 처음부터 변수가 선언되기 전까지의 영역입니다.

IIFE

IIFE를 설명하기 전에 예제를 봅시다. 여길 봐주세요:

ES5

1
2
3
4
{
var private = 1;
}
console.log(private); // 1

보시다시피, private은 유출됩니다. 그것을 감싸기 위해 IIFE (immediately-invoked function expression)을 사용할 필요가 있습니다:

ES5

1
2
3
4
(function(){
var private2 = 1;
})();
console.log(private2); // Uncaught ReferenceError

jQuery/lodash 나 다른 오픈소스 프로젝트를 살펴보면 그것들은 전역 환경의 오염을 피하기위해 IIFE를 사용하고, 단지 _, $jQuery만 전역으로 정의합니다.

ES6에서 더 깔끔합니다. 블록과 let을 사용하면 더이상 IIFE를 사용할 필요가 없습니다.

ES6

1
2
3
4
{
let private3 = 1;
}
console.log(private3); // Uncaught ReferenceError

Const

변수를 전혀 변경하지 않는다면 const를 사용할 수 있습니다.

밑줄: var를 버리고 letconst로.

  • 모든 참조에 var의 사용을 피하고 const를 사용하세요.
  • 만약 참조를 재 정의해야 한다면 const 대신 let을 사용하세요

3.2 Template Literals

템플릿 리터럴을 사용하면 더이상 중첩된 연결을 하지 않아도 됩니다. 여길 보세요:

ES5

1
2
3
var first = 'Adrian';
var last = 'Mejia';
console.log('Your name is ' + first + ' ' + last + '.');

이제 우린 역 따옴표( ` )와 문자열 보간 ${}을 사용할 수 있습니다:

ES6

1
2
3
const first = 'Adrian';
const last = 'Mejia';
console.log(`Your name is ${first} ${last}.`);

3.3 Multi-line strings

아래처럼 더이상 문자열과 \n을 연결하지 않아도 됩니다.

ES5

1
2
3
4
5
6
7
8
9
var template = '<li *ngFor="let todo of todos" [ngClass]="{completed: todo.isDone}" >\n' +
' <div class="view">\n' +
' <input class="toggle" type="checkbox" [checked]="todo.isDone">\n' +
' <label></label>\n' +
' <button class="destroy"></button>\n' +
' </div>\n' +
' <input class="edit" value="">\n' +
'</li>';
console.log(template);

ES6에서 역 따옴표를 사용하여 이를 해결할 수 있습니다.

ES6

1
2
3
4
5
6
7
8
9
const template = `<li *ngFor="let todo of todos" [ngClass]="{completed: todo.isDone}" >
<div class="view">
<input class="toggle" type="checkbox" [checked]="todo.isDone">
<label></label>
<button class="destroy"></button>
</div>
<input class="edit" value="">
</li>`;
console.log(template);

두 코드는 정확히 똑같은 결과를 가지게 됩니다.

3.4 Destructuring Assignment

ES6 비구조화(Destructuring)은 매우 유용하고 중요합니다. 아래 예제를 보세요:

배열에서 요소 가져오기

ES5

1
2
3
4
var array = [1, 2, 3, 4];
var first = array[0];
var third = array[2];
console.log(first, third); // 1 3

다음과 같습니다:

ES6

1
2
3
const array = [1, 2, 3, 4];
const [first, ,third] = array;
console.log(first, third); // 1 3

값 치환

ES5

1
2
3
4
5
6
var a = 1;
var b = 2;
var tmp = a;
a = b;
b = tmp;
console.log(a, b); // 2 1

다음과 같습니다:

ES6

1
2
3
4
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

여러 반환 값에 대한 비구조화

ES5

1
2
3
4
5
6
7
8
function margin() {
var left=1, right=2, top=3, bottom=4;
return { left: left, right: right, top: top, bottom: bottom };
}
var data = margin();
var left = data.left;
var bottom = data.bottom;
console.log(left, bottom); // 1 4

세째 줄에서, 다음과 같은 배열로 리턴할 수도 있습니다.

1
return [left, right, top, bottom];

하지만 호출자(caller)는 반환된 데이터의 순서에 대해 생각해볼 필요가 있습니다.

1
2
var left = data[0];
var bottom = data[3];

ES6에서, 호출자는 필요한 데이터만 설택할 수 있습니다. (여섯째 줄):

ES6

1
2
3
4
5
6
function margin() {
const left=1, right=2, top=3, bottom=4;
return { left, right, top, bottom };
}
const { left, bottom } = margin();
console.log(left, bottom); // 1 4

Notice: 셋째 줄에서, 우리는 ES6의 새로운 기능을 사용하고 있습니다. { left: left }{ left }로 줄일 수 있습니다. ES5 버젼과 비교하면 얼마나 간결한지 보이시죠. 멋지지 않나요?

일치하는 매개변수에 대한 비구조화

ES5

1
2
3
4
5
6
7
var user = {firstName: 'Adrian', lastName: 'Mejia'};
function getFullName(user) {
var firstName = user.firstName;
var lastName = user.lastName;
return firstName + ' ' + lastName;
}
console.log(getFullName(user)); // Adrian Mejia

다음과 같습니다.(하지만 더 간결한)

ES6

1
2
3
4
5
const user = {firstName: 'Adrian', lastName: 'Mejia'};
function getFullName({ firstName, lastName }) {
return `${firstName} ${lastName}`;
}
console.log(getFullName(user)); // Adrian Mejia

Deep Matching

ES5

1
2
3
4
5
6
7
function settings() {
return { display: { color: 'red' }, keyboard: { layout: 'querty'} };
}
var tmp = settings();
var displayColor = tmp.display.color;
var keyboardLayout = tmp.keyboard.layout;
console.log(displayColor, keyboardLayout); // red querty

다음과 같습니다.(하지만 더 간결한)

ES6

1
2
3
4
5
function settings() {
return { display: { color: 'red' }, keyboard: { layout: 'querty'} };
}
const { display: { color: displayColor }, keyboard: { layout: keyboardLayout }} = settings();
console.log(displayColor, keyboardLayout); // red querty

이것은 객체 비구조화라고도 불립니다.

보시다시피, 비구조화는 매우 유용하고 좋은 코딩 스타일을 가지게 합니다.

모범 사례:

  • 배열 비구조화를 사용하여 요소를 가져오거나 값을 바꾸길 바랍니다. 임시 참조를 만들지 않아도 되게 도와줍니다.
  • 여러 값을 반환할 때 배열 비구조화를 사용하는 대신 객체 비구조화를 사용하세요.

3.5 Classes and Objects

ECMAScript 6에서, “constructor functions” 🔨 대신 “classes” 🍸 를 사용합니다.

자바스크립트에서 모든 단일 객체는 또 다른 객체인 프로토타입을 가지고 있습니다. 모든 자바스크립트 객체는 그들의 프로토타입의 메서드와 프로퍼티를 상속받습니다.

ES5에서, 우리는 다음과 같이 객체를 생성하기 위해 생성자 함수를 사용하여 객체 지향 프로그래밍(OOP)를 했습니다.

ES5

1
2
3
4
5
6
7
8
9
10
11
var Animal = (function () {
function MyConstructor(name) {
this.name = name;
}
MyConstructor.prototype.speak = function speak() {
console.log(this.name + ' makes a noise.');
};
return MyConstructor;
})();
var animal = new Animal('animal');
animal.speak(); // animal makes a noise.

ES6에는 몇가지 달콤한 문법이 존재합니다. 우리는 적은 보일러 플레이트와 새로운 키워드인 classconstructor 를 사용해 같은 작업을 수행할 수 있습니다. 또한 우리가 constructor.prototype.speak = function ()speak() 메서드를 얼마나 명확하게 정의했는지 확인해보세요:

ES6

1
2
3
4
5
6
7
8
9
10
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
const animal = new Animal('animal');
animal.speak(); // animal makes a noise.

보시다시피, 두 스타일 (ES5/6)은 동일한 결과를 만들어 내고 같은 방식으로 사용됩니다.

모범 사례:

  • 항상 클래스 문법을 사용하고 프로토 타입을 직접 조작하는 것을 피하세요. 왜냐구요? 왜냐하면 코드가 더 간결해지고 이해하기도 더 쉬워지기 때문입니다.
  • 빈 생성자를 가지는 것을 피하세요. 클래스는 생성자가 지정되지 않았다면 기본 생성자를 가집니다.

3.6 Inheritance

이전 Animal클래스를 기반으로 진행하겠습니다. 우리는 그것을 확장하여 Lion 클래스를 정의하기를 원합니다.

ES5에서, 이것은 프로토 타입 상속과 조금 더 관련이 있습니다.

ES5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var Lion = (function () {
function MyConstructor(name){
Animal.call(this, name);
}
// prototypal inheritance
MyConstructor.prototype = Object.create(Animal.prototype);
MyConstructor.prototype.constructor = Animal;
MyConstructor.prototype.speak = function speak() {
Animal.prototype.speak.call(this);
console.log(this.name + ' roars 🦁');
};
return MyConstructor;
})();
var lion = new Lion('Simba');
lion.speak(); // Simba makes a noise.
// Simba roars.

모든 디테일한 사항들을 검토하지 않을겁니다:

  • 셋째 줄에서 우리는 Animal 생성자를 매개변수와 함께 명시적으로 호출합니다.
  • 7-8 줄에서 Lion 프로토 타입을 Animal의 프로토 타입으로 지정했습니다.
  • 11 줄에서 부모 클래스인 Animal에서 speak 메서드를 호출합니다.

ES6에서 새 키워드인 extendssuper가 있습니다.

ES6

1
2
3
4
5
6
7
8
9
class Lion extends Animal {
speak() {
super.speak();
console.log(this.name + ' roars 🦁');
}
}
const lion = new Lion('Simba');
lion.speak(); // Simba makes a noise.
// Simba roars.

이 ES6 코드가 같은 동작을 하는 ES5 코드와 비해 얼마나 읽기 쉬운지 보세요. 승리!

모범 사례:

  • 상속을 위해 내장되어 있는 extends를 사용하세요

3.7 Native Promises

콜백 헬(Callback Hell) 👹 대신 프러미스(Promise) 🙏 를 사용합니다.

ES5

1
2
3
4
5
6
7
8
9
10
11
12
function printAfterTimeout(string, timeout, done){
setTimeout(function(){
done(string);
}, timeout);
}
printAfterTimeout('Hello ', 2e3, function(result){
console.log(result);
// nested callback
printAfterTimeout(result + 'Reader', 2e3, function(result){
console.log(result);
});
});

우리는 done일 때 실행하기 위해 콜백을 받는 함수를 가지고 있습니다. 우리는 두번씩 차례대로 실행해야 합니다. 그것이 콜백에서 printAfterTimeout를 두 번째로 호출한 이유입니다.

이것은 세 번째나 네 번째 콜백이 필요할 경우 매우 빨리 동작하게 됩니다. promise가 어떻게 동작하는지 봅시다:

ES6

1
2
3
4
5
6
7
8
9
10
11
12
13
function printAfterTimeout(string, timeout){
return new Promise((resolve, reject) => {
setTimeout(function(){
resolve(string);
}, timeout);
});
}
printAfterTimeout('Hello ', 2e3).then((result) => {
console.log(result);
return printAfterTimeout(result + 'Reader', 2e3);
}).then((result) => {
console.log(result);
});

보시다시피, promise를 사용하면 다른 함수가 완료된 후에 무언가를 하기 위해 then을 사용할 수 있습니다. 더이상 중첩 함수를 사용할 필요가 없어집니다.

3.8 Arrow functions

ES6는 함수 표현식을 제거하지 않았지만, 화살표 함수(arrow functions)라고 불리는 것을 새로 추가했습니다.

ES5에서 this의 문제가 몇가지 있었습니다:

ES5

1
2
3
4
5
6
7
var _this = this; // need to hold a reference
$('.btn').click(function(event){
_this.sendData(); // reference outer this
});
$('.input').on('change',function(event){
this.sendData(); // reference outer this
}.bind(this)); // bind to outer this

함수를 내부에서 참조하거나 bind를 사용하기 위해 임시로 this를 사용해야만 합니다. 하지만 ES6에서 화살표 함수를 사용할 수 있습니다.

ES6

1
2
3
4
5
// this will reference the outer one
$('.btn').click((event) => this.sendData());
// implicit returns
const ids = [291, 288, 984];
const messages = ids.map(value => `ID is ${value}`);

3.9 For…of

forforEach 대신 for...of를 사용합니다.

ES5

1
2
3
4
5
6
7
8
9
10
// for
var array = ['a', 'b', 'c', 'd'];
for (var i = 0; i < array.length; i++) {
var element = array[i];
console.log(element);
}
// forEach
array.forEach(function (element) {
console.log(element);
});

ES6 for...of 또한 반복 작업을 수행할 수 있습니다.

ES6

1
2
3
4
5
// for ...of
const array = ['a', 'b', 'c', 'd'];
for (const element of array) {
console.log(element);
}

3.10 Default parameters

변수가 정의되었는지 확인하는 것 대신 default parameters로 값을 지정할 수 있습니다. 전에 이렇게 한 적이 있나요?

ES5

1
2
3
4
5
6
7
8
9
10
function point(x, y, isFlag){
x = x || 0;
y = y || -1;
isFlag = isFlag || true;
console.log(x,y, isFlag);
}
point(0, 0) // 0 -1 true 😱
point(0, 0, false) // 0 -1 true 😱😱
point(1) // 1 -1 true
point() // 0 -1 true

아마도 변수가 값을 가지고 있는지 확인하거나 기본 값을 할당하는 일반적인 패턴입니다. 그러나 몇 가지 문제가 있는 것을 확인하세요:

  • 여덟째 줄, 0, 0을 넘겨주고 0, -1을 받게됩니다.
  • 아홉째 줄, false를 넘겨주고 true를 받게됩니다.

기본 매개변수로 부울 값을 갖거나 값을 0으로 설정한다면 작동하지 않습니다. 왜 그런지 아시나요? ES6 예를 들어 설명해 드리겠습니다. ;)

ES6를 사용하면 더 적은 코드로 더 좋게 할 수 있습니다!

ES6

1
2
3
4
5
6
7
function point(x = 0, y = -1, isFlag = true){
console.log(x,y, isFlag);
}
point(0, 0) // 0 0 true
point(0, 0, false) // 0 0 false
point(1) // 1 -1 true
point() // 0 -1 true

다섯째 줄과 여섯째 줄은 예상대로 결과를 얻었습니다. ES5 예제는 동작하지 않았었죠. 우리는 false, null, undefined0 은 거짓 값이므로 undefined를 먼저 확인해야 합니다. 숫자는 잊을 수 있습니다.

ES5

1
2
3
4
5
6
7
8
9
10
function point(x, y, isFlag){
x = x || 0;
y = typeof(y) === 'undefined' ? -1 : y;
isFlag = typeof(isFlag) === 'undefined' ? true : isFlag;
console.log(x,y, isFlag);
}
point(0, 0) // 0 0 true
point(0, 0, false) // 0 0 false
point(1) // 1 -1 true
point() // 0 -1 true

undefined를 확인할 때 비로소 예상대로 동작하게 됩니다.

3.11 Rest parameters

매개변수에서 나머지 매개변수와 전개 연산자로 왔습니다.

ES5에서 매개변수에서 임의의 변수를 얻는 것은 어렵습니다.

ES5

1
2
3
4
5
6
function printf(format) {
var params = [].slice.call(arguments, 1);
console.log('params: ', params);
console.log('format: ', format);
}
printf('%s %d %.2f', 'adrian', 321, Math.PI);

우리는 나머지 매개변수 ...를 사용하여 동일한 작업을 수행할 수 있습니다.

ES6

1
2
3
4
5
function printf(format, ...params) {
console.log('params: ', params);
console.log('format: ', format);
}
printf('%s %d %.2f', 'adrian', 321, Math.PI);

3.12 Spread operator

우리는 apply()대신 전개 연산자를 사용합니다. 우리는 다시 ...의 도움을 받습니다:

주의사항: 우리는 배열을 전달인자의 목록으로 바꾸기 위해 apply()를 사용합니다. 예를 들어, Math.max()는 전달인자의 목록을 취하지만 배열인 경우 apply를 사용하여 동작하게 합니다.

먼저 보았듯이, apply를 사용해 전달인자의 목록을 배열로 넘겼습니다.

ES5

1
Math.max.apply(Math, [2,100,1,6,43]) // 100

ES6에서는 전개 연산자를 사용할 수 있습니다.

ES6

1
Math.max(...[2,100,1,6,43]) // 100

또한 우리는 concat 대신 전개 연산자를 사용할 수 있습니다.

ES5

1
2
3
4
var array1 = [2,100,1,6,43];
var array2 = ['a', 'b', 'c', 'd'];
var array3 = [false, true, null, undefined];
console.log(array1.concat(array2, array3));

ES6에서 전개 연산자를 사용해 중첩된 배열을 병합 할 수 있습니다:

ES6

1
2
3
4
const array1 = [2,100,1,6,43];
const array2 = ['a', 'b', 'c', 'd'];
const array3 = [false, true, null, undefined];
console.log([...array1, ...array2, ...array3]);

4. Conclusion

자바스크립트는 많은 변화를 겪었습니다. 이 글은 모든 자바스크립트 개발자가 알아야 할 중심 기능을 다뤘습니다. 또한 코드를 보다 간결하고 쉽게 이해할 수 있는 모범 사례를 제공했습니다.

만약 꼭 알아야할 다른 기능이 있다면 아래 댓글로 알려주세요. 저는 이 글을 업데이트할 것 입니다.

5. 역자 후기

매번 ES6를 공부 해야지 생각만 하다가 좋은 글을 발견하여 읽게되었다.
읽는 도중에 영어가 막혀서 한글로 번역해서 보고 싶다고 생각했다.

그것이 나의 첫 번역이었다.

역시 영어가 서툰 나에게는 글 내용 자체를 이해하기도 힘들었다.
그래서 번역을 할 때 단어가 의미하는 것이 정확이 무엇인지 조사하고 그에 맞는 적절한 단어를 선택할 수 밖에 없었는데, 그 점이 오히려 나의 이해를 도운것 같다.

영어 공부를 더 해야겠다…

[원문보기]

Google Analytics에 이상한 놈이 잡힌다

새해 목표중 하나가 블로그 활성화하기 였다.

그래서 디자인도 조금 바꾸고 구조도 약간 바꾸면서 작업하고 있었다.

그러던 중에 Google Analytics에 들어가봤는데 이상한 놈(?)이 잡혀있었다.

딱봐도 수상해 보이는 놈들이 있다.

  • Vitaly rules google ☆*:。゜゚・*ヽ(^ᴗ^)ノ*・゜゚。:*☆ ¯\_(ツ)_/¯(ಠ益ಠ)(ಥ‿ಥ)(ʘ‿ʘ)ლ(ಠ_ಠლ)( ͡° ͜ʖ ͡°)ヽ(゚Д゚)ノʕ•̫͡•ʔᶘ ᵒᴥᵒᶅ(=^ ^=)oO
  • Congratulations to Trump and all americans

Vitaly rules google…

첫번째 놈을 구글링을 했더니 포럼 페이지가 나왔다.

알아보니 러시아산 스팸일거라는 말들이 있었다.

이 스팸이 사이트에 직접적으로 영향을 주지는 않지만 GA에서 웹 로그 분석 결과를 오염 시킬 수 있기 때문에 제거하는 것이 좋다.

GA에서 조회수가 올랐다고 나오는데 다 이놈들이었다고 상상하면…

Congratulations to Trump…

두번째 놈은 Refer가 washingtonpost.com로 찍혔었는데 Refer 전체를 보면 워싱턴 포스트의 트럼프 대선 승리 기사로 이어졌다.
트럼프 기사를 보게하려는 스패머의 의도같다. 그러므로 기사 링크는 클릭하지 않는게 좋을 것 같다.

스패머는 트럼프 지지자임에 틀림없다.

해결방법

해결방법은 Google Analytics에서 제공하는 필터기능을 사용하면 된다고 한다.

관리 > 필터 > 필터 추가

같은 방법으로 아래 도메인들을 추가하자(포럼 페이지에서 언급되었던 도메인인데 아마도 과거에 스팸을 보냈던 도메인일듯)

1
2
3
4
5
6
7
8
9
10
11
12
13
darodar.com
pornhub-forum.ga
pornhub-forum.uni.me
hulfingtonpost.com
Get-Free-Traffic-Now.com
youpron-forum.ga
buy-cheap-online.info
googlsucks.com
rapidgator-pron.ga
10.205.10.237
generalgorn.org
pronhubforum.tk
theguardlan.com

그래서 이렇게 필터를 구성하면 된다.

Refer

라즈베리파이로 슬랙 봇 개발(a.k.a JARVIS)

마지막 학기에 임베디드 시스템 설계라는 과목을 들었다.

그동안 관심있던 라즈베리파이를 사용한다는 강의계획서를 보고 바로 신청하게 되었는데 과목 이름만 보면 하드웨어도 엄청 다뤄야할 것 같은 과목이지만 특이하게 라즈베리파이르 사용해서 챗봇을 만들게 되었다.

사실 페이스북 메세지와 라즈베리파이를 사용해 챗봇을 개발해본 경험이 있어 손쉽게날로먹으려고 개발할 수 있겠다 싶었다.

개발 과정

Slack Bot User

슬랙 봇을 사용하는 방법은 아주 간단하다.
링크에 들어가면 봇 이름을 적으면 끝!
jarvis

그러면 다음과 같이 토큰을 발급해 주는데 이 토큰으로 API를 사용할 수 있다.

jarvis

python-rtmbot

Real Time Messaging API 를 사용하기 위해 python-rtmbot라이브러리를 사용했다.
사용방법은 Github페이지에 매우 자세하고도 간단하게 나와있다.
아래 그림처럼 플러그인을 추가하면 봇을 사용할 수 있다.

1
2
3
4
5
6
7
8
9
10
class Jarvis(plugin):
def process_message(self, data):
try:
self.send_message(data)
except Exception as e:
text = ":shit: Error : " + str(e)
slack.slack_client.api_call(
"chat.postMessage",
channel=data.get("channel"), text=text, as_user=True
)

개발 중 에러가 발생하면 로그에 에러메세지가 뜨지만 슬랙에서는 아무런 반응이 없어서 이것이 오래 걸리는 작업이라 그런건지 에러가 난건지 알 수 없었다. 그래서 에러가 발생하면 에러 메세지를 슬랙으로 전송해 개발 효율을 높일수 있었다.

jarvis

Django

봇 기능중에 온습도를 측정하는 기능이 있었는데 센서에서 값을 실시간으로 불러오면 시간이 조금 걸렸다.
그래서 어딘가에 주기적으로 기록하고 그 값을 가져오야 겠다 싶기도 했고, 옵습도 값 변화를 한눈에 보면 좋겠다싶어 웹 서버 하나를 만들어 그래프를 만들었다.
그래서 웹서버로 Django를 사용했다.

Django-crontab

온습도 값을 센서에서 읽어와 데이터베이스에 저장하는 스크립트를 crontab으로 하려했는데 찾아보니 Django-crontab이란것을 발견했다.
이것의 장점은 Django의 ORM기능을 그대로 사용할 수 있다는 것이다.
덕분에 아래와 같이 코드량이 매우 감소해 개발시간을 줄일 수 있었다.
Django-crontab 역시 Github에 문서화가 잘 되어있어 사용법을 참고하면 된다.

1
2
3
4
5
6
7
8
9
10
import Adafruit_DHT
from common import models
from datetime import datetime

def add_dht():
sensor = Adafruit_DHT.DHT11
pin = 4
humidity, temperature = Adafruit_DHT.read_retry(sensor, pin)
dht = models.DHT(humidity=humidity, temperature=temperature, created_at=datetime.now())
dht.save()

기능

온습도 조회

jarvis

날씨 검색

jarvis

사실 기능이 더 있지만 궁금하신 분은 슬라이드를…(거의 없겠지만)

그리고

이 프로젝트를 진행하고 있던 학기 중에는 몰랐지만 이 글을 쓰고 있는 시점에 갑자기 저커버그가 실제로 자비스를 개발했다고 기사가 나왔다.

그 기사를 보는 순간 내가 한 프로젝트가 초라해지기 시작해서 이 글도 올리지 말아야겠다 하고 있었는데, 뭐 어짜피 보는 사람도 별로 없는 블로그이므로 그냥 올려보기로 했다. ㅠ.ㅠ

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×