[TIL] 엘리스 SW 엔지니어 트랙 Day 017

📖 오늘 배운 내용 - 2021.11.16

• SPA(Single Page Application)
• history api
• 동기/ 비동기
• 콜백 함수(Callback Function)
• Promise

 

📝 history api

• SPA를 만들 때 브라우저 세션 기록을 위해 history api를 사용한다.

[JavaScript] 자바스크립트 History API

 

History.pushState() - Web APIs | MDN

 

📝 Location

• location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있다.
• location.href : 현재 문서의 전체 URL 주소를 문자열로 반환
• location.pathname : 현재 문서의 파일 경로명을 반환

 

📝 콜백 함수(Callback Function)

• 콜백 함수는 어떤 특정한 시점에 호출되는 함수를 의미한다.

console.log("1");

function test(callbackFunc) {
  setTimeout(() => {
    console.log("2");
    callbackFunc();
  }, 3000);
}

test(function() {
  console.log('3');
});

console.log("4");

// 결과 1 4 2 3

 

📝 비동기 처리란?

• 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고, 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다.

console.log("1");

setTimeout(() => {
  console.log("2");
}, 3000);

console.log("3");

// 결과 : 1 3 2

• setTimeout은 기본적으로 비동기적으로 동작한다.

function findUser(id) {
  let user;

  setTimeout(() => {
    console.log("1초 기다림");
    user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
  }, 1000);

  return user;
}

const user = findUser(1);
console.log('user : ', user);

// user :  undefined
// 1초 기다림

• 비동기로 인해 발생한 문제 → 콜백 함수로 해결한다.

 

📕 콜백 함수를 사용해서 비동기로 인해 발생한 문제 해결

function findUser(id, callbackFunc) {
  let user;

  setTimeout(() => {
    console.log("1초 기다림");
    user = {
      id: id,
      name: "User" + id,
      email: id + "@test.com",
    };
    callbackFunc(user);
  }, 1000);

  return user;
}
findUser(1, function(user) {
  console.log("user", user);
});

// 1초 기다림
// user {id: 1, name: 'User1', email: '1@test.com'}

• 콜백 함수를 사용해도 문제는 발생된다. → 콜백 함수 지옥 === 콜백 지옥
  • 해결책 : promise를 사용

 

📝 Promise

• Promise는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.
• new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.
• resolve(이행) : 이행 상태가 되면 아래와 같이 then()을 이용하여 처리 결과 값을 받을 수 있다.
• reject(실패) : 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있다.

function devide(numA, numB) {
  return new Promise((resolve, reject) => {
    if(numB === 0) {
      reject('new Error');
    }  else {
      resolve(numA / numB);
    }
  });
}

devide(8, 0)
  .then((result) => console.log("성공", result)) // resolve
  .catch((error) => console.log("실패 ", error)); // reject

 

📕 Promise의 3가지 상태

1. pending(준비)
2. Fulfilled(이행)
3. Rejected(실패)

 

💡 오늘 깨달은 것

• 오늘은 이고잉 코치님의 실시간 강의를 듣는 날이었다. 오늘도 좋은 말씀을 많이 해주셨다. 몇 개 적어보자면
  • 무조건 코드를 짧게 줄이는 것은 좋지 않다. 가독성 있게 줄이는 게 중요하다.
  • 또한, 줄인 코드를 함수로 만들면 나중에 알아보기 쉬우며 재사용성이 높아진다.
  • 처음부터 좋은 코드를 짜려고 하지 말아라! 일단 구현한 뒤 리팩토링을 해준다. 이렇게 연습을 많이 하면 처음부터 좋은 코드를 짤 수 있다.
• 오늘이 리액트 배우기 전 바닐라 자바스크립트로 SPA 만드는 방법을 배웠다.
• 이전에 스터디에서 자바스크립트로 SPA 만들었던 기억이 떠올랐다. 당시에 새로 고침 시 404 에러 뜨는 걸 해결하느라 꽤 오랜 시간이 걸렸었는데...!
• 동기, 비동기에 대해서 다시 한번 공부할 수 있었다.

 

📌 참고

• 코딩교육 티씨피스쿨