개발 배경: 어느 오후의 ‘허무함’
모던 웹 개발에서 프론트엔드 엔지니어 업무의 절반은 ‘API와의 대화’라고 해도 과언이 아닙니다. Postman이나 Swagger로 API 응답을 확인하고, 그것을 TypeScript의 interface나 type으로 옮겨 적는 작업 말이죠.
어느 날 오후, 복잡한 계층 구조를 가진 거대한 JSON 응답을 바라보며 저는 문득 손을 멈췄습니다.
“내가 지금 무엇을 위해 프로퍼티 이름을 하나하나 치고 있는 거지? 이 반복 작업에 엔지니어로서의 창의성이 단 1%라도 들어 있나?”
프로젝트가 커질수록 응답의 계층은 깊어지고, 오타(Typos)가 발생할 위험도 커집니다. 저는 이런 ‘단순 노동’으로부터 저 자신을 해방하고 싶었습니다.
“별도의 설정 없이, 붙여넣는 즉시 납득할 만한 타입 정의가 나온다.” 마치 ‘장인의 도구’처럼 손에 착 감기는 툴이 갖고 싶어서 JSON to TypeScript 변환 도구 개발을 시작했습니다.
기술적 도전: 재귀 알고리즘의 ‘미학’
이 도구의 가장 큰 도전은 **“무거운 외부 라이브러리를 일절 쓰지 않고, 순수 로직만으로 프로 수준의 정확도를 구현하는 것”**이었습니다.
1. 끝없는 계층을 탐험하는 ‘재귀 처리’
JSON은 상자 안에 또 상자가 들어 있는 듯한 중첩 구조를 가집니다. 아무리 깊게 네스트 되어 있어도 순식간에 가장 깊은 곳까지 도달해야 하죠. 이 ‘정해지지 않은 깊이’에 대응하기 위해 알고리즘을 순수 재귀 처리로 구성했습니다.
private static inferType(value: any, depth = 1): string {
// 기본 프리미티브 타입 판정
if (value === null) return 'null';
// 배열인 경우 내부 요소를 다시 전수 조사
if (Array.isArray(value)) return this.formatArray(value, depth);
// 객체인 경우 프로퍼티를 재귀적으로 순회
if (typeof value === 'object') return this.formatObject(value, depth);
return typeof value;
}이 심플한 구조를 다듬고 연마함으로써, 아무리 복잡한 데이터 구조라도 순식간에 견고한 타입 정의를 생성할 수 있게 되었습니다.
2. ‘유니온(Union) 타입’에 대한 집착
개발하며 가장 머리를 싸매게 했던 것은 배열의 처리였습니다.
예를 들어 [1, "text", null]이라는 배열이 있을 때, 단순히 any[]라고 출력하는 것은 너무 무책임합니다. 그렇다고 맨 앞의 요소만 보고 number[]라고 단정 짓는 것도 매우 불친절한 일이죠.
이 도구에는 배열 내부의 모든 요소 타입을 먼저 훑어보고, 중복을 제거한 뒤 |(파이프)로 연결한 유니온 타입으로 출력하는 로직을 넣었습니다.
const types = Array.from(new Set(arr.map(item => this.inferType(item))));
const union = types.length === 1 ? types[0] : `(${types.join(' | ')})`;
return union + '[]'; // 결과: (number | string | null)[]이런 ‘작은 배려’야말로 실제 개발 현장에서의 사용감을 크게 좌우한다고 확신합니다.
‘보이지 않는 곳’에 대한 배려
변환 결과의 ‘아름다움’에도 신경을 썼습니다.
들여쓰기의 깊이나 키 이름의 따옴표 처리 등, “변환된 코드를 그대로 프로젝트에 붙여넣고 포매터(Formatter)를 한 번도 돌리지 않고 바로 커밋할 수 있는” 수준의 품질을 목표로 세밀하게 조정했습니다.
마치며
JSON→TypeScript 변환 도구는 얼핏 보면 평범한 도구입니다. 하지만 그 이면에는 ‘재귀 처리의 아름다움’과 ‘엔지니어의 시간을 단 1분도 낭비하게 하지 않겠다’는 강한 집념이 담겨 있습니다.
여러분의 개발 시간을 단순한 ‘타입 받아쓰기’가 아닌 ‘가치 있는 코드 구축’으로 전환하는 것. 이 도구가 여러분께 그런 작은 힘이 되기를 바랍니다.