[Node.js] 2장

2.1 ES2015+

자바스크립트는 문법 변경 사항이 존재한다. 2015년에 자바스크립트 문법에 매우 큰 변화가 존재하는데, 변화한 문법에 대해 알고 있어야한다.

 

2.1.1 const, let

const와 let이 공통적으로 갖는 블록 스코프에 대해 알아보자.

var은 함수 스코프를 가진다. 이러한 경우 호이스팅이 발생하게된다.

const와 let은 블록 스코프를 사용함으로써 호이스팅 문제를 해결할 수 있다.

const와 let의 차이점은 const는 한 번 값을 할당하면 다른 값을 할당할 수 없다.

 

const 와 let 중 무엇을 써야할까?

자바스크립트를 사용할 때 한 번 초기화했던 변수에 다른 값을 할당하는 경우는 의외로 적다. 따라서 변수 선언 시에 기본적으로 const를 사용하고, 다른 값을 할당해야 하는 상황이 생겼을 때 let을 사용하면 된다.

 

2.1.2 템플릿 문자열

큰따옴표나 작은따옴표로 외에도 백틱으로도 문자열을 구현할 수 있다.  큰 따옴표나 작은 따옴표와는 다르게 들여쓰기나 변수를 넣기에 용이하다.

 

2.1.3 객체 리터럴

객체 리터럴이란 이름-값 쌍의 집합으로 구성된 데이터 구조를 선언하는 방법이다. 객체 리터럴은 중괄호로 둘러싸여 있으며, 내부에는 키와 값이 콜론 (`:`) 으로 둘러싸여 있어야한다.

 

2.1.4 화살표 함수

자바스크립트에서 화살표함수는 함수를 보다 짧은 문법으로 표현할수 있는 기능이다. 화살표 함수는 `function`이라는 키워드를 사용하지 않고, 대신 화살표(`=>`)를 사용하여 함수를 선언한다.

화살표 함수 예시

화살표 함수는 기존 function과 this 바인드가 다르다. 따라서 this 사용에 따라 화살표 함수를 쓸지, function을 쓸지 고를 수 있다. 기본적으로는 화살표 함수를 사용하는 것이 권장된다.

 

2.1.5 구조 분해 할당

구조 분해 할당을 사용하면 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있다.

구조 분해 할당 예시

 

2.1.6 클래스

 자바스크립트에서 모든 객체는 다른 객체의 프로토타입을 상속받는다. 이를 통해 메소드와 속성을 다른 객체와 공유할 수 있다.

 이와 비슷한 클래스 문법이 추가되었다.

클래스 예시

 클래스 문법을 사용하면 생성자 함수를 `constructor` 메소드로 정의하고, 인스턴스 메소드를 클래스 본문 내부에 직접 추가할 수 있다. `new` 키워드를 사용하여 인스턴스를 생성하는 점은 변하지 않는다.

 

2.1.7 프로미스

 자바스크립트에서 프로미스는 비동기 연산의 최종 완료 및 그 결과 값을 나타내는 객체이다. 프로미스는 비동기 작업을 좀 더 쉽게 다룰 수 있도록 도와준다. 

 프로미스는 세 가지 상태를 가진다.

• Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태
• Fullfilled(이행): 비동기 처리가 성공적으로 완료되어 프로미스가 결과값을 반환한 상태
• Rejected(거부): 비동기 처리가 실패하거나 오류가 발생한 상태

프로미스 생성: 프로미스 객체는 `Promise` 생성자를 사용하여 생성한다. 이 생성자는 비동기 작업을 수행할 실행 함수(execute function)를 인자로 받는다. 실행 함수는 `resolve`와 `reject`라는 두 개의 콜백을 인자로 받는다.

프로미스 생성 예시

프로미스 사용: 프로미스가 성공적으로 완료되면(즉, 이행 상태가 되면) `.then()` 메소드를 사용하여 결과값을 받을 수 있다. 프로미스가 거부되면 (즉, 실패 상태가 되면) `.catch()` 메소드를 사용하여 오류를 처리할 수 있다. 또한 `.finally()`메소드는 프로미스의 성공/실패 여부와 상관없이 실행되는 로직을 정의할 때 사용된다.

프로미스 사용 예시

프로미스는 비동기 프로그래밍을 훨씬 쉽고 명확하게 만들어준다. 콜백 지옥을 피하고, 코드의 가독성을 높이며, 에러 처리를 더 간단하게 할 수 있게 도와준다.

 

2.1.8 async/await

자바스크립트에서 비동기 작업을 보다 간결하고 동기 작업과 유사하게 작성할 수 있도록하는 문법이다.

 

async 함수: `async` 키워드는 함수 앞에 위치한다. 함수 내부에서 반환된 값은 자동으로 프로미스로 감싸져 `resolve`된 값이 된다. 만약 함수가 프로미스를 직접 반환하면, 그 프로미스는 `async` 함수에 의해 추가적으로 감싸지지 않는다.

async 함수 예시

await 표현식: `await` 키워드는 `async` 함수 내부에서만 사용할 수 있으며, 프로미스의 완료를 기다린다. `await`는 프로미스가 `fullfilled` 상태가 될 때까지 함수의 실행을 일시 중지하고, 프로미스의 결과값으로 표현식을 해결한다. 프로미스가 `rejected` 상태가 되면 예외가 발생하여 `try...catch` 블록을 사용하여 에러를 처리할 수 있다.

await 표현식 예시

async/await를 사용하면 비동기 코드를 거의 동기 코드처럼 읽고 쓸 수 있어, 코드의 가독성과 유지보수성이 크게 향상된다.

 

2.1.9 Map/Set

 자바스크립트의 `Map` 객체는 키-값 쌍을 저장하는 데 사용된다. 다른 객체와 달리 `Map`은 키로 어떤 타입의 값이든 사용 할 수 있으며, 이는 기본적인 객체 리터럴에서는 불가능한 기능이다. `Map`은 요소의 삽입 순서를 기억하며, `Map`의 요소는 순서대로 반복된다.

map 예시

 `Set` 객체는 중복을 허용하지 않는 값의 집합으로, 각 값은 `Set` 내에서 유일하다. `Set` 내의 값은 어떤 타입이든 될 수 있다.

set 예시

 

2.1.10 널 병합/옵셔널 체이닝

 널 병합 연산자(`??`)는 좌항의 피연산자가 `null`이나 `undefined`일 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. 이는 기본적으로 변수에 기본값을 할당할 때 유용하게 사용된다.

널 병합 연산자 예시

 옵셔널 체이닝 연산자(`?.`)를 사용하면 객체의 속성을 읽을 때 해당 객체나 속성이 `null`이나 `undefined`인지 매번 확인하지 않고도 안전하게 접근할 수 있다. 만약 접근하려는 연쇄 중 어느 하나라도 `null` 이나 `undefined`이면, 표현식은 즉시 중단되고 `undefined`를 반환한다.

옵셔널 체이닝 연산자

 

2.2 프런트엔드 자바스크립트

 

2.2.1 AJAX

AJAX(Asynchronous Javascript And XML)는 비동기적 웹 서비스를 개발할 때 사용하는 기법이다. 보통 AJAX 요청은 jQuery나 axios 같은 라이브러리를 이용해서 보낸다.

 

Axios

Axios는 `get`, `post`, `put`, `delete` 등의 메소드를 제공하여 다양한 HTTP 요청을 쉽게 할 수 있다. `then()` 메소드로 응답을 처리하고, `catch()` 메소드로 에러를 처리한다.

axios 예시

 

jQuery

jQuery는 자바스크립트 라이브러리로, AJAX 요청을 포함한 다양한 기능을 제공한다. jQuery를 사용하면 AJAX 요청을 쉽게 구현할 수 있다.

jQuery 예시

 

2.2.2 FormData

 자바스크립트의 `FormData` 객체는 폼 필드와 그 값을 쉽게 구성하여 서버에 데이터를 비동기적으로 전송할 수 있게 해주는 API이다. `FormData`는 주로 파일 업로드를 포함한 폼 데이터를 AJAX 요청으로 전송할 때 사용된다.

formdata 예시

FormData는 다양한 메서드를 가지고 있다.

• append: 지정된 키에 값을 추가한다.
• delete: 지정된 키를 가진 데이터를 `FormData` 객체에서 삭제한다
• get: 지정된 키의 첫 번째 값을 반환한다. 해당 키가 존재하지 않으면 `null`을 반환한다
• getAll: 지정된 키의 모든 값을 `Array`로 반환한다. 해당 키가 존재하지 않으면 빈 배열을 반환한다.
• has: 지정된 키가 `FormData` 객체에 존재하는지 여부를 확인한다. 존재하면 `true` 그렇지 않으면 `false`를 반환한다.
• set: 지정된 키의 값을 새로운 값으로 설정한다. 해당 키에 이미 값이 존재하면, 그 값을 대체한다. `fileName`은 파일 데이터를 설정할 때 사요된다.

Axios를 사용한 FormData 요청 예시이다.

파일 업로드를 위한 HTML

Axios와 FormData를 사용한 파일 업로드

 

2.2.3 encodeURIComponent, decodeURIComponent

 요청을 보낼 때 주소에 한글이 들어가는 경우가 있다. 서버가 한글 주소를 이해하지 못하는 경우가 있는데, url encode를 사용해서 이 문제를 해결할 수 있다.

encodeURIComponent 사용 예시

decodeURIComponent 사용 예시

 

2.2.4 데이터 속성과 dataset

데이터 속성은 `data-*` 형식을 따른다. 여기사 `*`는 사용자가 정의한 이름을 의미한다. 이 속성들은 CSS에서 정보를 사용하거나, JavaScript를 통해 해당 데이터를 동적으로 조작할 수 있게 해준다.

 

dataset 속성

`dataset` 속성은 HTML 요소의 모든 데이터 속성(`data-*`)을 DOMStringMap 객체로 저장하며, Javascript를 통해 쉽게 접근하고 조작할 수 있다. 각 데이터 속성은 `dataset` 뒤에 오는 이름을 카멜케이스로 변환하여 접근할 수 있다.

HTML 요소에 데이터 속성을 설정하는 예

HTML 요소에 저장된 데이터 속성에 접근하고, 조작하는 자바스크립트 예시