처음부터 차근차근

[TIL - 231218] Javascript 비동기 처리, Spring 입문 공부 본문

TIL

[TIL - 231218] Javascript 비동기 처리, Spring 입문 공부

HangJu_95 2023. 12. 19. 01:19
728x90

오늘 한 일

  • Javascript Promise, async/await
  • Spring 입문 공부

Spring 입문 공부

  • Spring 입문을 통해 스프링 빈과 의존 관계를 좀 더 배울 수 있었습니다.
  • 김영한님의 강의를 듣다보니, 싱글톤에 대한 이해를 조금 더 쉽게 이해할 수 있었습니다.
  • 뭔가 재밌다..?

스프링 공부를 하니 뭔가 새로운 기술을 배우는 것 같아 재밌었습니다.

(또한, 스프링이 부러운 이유 중 하나가 김영한님이 있다는 것..?)

 

회원 관리 Backend 부분에서 Test 코드를 작성하는 부분이 있었습니다.

이때 Test간 서로 독립된 환경에서 진행해야 한다는 내용을 학습할 수 있었고, 그 때 싱글톤 이야기가 나왔습니다.

Spring이나 Nest 둘 다 왠만하면 싱글톤 디자인 패턴을 사용합니다.

즉, 하나의 특정 컨트롤러 인스턴스가 그 임무를 하는 것이고, 하나의 특정 Service 인스턴스가 마찬가지로 특정 Service 임무를 하는 것입니다.

그러나 이렇게 싱글톤을 사용하다보면 독립된 환경에서 사용할 수 없는데, 이때 TestCode에서 독립된 환경을 만들어 주기 위해 AfterEach나 BeforeEach를 사용합니다.

 

이렇게 Spring을 공부해가면서 Nest, 백엔드에 대한 전반적인 공부를 할 수 있었습니다.

Javascript Promise, async/await

  • Promise는 비동기 작업의 비동기 처리 상태와 처리 결과를 반환하는 객체입니다.
  • 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용했는데, 콜백 헬과 에러 처리에 한계가 있기 때문에 Promise가 출시했습니다.
  • async/await은 promise와는 다르게 마치 동기 처리처럼 코드를 짜면서 Promise를 사용할 수 있도록 도와줍니다.

Javascript는 비동기로 동작하는 함수는 Javascript Runtime을 통해 처리됩니다.

이러한 경우에는 Javascript 엔진이 아닌 외부 Runtime을 통해 처리가 되는데, 이때 비동기 함수를 범용적으로 사용하기 위해 비동기 함수에 비동기 처리 결과에 대한 후속 처리를 수행하는 콜백 함수를 전달하는 것이 일반적입니다.

근데 비동기 처리 로직이 많아지면, 들여쓰기가 많은 콜백 헬이 만들어집니다.

// GET 요청을 위한 비동기 함수
const get = (url, successCallback, failureCallback) => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.send();

  xhr.onload = () => {
    if (xhr.status === 200) {
      // 서버의 응답을 콜백 함수에 인수로 전달하면서 호출하여 응답에 대한 후속 처리를 한다.
      successCallback(JSON.parse(xhr.response));
    } else {
      // 에러 정보를 콜백 함수에 인수로 전달하면서 호출하여 에러 처리를 한다.
      failureCallback(xhr.status);
    }
  };
};

// id가 1인 post를 취득
// 서버의 응답에 대한 후속 처리를 위한 콜백 함수를 비동기 함수인 get에 전달해야 한다.
get('https://jsonplaceholder.typicode.com/posts/1', console.log, console.error);
/*
{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere ...",
  "body": "quia et suscipit ..."
}
*/

 

 

이러한 비동기 처리를 수월하게 하기 위해 Promise와 Async/await이 나왔습니다.

 

Promise

  • Javascript는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용
  • 그러나 이것은 콜백 헬과 에러 처리의 한계가 있다.
  • 이러한 문제를 해결하기 위해 Promise 객체가 만들어졌다.
  • Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체이며, 즉 비동기 처리 상태와 처리 결과를 반환하는 객체입니다.
  • Promise는 함수에 콜백을 전달하는 대신에, 콜백을 첨부하는 방식의 객체입니다. Promise 생성자 함수는 비동기 처리를 수행할 수 있는 콜백함수를 인수로 전달받는데, 이 콜백 함수는 reseolve와 reject 함수를 인자로 받습니다.
  • 프로미스는 pending, fulfilled, rejected 의 상태 정보를 갖습니다.

async/await

  • Promise와는 다르게 마치 동기 처리처럼 프로미스를 사용할 수 있도록 도와줍니다.
  • async 함수 선언은 AsyncFunction 객체를 반환하는 하나의 비동기 함수를 정의합니다.
  • 이때 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다.
  • await 키워드는 async 함수 내 프로미스가 settled 상태가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리 결과를 반환합니다. await 키워드는 반드시 프로미스 앞에 사용해야 합니다.
  • async/await을 사용하는 이유는, 여러 Promise의 동작을 동기스럽게 사용할 수 있기 때문에 자주 사용합니다. 또한 어떠한 동작을 여러 promise의 그룹에서 간단하게 동작하게 하는 것입니다.

(근데 갑자기 궁금한데 Java/Spring은 이런게 있을까..?)