Node.js 교과서 [Front-end] #2.2

2. 프런트엔드 자바스크립트

이번에는 HTML에서 script 태그 안에 작성하는 부분에 대한 것을 다룬다.

 

2.1 AJAX

AJAX는 비동기적 웹 서비스를 개발할 때 사용하는 기법이다.

쉽게 말해 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술이다.

요즘에는 XML 대신 JSON을 많이 사용한다.

 

보통 AJAX 요청은 jQuery나 axios 같은 라이브러리를 이용해서 보낸다.

프런트엔드에서 사용하려면 HTML 파일을 하나 만들고 그 안에 script태그를 추가해야 한다.

 

 

axios.get('https://www.zerocho.com/api/get')
  .then((result) => {
    console.log(result);
    console.log(result.data); // {}
  })
  .catch((error) => {
    console.error(error);
});

 

axios.get도 내부에 new Promise가 들어 있으므로 then과 catch를 사용할 수 있다.

 

 

프로미스이므로 async/await 방식으로 변경 가능하다.

(async () => {
  try {
    const result = await axios.get('https://www.zerocho.com/api/get');
    console.log(result);
    console.log(result.data); // {}
  } catch (error) {
    console.error(error);
  }
})();

 

 

POST 요청에서는 데이터를 서버로 보낼 수 있다.

(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.error(error);
  }
})();

 

전체적인 구조는 비슷한데, 두 번째 인수로 데이터를 넣어 보내는 것이 다르다.

 

 

2.2 FormData

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

const formData = new FormData();
formData.append('name', 'zerocho');
formData.append('item', 'orange');
formData.append('item', 'melon');
formData.has('item'); // true
formData.has('money'); // false;
formData.get('item');// orange
formData.getAll('item'); // ['orange', 'melon'];
formData.append('test', ['hi', 'zero']);
formData.get('test'); // hi, zero
formData.delete('test');
formData.get('test'); // null
formData.set('item', 'apple');
formData.getAll('item'); // ['apple'];

 

생성된 객체의 append 메서드로 키-값 형식의 데이터를 저장할 수 있다.

has 메서드는 주어진 키에 해당 값의 여부를 알린다.

get  메서드는 주어진 키에 해당하는 값을 하나 가져온다.

getAll 메서드는 모든 값을 가져온다.

delete 메서드는 현재 키를 제거한다.

set 메서드는 현재 키를 수정한다.

 

 

이제 axios로 폼 데이터를 서버에 보낼 수 있다.

(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);
  }
})();

 

 

 

2.3 encodeURIComponent, decodeURIComponent

AJAX 요청을 보낼 때 "https://localhost:8080/search/게시판" 처럼 주소에 한글이 들어가는 경우가 있다.

서버가 한글을 이해하지 못하는 경우가 있는데, 이때 window 객체의 메서드인 encodeURIComponent를 사용한다.

(async () => {
  try {
    const result = await axios.get(`https://www.zerocho.com/api/search/${encodeURIComponent('노드')}`);
    console.log(result);
    console.log(result.data); // {}
  } catch (error) {
    console.error(error);
  }
})();

 

노드라는 한글 주소가 %EB%85%B8%EB%93%9C 라는 문자열로 변환되었다.

받는 쪽에서는 decodeURIComponent를 사용하면 된다. 

한글이 다시 원상태로 복구된다.

 

 

2.4 데이터 속성과 dataset

노드를 웹 서버로 사용하는 경우 클라이언트와 빈번하게 데이터를 주고 받는다.

이때 서버에서 보내준 데이터를 프론트엔드 어디에 넣야할지 고민하게 된다.

 

프론트엔드에 데이터를 보낼 때 첫 번째로 고려해야 할 점은 보안이다.

프론트엔드에 민감함 데이터를 내려보내는 것은 실수이다.

 

HTML5에 HTML과 관련된 데이터를 저장하는 공식적인 방법이 있다. 바로 데이터 속성이다.

<ul>
  <li data-id="1" data-user-job="programmer">Zero</li>
  <li data-id="2" data-user-job="designer">Nero</li>
  <li data-id="3" data-user-job="programmer">Hero</li>
  <li data-id="4" data-user-job="ceo">Kero</li>
</ul>
<script>
  console.log(document.querySelector('li').dataset);
  // { id: '1', userJob: 'programmer' }
</script>

 

HTML 태그의 속성으로 data-로 시작하는 것들을 넣는다. 이들이 데이터 속성이다.

데이터 속성의 장점은 자바스크립트로 쉽게 접근할 수 있다는 점이다.

dataest 속성을 통해 li 태그의 데이터 속성에 접근하고 있다.

 

앞의 data- 접두어는 사라지고 뒤에 위치한 글자는 대문자가 된다.

data-id는 id, data-user-job은 userJob

 

반대로 dataset에 데이터를 넣어도 HTML 태그에 반영된다.