[Node.js] 2장 알아두어야 할 자바스크립트

🔍 ES2015+

2015년 일어난 자바스크립트 문법의 대격변, ES2015 (a.k.a ES6)의 등장이 있었다.

📌 왜 ES2015+인가?

노드 6 버전부터 ES2015 문법을 사용할 수 있으며,

현재는 ES2022까지 등장한 상황이므로 ES2015+라 통칭하여 부른다.

 

🔍 꼭 알아두어야 하는 자바스크립트 문법 모음.zip

📌 const, let

var과 유사한 변수 선언 방법이다.

그러나 var은 함수 스코프로 블록의 범위에 상관없이 사용할 수 있으나, const나 let는 블록 스코프로 블록 밖에서는 사용할 수 없다.

📌 템플릿 문자열

기존 문자열과 다르게 키보드 좌측 상단에 있는 백틱 문자로 감싼다. (다만 맥북은 백틱 대신 ₩가 나온다. 속상해라...)

백틱 안에 변수를 넣을 수 있는데, ${변수} 형태로 사용한다.

📌 객체 리터럴

객체의 메서드에 함수를 연결할 때 콜론(:)과 function을 붙이지 않아도 된다.

더불어, 속성명과 변수명이 동일할 경우에는 한 번만 사용해도 된다.

📌 화살표 함수

기존의 function @@@() {}과 함께, const @@@ = () => {}으로 함수를 제작할 수 있게 되었다.

더불어 변수에 대입 시, 나중에 재사용할 수 있게 된다.

기존과의 차이점은 this 바인드 형식이므로 this 사용 시에는 화살표 함수나 함수 선언문 중 하나를 선택하여 사용하면 된다.

📌 구조분해 할당

객체 및 배열에서 속성이나 요소를 빠르게 꺼낼 수 있게 된다.

var getCandy = candyMachine.getCandy

const { getCandy, status: { count } } = candyMachine
// 둘은 동일한 의미이다. 놀랍다!

코드 줄 수를 상당히 줄여주기 때문에, 유용하게 사용할 수 있게 되었다.

📌 클래스

클래스 문법은 추가되었지만, 다른 언어처럼 클래스 기반이 아닌 프로토타입 기반으로 동작한다.

📌 프로미스

자바스크립트 및 노드에서는 비동기를 접하는데, 특히 이벤트 리스너에서 콜백 함수를 자주 사용한다. 이를 대신하여 프로미스 기반으로 재구성된 코드가 당신을 기다리고 있다!

프로미스는 실행은 바로 하되, 결괏값은 나중에 받는 객체이다. 모든 실행이 완료된 후, then이나 catch 메서드를 통해 받게 된다.

프로미스 중 하나라도 reject된다면 catch로 넘어간다.

📌 async/await

노드 7.6 버전 이후부터 지원한다. ES2017부터 추가되었다!

프로미스에서 then과 catch를 반복해서 사용한 것을 이겨내기 위해, async/await가 생겨났다. 

await 000이 resolve될 때까지 기다린 후, 다음 것으로 넘어간다. 다만, 에러를 처리하는 부분이 없기에 try-catch로 로직을 잡아 주어야 한다.

🔍 프론트엔드 자바스크립트

📌 AJAX

Asynchronouse Javascript And XML의 줄임말로, 비동기적 웹 서비스를 개발할 때 사용한다.

페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술이다. 페이지 전환 없이 새로운 데이터를 불러올 경우, 대부분 AJAX 기술을 사용하고 있다고 생각하면 된다.

axios.get / post 등이 예시가 될 수 있다.

📌 FormData

form 태그의 데이터를 동적으로 제어할 수 있는 기능으로, AJAX과 함께 사용된다.

FormData 생성자로 formData 객체를 만들고, 값을 append한다. 이후 axios로 데이터를 보내면 끝!

📌 URIComponent

AJAX 요청을 보낼 때, 주소에 한글이 들어가는 경우가 있다. 이때 사용하는 것이 바로 URIComponsent.

https://000.com/ $ {encodeURIComponent ( '한글' )} 등으로 사용하면 된다.

받는 쪽에서는 decodeURIComponent('%00%00%00%00')로 받아 처리할 수 있다.

📌 데이터 속성, dataset

프론트엔드에 데이터를 보낼 때 가장 먼저 고려할 것은 보안이다. 보안과 무관한 것들은 자바스크립트 변수에 저장해도 되지만, 공식적인 방법은 데이터 속성(data attribute)이다.

장점으로는 자바스크립트에 쉽게 접근할 수 있다는 점이 있다. 앞으로 자주 사용하게 될 친구이니, 잘 기억해 두자.

🔍 같이 보면 좋은 자료 모음.zip

es2015 설명 : https://www.w3schools.com/js/js_es6.asp

JavaScript ES6

노드 버전 별 ECMAScript 스펙 : https://node.green/

Node.js ES2015/ES6, ES2016 and ES2017 support

---

Node.js 

Editor : PeeP