2장. 알아둬야 할 자바스크립트

2.1 ES6 문법

const, let

var은 함수 스코프를 가지므로 블록 외부에서도 접근할 수 있지만, const와 let은 블록 스코프를 가지므로 블록 밖에서는 변수에 접근할 수 없다.
함수 스코프 대신 블록 스코프를 사용함으로써 호이스팅 같은 문제도 해결되고 코드 관리도 수월해졌다.

템플릿 문자열

문자열을 백틱 기호로 감싸면 문자열 안에 변수를 넣을 수 있다.

객체 리터럴

객체 메서드에 함수를 연결할 때 콜론과 function을 쓰지 않아도 된다.
또한, 속성명과 변수명이 동일한 경우에는 한 번만 써도 된다.

화살표 함수

function 대신 => 기호로 함수를 선언한다.
내부에 return문밖에 없는 경우 return문을 줄일 수 있다.

구조 분해 할당

객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있다.

const candyMachine = {
	status : {
    	name : "node",
        count : 5
    },
    getCandy(){
    	this.status.count--;
        return this.status.count;
    }
}
const {getCandy, status : {count}} = candyMachine;

클래스

다른 언어처럼 클래스 기반으로 동작하는 것이 아니라 여전히 프로토타입 기반으로 동작한다. 프로토타입 기반 문법을 보기 좋게 클래스로 바꾼 것이라고 이해하면 된다.

프로미스

실행은 바로 하되 결괏값은 나중에 받는 객체이다.

이벤트 리스너를 사용할 때 콜백 함수를 자주 사용하는데, ES6부터는 자바스크립트의 노드와 API들이 콜백 대신 프로미스 기반으로 재구성되며 악명 높은 콜백 지옥 현상을 극복했다는 평가를 받고 있다.

new Promise로 프로미스를 생성할 수 있으며, 안에 resolve와 reject를 매개변수로 갖는 콜백 함수를 넣는다. 이렇게 만든 promise 변수에 then과 catch 메서드를 붙일 수 있다.
resolve가 호출되면 then이 실행되고, reject가 실행되면 catch가 실행된다. finally는 성공/실패 여부와 상관없이 실행된다.

Promise.allSettled를 사용하면 결괏값이 좀 더 자세해져서 어떤 프로미스가 reject되었는지 statu를 통해 알 수 있다.

async/await

ES2017에서 추가된 기능으로, 노드처럼 비동기 위주로 프로그래밍을 해야 할 때 도움이 많이 된다.
프로미스가 콜백 지옥을 해결했지만 then과 catch의 반복으로 여전히 코드가 장황하다.
따라서 async/await 문법을 활용하면 프로미스를 사용한 코드를 한 번 더 깔끔하게 줄일 수 있다.
try/catch문으로 로직을 감싸면 에러 처리를 할 수 있다.

Map, Set

ES6에는 새로운 자료구조들이 추가되었는데, 그중 자주 쓰이는 것은 Map과 Set이다.
Map은 객체와 비슷하고, Set은 배열과 유사하다.

Map

Map은 속성들 간의 순서를 보장하고 반복문을 사용할 수 있다.
속성명으로 문자열이 아닌 값도 사용할 수 있고, size 메서드를 통해 속성의 수를 쉽게 알 수 있다는 점에서 일반 객체와 다르다.

const m = new Map(); // Map 생성

m.set('a','b'); // key,value로 속성 추가하기
m.get('a'); // b
m.size; // 1
for(const [k,v] of m){
	console.log(k,v); // 하나씩 출력
}
m.has('a'); // true
m.delete('a'); // 키로 속성 삭제
m.clear(); // 전부 삭제

Set

Set은 중복을 허용하지 않는다는 것이 가장 큰 특징이다.
따라서 배열 자료구조를 사용하고 싶으나 중복은 허용하고 싶지 않을 때 Set을 대신 사용하면 된다.

const s = new Set(); // Set 생성

s.add(1); // 요소 추가 (중복될 경우 무시된다.)
s.size; // 1
for(const a of s){
	console.log(a); // 하나씩 출력
}
s.delete(1); // 요소 삭제
s.clear(); // 전부 삭제

또는 기존 배열에서 중복을 제거하고 싶을 때도 Set을 사용한다.

const arr = [1,2,3,3,5,6];

const s = new Map(arr); // 중복 제거
const result = Array.from(s); // 다시 배열로 만들기

널 병합/옵셔널 체이닝

??(널 병합 연산자) : 주로 || 연산자 대용으로 사용되며, falsy 값 중 null과 undefined만 따로 구분한다.
?.(옵셔널 체이닝 연산자) : null이나 undefined의 속성을 조회하는 경우 에러가 발생하는 것을 막는다. undefined로 인한 TypeError나 null 에러의 발생 빈도를 획기적으로 낮출 수 있기에 자주 사용한다.

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

AJAX

비동기적 웹 서비스를 개발할 때 사용하는 기법이다.
쉽게 말해 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술이다.

보통 AJAX 요청은 jQuery나 axios 같은 라이브러리를 이용해서 보낸다. 브라우저에서 기본적으로 XMLHttpRequest나 fetch 객체를 제공하긴 하지만, 사용 방법이 복잡하고 서버에서는 사용할 수 없다.

axios로 GET 요청하기

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
      (async () => {
        try {
          const result = await axios.get("https://www.zerocho.com/api/get");
          console.log(result);
          console.log(result.data);
        } catch (error) {
          console.log(error);
        }
      })();
</script>

axios로 POST 요청하기

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
	(async () => {
        try {
          const result = await axios.post(
            "https://www.zerocho.com/api/post/json",
            {
              name: "zerocho",
              birth: 1994,
            }
          );
          console.log(result);
          console.log(result.data);
        } catch (error) {
          console.log(error);
        }
      })();
</script>

axios 참조 |
https://velog.io/@devmag/Axios-%EC%84%A4%EC%B9%98-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC

FormData

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

• new FormData() 로 formData 객체를 만든다.
• append를 이용해 키,값 형식의 데이터를 저장한다.
• has를 이용해 키에 해당하는 값이 있는지 여부를 알 수 있다.
• get을 이용해 키에 해당하는 값을 하나 가져올 수 있다,
• getAll을 이용해 키에 해당하는 모든 값을 가져올 수 있다.
• delete는 현재 키를 제거한다.
• set은 현재 키를 수정한다.

axios로 폼 데이터를 서버에 보낸다.

(async () => {
        try {
  		  const formData = new FormDate();
  		  formData.append('name', 'zerocho');
		  formData.append('birth', 1994);
          const result = await axios.post("https://www.zerocho.com/api/post/json", formData);
          console.log(result);
          console.log(result.data);
        } catch (error) {
          console.log(error);
        }
})();

encodeURIComponent, decodeURIComponent

AJAX 요청을 보낼 때, 주소에 한글이 들어가는 경우가 있다.
서버 종류에 따라 다르지만, 서버가 한글 주소를 이해하지 못하는 경우가 있는데, 이럴 때 window 객체의 메서드인 encodeURIComponent 메서드를 사용한다.

한글 주소 부분만 encodeURIComponent 메서드로 감싼다.
그러면 한글 주소가 문자열로 변환된다.

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <script>
      (async () => {
        try {
          const result = await axios.get(
   			"https://www.zerocho.com/api/search/${encodeURIComponent('노드')}");
          console.log(result);
          console.log(result.data);
        } catch (error) {
          console.log(error);
        }
      })();
</script>

받는 쪽에서도 decodeURIComponent를 사용하면 된다.
그러면 한글이 다시 원래대로 복구된다.

decodeURIComponent('변환된 문자열') // 노드

데이터 속성과 dataset

프론트엔드에 데이터를 내려보낼 때 첫 번째로 고려해야 할 점은 보안이다.
프론트엔드에 비밀번호와 같은 민감한 데이터를 내려보내지 말아야 한다.

보안과 관련이 없는 데이터들은 자유롭게 보내도 된다. 자바스크립트 변수에 저장해도 되지만, HTML5에도 HTML과 관련된 데이터를 저장하는 공식적인 방법이 있다. 바로 데이터 속성이다.

• 아래와 같이 HTML 태그의 속성으로 data- 로 시작하는 것들을 넣는다. 나중에 이 데이터들을 사용해 서버에 요청을 보내게 된다.
  

데이터 속성의 장점은 자바스크립트로 쉽게 접근할 수 있다는 점이다.
단, 데이터 속성 이름이 조금씩 변형되는데 data-id는 id로, data-user-job은 userJob으로 바뀐다.
반대로 dataset.monthSalary = 1000;을 넣으면 data-monte-salary="1000"; 이라는 속성이 생긴다.