TS스터디 이펙티브 item24~25

온호성·2023년 4월 13일

이펙티브 타입스크립트 스터디

목록 보기

10/16

🤡item 24 일관성 있는 별칭 사용하기

ts에서 일관성 있는 별칭을 사용하는 것은 코드 가독성과 유지 보수성을 높일 수 있는 좋은 방법 중 하나입니다.

어떤 값에 새 이름을 할당하는 예를 들어보겠다.

const borough = { name: 'Brooklyn', location: [40.688, -73.979] }
const loc = borough.location

borough.location 배열에 loc 이라는 별칭(alias)를 만들었다. 별칭의 값을 변경하면 원래 속성값도 변경된다.

이런 별칭을 남발하면 제어 흐름을 분석하기 어렵다. 별칭은 신중하게 사용해야 코드를 잘 이해할 수 있고, 오류도 쉽게 찾을 수 있다.

별칭 사용시 주의할점

제어 흐름 분석을 방해하지말자. → 별칭을 일관성 있게 사용하자
객체 비구조화를 이용하여 일관된 이름을 사용하자.
(그러나 선택적 속성인 경우 속성 체크가 필요하며 경계에 null값을 추가하는 것이 좋다.)
빈 배열인 경우 그 값이 없음을 나타내는 좋은 방법으로 사용될 수 있다.

객체 속성에서 타입스크립트 제어 흐름 분석을 주의해야 한다.

function fn(p: Polygon) { /* ... */ }

polygon.bbox // 타입이 BoundingBox | undefined
if (polygon.bbox) {
  polygon.bbox // 타입이 BoundingBox
  fn(polygon);
  polygon.bbox // 타입이 BoundingBox
}

이 예제에서 fn함수가 polygon의 속성을 직접 수정한다면 그 이후의 타입이 달라질 가능성이 있다. 따라서 지역변수(bbox)로 비구조화 할당으로 꺼내서 사용하면 타입을 정확하게 유지할 수 있다. 그러나 이경우도 polygon.bbox의 값과 같게 유지되지 않을 수 있다.함수 호출이 객체 속성의 타입 정제를 무효화할 수 있다는 점을 주의해야 한다.

-요약-

별칭은 타입스크립트가 타입을 좁히는 것을 방해한다. 따라서, 변수에 별칭을 사용할 때는 일관되게 사용한다.
비구조화 문법을 사용해서 일관된 이름을 사용하는 것이 좋다.(타입도 따라감)
함수 호출이 객체 속성의 타입 정제를 무효화할 수 있는 점을 주의한다.
속성보다 지역변수를 사용하면 타입 정제를 믿을 수 있다

🤭item 25 비동기 코드에는 콜백 대신 async 함수 사용하기

과거에는 비동기 동작을 모델링 하기 위해 콜백 패턴을 사용했다.
콜백은 코드를 중첩시키고 직관적으로 이해하기 어렵게 만들며, 요청을 병렬로 실행하거나 오류 상황을 빠져나오기 곤란하게 한다(콜백 지옥 callback hell).

fetchURL(url1, function (response1) {
  fetchURL(url2, function (response2) {
    fetchURL(url3, function (response3) {
      // ...
      console.log(1)
    })
    console.log(2)
  })
  console.log(3)
})
console.log(4)

// Logs:
// 4
// 3
// 2
// 1

ES2015에서 콜백 지옥을 극복하기 위해 프로미스(promise) 개념을 도입했다. 프로미스는 미래에 가능해질 어떤 것을 나타낸다

const page1Promise = fetch(url1)
page1Promise
  .then(response1 => {
    return fetch(url2)
  })
  .then(response2 => {
    return fetch(url3)
  })
  .then(response3 => {
    // ...
  })
  .catch(error => {
    // ...
  })

프로미스는 이러한 장점이 있다.

코드의 중첩을 줄일 수 있다.
실행 순서도 코드 순서와 일치한다.
오류를 처리하기 쉬워진다.
Promise.all 과 같은 고급 기법을 사용할 수 있다.

ES2017에서는 async/await 키워드를 도입해 콜백 지옥을 더욱 간단하게 처리할 수 있게 되었다.

async function fetchPages() {
  const response1 = await fetch(url1)
  const response2 = await fetch(url2)
  const response3 = await fetch(url3)
  // ...
}

async/await을 사용하면 코드의 가독성이 높아지고, 에러 처리가 쉬워지며, 비동기 코드의 흐름을 더욱 명확하게 파악할 수 있다.

async 함수는 비동기 코드를 동기적으로 작성할 수 있게 해주는 함수인데 async 함수는 항상 Promise를 반환하며, async 함수 안에서 await 키워드를 사용하여 Promise가 resolve되기를 기다릴 수 있다. 이를 통해 Promise 체인이나 콜백 지옥을 피할 수 있다.

예를 들어, 다음은 Promise를 사용하여 데이터를 가져오는 예제 코드이다.

function fetchData(url: string): Promise<any> {
  return fetch(url)
    .then(response => response.json())
    .then(data => {
      // Do something with the data
      return data;
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

이 코드는 Promise 체인으로 구성되어 있으며, 에러 처리도 비교적 복잡합니다. 이제 async/await을 사용하여 같은 작업을 수행해보면

async function fetchData(url: string): Promise<any> {
  try {
    const response = await fetch(url);
    const data = await response.json();
    // Do something with the data
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}