본문 바로가기
패스트캠퍼스/프론트엔드 아카데미 : 제 1강 JavaScript & TypeScrip

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

by Tan- 2025. 8. 19.

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


250819(화) 50일차

프로세싱 - 형태의 변환 - 문자열을 객체로 변환하기

 

헤더와 로우 분리
문자열을 객체로 변환할 때 가장 먼저 해야 할 일은 헤더와 데이터 로우를 구분하는 것


첫 줄을 split으로 잘라 키 배열 생성
이후 줄들을 같은 구분자(separator, 기본값 ,)로 나누어 값 배열 생성
헤더와 값을 인덱스로 매칭하여 [key, value] 구조를 만든 후 reduce로 객체화

row(i) {
  return this.headers.map((key, idx) => [key, this.rows[i][idx]]);
}

 

클래스 구조 – 역할 분리
HeaderListData : 문자열을 파싱하여 헤더/로우 데이터 분리
MakeObject : 상속을 통해 toObject, toAllObject 메서드 구현 → 단일 객체 또는 전체 객체 배열 생성

toObject(i) {
  return this.row(i).reduce((acc, [k, v]) => (acc[k] = v, acc), {});
}

이 구조는 CSV, TSV 같은 구분자 기반 데이터 처리에 매우 유용하다
구분자 변경이 가능해 재사용성이 높음
map + reduce 패턴으로 직관적 데이터 변환
상속 구조를 통해 파싱 로직과 객체화 로직을 명확히 분리 → 유지보수 용이

 

이번 강의에서는 문자열 데이터를 구조화된 객체로 변환하는 과정을 학습했다

단순 파싱을 넘어, 첫 줄을 키(헤더)로 사용하고 이후 줄을 값으로 매칭하는 로직을 클래스 구조로 구현하면서 데이터 전처리 과정의 기본 패턴을 체계적으로 익힐 수 있었다

비교적 복잡한 클래스 구조와 배열 연산 체이닝이 결합되어 있어 한 번에 완벽히 이해하기 어렵지만

이 과정을 반복 연습하면 데이터 파싱 → 매핑 → 객체화라는 전형적인 흐름을 자유롭게 구현할 수 있다.

 

벌써 50일이 지나

환급 챌린지 마지막날이라니,,

자세한 것은 최종미션에 적겠지만 시간 참 빠르다,,

그럼 다음 챌린지 때 보는걸로,,,,