TIL

# 211001 TIL (자바스크립트 비동기처리, lodash ...so on)

inthess 2021. 10. 5. 11:06

장기현장실습

띵동 → 푸드테크 구조 리팩토링

자바스크립트 개념 및 푸드테크 코드 질문에 대한 답변

  • 자바스크립트 개념
    • if문 조건에 변수만 작성하는 경우를 많이 봤는데, 변수만 작성하는 것으로 조건이 되는걸까? ex) if (isValid) { ... }
      • 이것은 자바스크립트의 느슨한 문법에서 비롯된 문제이다. 변수 값의 종류에 따라 truthy, falsy한 값으로 보게 된다. 여기서 truthy, falsy라는 의미는 실제 값이 true/false는 아니지만 조건 같은 곳에서 true/false로 인식하는 값이다. 보통 값이 있으면 true로, 없으면 false로 간주한다.
      • str = 'a' 라고 하고, if (str) { console.log('b') } 를 하면 str에 담긴 a가 truthy한 값이 되어 if문에서 이를 true로 인식한다. 따라서 조건을 만족하기 때문에 결과적으로 if문 안의 코드가 실행되어 b가 나온다.
      • 만약 엄격하게 실제 값이 true/false일 때를 처리하고 싶을 때는 실제 조건을 작성해주면 된다. ex) if (isVaild === true) { ... }
    • 비동기처리 개념과 async, await
      • 비동기처리 개념에 대해 알기 전에 비동기처리를 왜 하는지에 대해 먼저 알아보자.
        • 자바스크립트는 싱글 스레드이다. 싱글 스레드라는 것은 일을 처리하는 사람이 한명이라는 것과 같은 의미이다. 예를 들어 알바생이 한 명인 카페에서 주문을 하면 주문 순서대로 음료를 만들어 줄 것이다. 주문을 하나 받고 나서 음료 만들고, 다음 주문 받고 또 음료 만들고 이런식으로 처리하는 것이 동기식 처리이다. 그럼 다른 사람들은 앞의 주문이 처리될 때 까지 기다려야하는 문제가 생긴다. 그래서 일단 주문을 쭉 다 받고나서 주문에 대한 처리를 하는 것이 비동기처리이다.
      • 이제 자바스크립트와 노드가 어떻게 처리하는지 구조적인 내용을 알아보자.
        • 자바스크립트 코드를 입력하면 함수들이 콜 스택(Call Stack)이라는 곳에 쌓이게 된다. 콜 스택은 말 그대로 stack 형태(LIFO 방식)이며, 쌓인 코드가 호출되고 다음 코드가 쌓이고 호출되고 이런식으로 처리하기 때문에 동기적이다.
        • 동기든 비동기든 호출되는대로 콜 스택에 쌓이는데 비동기 함수는 stack 형태로 처리하면 안되니까 따로 처리를 해야한다. 그래서 백그라운드나 웹 API로 넘겨지게 되고, 만약 해당 비동기 함수를 10초 뒤에 처리해달라고 했다면 10초 뒤에 콜백큐로 넘어간다. 콜백 큐(Callback Queue)로 넘어간 후 처리하기 위해서 다시 콜 스택으로 가서 처리된다.
        • 버튼을 클릭하면 어떤 함수를 실행하라고 코드를 작성했다고 가정해보자. 그럼 그 함수는 버튼을 클릭하기 전까지는 어디선가 기다리고 있을 것이다. 그게 바로 백그라운드/웹API이다. 이후 버튼을 클릭하면 콜백 큐(FIFO 방식)로 가서 순서를 기다리고, 순서가 되면 콜 스택으로 가서 처리한다.
      • 마지막으로 코드에는 어떻게 적용되는지 살펴보자.
        • 비동기이지만 어떤 부분에서는 동기로 처리해야하는 상황이 발생한다. 예를 들어, 상점의 데이터 가져오기와 데이터 그리기 액션이 있다고 하자. 의도는 상점의 데이터를 가져오고 나서 데이터를 그리는 것인데, 비동기로 처리하면 데이터를 가져오는 사이에 데이터 그리기가 먼저 처리될 수도 있다. 그렇기 때문에 이런 부분은 데이터 가져오기를 동기로 처리해야 한다.
        • 또 다른 예를 들어보자. 블로그에서 댓글을 작성할 때, 댓글을 작성하고 완료 버튼을 누르면 화면 전체가 refresh 되는 현상 없이 댓글 내용만 나타난다. 이것도 어느 부분은 비동기로, 어느 부분은 동기로 처리된 것인데 자세히 살펴보자.
          • 원래 동기처리는 만드는 게 끝나고 저장이 되어야, 저장된 데이터를 가져와서 보여주는 로직이다. 비동기처리는 저장 완료 여부와 상관 없이 보여준다. DB에 저장된 데이터를 가져오는게 아니라 어떤 변수에 데이터를 잠깐 담아주고 그 내용을 보여준다. 이렇게 하면 DB에 저장되는 시간을 기다릴 필요 없이 빠르게 처리할 수 있다. 저장은 저장대로 하고, 보여주는 건 보여주는대로 하는 것이다.
        • async, await는 일단 비동기로 진행시키라는 의미인데, 위의 예시처럼 비동기가 완료된 함수 결과를 가지고 다음 액션을 하고 싶을 때는 await를 사용해서 비동기 결과를 받는다. 사실 동기처리였으면 순서대로 처리하니까 앞서 처리된 결과를 가져와서 처리할 수 있는데, 비동기이니까 뭐가 먼저 처리될지 모르기 때문에 원하는 함수가 처리될 때까지 기다렸다가 그 결과를 받고 싶을 때 await를 사용한다.
          • async는 함수를 정의하는 선언부 맨 앞에 사용하는 예약어이다.
          • await는 호출하고자 하는 함수 앞에 사용하면 된다. 비동기처리 메서드가 꼭 프로미스(Promise) 객체를 반환해야 await를 의도한 대로 사용할 수 있다. 보통 API 호출 메서드에 자주 사용된다.
    • lodash 라이브러리를 쓰는 이유
      • 인기 있는 라이브러리 중 하나로, array, collection, date 등을 더 쉽게 다룰 수 있어 많이 사용한다.
      • 자바스크립트의 내장함수보다 성능이 훨씬 좋으며, 예외 처리를 쉽게 할 수 있다.
        • 원래 forEach문을 사용할 때, 배열 자체가 null이면 오류가 나는데 lodash를 쓰면 예외처리가 되어 있어서 따로 처리해줄 필요가 없다.

 

  • 푸드테크 코드
    • order-service-server에서 branch-service-server에 접근하여 정보를 얻어오는 방법
      • 클라이언트가 서버에게 요청하듯이, order-service-server에서 branch-service-server의 API를 요청(호출)하면 해당 API가 불려서 응답을 해주는 형태이다.

 

 

푸드테크 백엔드 구조 및 동작 설명

  • fastify: API를 쉽게 만들어주는 프레임워크
  • order-service-server의 폴더 설명
  • app: API 코드
  • const: 자주 사용되는 변수/상수 선언되어 있음
  • domain: DB 스키마를 정의함 (+ 데이터에 접근해서 뭔가를 하고 싶을 때, 그 내용이 담긴 메서드 정의) domain/CostForOrder 참고
  • repository: DB를 조작하는 함수(save, remove ...) 작성되어 있음
  • service: 다른 서버에 요청하고 싶은 내용에 대한 코드

 

  • API를 만들어보고(백엔드) 직접 요청해보면서(프론트엔드) 코드를 어떻게 작성하는지 알기
    • fetch()는 API 요청 함수이며 프로미스 객체이다.
    • request.body에는 요청한 바디 내용이 그대로 담긴다.

 

 

 

 

이미지 출처: https://velog.io/@yejinh/Event-Loop-d4k4llote8

저작자표시