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

1. AJAX

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

보통 AJAX 요청은 jQuery나 axios 같은 라이브러리를 사용해서 보낸다.
여기선 전반적으로 axios를 사용하겠다.

// html

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  // 여기에 예제 코드를 넣으세요.
</script>

먼저 요청의 종류 중 하나인 GET 요청을 보내보겠다.

axios.get 함수의 인수로 요청을 보낼 주소를 넣으면 된다.

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

axios.get도 내부에 new Promise가 들어 있으므로 then과 catch를 사용할 수 있다. result.data에 서버로부터 보낸 데이터가 들어 있으며, 콘솔창에서 확인할 수 있다.

프로미스이므로 async/await 방식으로 변경할 수 있다. 익명 함수라서 즉시 실행을 위해 코드를 소괄호로 감싸서 호출했습니다.

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

이번에는 POST 방식의 요청을 보내 보겠다. 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.error(error);
    }
  })();
</script>

전체적인 구조는 비슷한데 두번 째 인수로 데이터를 넣어 보내는 것이 다르다. GET 요청이면 axios.get을 사용하고 POST 요청이면 axios.post를 사용한다.

2. FormData

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

먼저 FormData 생성자로 formData 객체를 만듭니다. 다음 코드를 한 줄씩 Console 탭에 입력해보자.

<script>
  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'];
</script>

생성된 객체의 append 메서드로 키-값 형식의 데이터를 저장할 수 있다.
append 메서드를 여러 번 사용해서 키 하나에 여러 값을 추가해도 된다.
has 메서드는 주어진 키에 해당하는 값이 있는지 여부를 알린다.
get 메서드는 주어진 키에 해당하는 값을 하나 가져오고,
getAll 메서드는 해당하는 모든 값을 가져온다.
delete 메서드는 현재 키를 제거하는 메서드고,
set 메서드는 현재 키를 수정하는 메서드다.

이제 axios로 폼 데이터를 서버에 보내면 된다.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  (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);
    }
  })();
</script>

두 번째 인수에 데이터를 넣어 보낸다.

3. encodeURIComponent & decodeURIComponent

서버 종류에 따라 다르지만 서버가 한글 주소, 예를 들면 "localhost:3000/search/노드" 같은 경우를 이해하지 못하는 경우가 있는데 이럴 때, 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.error(error);
    }
  })();
</script>

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

decodeURIComponent('~~~~~~~') // 노드

그냥 단순히 한글을 처리하기 위한 메서드라고 생각하면 된다!

4. 데이터 속성과 dataset

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

프론트엔드에 데이터를 내려보낼 때 첫 번째로 고려할 점은 보안이다.
비밀번호 같은 민감한 데이터를 보내는 것은 명확한 실수다.
보안과 관련 없는 데이터들은 자유롭게 프론트엔드로 보내도 된다.
자바스크립트 변수에 저장해도 좋지만 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-로 시작하는 것들을 넣었다.
이들이 데이터 속성이다. data-id와 data-user-job을 주었다.
화면에 나타나지는 않지만 웹 애플리케이션 구동에 필요한 데이터들이다.
나중에 이 데이터들을 사용해 서버에 요청을 보내게 된다.

데이터 속성의 장점은 자바스크립트로 쉽게 접근할 수 있따는 것이다.
script 태그를 보면 dataset 속성을 통해 첫 번째 li 태그의 데이터 속성에 접근하고 있다.

반대로 dataset에 데이터를 넣어도 HTML 태그에 반영된다. dataset.monthSalary = 10000;을 넣으면 data-month-salary="10000"이라는 속성이 생긴다.