Mincho 프로젝트의 이번주 #4 - JSON 콘솔 디버깅 라이브러리 배포

소개글

주간레터

이번주는 개발 팁이라기보다는 배포 경험입니다.

드디어 팀원분의 시간이 생겼기 때문에 함께 작업을 할 수 있었어요.

먼저 라이브러리에 대해 간략하게 소개하면, 디버깅에 최적화된 출력을 해주는 패키지에요.

설치 방법은 다음과 같습니다.

npm install -D @mincho-js/debug-log

# 또는
yarn add -D @mincho-js/debug-log

debug-log를 만들게된 이유

2번째주 뉴스레터에서 소개했듯, 이미 debugger를 구축하여 사용하고 있지만,

저희는 복잡한 CSS 관련 변환 객체들을 다루고, 재귀적인 호출등이 있다보니 어려움이 있었습니다.

디버거의 브레이킹 포인트는 포착하고 싶은 컨텍스트 근처에서 변화를 살펴볼때 도움이 되었지만,

화면 자체가 이동하기 때문에 단순히 로그만 찍어보고 싶을때도 많았습니다.

단순히 로그를 찍을때는 보통 다음과 같은 방식으로 출력해 보았지만, 불편했어요.

console.log(JSON.stringify(객체, null, 2));

그래서 5가지를 매우 간단하게 해결하는 라이브러리를 구축했지요.

주요 API는 3가지 입니다.

1. debugLog

호출할 때마다 count가 증가하고, 제목을 넣을 수 있습니다.

debugLog();
console.log("test");

debugLog("with title debugLog");
console.log("test2");

debugLog에 더불어 JSON을 아름답게 출력해줍니다.

혹시 JSON만 출력하고 싶으시다면 jsonPrint를 써보세요.

jsonLog({ key1: true, key2: 1, key3: null, key4: "string" });
jsonLog("with title jsonLog", { others: undefined });

여기서부터는 함수 모양이 조금 복잡해 보이기도 하는데요,

제목여부는 function overload를 활용해 자동으로 추론해주고 있습니다.

jsonExpect는 JSON 객체끼리 비교할 수 있는 기능을 탑재하고 있어요.

jsonExpect({ a: 1 }, { a: 2 });
jsonExpect("with title jsonExpect", { b: 1 }, { c: "1" });

무엇이 추가되고, 무엇이 삭제되었는지, 무엇이 편집되었는지를 한눈에 볼 수 있고

만약 객체가 동일한 모양이라면 same 이라는 박스에서 한번만 출력됩니다.

심지어 저희는 Vite Plugin화를 시켜놨기 때문에 상단에 import하는 것이 아니라,

함수 내부, 테스트 코드 내부 등 원하는 곳 어디서든 호출하도록 구성하여 사용하고 있답니다.

const { debugLog, jsonLog } = import.meta.debugLog;

물론 test 모드일때만 들어가므로, 프로덕션에 포함될 걱정을 하지 않아도 되요.

아직 vite plugin은 내부용도로만 쓰고 있어요.

첫번째 주에서 팀원과 목적/목표등을 정렬(Align)하는 시간도 가졌었는데요.

팀원 분께서는 서비스 배포와 달리 NPM 패키지는 올려본 적이 없었기 때문에 한번 꼭 경험해보고 싶다고 말씀하셨습니다.

사실 저도 개인 계정이 아닌 조직 계정으로 배포는 처음이었는데요.

덕분에 몇가지 삽질을 했지만, 관련 이슈들을 잘 정리해주신 덕분에 매우 편하게 작업할 수 있었습니다.

프로젝트 이름: 조직 계정 이름과 scope 가 일치시키는걸 까먹고 있었습니다.
패치된 패키지: 번들링되는 서비스용 프로젝트면 몰라도, 라이브러리에서 패치된 버전을 배포하기란 생각보다 어렵더라고요. 그래서 저희는 포크를 뜨고, 배포하기로 결정했습니다.
CommonJS: 의존하는 라이브러리 문제인데요, 몇가지 해결 방법을 찾기는 했으나
비동기 함수로의 전환, 동기식이여도 ESM과의 호환성 문제 등 때문에 어차피 내부용 툴링이니 우선 ESM 전용으로만 배포하기로 했습니다.
의존하는 패키지에서 JSON을 import하기 위해 import obj from "mod" with { "type": "json" }를 사용하고 있어 경고가 뜨는 모양이더군요.
역시 저희 환경에는 문제가 전혀 없기 때문에 해결없이 배포를 진행했습니다.

이번주에는 Monorepo에서의 버전 관리를 위한 changesets를 적용하고, 깃허브 액션으로 완전히 자동화된 체계를 갖추어보려고 합니다.

제가 여행을 잠시 다녀올 예정이라 팀원분께서 열심히..!! 작업을 해주시지 않을까 기대해봅니다. ㅎㅎ

혹시 개발에 관심이 있으시다면 댓글을 달아주시거나 alstjr7375@daum.net에 연락을 주셔도 좋습니다.

하단의 업보트와 깃허브 스타를 찍어주셔도 매우 큰 도움이 됩니다!!

- 네번째 뉴스레터 끝 -