2. Node.js를 위한 기본 자바 스크립트
1) const, let
- var: 함수 스코프로 변수 선언(값 대입 가능)
- let: 블록 스코프로 변수 선언(값 대입 가능)
- const: 블록 스코프로 변수 선언(값 대입 불가)
- 기본적으로 const를 사용하고 다른 값을 대입해야할 경우에는 let 사용
- 호이스팅과 같은 문제 해결 및 수월한 코드관리가 가능
2) 템플릿 문자열
- 백틱(`)을 사용해서 문자열 내 스크립트 코드 사용 가능
- 사용 방법: `일반 문자열${스크립트 코드}일반 문자열`
- 예시
let name='james';
let hello=`hello ${name}`;
console.log(hello);
출력 결과: hello james
3) 객체 리터럴
- 객체 대입시 변수명이 겹치는 경우 대입 연산자 없이 사용 가능
- 예시
const a = 1;
const b = 2;
const c = { a, b }; // 기존 방식: const c = { a: a, b: b };
console.log(c); // 출력 결과: {a: 1, b: 2}
- 객체 대입시 'function'과 ':'를 사용할 필요 없음
- 예시
function say2(){ console.log(2) };
const obj = { say1(){ console.log(1) }, say2 };
// 기존 방식: const obj = { say1: function() { console.log(1) }, say2: say2 };
obj.say1(); // 출력 결과: 1
obj.say2(); // 출력 결과: 2
4) Arrow Function
- function 선언 대신 '=>' 기호 사용
- 인자가 하나일 경우 '()' 생략 가능
- 연산이 한 문장일 경우 '{}' 스코프 및 'return' 생략 가능
- 화살표 함수 사용시 상위 스코프의 this를 바인딩
- 예시
const sum=(x,y) => x+y;
const print=x => console.log(x);
const a = sum(1,2);
print(a); // 35) 비구조화 할당
- 배열 혹은 객체로부터 손쉽게 값을 얻어서 변수 선언 가능
- 예시
// 배열 활용
const arr=[1,2,3,4,5,6,7,8,9,10];
const [a, b, c, d, e, f, g, h, i, j] = arr; // 출력 결과: 1 2 3 4 5 6 7 8 9 10
const [aa, , cc, , ee, , gg, , ii]= arr; // 출력 결과: 1 3 5 7 9
// 객체 활용
const james = { age: 20, mobile: '01012349876', address: { home:'busan', uni:'seoul' } };
const { age, mobile, address: { home }, email } = james;
console.log( age, mobile, home, email ); // 출력 결과: 20 "01012349876" "busan" undefined
// 함수 활용
const getUserInfo= user => { const result = { age, mobile, address: { home }, email } = user;
return result; }
const jamesInfo = getUserInfo(james);
console.log(jamesInfo); // 출력 결과: {age: 20, mobile: "01012349876", address: {…}}
//*함수 지정을 통해 특정 객체에서 원하는 값만 받아올 수 있음
6) 프로미스
- Promise 객체는 비동기 작업의 완료(혹은 실패) 후 값을 반환한다.
- 콜백 중첩을 피할 수 있고 예외를 간편하게 처리할 수 있다.
- 프라미스가 중첩되어 구조가 복잡해질 수 있다.
- 프로미스의 3가지 상태
Pending: 대기 // 비동기 처리 완료 전
Fulfilled: 이행 // 비동기 처리 완료
Rejected: 실패 // 비동기 처리 실패
- 내장 함수
Promise.all(iterable) : 인자로 전달된 iterable 내의 반환값(프라미스 객체의 경우 resolved data)들을 한개의 프라미스 객체로 반환
Promise.race(iterable) : 인자로 전달된 iterable 객체 중 가장 먼저 resolve 혹은 reject된 데이터를 반환
Promise.then(resolve, reject) : 프라미스 객체를 반환
Promise.catch() : reject 케이스의 프라미스 객체를 반환
Promise.finally(onFinally) : 프라미스의 fulfilled 혹은 rejected 상태에 상관 없이 콜백이 실행되는 프라미스 객체 반환
Promise.reject(reason) : rejected 프라미스 객체를 reason과 함께 반환
Promise.resolve(value) : resolved 프라미스 객체를 value와 함께 반환
- 예시
// 기본적인 사용 예시
const promise = condition => {
return new Promise((resolve, reject) => {
condition
? resolve('참')
: reject('거짓') })
};
const check = condition => {
promise(condition)
.then( msg => { console.log(msg) })
.catch(err=>{ console.error(err) })
};
check(true); // '참'
check(false); // '거짓' 에러 발생
// request 사용 예시
function request() {
return new Promise(function (resolve, reject) {
$.get( 'url 주소', function (response) {
if (response) {
resolve(response);
}
reject( new Error("Request is failed") );
});
});
}
request().then( function (data) {
console.log(data); // response 값 출력
}).catch( function (err) {
console.error(err); // Error 출력
});
7) async/await
- 비동기 코드를 동기식으로 표현한 방식
- 복잡한 프로미스 구조를 간결하게 표현 가능하며 예외를 묶어서 처리할 수 있어서 코드량이 감소
- async function 키워드: async 함수를 정의(익명 함수 정의 가능)
- await 키워드: async function 내에서만 사용 가능하며 코드 실행 중 await 키워드를 만나면 async 함수의 실행을 중단시키고 Fulfilled, Rejected 상태가 되길 기다린 후에 async 재실행
- 형식
async function [name]([param1[, param2[, ..., paramN]]]) {
statements
}
- 예시
// 간단한 사용 예시
*지정된 시간 후 Hello 출력
function delay() {
return new Promise(resolve => {
setTimeout(() => {
resolve()
}, 1000)
}
)};
const hi = async function(name, sec) {
for (let i = 0; i < sec; i++)
await delay();
return name
};
hi('james', 1)
.then(name => {
console.log('Hello', name);
});
8) AJAX
- 비동기적 웹 서비스를 개발하기 위한 기법
- 페이지 이동 없이 서버에 요청을 보내서 응답을 받는 기술
- GET 예시 // onreadystatechange 사용
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
xhr.readyState === xhr.DONE && (
( xhr.status === 200 || xhr.status === 201 )
? console.log(xhr.responseText)
: console.error('error', xhr.responseText)
);
};
xhr.open('GET', 'http://localhost:3000');
xhr.send();
- GET 예시2 // onload, onerror 사용
const xhr = new XMLHttpRequest();
xhr.onload = () => {
xhr.readyState === xhr.DONE && console.log(xhr.responseText);
};
xhr.onerror = () => {
console.error('error', xhr.responseText);
};
xhr.open('GET', 'http://localhost:3000');
xhr.send();
- POST 예시 // JSON 데이터 전송
const xhr = new XMLHttpRequest();
const data = { name: 'wickies', birth: 1988, };
xhr.onreadystatechange = () => {
xhr.readyState === xhr.DONE && (
( xhr.status===200||xhr.status===201)
? console.log(xhr.responseText)
: console.error('error', xhr.responseText)
)};
xhr.open('POST', 'http://localhost:3000');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));9) FormData
- HTML form 태그의 데이터를 동적으로 제어할 수 있는 기능
- formData 객체의 메소드: append, has, get, getAll, delete, set
- 예시
const xhr = new XMLHttpRequest();
let formData = new FormData();
formData.append('name', 'Wickies');
formData.append('birth', 1988);
xhr.onreadystatechange = () => {
xhr.readyState === xhr.DONE && (
( xhr.status === 200 || xhr.status === 201)
? console.log(xhr.responseText)
: console.error('error', xhr.responseText)
)};
xhr.open('POST', 'http://localhost:3000');
xhr.send(formData);
10) encodeURIComponent / decodeURIComponent
- URI 인코딩에 사용
- 예시
xhr.open('POST', 'http://localhost:3000'+ encodeURIComponent('인코딩할 문자'));
- 요청을 받는 서버에서 decodeURIComponent를 통해 디코딩해서 사용
11) data attribute, dataset
- 클라이언트와 데이터를 주고받는 방법
- 보안성 유지가 필요한 데이터는 사용하지 않아야 함
- 예시
// 태그
<label data-label-first="데이터">라벨1</label>
<script>
console.log(document.querySelector('label').dataset);
// 결과: DOMStringMap { labelFirst : "데이터" }
</script>
'프로그래밍 > Node.js' 카테고리의 다른 글
| [Node.js] 테스트 프레임워크 및 부가 라이브러리 알아보기 (0) | 2019.07.06 |
|---|---|
| [Node.js] Nodemon이란? (0) | 2019.07.06 |
| [Node.js] Forever 란? (0) | 2019.07.06 |
| [Node.js 요약 정리] 3. Node 내장 객체와 내장 모듈 (0) | 2019.06.14 |
| [Node.js 요약 정리] 1. Node.js 개요 (0) | 2019.02.10 |