2_9. 알아두어야 할 자바스크립트 - 프론트엔드 자바스크립트 - 복습

2_9_1. 프론트엔드 자바스크립트

2_9_1_1. AJAX

서버로 요청을 보내는 코드이다.
- 라이브러리 없이는 브라우저가 지원하는 XMLHttpRequest 객체를 이용해야 된다.
- AJAX 요청시 Axios 라이브러리를 사용하는 것이 편하다.
- HTML에 아래 스크립트를 추가하면 사용할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>엑시오스</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  // 코드 작성
</script>
</body>
</html>

2_9_1_2. AJAX GET 요청 보내기

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>엑시오스 GET</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../fxjs/fxjs.js"></script>
<script>
  const getExample = () => axios.get('https://www.zerocho.com/api/get');
  const getExample2 = () => axios.get('https://www.zerocho.com/api/get2');
  (async () => {
    try {
      await _.go(
              [getExample, getExample2],
              L.map(f => f()),
              C.takeAll,
              console.log,
      )
    } catch (err) {
      console.error(err);
    }
  })();
</script>
</body>
</html>

2_9_1_3. AJAX POST 요청 보내기

POST 요청을 하는 코드 (데이터를 담아 서버로 보내는 경우)
- 전체적인 구조는 비슷하나 두번째 인수로 데이터를 넣어 보냄

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>엑시오스 POST</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../fxjs/fxjs.js"></script>
<script>
  const postExample = () => axios.get('https://www.zerocho.com/api/post/json', {
    name: 'zerocho',
    birth: 1994,
  });
  (async () => {
    try {
      await _.go(
              [postExample],
              L.map(f => f()),
              C.takeAll,
              console.log,
      )
    } catch (err) {
      console.error(err);
    }
  })();
</script>
</body>
</html>

2_9_1_4. FormData

HTML form 태그에 담긴 데이터를 AJAX 요청으로 보내고 싶은 경우
- FormData 객체 이용
- 이미지, 파일, 동영상 업로드할 때 많이 사용한다.
FormData 메서드
- append로 데이터를 하나씩 추가
- has로 데이터 존재 여부 확인
- get으로 데이터 조회
- getAll로 데이터 모두 조회
- delete로 데이터 삭제
- set으로 데이터 수정

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

2_9_1_5. FormData POST 요청 보내기

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>엑시오스 POST FormData</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../fxjs/fxjs.js"></script>
<script>
    const formData = () => new FormData();
    const appendFormData = (name, value) => formData => (formData.append(name, value), formData);
    const postFormData = formData => axios.post('https://www.zerocho.com/api/post/formdata', formData);

    (async () => {
        try {
            await _.go(
                formData(),
                appendFormData('name', 'zerocho'),
                appendFormData('birth', 1994),
                postFormData,
                res => {
                    console.log(res);
                    console.log(res.data);
                }
            )
        } catch (err) {
            console.error(err);
        }
    })();
</script>
</body>
</html>

2_9_1_6. encodeURIComponent, decodeURIComponent

가끔 주소창에 한글 입력하면 서버가 처리하지 못하는 경우가 발생한다.
- encodeURIComponent로 한글 감싸줘서 처리하자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>엑시오스 GET encodeURIComponent</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../fxjs/fxjs.js"></script>
<script>
    const getHangul = name => axios.get(`https://www.zerocho.com/api/search/${encodeURIComponent(name)}`);

    (async () => {
        try {
            await _.go(
                getHangul('노드'),
                res => {
                    console.log(res);
                    console.log(res.data);
                }
            )
        } catch (err) {
            console.error(err);
        }
    })();
</script>
</body>
</html>

2_9_1_7. 주소창엔 아스키 코드로만 입력하는 것이 가장 안전하다

아스키 코드에는 한글이 없다.
그래서 한글을 올리면 서버가 가끔 고장나는 경우가 있다.

2_9_1_8. URL은 서버에 있는 파일 위치를 가리킨다.

2_9_1_9. URI는 서버에 있는 자원의 위치를 가리킨다.

(사실 무슨 차이인진 아직 모르겠다..)

‘노드’라는 한글을 encodeURIComponent하면 %EB%85%B8%EB%93%9C가 된다.
- decodeURIComponent로 서버에서 한글로 해석한다.

decodeURIComponent('%EB%85%B8%EB%93%9C'); // 노드

2_9_1_10. data attribute와 dataset

HTML 태그에 데이터를 저장하는 방법
- 서버의 데이터를 프론트엔드로 내려줄 때 사용한다.
- 태그 속성으로 data-속성명
- 자바스크립트에서 태그, dataset, 속성명으로 접근 가능하다.
  - data-user-job -> dataset.userJob
  - data-id -> dataset.id
- 반대로 자바스크립트 dataset에 값을 넣으면 data-속성이 생긴다.
  - dataset.monthSalary = 10000 -> data-month-salary=“10000”

<ul>
  <li data-id="1" data-user-id="programmer">Zero</li>
  <li data-id="2" data-user-id="programmer2">Zero2</li>
  <li data-id="3" data-user-id="programmer3">Zero3</li>
  <li data-id="4" data-user-id="programmer4">Zero4</li>
</ul>