[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

섹션 1. 알아두어야 할 자바스크립트

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

📍 AJAX

서버로 요청을 보내는 코드

라이브러리 없이는 브라우저가 지원하는 XMLHttpRequest 객체를 이용한다.
하지만 XMLHttpRequest는 너무 복잡하고 요즘엔 잘 사용하지 않는다.
그래서 AJAX 요청 시 Axios 라이브러리를 사용하는 게 편하다.
(Fetch는 인터넷 익스플로어에서 돌아가는 데 문제가 있고 JSON 처리하려면 처리를 위한 코드 몇줄이 더 필요하다.)
HTML에 아래 스크립트를 추가하면 사용할 수 있다.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  // 스크립트 코드
</script>

GET 요청 보내기

axios.get 함수의 인수로 요청을 보낼 주소를 넣으면 된다.
프로미스 기반 코드라 async/await가 사용 가능하다.

비동기는 항상 실패할 가능성을 염두해둬야한다. 그래서 프로미스는 실패를 대비하기 위해 catch를 꼭 붙혀두어야 한다.

POST 요청하는 코드(데이터를 담아 서버로 보내는 경우)

전체적인 구조는 비슷하나 두번째 인수로 데이터를 넣어 보낸다.

📍 FormData

HTML form 태그에 담긴 데이터를 AJAX 요청으로 보내고 싶은 경우

보통 파일/이미지/동영상 업로드할 때 사용한다.
Axios는 파일을 HTML의 form 태그에 넣어서 FormData 객체로 보내야 한다.

FormData 메소드

• Append로 데이터를 하나씩 추가
• Has로 데이터 존재 여부 확인
• Get으로 데이터 조회
• getAll로 데이터 모두 조회
• delete로 데이터 삭제
• set으로 데이터 수정

FormData POST 요청으로 보내기

Axios의 data 자리에 FormData를 넣어서 보내면 된다.

📍 encodeURIComponent, decodeURIComponent

가끔 주소창에 한글 입력하면 서버가 처리하지 못하는 경우 발생

encodeURIComponent로 한글을 감싸주면 한글이 아스키코드로 변환되어 처리된다.

decodeURIComponent로 서버에서 한글로 다시 해석이 가능하다.

💡 URL과 URI의 차이
URL : 서버에 있는 파일의 위치
URI : 서버에 있는 자원의 위치

• 파일위주에서 자원위주로 넘어갔기 때문에 요즘에는 URL보단 URI를 많이 사용

📍 data attribute와 dataset

HTML 태그에 데이터를 저장하는 방법

HTML에는 변수 선언을 못하지만 태그에 데이터를 저장하는 방법이 있다.
서버의 데이터를 프론트엔드로 내려줄 때 사용한다.
태그 속성으로 data-속성명을 선언해준다.

자바스크립트와 HTML간 데이터 교환이 가능하다.
자바스크립트에서 태그.dataset.속성명으로 접근이 가능하다.

data-user-job -> dataset.userJob
data-id -> dataset.id

반대로 자바스크립트에 dataset에 값을 넣으면 data-속성이 생긴다.

dataset.monthSalary = 10000 -> data-month-salary="10000"

중요한 정보는 해커들이 확인할 수 있으므로 공개해도 되는 데이터만 저장하도록 한다.

---

📑 출처

• [개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지 (인프런/조현영)