개발자 도구 및 소스 확장 참조: WASM, TSX, GraphQL 등
현대 개발자의 도구 상자는 전문적인 파일 형식으로 가득 차 있습니다. 컴파일된 WebAssembly 모듈부터 타입 정의 파일, 데이터베이스용 도메인 특정 언어에 이르기까지, 이러한 확장자를 이해하는 것은 현대적인 코드베이스를 파악하는 데 매우 중요합니다.
이 참조 가이드는 일반적인 개발 관련 파일 확장자의 "무엇인지, 역할은 무엇인지"를 설명합니다.
빠른 참조 표: 개발 소스 확장자
| 확장자 | 전체 이름 | 생태계 | 용도 |
|---|---|---|---|
.wasm |
WebAssembly Binary | 웹 / 엣지 컴퓨팅 | 고성능 웹 앱을 위한 컴파일된 코드 |
.wat |
WebAssembly Text | 웹 개발 | WASM의 사람이 읽을 수 있는 버전 |
.map |
Source Map | 웹 개발 | 디버깅을 위해 압축된 코드를 소스로 매핑 |
.d.ts |
Type Definition | TypeScript | JavaScript 라이브러리의 구조 설명 |
.tsx / .jsx |
TypeScript/JS XML | React / Solid | 단일 파일에 로직과 UI 결합 |
.vue / .svelte |
Vue/Svelte Component | Vue / Svelte | 단일 파일 컴포넌트 (SFC) |
.astro |
Astro Component | Astro 프레임워크 | 아일랜드 기반 웹 컴포넌트 |
.mdx |
Markdown with JSX | 문서 | React 컴포넌트를 포함한 대화형 문서 |
.prisma |
Prisma Schema | 데이터베이스 / ORM | 데이터베이스 모델 및 관계 정의 |
.graphql / .gql |
GraphQL Query/Schema | APIs / GraphQL | API 스키마 및 데이터 쿼리 정의 |
1. 고성능 웹 (.wasm, .wat)
**WebAssembly (WASM)**는 C++, Rust 또는 Go와 같은 언어로 작성된 코드를 브라우저에서 네이티브에 가까운 속도로 실행할 수 있게 해줍니다.
- WASM: 브라우저가 실행하는 바이너리 파일입니다. 직접 편집하지 않습니다.
- WAT: WASM의 사람이 읽을 수 있는 텍스트 형식입니다. Lisp과 비슷하게 보이며(괄호가 많음), 수동 검사나 WebAssembly의 작동 방식을 배우는 데 사용됩니다.
2. TypeScript 및 React (.d.ts, .tsx, .jsx)
웹이 "컴포넌트 기반" UI로 이동함에 따라 HTML과 유사한 태그를 JavaScript/TypeScript 로직과 혼합하기 위한 새로운 형식이 필요해졌습니다.
- JSX / TSX: React 및 유사한 프레임워크에서 사용됩니다. 함수 내부에서 직접
<div>태그를 작성할 수 있게 해줍니다. - D.TS: "선언(declaration)" 파일입니다. 실행 코드는 포함되어 있지 않으며, 단지 JavaScript 라이브러리에 어떤 함수와 변수가 있는지 TypeScript 컴파일러에 알려주어 더 나은 자동 완성(IntelliSense)을 제공합니다.
3. 현대적 프레임워크 컴포넌트 (.vue, .svelte, .astro)
많은 현대적 프레임워크는 특정 UI 요소의 HTML, CSS 및 로직이 하나의 파일에 함께 있는 **단일 파일 컴포넌트 (SFC)**를 사용합니다.
- Vue & Svelte: 컴포넌트 로직을 위해 특정 확장자를 사용합니다.
- Astro: 새로운 프레임워크(이 사이트의 기반이기도 합니다!)로, 다른 프레임워크(React, Vue, Svelte)의 컴포넌트를 함께 사용할 수 있게 해줍니다.
4. 데이터베이스 및 API 스키마 (.prisma, .graphql)
앱이 복잡해짐에 따라 데이터 구조와 쿼리 방식을 정의하기 위한 전용 언어가 필요합니다.
- Prisma: 현대적인 데이터베이스 도구 키트입니다.
.prisma파일에서 테이블과 관계를 정의하면 데이터베이스를 자동으로 생성해 줍니다. - GraphQL: REST API의 대안입니다.
.graphql파일은 "스키마"(사용 가능한 데이터)와 "쿼리"(가져오려는 정확한 데이터)를 정의합니다.
5. 디버깅 및 문서화 (.map, .mdx)
- Source Maps (.map): 코드를 배포할 때 공간을 절약하기 위해 읽을 수 없는 한 줄로 "압축(minify)"하는 경우가 많습니다.
.map파일은 브라우저의 디버거에게 압축된 줄이 원본 소스 코드의 어느 줄에 해당하는지 알려주어 프로덕션 환경에서 앱을 디버깅할 수 있게 해줍니다. - MDX: 두 가지 장점을 결합한 것으로, 표준 Markdown을 작성하면서 문서 내에서 React 컴포넌트를 가져와 사용할 수 있습니다. 대화형 기술 문서에 적합합니다.
자주 묻는 질문 (FAQ)
Q: .wasm 파일을 직접 실행할 수 없는 이유는 무엇인가요?
A: WASM은 가상 머신(보통 웹 브라우저 내부 또는 Wasmtime과 같은 런타임)에 의해 실행되도록 설계된 로우 레벨 형식입니다. 메모리와 입출력을 관리하기 위한 "호스트" 환경이 필요합니다.
Q: .map 파일을 Git 저장소에 커밋해야 하나요?
A: 일반적으로는 아닙니다. 소스 맵은 빌드 프로세스 중에 생성됩니다. 하지만 에러가 발생했을 때 읽을 수 있는 스택 트레이스를 볼 수 있도록 Sentry와 같은 에러 추적 서비스에 업로드해야 합니다.
Q: .gql과 .graphql의 차이점은 무엇인가요?
A: 기술적인 차이는 없습니다. 둘 다 GraphQL 스키마와 쿼리에 사용됩니다. 대부분의 IDE 플러그인은 두 가지를 모두 동일하게 인식합니다.