React+typescript 컴포넌트 라이브러리 생성하기 ②typescript 설치

리액트 프로젝트를 만들고 환경 설정을 하는 방법에 대해 알아보자.

오늘은 타입스크립트를 설치하며 tsconfig에 대해 알아보려고 한다.

 

먼저 아래명령어를 통해 프로젝트를 생성한다.

npm init

 

아래와 같은 질문이 나오며 초기설정을 할 수 있게 되어있는데, 해당 과정을 넘기려면 npm init -y 명령어를 사용하면 된다.

 

괄호는 기본값으로, 값을 입력하지 않을 시 괄호 안의 내용으로 설정된다.

 

package name	프로젝트명
version	버전
description	프로젝트 (패키지) 설명
entry point	프로젝트 (패키지) 실행 파일
test command	프로젝트 생성 후 테스트로 입력할 메세지
git repository	프로젝트 git
keywords	프로젝트 키워드
author	프로젝트 작성자
license	저작권 관련 정보

 

 

package.json

---

이렇게 해서 프로젝트를 생성하면 폴더 내부에 아래와 같은 package.json 파일이 생성된다.

package.json 파일은 프로젝트의 설명이나 의존성 패키지 리스트, 버전 등이 기재되어 있는, 프로젝트 관리에 필요한 파일이다.

 

그러면 타입스크립트 환경에서 프로젝트를 실행하기 위해 타입스크립트를 설치하고, tsconfig 파일을 생성해 보자.

npm i --save-dev typescript
npx tsc --init

 

--save-dev?

package.json에는 세 가지 의존성 목록이 있다. 바로 dependencies와 devDependencies, peerDependencies인데, 세 의존성 중 devDependencies에 모듈을 설치하고자 할 때 --save-dev 라는 명령어를 사용한다.

dependencies: 프로젝트 실행 시 필요한 패키지들이 포함된다.
devDependencies: 개발할 때 필요한 의존성 목록이기 때문에, 여기에 설치된 패키지는 배포에 포함되지 않는다. 포멧팅이나 번들러, 테스터, 바벨, typescript, css 관련 라이브러리 등
peerDependencies: 프로젝트를 패키지로 배포 시 특정 하위 패키지에 대한 의존성이 높은 경우 해당 패키지의 정확한 버전명을 작성한다. 단축키는 없고 복붙해서 써야한다.  

 

 

tsconfig.json

---

위 명령어를 실행하면 폴더에 tsconfig.json 파일이 생성된 것을 볼 수 있다. 

 

이 파일은 타입스크립트 설정 파일로, 여기에서 컴파일러 옵션, 포함/제외 파일 설정, 작업 구성 및 확장을 위한 설정을 할 수 있다. 

워낙 항목이 많기 때문에 하나하나 설명할 수는 없지만, 공식 문서에 자세히 나와 있으니 작성 시 해당 링크를 참조하여 필요한 기능을 넣으면 된다. 큰 항목들의 용도는 아래와 같다.

 

 

files

  "files": [
    "core.ts",
    "sys.ts",
  ]

 

프로젝트에서 컴파일할 파일들을 작성해놓는 항목이다. 아래에 나올 include와 exclude보다 우선 순위가 높으며, files를 작성하지 않을 경우 include, exclude를 통해 컴파일할 파일을 결정한다. 경로를 정확히 지정해주어야 하며, 파일이 없을 경우 오류가 난다.

 

 

extends

configs/base.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

 

tsconfig.json

{
  "extends": "./configs/base",
  "files": ["main.ts", "supplemental.ts"]
}

 

다른 tsconfig 파일의 설정을 상속받을 수 있는 옵션이다.

 

 

include

  "include": ["src/**/*", "tests/**/*"]

 

files와 마찬가지로 컴파일할 파일을 지정하는 옵션이며, 와일드카드 패턴을 사용하거나 폴더 전체를 지정하는 것도 가능하다.

 

 

exclude

"exclude": ["node_modules"]

 

include와는 반대로 컴파일하지 않을 파일/폴더를 지정하는 옵션이며, include보다 우선 순위가 높아 include에 포함된 파일도 exclude에 들어가 있다면 컴파일되지 않는다. files보다는 우선 순위가 낮으므로 주의할 것.

 

 

compilerOptions

"compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
	//...
}

 

컴파일할 파일들을 어떻게 변환할 것인지 설정할 수 있는 옵션으로, npm init으로 프로젝트를 생성했을 경우 기본적으로 작성이 되어있는 것을 볼 수 있다. 각 항목에 대한 자세한 설명은 여기를 참고.

 

주로 사용되는 옵션은 아래와 같다.

 

언어 및 환경 설정

target

 

ECMAScript 언어 버전이다. 설정 가능한 버전은 아래와 같다.

es3(기본값), es5, es6/es2015, es2016, es2017, es2018, es2019, es2020, es2021, es2022, or esnext

 

init 후 기본 설정은 es2016으로 되어 있으며, 미설정시 기본값은 es3이다. 최신 버전을 사용하려면 esnext를 사용하면 된다.

 

jsx

 

jsx가 자바스크립트에서 내보내지는 방식을 제어하는 옵션이다. (tsx파일로 생성된 파일에만 적용된다.) 옵션은 아래와 같다.

react: 동급의 React.createElement 호출로 변경된 jsx로 .js파일을 내보낸다.
react-jsx: 컴파일 시 React.createElement가 아닌 _jsx()를 호출한다. (React v17 이상에서 사용 가능) 
react-jsxdev: 컴파일 시 React.createElement가 아닌 _jsxDev()를 호출한다. (React v17 이상에서 사용 가능)
preserve: jsx파일을 변경하지 않고 .jsx파일을 내보낸다.
react-native: jsx파일을 변경하지 않고 .js파일을 내보낸다. 

 

react-jsx?

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

 

위 코드를 리액트로 변환 시 아래와 같이 변환되지만,

import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

 

react-jsx로 변환 시 아래와 같이 변환되어 쓸 데 없는 React의 호출을 막을 수 있다.

import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

 

관련 내용

lib

 

컴파일 시 포함할 라이브러리 목록을 지정하는 옵션이다. cra나 Vite로 프로젝트 생성 후 코딩을 하다보면 "dom", "dom.iterable", "esnext"가  추가되어 있는 것을 볼 수 있는데, es6의 기본 설정이며 esnext의 경우 최신 ECMAScript의 타입 정의, dom의 경우 DOM API의 타입 정의가 포함된 라이브러리이다.

 

 

모듈

module

 

자바스크립트 파일 import 시의 문법을 지정하는 옵션이다.

none, commonjs, amd, umd, system, es6/es2015, es2020, es2022, esnext, node16, nodenext, preserve

 

target이 es3 혹은 es5로 되어있을 경우 (require문으로 import할 경우) commonjs, 그 외(import 문 사용 시)의 경우 es6, es2015, esnext 등을 선택하면 된다. 

 

moduleResolution

 

컴파일 시 각 import가 어떤 모듈을 가리키는지 해석하는 과정을 의미한다. 

classic, node10/node, node16, nodenext, or bundler

 

cra로 프로젝트 생성 시 node, vite로 생성 시 bundler로 되어 있는데, node의 경우 ECMAScript에서 모듈을 찾는 방식이고 bundler는 다른 번들러를 사용할 예정이니 대충 확인해~ 라는 의미이다.

공식 문서를 확인해보니 최신 버전의 Node.js를 사용할 경우 node16이나 nodenext를 사용하는 게 좋다고 한다. 엥? 

 

resolveJsonModule

 

true로 설정 시 json파일을 모듈로 불러올수 있다. 기본값은 false이며, cra나 vite로 프로젝트 생성 시 true로 설정되어 있다.

 

 

isolatedModules

 

각 파일을 별도의 모듈로 지정할 지 설정할 수 있다.  기본값은 false이며, cra나 vite로 프로젝트 생성 시 true로 설정되어 있다.

 

 

자바스크립트

allowJs

 

타입스크립트 프로젝트에서 자바스크립트 코드도 병행해서 사용할 수 있도록 하는 옵션이다. 기본값은 false로 되어있다.

 

 

내보내기

declaration

 

컴파일 시 타입 정의를 위한 .d.ts 파일을 생성한다.

 

sourceMap

 

컴파일된 파일 디렉터리에 .js.map 파일을 생성한다. 

개발자도구의 sources 탭에서 ts 파일을 확인할 수 있게 된다.

 

outDir

 

내보낸 파일들의 저장 경로를 설정한다. 보통 dist라는 폴더 안에 많이 넣는다.

 

baseUrl/paths

 

import시 사용할 절대경로를 재설정할 수 있다. baseUrl에 기본 경로를 설정 후, paths로 추가적인 경로를 설정하면 된다.

 

noEmit

 

true로 설정 시 컴파일해도 .js 파일이 생성되지 않는다. babel이나 swc등의 별도 변환 도구를 사용하거나, 타입 체크만 하고싶을 때 사용한다.

기본값은 false이며, cra나 vite로 프로젝트 생성 시 true로 설정되어 있다.

 

 

경로 관련

allowSyntheticDefaultImports

 

true로 설정 시 import * as React from "react" 를 import React from "react" 로 줄여 쓸 수 있게 해주는 옵션이다.

기본값은 true이다.

 

forceConsistentCasingInFileNames

 

파일명의 대소문자를 구분해주는 옵션이다. true로 설정 시 component.tsx와 Component.tsx는 다른 파일로 취급된다.기본값은 true이다.

 

 

타입 체크

strict

 

타입 체크 동작을 활성화한다.cra나 vite로 프로젝트 생성 시 true로 설정되어 있으나, 기본 값은 false이므로 꼭 true로 설정해주자.아래 옵션들은 strict 항목이 true일 시 따로 꺼주지 않는 한 자동으로 true 처리된다.

- alwaysStrict 
- strictNullChecks 
- strictBindCallApply 
- strictFunctionTypes 
- strictPropertyInitialization 
- noImplicitAny 
- noImplicitThis

 

skipLibCheck 

 

모든 선언 파일 (.d.ts)의 타입 체크를 스킵하는 옵션이다. 사용 시 컴파일 시간을 줄일 수 있다.

 

 

-

 

이상, typescript 설치와 tsconfig에 대해 간략하게 알아보았다.

프로젝트를 진행하다보면 tsconfig의 설정을 바꿀 일이 많이 생기는데, 참고하여 필요한 옵션을 설정해놓고 프로젝트를 시작하도록 하자.

 

다음 편에서는 rollup에 대해 알아보려고 한다. 아마도..