Bootcamp : 2주차 개발일지

2주차 목표

1. javascript 를 익힌다.
2. jQuery를 알고 익힌다.
3. ajax를 알고 익힌다.

jQuery 사용하는 이유?

• 자바스크립트를 더욱 손쉽게 활용할 수 있게 해주는 자바스크립트 라이브러리이다.
• 짧고 단순한 코드로 웹페이지에 다양한 효과나 연출을 적용할 수 있다.

// javaScript
document.getElementById('my-tag')
// jQuery
$('#my-tag')

이처럼 DOM을 조작할 때 짧고 간편하게 코드로 구현할 수 있다는 점에서 좋다. 모던 자바스크립트 이후에는 jQuery 사용을 비추천하고 속도나 어플의 무게를 빗대어서 순수 JS를 사용하는 것을 추천하고 있다.

그런데도 아직까지는 많은 곳에서 jQuery를 사용하고 있고 점차 jQuery 사용 빈도가 줄더라도 상황에 맞춰서 사용한다면 단점보다는 장점이 많을거라고 생각한다.

jQuery 사용하기

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

• js 라이브러리이기 때문에 외부에서 js파일을 불러와 사용한다. 주소 창에 파일을 검색해서 확인해서 라인 수가 10,000줄이 넘어간다. 이래서 웹이 무거워 진다고 하는 건가

$('#post-url').val(); // id
$('.post-url').val(); // class

사용할 땐 이런식으로 id, class등 으로 값을 가져올 수 있다.

ajax

• ajax 란 비동기 자바스크립트와 XML(Asynchornous JavaScript And XML)을 말한다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다.

강의에서는 ajax가 jQuery를 import한 페이지 에서만 동작 가능하다고 말하는데 사실 jQuery가 없어도 가능하던걸 jQuery를 쓰면서 편하게 쓸 수 있다고 하는게 맞다.

// without jQuery
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200 || xhr.status === 201) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.responseText);
    }
  }
};
xhr.open("GET", "http://localhost");
xhr.send();

// jQuery 사용
$.ajax({
  type: "POST",
  url: url,
  data: data,
  dataType: dataType,
  success: function (res) {
    console.log(res);
  },
  error: function (res) {
    console.log(res);
  },
});

가독성이 향상하고 이중 if문을 거는 전통 코드보다 확실히 jQuery를 사용한 ajax가 이해하기 쉬워보인다.

fetch

모던 브라우저 이후에는 javascript 내장 api인 fetch를 많이 권장한다!! 하지만 강의에서 다루는 ajax를 통해 기본을 다지는 느낌으로 학습했다.

// fetch
try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch (e) {
  console.log("Oops, error", e);
}

axios

• axios는 브라우저, Node.js를 위한 Promis API를 활용하는 HTTP 비동기 통신 lib이다
• fetch에 없는 기능이 더 있다.
• XSRF 해킹 기업에 비교적 안전하다.

하지만 라이브러리 설치가 필요해서 가벼운 개발에는 fetch를, 제대로 개발할 때는 axios를 사용하는게 좋을 것 같다.

axios({
  method: "post",
  url: "/user/12345",
  data: { firstName: "Fred", lastName: "Flintstone" },
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

출처
https://devscb.tistory.com/66
https://ghost4551.tistory.com/139