주니어 Devs가 코드를 작성하고, 시니어 Devs가 삭제한다.

Source: Dev.to

개요

우리는 새로운 기능을 추가하고, 빠르게 배포하며 “일을 끝내는” 것을 자주 미화합니다. 하지만 때때로 가장 생산적인 일은 멈춰서 코드베이스를 살펴보고 인정하는 것입니다: “이건 엉망이야.”

지난 몇 달 동안 저는 DotShare라는 VS Code 확장 프로그램을 만들었습니다. 이 확장은 개발자들이 코드 스니펫을 소셜 미디어에 공유하도록 도와줍니다. 사용자는 이를 매우 좋아하지만, 내부적으로는 악몽과도 같았습니다.

이 이야기는 2000줄이 넘는 거대한 단일 파일을 깨끗한 아키텍처로 24시간 만에 리팩터링한 과정입니다.

🎥 변신 (30초 시청)

말은 쉽습니다. 여기 2,000줄의 스파게티 코드를 삭제하는 실제 영상이 있습니다. 순수한 만족감.

🍝 문제: “단일 클래스” 함정

저는 고전적인 함정에 빠졌습니다. 시작은 하나의 파일, DotShareProvider.ts였습니다.

• 처음엔 약 200줄 정도였고, “관리 가능하다”고 생각했습니다.

• 그 후 LinkedIn 지원, Telegram, AI 캡션 생성 등을 추가했죠…

• 어느새 2000줄짜리 괴물을 마주하고 있었습니다.

• 로직이 UI와 긴밀히 결합돼 있었습니다.

• 인증 토큰이 UI 렌더링과 같은 클래스에서 처리되었습니다.

• 디버깅은 스크롤… 스크롤… 스크롤을 반복하는 일이었습니다.

🧹 해결책: 클린 아키텍처

“패치”를 멈추고 “엔지니어링”을 시작하기로 했습니다. 핵심 아키텍처를 처음부터 다시 작성하는 데 24시간을 투자했습니다.

1. 모놀리스를 분리하기

단일 파일 접근 방식을 버리고 **단일 책임 원칙(SRP)**에 기반한 모듈 구조를 채택했습니다.

서비스 – 순수 비즈니스 로직

• HistoryService
• AnalyticsService

핸들러 – UI와 서비스 사이의 다리

• PostHandler
• ConfigHandler

UI – 순수하게 렌더링 전용

• DotShareProvider

결과
모든 일을 한 파일이 아니라, 이제 프로젝트는 각각 하나의 일을 잘 수행하는 9개의 집중된 파일로 구성됩니다.

🛡️ 보안 업그레이드

가장 중요한 부분은 인증 토큰을 안전하게 보호하는 것이었습니다. 이전에는 globalState(평문 JSON) 에 저장했었습니다. 이를 VS Code의 SecretStorage API 로 모두 이전했습니다.

// Old Way (Insecure)
this.context.globalState.update('linkedinToken', token);

// New Way (Enterprise Security)
await this.context.secrets.store('linkedinToken', token);