IT/React

Create React App을 사용하여 Typescript 프로젝트를 생성하는 방법

1. Create React App 설치

Create React App은 Node.js와 npm이 설치되어 있어야 합니다. 아래 명령어로 Create React App을 전역으로 설치합니다.

npm install -g create-react-app

2. Typescript 템플릿 생성

아래 명령어로 Typescript 템플릿을 사용하여 Create React App 프로젝트를 생성합니다.

npx create-react-app my-app --template typescript

위 명령어에서 my-app은 생성할 프로젝트의 이름입니다.

3. 프로젝트 실행

프로젝트 디렉토리로 이동한 후, 아래 명령어를 입력하여 프로젝트를 실행합니다.

cd my-app
npm start

4. 추가적인 작업

이제 Typescript 템플릿으로 Create React App 프로젝트가 생성되었습니다. 추가적인 작업을 하기 위해서는 src 디렉토리 내부의 파일들을 수정하면 됩니다.

예를 들어, App.tsx 파일을 열어서 컴포넌트 코드를 작성할 수 있습니다.

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, Typescript!</h1>
    </div>
  );
}

export default App;

이제 브라우저에서 http://localhost:3000/을 열어서 결과물을 확인할 수 있습니다.

이상으로 Create React App과 Typescript를 사용하여 React 프로젝트를 시작하는 방법을 알아보았습니다.