TIL 220806

Done 😁

• team project 환경 세팅 - 와이어프레임 제작

• 역할 분담

  • 하병노 : 방명록페이지
  • 서동욱 : 상세페이지
  • 신범수 : 수정페이지
  • 공동 : 메인페이지
    
    

• 전역 state 관리는 redux-toolkit 으로 한다.

• 알고리즘 문제 스터디 - K번째 수
  
  

---

Learned 👌

async & await

• 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법.
• 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 "읽기 좋은 코드" 를 작성할 수 있게 도와준다.

let user = {
    id : 1,
    name : 'Dan',
    age : 30,
    password : '****'
}

if (user.id === 1) {
    console.log(user.name) 
}

위 코드는 user 라는 변수에 객체를 할당 한 뒤 조건문으로 사용자의 id를 확인 후 콘솔에 name을 찍는 간단한 코드이다.

대부분의 사람들은 이렇게 위에서부터 아래로 한줄 한줄 읽어 내려오는게 당연히 편하다.

그래서 읽기 좋은 코드란 무엇인가?

// logName() 이라는 함수 작성
// fatchuser 라는 메서드를 호출하면 
// 위에서 작성한 예시와 같이 
// 사용자 정보를 담은 객체를 반환한다고 가정

function logName() {
  var user = fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

만약 콜백함수로 비동기 처리를 했다면.

function logName() {
  // 아래의 user 변수는 위의 코드와 비교하기 위해 일부러 남겨놓았다.
  var user = fetchUser('domain.com/users/1', function(user) {
    if (user.id === 1) {
      console.log(user.name);
    }
  });
}

일반적으로 자바스크립트의 비동기 처리 코드는 위와 같이 콜백을 사용해야지 코드의 실행 순서를 보장받을 수 있었다.

여기에서 acync 와 await 를 사용하면

async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

서버에서 사용자 데이터를 불러와서 변수에 담고, 사용자 아이디가 1이면 사용자 이름을 출력하는 코드가 된다.

이렇게 하려면 async await만 붙이면 된다.

async & await 기본 문법

async function 함수명() {
  await 비동기_처리_메서드_명();
}

1. 함수의 앞에 async 라는 예약어를 붙인다.
2. 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await 를 붙인다.
3. 여기서 비동기 처리 매서드는 반드시 프로미스 객체를 반환해야한다. 그러지 않으면 await 는 의도한 대로 동작하지 않습니다.

일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수이다.

async & await 예제

---

레퍼런스 :
https://joshua1988.github.io/web-development/javascript/js-async-await/