Today 요약

1. 프로젝트 타입스크립트 적용
2. 자바스크립트 강의

1. What I did?

1. 1 프로젝트 타입스크립트 적용

멘토링 날 피드백 중에 return 타입을 명시하는 것이 잠재적인 오류를 미리 확인할 수 있기 때문에 추론이 되더라도 return 타입에 대해서는 정의하는 게 좋다는 걸 이야기 나눴었는데, 어제 TIL로 정리하면서 그 부분은 확실하게 인지했다.

오늘은 그 부분부터 이어나가면서 타입을 하나씩 적용해보는 부분을 복기하면서 적용해봤다. 주로 api관련 타입을 적용해봤다.

api를 사용하는 곳은 두 가지다. authApi와 todoApi, authApi에서는 post만 사용하고 있고, todoApi에서는 get, post, delete, put을 사용하고 있다. TIL에는 get부분에 대해서만 남겨본다.

export const getTodos = async () => {
  return await todoApi.get('/')
}

get을 사용하는 곳은 getTodos만 있다. 여기서도 리턴 타입을 보게 되면 Promise으로 정의되어 있다. unknown의 타입을 좀 더 확실한 타입으로 추론이 가능하게 만들기 위해서는 실제 getTodos가 가지고 오는 값을 알아야 한다. getTodos라는 함수는 todo의 배열을 가지고 온다. 그리고 todo는 ITodo의 타입으로 정의되어 있다. 그럼 이제 ITodo타입의 배열으로 추론이 가능하게 해주면 된다. 이때 제네릭으로 명시해주면 자동으로 getTodos의 리턴타입이 추론된다.

정의하는 방법은 아래와 같다. get뒤에 제네릭으로 타입을 명시해주면 된다.

export const getTodos = async () => {
  return await todoApi.get<ITodo[]>('/')
}

하지만 이렇게 제네릭으로 타입을 명시하려면 실제 get메서드를 생성한 곳에서 제네릭을 사용할 수 있게끔 해주어야 한다. ApiClient에 가서 get메서드에 제네릭을 사용할 수 있게 정의해야 한다.

get<T>(endpoint: string): Promise<T> {
  return this.request('get', endpoint)
}

이렇게 하면 이제 정상적으로 getTodos의 리턴타입이 추론된다. (Promise<ITodo[]>)

사실 현재 api에 타입을 정의하는 부분에서 두 가지로 방향성이 나뉠 수 있다. 현재 api는 서버에서 응답 객체를 받아와서 그걸 이용해서 앱이 동작한다.

이때 클래스에 정의해놓은 request 메서드에서 then(res ⇒ res)로 응답 객체 자체를 넘겨주게 되면, Promise 형식으로는 안되고 Promise<AxiosResponse<any, any>> 형식으로 정의해야 한다.

그 이유는 응답 객체 자체를 넘기기 때문에 응답 객체의 타입(AxiosResponse)과 그 객체가 인자로 받는 타입을 추가로 정의해야 한다. 하지만 res ⇒ res.data 이런식으로 응답 객체의 data를 넘겨주게 되면 객체는 이미 받아온 상태이기 때문에 객체 안에있는 제네릭 타입만 명시해주면된다.

이런식으로 타입을 적용할 때는 편집기에서 추론해주는 부분과 가장 하위 컴포넌트 그리고 그 컴포넌트를 정의한 규격(클래스, 메서드) 등을 잘 확인하고 각 관계를 명확히 이해한 다음에 하나씩 천천히 점진적으로 타입을 적용해나가는 것이 중요한 것 같다.

그동안 타입을 적용할 때 그냥 아무 생각없이 적용한 경우도 많았다고 생각한다. 반성한다. 앞으로 타입을 적용할 때는 이번 멘토링 받았던 걸 잘 기억해서 코드의 흐름을 명확하게 이해하면서 하나씩 점진적으로 해결하면서 타입을 적용하도록 해야겠다.

2. What I Learned?

2.1 포트폴리오 강의

브라우저 API

• getBoundingClientRect

getBoundingClientRect은 DOM 요소의 위치와 크기 정보를 제공하는 메서드입니다. 이 메서드는 해당 요소의 위치와 크기를 반환하는 DOMRect 객체를 반환합니다. DOMRect 객체는 해당 요소의 상대 좌표를 기반으로한 좌표, 너비, 높이 등의 정보를 포함합니다. getBoundingClientRect 는 요소의 위치와 스크롤에 따라 반환되는 좌표 값이 변경될 수 있습니다.

• offsetHeight

offsetHeight는 요소의 높이를 나타내는 속성으로, 보이는 부분과 padding, border, 스크롤바를 포함한 전체 높이를 반환합니다. 스크롤바가 있을 경우에도 스크롤바의 크기까지 포함하여 계산합니다.

offsetHeight는 높이를 정수로 계산하고, getBoundingClientRect.height()는 소수점까지 계산해서 반환한다.