📝 JavaScript 기초 강좌 기록 (하)

SOJU 2기 🍾

📝 JavaScript 기초 강좌 기록 (하)

HYEMBURGER 2023. 4. 25. 19:16

서론

(하)편은 10강부터 18번째까지의 강의를 듣고 새롭게 알거나 잘못 알고 있었던 것 등 정보들을 기록했다.

📝 HTTP

브라우저 위에서 동작하고 있는 웹사이트, 웹 어플래케이션 같은 Client 들이 아땋게 Server 와 통신할 수있는지를 정의한 것.

어떻게 이 Hyper Text 를 서로 주고받을 수 있는지를 규약한 프로토콜의 한 종류 이다.

HTTP는 클라이언트가 서버에게 데이터를 요청(request)할 수 있고 Server는 클라이언트가 요청한 것에 따라 그에 맞는 응답(response)을 보내준다.

Hyper Text 는 링크 뿐만아니라 웹사이트에서 쓰여지고 있는 문서, 이미지파일들을 모두 아우르는 의미로 쓰임.

📝 AJAX

Asynchronous JavaScript And XML
웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술을 의미.

(대표적인 예 : XHP-XMLHttpRequest object > 간단하게 서버에게 데이터를 요청하고 받아올 수 있음.)
최근 브라우저 API에 추가된 fetch() API 를 사용하면 간편하게 데이터를 주고 받을 수 있다!

📝 XML

HTML 과 같은 마크업 언어 중 하나. 태그들을 이용해서 데이터를 나타낸다.
XMLHttpRequest 이름을 보면 ... XML 파일만 가능할까? 라는 생각이 들 수도 있지만 NO!!!

서버와 데이터를 주고받을 때에는 다양한 파일 포맷을 전달받을 수 있다. (하지만 JSON이 많이 쓰이는 추세)

XML -> 불필요한 태그가 많아 가독성이 좋지 않음. -> 그래서 이 자리를 JSON을 대신해 많이 사용되고 있다.

JSON ?

JavaScript Object Notation

자바스크립트 오브젝트와 관련된 파일이라는 걸 알 수 있다. (JS object와 마찬가지로 key: value의 형태를 사용)
브라우저 뿐만 아니라 모바일에서 서버와 데이터를 주고 받을 때, 서버와 통신을 하지 않아도 오브젝트를 파일 시스템에 저장할 때도 많이 이용한다.

JSON의 특징

- 데이터를 주고 받을 때 쓸 수 있는 가장 간단한 파일 포맷
- 텍스트를 기반으로 해 가볍다
- 읽기 편하다
- 키와 밸류 쌍으로 이루어짐
- 데이터를 보통 서버와 주고 받을 때 직렬화를 할 때, 데이터를 전송할 때 쓴다.
(직렬화란 다른 환경으로 전달하기 위해 어떠한 정해진 포맷으로 변환하는 과정을 말한다.)
- 프로그래밍 언어나 플랫폼에 상관없이 사용할 수 있다!

오브젝트를 서버로 전송할 때에는 키-밸류를 스트링 타입으로 변환해서 서버에 전송.
서버에서 받아올 때도 마찬가지로 스트링 타입으로 받아와서 -> 오브젝트로 변환.

❗️주의

1. 스트링 타입으로 변환할 때 object 안에 있는 데이터가 아닌 것 (예: 함수)나 js에만 있는 특별한 데이터타입(symbol)은 JSON에 포함되지 않고 사라진다. 그러므로 스트링 타입으로 변환한 후 -> 다시 오브젝트로 변환했을 때 함수 등 사라지는 것들을 쓰면 Error가 출력된다.

2. 오브젝트 -> String 타입 변환 (모든 값이 String으로 변환된다. 특히 Date 주의!) -> 오브젝트(값이 모두 string이므로 date 내장된 메소드를 사용할 수 없다.

예를 들어 Date의 경우 콜백함수를 통해 string이 아니라 Date 로 가져올 수 있다.

만약 key 가 birthDate 일 경우 value 에 맞는 새로운 Date를 생성한다. 이후에는 메소드를 사용할 수 있다!

const obj = JSON.parse(json, (key, value) => {
  return key === "birthDate" ? new Date(value) : value;
});

콜백함수

콜백함수란, 파라미터에 함수를 전달받아서 실행하는 함수를 뜻한다.

JavaScript is synchronous! (자바스크립트는 동기적인 언어!)
동기적이란, 호이스팅(var, function 선언은 자동적으로 제일 위로 올려진다)이 실행된 후 작성한 코드에 맞춰서 정해진 순서대로 한줄씩
실행된다는 의미. <-> 비동기적이란, 언제 코드가 실행될지 예측할 수 없는 것을 의미.

1. 동기적 상황의 콜백함수

// * Synchronous callback : 동기적 상황의 콜백함수
function printImmediately(print) {
  print();
}
printImmediately(() => console.log("hi"));

2. 비동기적 상황의 콜백함수

// * Asynchronous callback : 비동기적 상황의 콜백함수
function printWithDelay(print, timeout) {
  setTimeout(print, timeout);
}
printWithDelay(() => console.log("비동기 콜백"), 2000);

Promise

비동기를 간편하게 처리할 수 있도록 도와주는 JS object

1) Promise 생성과 사용

const promise = new Promise((resolve, reject) => {
  // callback1 resolve : 최종 데이터 전달 (기능수행OK!)
  // callback2 reject : 기능수행 오류났을 때

  // * doing some heavy work (network, read files)
  console.log("doing something...");
  setTimeout(() => {
    // resolve("burger");
    reject(new Error("no network T_T"));
  }, 2000);
});

파라미터1 resolve 는 기능이 완벽히 수행되었을 때 실행

파라미터2 reject는 반대로 파일을 찾을 수 없거나 오류가 발생했을 때 실행

2) then, catch, finally

promise
  .then((value) => {
    // 정상적으로 수행되었다면 resolve를 통해 전달한 값을 받아온다
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    // 무조건 호출됨.
    console.log("finally");
  });

then : 정상수행완료 시 resolve(값)을 인자로 전달받음.

catch : 오류 시 reject(값)을 전달.

finally : 무조건적으로 호출.

3) Promise chaining

const fetchNumber = new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
});

fetchNumber
  .then((num) => num * 2) // 2
  .then((num) => num * 3) // 6
  .then((num) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(num - 1), 1000); // 5
    });
  })
  .then((num) => console.log(num)); // 5

콜백함수, 프로미스는 이해가 될 듯 안될 듯 애매한 구석이 있다.

이 둘은 계속해서 찾아보고 써보고 가지고 놀아봐야겠다 🫠

그리고 강의는 정말 알차고 그동안 이해 안되던 것도 되었으나 역시 강의만 들었을 때 문제는...

결국 이걸 어디에 어떻게 써야하는가 라는 고민이 생긴다는 점이다. 더 많은 체험(?)을 해볼 수 있으면 좋을텐데 라는 생각이 든다.