React 프로젝트 생성 feat. Typescript

처음 리액트 프로젝트 생성했을땐 그냥 npx create-app my-app 으로 진행해서 타입스크립트가 적용이 안된채로 타입스크립트 환경설정을 해주었다. 하지만 지금 새로운 프로젝트를 생성할 필요가 느껴져서 다시 찾아보려 하니 익숙했던 부분이 익숙치가 않아져서 불편했다. 

 

그래서 우선 React 프로젝트 생성 feat. Typescript  을 하는 순서도를 적을 생각이다.

 

1. Node.js와 npm 설치

우선 위의 Node.js / npm 을 모두 설치해야한다.

2. Create React App 사용하기

Create React App은 리액트 프로젝트를 쉽게 생성할 수 있는 CLI 도구야. TypeScript 템플릿을 사용하여 프로젝트를 생성하려면 다음 명령어를 사용해.

터미널을 열고 아래 명령어를 입력해.

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

• my-app: 생성할 프로젝트의 이름이야. 원하는 이름으로 변경해.
• --template typescript: TypeScript 템플릿을 사용하여 프로젝트를 생성하겠다는 의미야.

3. 프로젝트 디렉토리로 이동

프로젝트가 생성되면 해당 디렉토리로 이동해.

cd my-app

4. 프로젝트 실행

프로젝트 디렉토리에서 아래 명령어를 입력하여 개발 서버를 시작해.

npm start

 

브라우저가 자동으로 열리면서 기본 리액트 앱이 실행될 거야. 일반적으로 http://localhost:3000에서 확인할 수 있어.

5. 기본 파일 구조

생성된 프로젝트의 기본 파일 구조는 다음과 같아.

 

my-app
├── node_modules
├── public
│   ├── index.html
│   └── ...
├── src
│   ├── App.tsx
│   ├── index.tsx
│   ├── react-app-env.d.ts
│   ├── ...
├── package.json
└── tsconfig.json

 

 

• src: 애플리케이션 소스 코드가 위치하는 폴더야.
• App.tsx: 메인 컴포넌트 파일이야. 여기에서 애플리케이션의 UI를 구성해.
• tsconfig.json: TypeScript 설정 파일이야.

 

6. TypeScript 기본 설정

TypeScript를 사용할 때 몇 가지 설정을 추가로 해줄 수 있어. 예를 들어, tsconfig.json 파일에서 컴파일러 옵션을 설정할 수 있어.

• strict: 타입 검사를 강화하는 옵션. true로 설정하면 모든 타입 체크를 엄격하게 해.
• jsx: JSX 코드의 처리 방식을 설정. 보통 react-jsx로 설정해.

7. 추가 패키지 설치 (선택사항)

필요에 따라 추가적인 패키지를 설치할 수 있어. 예를 들어, 라우팅을 위해 react-router-dom을 설치할 수 있어.

npm install react-router-dom @types/react-router-dom

8. 기본 코드 작성

src/App.tsx 파일을 열고 기본적인 리액트 컴포넌트를 작성해볼 수 있어.

import React from 'react';

const App: React.FC = () => {
    return (
        <div>
            <h1>Hello, TypeScript with React!</h1>
        </div>
    );
};

export default App;

 

9. ESLint 및 Prettier 설정 (선택사항)

코드 품질을 유지하기 위해 ESLint와 Prettier를 추가로 설정할 수 있어. 아래 명령어로 패키지를 설치해.

npm install eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier --save-dev

10. 프로젝트 배포

개발이 끝나면 npm run build 명령어로 프로덕션 빌드를 생성해.

npm run build

 

 

이 명령어는 최적화된 정적 파일을 build 폴더에 생성해.

이렇게 리액트와 타입스크립트를 사용하여 프로젝트를 생성하는 기본적인 방법을 설명했어. 더 궁금한 점이나 특정 주제에 대해 더 알고 싶으면 언제든지 물어봐!

 

 

 

그리고 기존에 설정했던 타입스크립트 부분을 적용을 같이 시켜주었다.

 

다시한번 새롭게 설정하려 하니 새록새록 기억이 났다.

 

.scss 파일설정 , .env , axios , redux 등등.

 

 

 

원래 초기에는 그냥 타입스크립트 적용 없는 디폴트 자바스크립트를 사용했는데 자바나 스위프트를 경험한 나에게는 너무 불푠했다.

 

자동완성이 되질 않고 디버깅하는게 일반적으로 시간이 오래걸렸다.. 왜냐!!! 자동완성이나 틀린곳을 알려주는 부분이 없기 때문이다.

 

그래서 되짚어보는 시간이 많아서 타입스크립트를 적용하여 쉽게 알 수 있도록 한것이다..

 

짜잔 그럼 위와 같이 생성되어 질것이다.

 

 

그렇다면 리액트 타입스크립트에서는 어떤 구조가 있을까??

 

타입스크립트 환경에서는 우리가 작성한 코드들의 표현을 함수형 컴포넌트를 베이스로 하고, 함수형 컴포넌트로 인지되지 않거나 확인되지 않을 경우, 클래스 컴포넌트로 해석한다고 볼 수 있습니다. 기본적으로 우리가 반환값, 즉 return하는 JSX의 결과 타입은 any이지만, JSX.Element 인터페이스를 통해서 원하는 타입으로 변경가능합니다.

 

클래스형 컴포넌트의 경우 render() 메서드를 통해서 ReactNode를 반환하는 반면에, 함수형 컴포넌트는 ReactElement 를 반환합니다.

ReactElement는 React.createElement 로 컴파일되고, JSX.element는 any타입의 props와 type을 가진 React.createElement입니다.

ReactNode > React.Element Generic > JSX.Element 의 범위로 연관관계를 갖는 다고 생각하시면 쉽게 이해하실 수 있습니다.

 

 

나머지 UseReducer , usestate 등 기본 문법들은 이후에 따로 알아보도록 해보자 !!!