React 프로젝트 세팅02 - 타입스크립트 구성 설정(tsconfig.app.json)

1. tsconfig.app.json 파일

타입스크립트를 Vite로 프로젝트 생성 후

확인해야 하는 파일은 tsconfig.app.json 파일이다.

 

이 파일은 React 애플리케이션(src 폴더)의 TypeScript 설정 파일이다.

여기서 중요한 것은 이 두 가지를 이해하는 것이다.

compilerOptions
include

 

 

2.  compilerOptions 

compilerOptions는

TypeScript가 코드를 어떻게 검사하고 변환할지 설정하는 옵션이다.

 

예를 들어

• 어떤 JavaScript 버전으로 변환할지
• 타입 검사 규칙
• 모듈 방식

같은 것들을 설정하는 역할을 한다.

 

 

왜냐??

타입스크립트는 컴파일러(변환기) 이다.

 

브라우저는 TypeScript를 바로 실행할 수 없기 때문에

TypeScript 코드를 JavaScript로 변환하는 과정이 필요하다.

 

 

프로젝트를 생성하면 package.json 파일의 devDependencies에

typescript 가 설치되어 있는데 이 말은 TypeScript 컴파일러를 사용한다는 의미이다.

 

3.  include 

include는 TypeScript가 검사할 파일 범위를 지정하는 옵션이다.

"include": ["src"]

 

 >> src 폴더 안에 있는 파일만 TypeScript가 검사한다는 의미이다.

 >> src안에 있는것들만 compilerOptions 을 설정 진행해줘~!

 

 

4. compilerOptions 설정

 

[정리]

• tsconfig.app.json :  React 애플리케이션(src 폴더)의 TypeScript 설정 파일
• compilerOptions : TypeScript가 코드를 어떻게 검사하고 변환할지 설정하는 옵션
• include : TypeScript가 검사할 파일 범위를 지정하는 옵션
• lib : TypeScript가 검사할 파일 범위를 지정하는 옵션
• noEmit : TypeScript가 JS 파일을 생성하지 않도록 하는 설정 (타입 검사만 수행)
• jsx : TSX 파일의 JSX 코드를 React용 JavaScript로 변환하는 방식 설정
   

[tip]

javaScript 표준은 매년 6월에 추가된다.

 

 

React 프로젝트 세팅 02
vite기반 기본설정 파일을 수정한다.

---

2026.03.06 - 수업내용