ES2015+

• const, let / 템플릿 문자열 / 객체 리터럴 / 화살표 함수 / 구조분해 할당 / 클래스 / 프라미스 / async, await

• 구조분해 할당

• 화살표 함수의 this

프론트엔드 JS

AJAX

• 비동기적 웹 서비스를 개발할 때 사용하는 기법. XML, JSON 둘 다 사용함. 페이지 이동 없이 서버에 요청을 보내고 응답받는 기술.
• axios: AJAX 요청을 보내는 라이브러리
• 팁: 코드를 소괄호로 감싸서 호출하면 즉시 실행된다
• 코드1: axios.get 을 이용하여 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>

• 코드2: 코드1을 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>

• 코드3: axios.post로 post요청 보냄 + async/await 방식 사용
• axios.post의 두 번째 인자로 json데이터가 들어간다

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

FormData

• HTML form 태그의 데이터를 동적으로 제어할 수 있는 기능. 주로 AJAX와 함께 사용됨
• formData.append(키, 값): 키에 값을 저장
• formData.has(키): 키에 해당하는 값이 있는지 여부를 알림
• formData.get(키): 주어진 키에 해당하는 값 하나를 가져옴
• formData.getAll(키): 해당하는 모든 값 가져옴
• formData.delete(키): 현재 키를 제거하는 메서드
• formData.set(키): 현재 키를 제거하는 메서드
• 팁: 코드를 소괄호로 감싸서 호출하면 즉시 실행된다
• 코드1: 단순 테스트

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

• 코드2: axios로 폼 데이터를 서버에 보내기
• result는 상대로부터의 메시지인 모양.

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

encodeURIComponent, decodeURIComponent

• AJAX 요청 보낼 시, 주소에 한글이 들어가는 경우 이 한글 주소를 이해시키기 위해 window 객체의 메서드인 encodeURIComponent 메서드를 사용한다
• 코드1:한글 주소 부분만 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>

• 코드2: 변환된 문자열을 decodeURIComponent로 받는 쪽에서 한글로 변환함

 decodeURIComponent('%EB%85%B8%EB%93%9C')

데이터 속성과 dataset

• HTML5에서 HTML과 관련된 데이터를 저장하는 공식적인 방법
• 사용법:
  HTML태그의 속성으로 data-로 시작하는 것들을 넣으면 추후 .dataset으로 가져올 수 있다.
• html을 JS의 dataset으로 가져오기 :
  키로 변환된다(data-접두어는 사라지고 - 뒤의 문자는 대문자가 된다.)

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

• js가 html에 반영 :
  예컨대 dataset.monthSalary=10000;을 넣으면 data-month-salary="10000"라는 속성이 생긴다
• 주의사항: 민감한 데이터x