잊고있던 JS 패키지를 바이브 코딩으로 TS 마이그레이션하기

  때는 바야흐로 지금으로부터 6년 전인 2019년, 한창 비트마스킹으로 스트레스를 받던 시절이었다. 회사에서 출시하는 IoT 장비의 모델이 늘어날 때마다 새로운 기능이 추가되는데, 이 기능이 벌써 32개를 넘어가면서 64비트로 확장하는 업무를 할 때였다. 당시만해도 여러대의 IoT 장비를 관리하는 제품을 만드시는 분은 '설마 기능이 64개까지 늘어나겠냐'면서 단순히 int로 작성된 타입을 int64로 변경하는데 그쳤지만, Javascript를 사용해야하는 나는 그럴수가 없었다.

  Javascript에서 제공하는 number의 범위는 -(2^53-1) ~ (2^53-1)인데, 이는 64비트를 온전히 표현하지 못한다는 의미가 된다. 따라서 브라우저 콘솔 등에 (1<<63) & (1<<31)을 출력해보면, 오버플로로 인해 0이 아닌 -2147483648이 출력되는 것을 확인할 수 있다. 오호통제라. 설상가상으로 새로 입사하는 친구들은 비트마스킹에 친숙하지 않아서 매번 설명을 해야했고, 당시에는 BigInt를 사용하기도 힘든 환경이어서 간단한 라이브러리를 만들어서 해결했다.

  하지만 의례 그렇듯 이런 라이브러리들은 사용할때만 사용하지, 점점 잊혀지기 마련이다. npm에도 배포는 했지만 JS로 비트마스킹을 하는 사람이 몇이나 되겠는가. 거기에 더해 비슷한 패키지들도 많이 생겼고, 홍보나 문서화도 되지 않은 이 라이브러리는 자연스럽게 기억의 뒤안길로 사라졌다.

타임캡슐 발견 ⏱️

  이력서를 정리하고 오픈소스 참여가 너무 저조하다는 피드백을 받고 깃허브에 접속해보니, 아니나다를까 그동안 시작만 해놓고 방치해둔 사이드 프로젝트부터 강의를 들으면서 작성하던 코드들까지 잡동사니같은 레포지터리들이 산더미처럼 쌓여있었다. 하나 둘 불필요한 레포지터리를 삭제하던 중에, 기억의 뒤안길로 사라졌던 BitFlagJS가 눈에 띄었다. 앞서 말했던 비트마스킹을 관리하기 위한 라이브러리였다. 아무도 사용하지 않는터라 Star도 없었고, 마지막 업데이트도 수년 전이라 사실상 관짝에 들어간 셈이라고 볼 수 있었다.

오픈소스가 언제 죽는다고 생각하나...? 맹독 버섯 스프를 마셨을 때...?

  아무튼 오랜만에 발견했는데 이미 관짝에 들어가있는 걸 보고 있자니 뭔가 아쉬워서, 이왕 이렇게 된거 관짝이라도 이쁘게(?) 꾸며주기로 했다. 50줄 정도밖에 안되는 코드다보니 AI를 사용하면 문서화나 리팩토링, 테스트 코드 작성에도 시간이 오래 걸리지 않을 것 같았고, 바이브 코딩으로 진행한 절차들을 정리해두면 나중에 다른 프로젝트를 진행할때도 참고할 수 있을 것 같았다.

영문 README.md 작성'''해 줘.'''

  레포지터리에 처음 들어갔을 때 보이는 것은 README.md 파일. 그러니

관짝을 이쁘게 꾸미려면

 먼저 README.md 파일을 재작성해야했다. 기왕 하는김에 라이브러리를 대표할 수 있는 이미지가 있으면 좋을 것 같아서, ChatGPT에게 BitFlags라는 이름에 걸맞는, 0과 1이 적혀진 깃발을 양 손에 든 검은곰을 그려달라고 했다.

  기존 라이브러리 자체가 다른 사람이 사용한다는 것을 가정하지 않았기 때문에 README.md 파일 자체도 한글로 작성해놨었는데, 기왕 하는김에 영어로 작성하는게 좋을 것 같아서 Cursor에게 한글 및 영문 버전의 README.md 파일을 작성해달라고 부탁했다. 일반적으로 README.md 파일을 작성하지 않는 경우는 거의 없어서 학습이 잘 되어있는지, 완성된 자료는 패키지에서 작성된 포맷과 비슷했다. 6년 전에 처음 작성했던 허접한 README.md 파일과 비교해보니, 예전의 문서 작성 실력이 너무 허접해서 머쓱해질 지경이었다.

타입스크립트로 마이그레이션'''해 줘.'''

  때는 바야흐로 2025년, 프론트엔드 코드를 작성하면서 타입스크립트를 사용하지 않으면 어쩐지 눈치가 보이는 시기가 됐...는지는 모르겠지만,

어차피 문제가 생기기 전까지는 내가 마이그레이션 할 것도 아니니까

 기왕이면 타입스크립트를 쓰면 좋지 않을까.

  Cursor에게 타입스크립트로 마이그레이션하고싶다고 말하자 다음과 같이 typescript와 @types/node를 개발 환경에 추가해준다.

npm install --save-dev typescript @types/node

그리고 다음과 같이 tsconfig.json 파일을 작성해준다.

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.test.ts"]
}

  이것으로 타입스크립트를 사용해서 라이브러리를 빌드할 수 있는 환경이 갖춰졌다. 그리고 바로 src 디렉토리를 생성하고 index.ts 파일과 bitFlagsJs.ts 파일과 각각 타입이 저장된 index.d.ts, bitFlagsJs.d.ts 파일을 생성한다. 여기서 index.ts 파일은 라이브러리의 진입점을 담당하며, bitFlagsJs.ts 파일은 라이브러리의 메인 로직을 담당한다. 새로 생성된 index.ts 파일은 다음과 같다.

// src/index.ts
import BitFlags from './bitFlagsJs';
export default BitFlags;
export { BitFlags }; 

  내용을 살펴보면 단순히 BitFlags 클래스를 import/export하는 것을 확인할 수 있다. bitFlagsJs.ts 파일은 라이브러리의 메인 로직이며, 기존에 작성된 bitFlagJs.js 파일을 기반으로 작성되는 것을 볼 수 있다.

  곰곰히 생각해보니 기존에 만든 BitFlag 클래스는 비트를 설정하고 해제하는 기능은 구현되어있지만, 다른 BitFlag 인스턴스와 or, and, xor 등의 비트 연산을 하는 기능은 구현되어있지 않았다. 내친김에 이 기능을 추가한 뒤 곰곰히 생각해보니, 추가한 기능이 제대로 동작하는지 확인할 수 있는 수단이 필요했다. 그리고 가장 간단하게 라이브러리에 구현된 코드를 실행해볼 수 있는 수단이라고 하니, 자연스럽게 테스트 코드를 작성해야겠다는 생각이 들었다.

테스트 코드 작성'''해 줘.'''

  '테스트는 라이브러리에 추가한 기능을 가장 간단하게 실행해볼 수단'이라고 말하긴 했지만, 정작 테스트 코드를 제대로 작성해본 적은 없었다. 어떻게 해야하나 생각하다가, 우선 Cursor에게 테스트 코드를 작성해달라고 부탁한 뒤, 작성된 테스트 코드에 예외 케이스나 필요한 테스트를 추가해보면서 익숙해지기는게 빠르겠다는 결론을 내렸다.

결국은 '''해 줘'''라는 결론에 도달했다.

 

  아무튼 Cursor에게 테스트 코드를 작성해달라고 요청하자, 바로 jest를 설치하기 시작했다.

npm install --save-dev jest @types/jest ts-jest

  그리고 다음과 같이 jest.config.js 파일을 작성해준다.

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
}; 

  마지막으로 package.json에 테스트를 실행하기 위한 test 스크립트를 추가해준다.

"scripts": {
  "build": "tsc",
  "prepare": "npm run build",
  "test": "jest"
},

  이제 Jest를 통해 테스트 코드를 실행할 수 있는 환경이 갖춰졌다. Cursor는 계속해서 패키지 내용을 기반으로 테스트 코드를 bitFlagsJs.test.ts 파일에 작성해줬고, 몇 번 실행해보니 테스트 코드를 어떻게 작성해야되는지 파악할 수 있었다.

테스트 코드를 살펴보고 두 개의 BitFlags 인스턴스가 주어졌을 때 and, or, xor 연산을 하는 기능이 부족한 것 같아 이를 추가해보고, 예상대로 동작하는 것을 확인할 수 있었다. 이것으로 몇 시간도 안되서 타입스크립트로 마이그레이션하고, 문서와 테스트 코드를 작성한 뒤 배포할 준비가 끝났다.

  이미 배포 자체는 예전에 진행했던지라, 배포 자체는 npm publish 명령어만 실행하면 됐다.

마무리

  이렇게 몇 시간도 안되서 오랫동안 방치해둔 라이브러리의

관짝

문서를 이쁘게 재작성하고, 타입스크립트로 마이그레이션하고, 테스트 코드를 작성해서 예상한대로 동작하는지 확인할 수 있었다. 뿐만 아니라 잘 모르는 개념에 대해서도 일단 돌아가는 코드를 작성한 뒤, 어떻게 동작하는지 파악해보면서 더 빠르게 학습할 수 있었다.

  기존처럼 문서를 정독한다던가 혹은 개발서적을 찾아보는 것에 비해서 놓치는 부분이 없을 순 없겠지만, AI 기술이 발전함에 따라 개발 지식을 쌓는데 큰 도움이 된다는 것을 체감할 수 있는 기회였다. 테스트 코드를 작성하는 건 익숙하지 않았지만 AI 덕분에 대략 어떻게 동작하는지는 파악할 수 있었고, 주말간 jest 문서를 확인하고 더 자세히 알아보는 시간을 가져야 할 듯 하다.

---

• BitFlagJs GitHub Repository
• BitFlagJs NPM Package