개발 치트시트 — HTTP·MIME·키코드·정규식

개발 치트시트 — HTTP·MIME·키코드·정규식란?

개발 치트시트는 네 개의 개발자 참조 표를 검색 가능한 하나의 위젯으로 묶은 무료 브라우저 내 빠른 참조 도구입니다. 프런트엔드·백엔드 개발자, QA 엔지니어, 학생이 422가 무슨 뜻인지, .webp 이미지의 MIME 유형, 방향키가 발생시키는 key 값, 이메일 검증용 정규식 등을 떠올리고 싶을 때 사용합니다. HTTP 탭은 자주 쓰는 2xx·3xx·4xx·5xx 상태 코드를 공식 이유 구절과 함께 나열하고, MIME 탭은 파일 확장자를 Content-Type 값에 대응시키며, 키코드 탭은 Enter·Escape·ArrowUp 같은 JavaScript KeyboardEvent.key 문자열을 보여 주고, 정규식 탭은 바로 붙여 쓸 수 있는 패턴을 짧은 설명과 함께 모았습니다. 검색창은 활성 탭을 즉시 필터하고, 결과 개수로 몇 개가 일치하는지 알려 주며, 각 행에는 복사 버튼이 있습니다. 출력 상자는 필터된 행을 텍스트로 직렬화해 다른 도구로 넘길 수 있게 합니다. 이 위젯은 JavaScript로만 렌더링되기 때문에, 이 텍스트가 검색엔진에 색인되는 설명입니다. HTTP 상태 코드 참조, MIME 유형 표, JavaScript 키코드 목록, 정규식 치트시트를 모두 클라이언트 측에서 제공합니다.

개발 치트시트 — HTTP·MIME·키코드·정규식 사용법

1. 탭을 고르세요: HTTP 상태, MIME 유형, 키코드, 정규식.
2. 검색창에 입력해 활성 탭을 코드·이름·패턴으로 필터하세요.
3. 행을 훑어보고 결과 개수로 몇 개가 일치하는지 확인하세요.
4. 어떤 행이든 Copy를 눌러 그 값(이름·MIME 유형·키·패턴)을 복사하세요.
5. 출력 상자의 Copy 버튼으로 필터된 모든 항목을 한 번에 가져오세요.

예시

검색: 429

429  Too Many Requests

검색: webp

.webp  image/webp

탭: 정규식, 검색: email

^[^\s@]+@[^\s@]+\.[^\s@]+$

자주 묻는 질문

어떤 HTTP 상태 코드가 포함되나요?

모든 부류에서 가장 흔한 것들입니다: 2xx 성공(200, 201, 204), 3xx 리다이렉트(301, 302, 304, 307, 308), 4xx 클라이언트 오류(400, 401, 403, 404, 405, 409, 410, 418, 422, 429), 5xx 서버 오류(500, 501, 502, 503, 504)이며 각각 표준 이유 구절과 함께 표시됩니다.

key 값과 키코드는 무엇이 다른가요?

이 도구가 나열하는 것은 현대의 KeyboardEvent.key 문자열로, 키의 사람이 이해할 수 있는 값입니다. 예를 들어 Enter, Escape, ArrowUp 등입니다. 스페이스 키는 단일 공백 문자를 보고하며 여기서는 ␣ 기호로 표시합니다. key 문자열은 event.key === 'Enter'처럼 이벤트 핸들러에서 비교하는 값입니다.

이 정규식 패턴을 바로 쓸 수 있나요?

네. 각 패턴은 표준 JavaScript 정규식 문법으로 작성되어 new RegExp('...') 안이나 슬래시 사이에 바로 붙여 쓸 수 있습니다. 간단한 이메일이나 URL 확인처럼 실용적인 출발점이지 완전한 검증기는 아니므로, 정확한 요구사항에 맞게 검토하세요.

검색은 어떻게 동작하나요?

검색은 활성 탭만 필터하며 행의 어디든 일치시킵니다: 코드, 이름, MIME 유형, 키, 정규식 제목, 패턴 자체. 대소문자를 구분하지 않으므로 'JSON', 'not found', '404'를 입력하면 즉시 목록이 좁혀지고 결과 개수도 실시간으로 갱신됩니다.

서버로 전송되는 게 있나요?

아니요. 모든 표는 도구에 구워 넣은 정적 목록이며, 필터와 복사는 전부 브라우저 안에서 이뤄집니다. 검색한 내용이 업로드, 기록, 전송되는 일은 전혀 없으므로 한 번 로드한 뒤에는 오프라인에서도 사용할 수 있습니다.