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

자바스크립트 문법

---

문법에 대해서 자세하게 설명은 하지 않겠으나, 자바스크립트를 처음 접하거나 문법에 대해 자세히 알지 못한다면 확실하게 공부하는 것이 좋다. 실제 프로젝트를 경험하거나 준비할 때, 문법을 모르면 막히는 경우가 상당히 많다.

책에서도 자바스크립트 문법 공부를 권장하고 있고, 필자 또한 자바스크립트를 처음 접하여 오랜 기간 이번 챕터에서 공부를 했다.

 

1. const 와 let의 기능 및 둘의 차이점

2. 객체 리터럴

3. 화살표 함수

4. 구조분해 할당

5. 클래스

6. 프로미스

7. async/await

에 대해서는 정확히 공부하는 것을 추천한다.

 

 

 

AJAX

---

(다음 내용은 책에 나와 있는 글을 인용하였습니다.)

Asynchronous Javascript And XML, AJAX는 비동기적 웹 서비스를 개발할 때 사용하는 기법입니다. 이름에는 XML이 들어 있지만 꼭 XML을 사용해야 하는 것은 아니며, 요즘에는 JSON을 많이 사용합니다.
간단히 설명하면, 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술입니다. 웹 사이트 중, 페이지 전환 없이 새로운 데이터를 불러오는 사이트는 대부분 AJAX 기술을 사용하고 있다고 보면 됩니다.

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

 

FormData

---

(다음 내용은 책에 나와 있는 글을 인용하였습니다.)

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

 

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

formData는 키 - 값 형식의 데이터를 저장합니다. 위와 같이 formData를 post방식의 요청으로 서버에 보내게 되면

 

이와 같이 "폼데이터를 전송받았습니다" 와 같은 메시지를 서버로부터 전송받습니다.

 

encodeURIComponent, decodeURIComponent

---

서버마다 서버가 한글 주소를 이해하지 못하는 경우가 있는데, 이때 window 객체의 메서드인 encodeURIComponent 메서드를 사용해서 한글 주소 부분만 메서드를 이용해서 감쌉니다. 마찬가지로, 받는 쪽에서는 decodeURIComponent를 사용하면 됩니다.