패스트캠퍼스 환급챌린지 49일차 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq

250818(월) 49일차

형태의 변환 - 객체를 형태가 다른 객체로 변환하기

 

객체 변환: 메타 정보로 원뎁스 객체를 그룹화하기

하나의 평평한(원뎁스) 객체를 그룹 메타 정보에 따라 중첩 구조로 변환,

map/reduce 체이닝과 계산된 프로퍼티(Computed Property)를 적극 활용해 읽기 난이도가 있지만 재사용성과 확장성이 좋은 패턴을 다뤘다

 

메타 정보 기반 변환: groupInfo가 “그룹명 → 키 배열”을 정의하고, 이 규칙대로 소스를 재구성
계산된 프로퍼티: { [group]: ... } 형태로 런타임에 키 이름을 생성
불변성 유지: 스프레드({...a, ...b})로 병합하는 merge 리듀서
Object 헬퍼: Object.keys / entries / fromEntries로 키·엔트리 조작
가독성 vs. 압축: 한 줄로도 가능하지만, 유지보수성을 위해 보통은 단계 분리 권장

// 1) 입력 데이터
const source = { a: 1, b: 2, c: 3, d: 4, e: 5 };
const groupInfo = {
  "a그룹": ["a", "b"],
  "b그룹": ["c", "d", "e"],
};

// 2) 공통 병합 리듀서 (불변 병합)
const merge = (acc, obj) => ({ ...acc, ...obj });

// 3) 메인 변환 함수
const makeGroup = (src, info) =>
  Object.keys(info)                                 // ["a그룹", "b그룹"]
    .map(group => ({
      [group]: info[group]                          // 예: ["a","b"]
        .map(k => ({ [k]: src[k] }))                // [{a:1}, {b:2}]
        .reduce(merge, {}),                         // {a:1, b:2}
    }))
    .reduce(merge, {});                             // { a그룹:{...}, b그룹:{...} }

// 실행
console.log(makeGroup(source, groupInfo));
// => { a그룹: { a: 1, b: 2 }, b그룹: { c: 3, d: 4, e: 5 } }

 

더 간결한 대안 (가독성 선호 시)

const makeGroup2 = (src, info) =>
  Object.fromEntries(
    Object.entries(info).map(([group, keys]) => [
      group,
      Object.fromEntries(keys.map(k => [k, src[k]])),
    ])
  );

 

견고성 옵션 (누락 키 제외)

const safeMakeGroup = (src, info) =>
  Object.fromEntries(
    Object.entries(info).map(([group, keys]) => [
      group,
      Object.fromEntries(
        keys
          .map(k => [k, src[k]])
          .filter(([, v]) => v !== undefined) // 존재하는 키만 반영
      ),
    ])
  );

 

이번 강의에서는 단일 깊이의 객체를 그룹 기준으로 중첩 객체로 변환하는 방법을 배웠다
Object.keys와 계산된 프로퍼티(computed property), 그리고 map/reduce를 조합하여 그룹 메타정보에 따라 동적으로 구조를 재구성하는 과정을 살펴봤다

메타정보 → 부분 객체 생성 → 머지로 결합이라는 데이터 변환 패턴을 익히면 어떤 형태의 데이터도 예측 가능한 방식으로 변환하는 파이프라인을 설계할 수 있어서 좋은 예제였다