NodeJS란?
자바스크립트 엔진을 기반으로 만들어진 서버 사이드 플랫폼이다!
즉 웹브라우저에서 동작하던 자바스크립트로 서버 개발 할수 있게 만드는 플랫폼이다.
(일렉트론을 쓰면 응용소프트웨어도 만들수 있다 os도 안타는..)
특징으로는 단일 스레드, 뛰어난 확장성, 비동기 I/O 등이있다.
기본적으로 노드를 사용하기 위해서는 노드를 설치를 해줘야 하며 npm도 설치해줘야 한다
(npm은 node package manager의 약자)
공식 홈페이지에서 다운로드 가능하다
버전은 LTS버전(안정화버전)과 최신버전이 있다
용도에 맞춰 다운로드 후 설치하는데 설치도중 설치 옵션 중 Add To Path를 체크 후 설치하도록 하자
(리눅스는 설치방법이 다르다 참고)
os에 맞춰서 설치가 완료되면 terminal 혹은 cmd에 node 를 쳐보자 오류가 없다면 정상적으로 설치완료!
ECMA
최신에 Node의 문법은 ECMA6로 작성한다
ECMA6는 지원하지 않는 브라우저(ie8은 ES3 스펙 이라고 하며 ie9는 es5 스펙이라고 한다)도 있기 때문에 프론트 개발 할때는 신경(트랜스파일러를 쓰던가… 최신 브라우저만 쓰게 하던가…)써야 한다
var
기존 자바스크립트는 변수를 var라는 키워드로 선언 및 초기화가 가능했다
(var는 function-scoped이다)
하지만 ECMA2015(ES6)에서 새로 만들어진 문법으로 목적에 따라 변수를 선언 및 초기화 할 수 있도록 새롭게 만들어 졌다.
(let과 const는 block-scoped 기반이며 공통점으로는 동일한 변수명으로 재선언이 불가능하다는 점을 가지고 있다.)
참고 https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d
const
const는 constant(상수)라는 뜻처럼 말 그대로 한번 바뀌지 않는 상수이다.
(상수 이기에 선언과 초기화 한번에 이루어져야 한다)
(객체 안에 있는 값은 변경 가능하다)
const a = 1; // 가능
const b = 2; // 가능
a = 3; // error
let
let은 const 와는 다르게 재할당이 가능하다
let a = 1 // 가능
let a = 2 // error
a = 3 // 가능
Template String
ES6에서 새롭게 추가된 문법으로 새로운 문자열이 추가되었다.
사용법은 싱글 쿼테이션(‘’) 혹은 더블 쿼테이션(““)이 아닌 문자열은 백틱(``) 으로 감싸는것으로 사용이 가능하다.
기존에는 문자열을 아래와 같이 만들었다
var age = 10
var name = '홍길동'
var introduction = '제 이름은' + name +'이고 나이는' + age + '입니다.' // 연산자 활용
console.log(introduction)
템블릿 문자열은 이런식으로 사용이 가능하다
(쿼테이션이나 연산자나 기호가 없어져서 가독성이 더 좋다)
let age = 10
let name = '홍길동'
const introduction = `제 이름은 ${name} 이고 나이는 ${age}입니다.` // 백틱으로 감싼다
console.log(introduction)
객체리터럴
자바스크립트에서는 함수도 객체로서 활용 가능한데 이는 함수를 1급 객체로 취급하기 때문이다.
그렇기에 객체 안에서도 프로퍼티 뿐만이 아니라 함수도 존재하는걸 볼수 있다.
객체 리터럴(object literal)이라고 불리운다.
es5 객체 리터럴
var es5ValueCheck = function() {
console.log(this.x + ' ' + this.y)
}
var draw = {
x : 0,
y : 0,
init : function() {
this.x = 10;
this.y = 10;
},
es5ValueCheck : es5ValueCheck,
};
draw[z] = 0;
기존 es6에서는 아래와 같이 변했다
(function이 생략 되었으며 또한 객체안에서 key와 Value가 같다면
key만 적어도 value가 같이 생성이 되며 동적 생성 또한 가능하다)
const es6ValueCheck = function() {
console.log(`${this.x} ${this.y}`)
}
const newDraw = {
x : 0,
y : 0,
init() {
this.x = 10
this.y = 10;
},
es6ValueCheck,
this[z] = 0;
}
Arrow function
function 키워드로서 함수를 만들던 es5와는 다르게 es6은 화살표함수(Arrow function)이 추가 되었다.
익숙치 않다면 익숙해질때까지 여러번 보는것이 좋을 것이다..!
//es5 ver
//함수 선언문
funtion plus(a, b) {
return a + b;
}
//함수 표현식
var plus2 = function(a, b) {
return x + y
};
//es6 ver
//함수 표현식
const plus3 = (a, b) => {
return x + y; //return 줄인다면 아래와 같은 형태가 된다.
};
const plus4 = (a, b) => a + b; // 또는 (a + b)로 가능하다
// 로직(처리)이 필요하면 중괄호 필요없으면 소괄호 혹은 괄호없이 적어도 리턴이 된다.
화살표 함수 사용에 있어서 조심해야 하는 부분이 있는데 this를 사용할때는 조심해야 하는데 그 이유는 객체 안에서 함수를 사용할때 this가 액션에 바인드가 되는데 반해서
화살표 함수는 그 객체 이름에 바인드가 된다.
그래서 function 내부에서 this를 쓰도록 that = this 할당하는 것과 같은 일은 이제 화살표 함수를 쓰는것으로 대체 되었다.
쉽게말해 용도에 맞춰서 쓰자..!
비 구조화 할당
비 구조화 할당은 배열이나 객체의 속성을 각각 변수에 담는 형태의 새로운 표현식이다.
기존 배열이나 객체의 값을 꺼낼때는 아래와 같았다
// array
var array = [1,2,3,4,5]
var a1 = array[0]
var a2 = array[1]
console.log(a1)
console.log(a2)
// object
var jsObject = {
j1 : 1,
j2 : 2,
j3 : function() {
console.log(this.j2 += 1);
},
}
console.log(jsObject.j1)
console.log(jsObject.j2) // 프로퍼티도 가능
console.log(jsObject.j3()) // 함수도 가능
비 구조화 표현식을 사용하면 조금 더 간결하게 가능하다
// array
const [na1,na2,na3,na4,na5] = [1,2,3,4,5] // 알아서 key : value 식으로 매칭되는 형태
console.log(na1)
console.log(na2)
// 아래와 같이도 사용이 가능하다
const newArray = [1,2,3]
const [na1, na2, na3] = newArray
console.log(na1)
console.log(na2)
console.log(na3)
// object
const newJsObject = {
no1 : 1,
no2 : 2,
no3() {
console.log(no2 + 1)
// console.log(this.no2 + 1)
// 비 구조화 할당은 this를 할당 받지 못한다
}
}
const {no1,no2,no3} = newJsObject;
console.log(no1)
console.log(no2) // 프로퍼티도 가능
console.log(no3()) // 함수도 가능
// this들어간 코드를 사용하려면 객체이름을 다 써주면 가능하다
// 예시 : console.log(newJsObject.no3())
라이브러리의 자원을 가져올 때 무척 유용할것이다.