개발자가 Web Crypto API와 순수 JavaScript MD5 구현을 결합해 서버 의존성 없이 브라우저에서 5가지 해시 알고리즘 지원

Context

해시 기능이 필요한 개발자는 일반적으로 CLI 도구(shasum, md5sum) 또는 npm 패키지에 의존했다. 브라우저 환경에서 독립적으로 파일 무결성 검증, 캐시 키 생성, API 페이로드 검증을 수행할 수 있는 솔루션이 부족했다.

Technical Solution

• Web Crypto API의 crypto.subtle.digest()를 활용해 SHA-1, SHA-256, SHA-384, SHA-512를 비동기로 처리: 네이티브 하드웨어 가속으로 10MB 파일의 SHA-256 해싱을 밀리초 단위로 완료
• MD5는 Web Crypto 스펙에서 의도적으로 제외되었으므로 약 50줄의 순수 JavaScript 구현으로 자체 제공: 패딩(64바이트 블록 단위), 4개 보조 함수(F, G, H, I)를 통한 64라운드 처리, 리틀엔디안 64비트 길이 인코딩
• 텍스트 입력은 TextEncoder로 UTF-8 바이트 배열로 변환, 파일 입력은 File.arrayBuffer()로 원본 바이너리 데이터를 직접 Uint8Array로 변환
• 16진수 변환 시 padStart(2, "0")를 모든 바이트에 적용해 32~128자 범위의 일관된 길이 출력 보장
• Next.js SSR 환경에서 crypto.subtle이 서버에 존재하지 않으므로 dynamic import에 ssr: false 옵션을 설정해 브라우저 환경에서만 컴포넌트 렌더링

Impact

번들 크기 3~5KB 절감(외부 MD5 라이브러리 제거), 의존성 제거로 유지보수 포인트 감소

Key Takeaway

보안 관련 용도에서는 SHA-256 이상을 사용하고, 캐시 버스팅이나 체크섬 같은 비보안 목적으로는 MD5나 SHA-1을 사용할 수 있다. 변경되지 않는 결정론적 알고리즘은 외부 라이브러리에 의존하지 않고 인라인 구현으로 번들 크기와 의존성을 최소화할 수 있다.