타입스크립트 기반 리액트 시작하기

 

---

Create React App

 

앱을 만들기 위해서는 다음과 같은 명령어를 사용합니다.

npx create-react-app {앱 이름}

 

 

실행 결과에도 나와있듯, 아래 명령어를 이용하면 최초 리액트 앱을 실행할 수 있습니다.

cd {앱 이름}
npm start

 

 

실행하면 다음과 같은 페이지가 등장합니다.

 

 

Create a New React App – React

 

 

 

---

Package Settings

 

리액트 라이브러리는 여타 노드 프로젝트와 마찬가지로 package.json에 있습니다.

설치법은 아래 명령어를 이용하면 됩니다.

npm install {...dependencies}

 

예를 들어 타입스크립트(typescript)를 설치하고자 할 때

npm install typescript

 

를 실행하면 package.json에는 다음 항목이 추가됩니다.

{
  ...
  "dependencies": {
    ...
    "typescript": "^5.3.3",
    ...
  },
  ...
}

 

 

 

시작하면서 추천할만한 라이브러리는 다음과 같습니다.

 

1. Typescript

 

Documentation - TypeScript for the New Programmer

 

타입스크립트는 자바스크립트에 정적 타입 검사(static type check)가 추가된 언어입니다.

자바스크립트 언어와 동형이고, 심지어 컴파일 시 결과는 어차피 자바스크립트 코드와 별반 다르지 않으므로

생소하게 느낄 필요는 없는데,

다만 타입스크립트를 선택하는 가장 큰 장점은 컴파일 이전에 타입 오류를 지적해준다는 것입니다.

 

 설치법은 다음과 같습니다.

npm install typescript@4.9.5 @types/node @types/react @types/react-dom

 

여담으로 기본 리액트 프로젝트에 jest 라는 테스팅 라이브러리가 있을 텐데, 이때 아래 명령어를 추가로 실행시켜두면 좋습니다.

npm install @types/jest

 

설치가 끝났다면 루트 디렉터리에 tsconfig.json 파일을 추가해줍니다.

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

 

 

 

 

왜 타입스크립트는 4.9.5 버전을 사용하나요?

2023-12-27 기준으로 타입스크립트 최신 릴리즈 버전은 5.3.3이긴 한데, 4.9.5 버전을 사용하는 이유는 react-script 간 호환성 때문입니다.

만일 그냥 typescript를 설치했다면 npm i 실행 시 아래와 같은 출력을 볼 수 있습니다.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-scripts@5.0.1
npm ERR! Found: typescript@5.3.3
...

릴리즈 노트에 따르면 typescript 4.x 버전 릴리즈 중에 가장 최신은 4.9.5 임을 확인할 수 있습니다.

 

 

 

 

 

2. Axios

 

시작하기 | Axios Docs

 

백엔드 서버와 API 통신을 위해 사용합니다.

사실 node-fetch를 써도 상관없다만, 다음 특징 중에 맘에 드는 부분은

• Promise API를 지원
• 요청 및 응답 데이터 변환
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원

입니다. 

가장 주요한 부분은 응답 데이터의 자료형을 본인이 만든 인터페이스에 맞추기에 굉장히 편리하다는 점입니다.

예를 들어

interface Account {
	serialNumber: number,
	name: string
}

const accountPromise = axios.get<Account | null>('/accounts');
// accountPromise의 자료형은 Promise<AxiosResponse<Account | null, any>> 이 됩니다.

 

처럼입니다.

 

설치법은 다음과 같습니다.

npm install axios

 

 

 

 

3. Bulma

 

Bulma: Free, open source, and modern CSS framework based on Flexbox

 

Bulma는 정말 편리하게 css를 할 수 있게 도와주는 프레임워크입니다.

레이아웃을 만들거나 글씨 색깔을 만들거나... 등등에 더 이상 시간을 크게 소비할 필요 없이 사전 정의된 CSS를 이용하면 됩니다.

가장 중요한 점은, 나름 이쁩니다.

 

설치법은 다음과 같습니다.

npm install bulma

 

 

 

 

 

 

4. Font Awesome

 

Font Awesome

 

무료 아이콘을 사용할 수 있습니다.

자원이 풍부하고 정말 이쁩니다.

한 가지 주의할 점은, 본인이 설치한 버전에 맞는 것으로 검색해야 된다는 것입니다.

 

설치법은 다음과 같습니다.

npm install @fortawesome/free-brands-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/free-solid-svg-icons

 

본인이 원하는 패키지를 골라서 설치하면 됩니다. (참고 : https://fontawesome.com/docs/web/setup/packages)

 

 

 

설치를 모두 마쳤으면 리액트 앱을 다시 실행해서 문제 없는 지 확인해봅니다.

npm start

 

 

 

 

 

---

Visual Studio Extension

 

개발 도구는 사실 본인 입맛에 따라 하면 됩니다.

본인은 vscode를 사용하는데, 사용하는 extension 들을 소개하겠습니다.

 

Extension	설명
Auto Close Tag	태그를 자동으로 닫아줌 (중복에서 닫는 문제가 있는 데 이때는 뒤로 가기 버튼 한 번 눌러주면 됨) (ts 파일에서 제네릭 타입을 썼을 때도 생성해주는 데, 매번 지우기 귀찮으면 auto-close-tag.activationOnLanguage에서 typescript를 주석 처리)
Auto Rename Tag	태그명을 변경했을 때 뒤에도 자동으로 변경해줌
Code Spell Checker	코드 스펠링 체크해줌
ESLint	린팅 도구, 너무나 중요함
ES7+ React/Redux/React-Native snippets	몇 가지 키워드들에 대해 앞 글자만 써도 자동 완성해줌
JavaScript (ES6) code snippets	몇 가지 키워드들에 대해 앞 글자만 써도 자동 완성해줌 2
Jest	편리한 테스트 도구 (저장할 때마다 테스트가 실행되는 문제가 있는 데 jest.autoRun 옵션을 바꿔주면 됨)
Material Theme 시리즈	코딩 라이프 향상에 기여
npm Intellisense	Import 문에 들어갈 모듈명을 알아서 찾아줌
Prettier - Code formatter	코드 포맷터, 너무나 중요함
React Native Tools	디버깅 툴인데 아직 제대로 써본 적은 없음

 

 

 

 

 

 

---

Project Structure

 

사실 프로젝트 구조는 목적에 따라 다르기도 하고, 시간이 지남에 따라서 바뀌기 때문에 정답은 없습니다.

다만 기본적으로 본인은 다음과 같은 구조로 만듭니다.

 

.private				로컬에서 사용할 인증서나 키들을 보관합니다.
public				logo.svg나 robot.txt 와 같이 공유 자원을 보관합니다.
src				소스 코드가 있는 장소입니다.
ㄴ	main			main 코드가 있는 장소입니다.
	ㄴ	hooks		custom hook 코드가 있는 장소입니다. (참고 사이트)
		pages		각 page로 구분해서 코드를 분리해놓습니다. 어떤 페이지가 다른 페이지에 영향을 주지 않는 원칙을 세우면, 유지보수하기 용이합니다.
		App.ts ...		App.ts, Index.ts 와 같이 최상위 로직에 대해 정의합니다.
ㄴ	test			test 코드가 있는 장소입니다. 일반적으로 테스트 파일의 경로는 main 파일 경로와 동일하게 만들면 좋습니다.
.env				환경 변수 파일입니다. 이는 추후에 다룰 예정입니다.
*.md				문서 파일입니다.
*.json				설정 파일입니다.

 

 

 

 

 

 

 

 

---

Reference

 

Create a New React App – React