[Node.js] 2.2 알아둬야 할 자바스크립트 - 프런트엔드 자바스크립트

예제의 프런트엔드에 사용되는 기능을 설명한다.

1. AJAX

- 페이지 전환 없이 서버에 요청을 보내고 응답을 받는 기술이다.
- JQuery나 axios 같은 라이브러리를 이용하여 AJAX 요청을 보낼 수 있다.

2. FormData

- HTML form 태그의 데이터를 동적으로 제어할 수 있는 기능으로 주로 AJAX와 함께 사용된다. (axios로 폼 데이터를 서버로 보낸다.)
- FormData 메서드
   - apend : 키-값 형식의 데이터를 저장한다. (키 하나에 여러 개의 값 추가 가능)
   - has : 주어진 키에 해당하는 값이 있는지 여부를 알린다.
   - get : 주어진 키에 해당하는 값 하나를 가져온다.
   - getAll : 주어진 키에 해당하는 모든 값을 가져온다.
   - delete : 현재 키를 제거한다.
   - set : 현재 키를 수정한다.

const formData = new FormData();
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.set('item', 'apple');
formData.getAll('item'); // ['apple'];

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

 

3. encodeURIComponent, decodeURIComponenet

- 서버가 한글 주소를 이해하지 못하는 경우, window 객체의 메서드인 encodeURIComponent 메서드를 사용한다.
- 인코딩(한글 → 유니코드)엔 encodeURIComponent를, 디코딩(유니코드 → 한글)엔 decodeURIComponent를 사용한다.

// 인코딩
await axios.get(`https://www.zerocho.com/api/search/${encodeURIComponent('노드')}`);
// 디코딩
await axios.get(`https://www.zerocho.com/api/search/${decodeURIComponent('%EB%85%B8%EB%93%9C')}`);

 

4. 데이터 속성과 dataset

- 데이터 속성을 이용하여 프론트엔드에서 HTML과 관련된 데이터(화면에 나타나지는 않지만 웹 애플리케이션 구동에 필요한 데이터. 나중에 이 데이터들을 사용해 서버에 요청을 보냄)를 저장할 수 있다.
- HTML 태그 속성으로 data-로 시작하는 것들을 넣는다.
- 반대로 dataset에 데이터를 넣어도 HTML 태그에 반영된다. (dataset.monthSalary = 10000;을 넣으면 data-month-salary="10000"이라는 속성이 생긴다.)

<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>