[Node.js] 간단한 프론트엔드 Javascript

1. AJAX

AJAX(Asynchronous Javascript And XML)는 비동기적 웹 서비스를 개발할 때 사용하는 기법이다.
꼭 XML을 사용해야 하는 것은 아니고, 요즘에는 JSON을 많이 사용한다.

쉽게 말해 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술이다. 웹 사이트 중에서 페이지 전환 없이 새로운 데이터를 불러오는 사이트는 대부분 AJAX 기술을 사용하고 있다고 보면 된다.

보통 AJAX 요청은 jQuery나 axios 같은 라이브러리를 이용해서 보낸다. 브라우저에서 기본적으로 XMLHttpREquest 객체를 제공하긴 하지만, 사용 방법이 복잡하고 서버에서는 사용할 수 없다.

프론트엔드에서 사용하려면 HTML 파일을 하나 만들고 그 안에 script 태그를 추가해야 한다. 두 번째 script 태그 안에 앞으로 나오는 프론트엔드 예제 코드를 넣으면 된다.

🔽 front.html

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

• GET 요청 보내기
  axios.get 함수의 인수로 요청을 보낼 주소를 넣으면 된다.
  🔽 프로미스 방식

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

  axios.get도 내부에 new Promise가 들어 있으므로 then과 catch를 사용할 수 있다. result.data에는 서버에서 온 데이터가 들어있다. 이는 개발자 도구 Console 탭에서 확인할 수 있다.

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

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

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

  (async() => {
    try {
      const result = await axios.post('https://example.com', {
        name: 'examplename',
        brith: 2000,
      });
      console.log(result);
      console.log(result.data);	// {}
    } catch (error) {
      console.error(error);
    }
  })();

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

---

2. FormData

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

먼저 FormData 생성자로 formData객체를 만든다.

const formData = new FormData();
formData.append('name', 'examplename');
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', ['hello', 'world']);
formData.get('test');	// hello, world
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', 'examplename');
    formData.append('birth', 2000);
    const result = await axios.post('https://example.com', formData);
    console.log(result);
    console.log(result.data);
  } catch (error) {
    console.error(error);
  }
})();

두 번째 인수에 데이터를 넣어 보내면 된다.

---

3. encodeURIComponent, decodeURIComponent

AJAX 요청을 보낼 때, 'http://localhost:3000/search/노드'처럼 주소에 한글이 들어가는 경우가 있다. 서버 종류에 따라 다르지만 서버가 한글 주소를 이해하지 못하는 경우가 있는데, 이럴 때는 window 객체의 메서드인 encodeURIComponent 메서드를 사용한다. 노드에서도 사용할 수 있다.

한글 주소 부분만 encodeURIComponent 메서드로 감싼다.

(async () => {
  try {
    const result = await axios.get(`http://localhost:3000/search/${encodeURIComponent('노드')}`);
    console.log(result);
    console.log(result.data);	// {}
  } catch (error) {
    console.error(error);
  }
})();

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

---

4. 데이터 속성과 dataset

노드를 웹 서버로 사용하는 경우, 클라이언트(프론트엔드)와 빈번하게 데이터를 주고받게 된다. 이때 서버에서 보내준 데이터를 프론트엔드 어디에 넣어야 할지 고민하게 된다.

프론트엔드에 데이터를 내려보낼 때 첫 번째로 고려해야 할 점은 보안이다. 비밀번호 같은 민감한 데이터는 절대 내려보내면안 된다.

보안과 무관한 데이터들을 자유롭게 프론트엔드로 보내도 된다. 자바스크립트 변수에 저장해도 되지만 HTML5에도 HTML과 관련된 데이터를 저장하는 공식적인 방법이 있다. 바로 데이터 속성이다.

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

위와 같이 HTML 태그의 속성으로 data-로 시작하는 것들을 넣는다. 이들이 데이터 속성이다. 나중에 이 데이터들을 사용해 서버에 요청을 보내게 된다.

데이터 속성의 장점은 자바스크립트로 쉽게 접근할 수 있다는 점이다. script 태그를보면 dataset 속성을 통해 첫 번째 li 태그의 데이터 속성에 접근하고 있다.
단, 데이터 속성 이름이 조금씩 변형되었다. 앞의 data- 접두어는 사라지고 - 뒤에 위치한 글자는 대문자가 된다.
data-id는 id, data-user-job은 userJob이 되는 것이다.

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