카카오테크캠퍼스 2기 | STEP2 | 16일차(24-07-15) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 16일차(24-07-15) 회고

📝 페이징 응답 타입 일반화

• 과제 진행 중 페이징 처리를 위한 응답 데이터 타입을 정의해야 했다. 처음에는 각 페이지별로 개별 타입(ThemeProductResponse)을 만들었지만, 모든 페이지에서 응답 데이터 구조가 동일하다는 것을 깨달았다. 이대로라면 중복 코드가 발생하고, 유지보수가 어려워질 것이 걱정되었다.

// 초기 코드 (개선 전)
export type ThemeProductResponse = {
  products: ProductData[];
  nextPageToken?: string;
  pageInfo: {
    totalResults: number;
    resultsPerPage: number;
  };
};

---

• 재사용성을 높이기 위해 페이징 응답 데이터를 위한 공통 타입(PaginationResponseType)을 만들기로 결정했다. 제네릭을 활용하여 다양한 페이지 데이터 타입을 수용할 수 있도록 설계했다.

// 개선된 코드
export type PaginationResponseType<T> = {
  data: T;
  nextPageToken?: string;
  pageInfo: {
    totalResults: number;
    resultsPerPage: number;
  };
};

 

 

📝 Nullish Coalescing Operator (??) 활용

• 기존 코드에서는 옵셔널 체이닝(?.)을 사용하여 data.pages의 존재 여부를 확인하고, 존재하지 않을 경우 빈 배열([])을 반환하도록 처리했다. 하지만 옵셔널 체이닝을 남용하면 코드가 복잡해지고 가독성이 떨어질 수 있다는 생각이 들었다.

// 초기 코드 (개선 전)
{data.pages?.flatMap((page) => page.products).map(
  // ... (나머지 코드)
)}

---

• 멘토님의 코드 리뷰를 통해 Nullish Coalescing Operator (??)를 알게 되었다. 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환한다. 이를 활용하여 더 간결하고 안전하게 코드를 작성할 수 있었다. Nullish Coalescing Operator를 사용하여 불필요한 조건문을 제거하고, 코드 가독성을 높였다. 

// 개선된 코드
{(data?.pages ?? []).flatMap((page) => page.products).map(
  // ... (나머지 코드)
)}

 

 

📝 Daily Scrum

• 면접 일정으로 참여하지 못하였다.
• 지난 PR 리뷰 회고

 

😋 Today 회고

• Nullish Coalescing Operator (??)를 처음 접하는 개념이라고 생각했는데, 이미 자바스크립트에 내장된 문법이라는 것을 알게 되었다. 그동안 옵셔널 체이닝(?.)과 논리 연산자(||)를 조합하여 비슷한 기능을 구현해 왔지만, Nullish Coalescing Operator를 사용하면 더욱 간결하고 명확하게 코드를 작성할 수 있다는 것을 깨달았다.
• 익숙한 문법이라도 놓치고 있는 부분이 있을 수 있다는 것을 다시 한번 느꼈다. 앞으로는 자바스크립트의 다양한 기능과 문법을 더욱 깊이 있게 학습하고, 코드 리뷰를 통해 꾸준히 개선해 나가야겠다.

 

➡️ 참고 링크

https://im-developer.tistory.com/192

[JS] 자바스크립트, Nullish Coalescing Operator (다른 논리 연산자와 비교)