ARCHIVE
자료실
개발에 유용한 문서, 도구, 템플릿, 소스코드를 다운로드할 수 있습니다.
56555453525150494847
LINK문서/가이드
MDN Web Docs — 웹 개발 레퍼런스
HTML, CSS, JavaScript의 바이블 같은 문서입니다. W3Schools보다 정확하고 깊이가 있어서, 웹 표준 관련 궁금한 건 MDN부터 찾아봅니다. 브라우저 호환성 표도 잘 정리되어 있어서 실무에서 자주 참고합니다.
LINK개발도구
Storybook — UI 컴포넌트 개발 환경
UI 컴포넌트를 독립적으로 개발하고 문서화할 수 있는 도구입니다. 디자이너와 협업할 때 컴포넌트 카탈로그로 활용하면 커뮤니케이션이 한결 수월해집니다. React, Vue, Angular 등 주요 프레임워크를 모두 지원합니다.
LINK개발도구
Cypress — 프론트엔드 E2E 테스트
실시간으로 테스트 실행 과정을 브라우저에서 볼 수 있는 E2E 테스트 도구입니다. 타임 트래블 디버깅이 강력하고, 스크린샷/영상 자동 저장 기능이 있어 실패 원인 파악이 쉽습니다. 프론트엔드 팀에서 가장 많이 쓰는 테스트 도구 중 하나입니다.
LINK개발도구
Playwright — 크로스 브라우저 E2E 테스트
Microsoft가 만든 E2E 테스트 프레임워크로, Chromium/Firefox/WebKit 세 엔진을 모두 지원합니다. 자동 대기, 트레이싱, 코드 생성기 등이 내장되어 있어 테스트 작성이 편합니다. Cypress보다 빠르고 안정적이라는 평이 많습니다.
LINK개발도구
k6 — 모던 부하 테스트 도구
JavaScript로 테스트 스크립트를 작성하는 현대적인 부하 테스트 도구입니다. JMeter보다 가볍고, CI/CD 파이프라인에 넣기 쉽습니다. Grafana와 연동하면 실시간으로 성능 지표를 시각화할 수 있습니다.
LINK개발도구
JMeter — 성능/부하 테스트 도구
Apache 재단의 오픈소스 부하 테스트 도구로, API 성능 테스트에 오래전부터 써왔습니다. GUI로 테스트 시나리오를 구성하고, CLI로 대규모 부하를 줄 수 있습니다. 보고서 생성 기능도 있어서 성능 리포트 작성에 편리합니다.
LINK개발도구
pnpm — 빠르고 효율적인 패키지 매니저
npm/yarn보다 디스크 공간을 절약하고 설치 속도도 빠른 패키지 매니저입니다. 심볼릭 링크 기반 node_modules 구조로 중복 패키지를 제거하고, 모노레포 workspace 지원도 훌륭합니다. 한번 써보면 npm으로 돌아가기 어렵습니다.
LINK개발도구
Vite — 차세대 프론트엔드 빌드 도구
Webpack 대비 HMR이 체감될 정도로 빠르고, 설정이 간단합니다. React, Vue, Svelte 등 대부분 프레임워크를 지원하고, 플러그인 생태계도 빠르게 성장 중입니다. 새 프로젝트 시작할 때 빌드 도구 고민이면 Vite가 정답입니다.
LINK개발도구
TypeScript — 타입이 있는 JavaScript
큰 프로젝트를 JavaScript로만 하면 리팩토링할 때 고통받습니다. TypeScript는 타입 체크로 버그를 사전에 잡아주고, IDE 자동완성이 강력해져서 생산성이 올라갑니다. 이제 새 프로젝트는 무조건 TS로 시작합니다.
LINK개발도구
PostgreSQL — 오픈소스 관계형 데이터베이스
성능과 기능 면에서 상용 DB에 뒤지지 않는 오픈소스 RDBMS입니다. JSON 타입, 풀텍스트 검색, CTE 등 고급 기능이 내장되어 있습니다. 요즘 Supabase, Vercel Postgres 등 클라우드 서비스도 전부 PostgreSQL 기반입니다.