[React] 리액트 프로젝트 초기 세팅 방법 (feat.타입스크립트)

 

리액트 세팅 with 타입스크립트

React Setting with TypeScript

 

 

리액트 초기 세팅을 쉽게 하는 방법을 알아보자

언어는 타입스크립트 사용

 

리액트 초기 프로젝트 세팅 쉽게 하는 방법

 

 

1-2년전에 리액트 기초 문법 공부 및 아주 간단하고 쉬운 프로젝트를 해보았는데

이번에 회사에서 프론트 웹을 JSP 개발이 아닌 리액트 개발을 진행하게 됐다.

 

그래서 리액트로 공지사항 CRUD (리스트, 상세, 등록, 수정, 삭제)를 연습삼아 만들기로 했다.

아직 자바스크립트 ES6 문법도 어색한데 . .

리액트 + 타입스크립트 조합으로 만들기로 했다 . .

 

아무튼,

리액트 + 타입스크립트 프로젝트 세팅은 생각보다 간단하고 쉽다 !

명령어 몇번만 치면 세팅이 된다.

(후후)

 

 

 

내가 세팅 할 방법은,

CRA(Create-React-App)을 이용해서 리액트 + 타입스크립트를

설정하는 방법으로 세팅을 할 것이다 !

 

 

순서대로 설명 따라오심 됩니다 =3

---

 

 

1. 노드 (Node.js) 다운로드 및 설치

 

우선 리액트 세팅하기전에 노드(Node.js)를 설치해줘야 한다. 

 

아래의 링크로 들어가서,

본인 운영체제에 맞는 최신 버전을 다운로드를 하면 된다.

 

나는 18번전대를 다운 받았다.

 

 

https://nodejs.org/ko/download

다운로드 | Node.js

 

 

다운로드를 받고, 해당 파일을 실행하여 설치를 하면 된다.

 

정상적으로 설치가 완료 되었다면,

 

 

 

2. 원하는 경로에 프로젝트 폴더 생성

 

폴더를 하나 생성을 해서

Shitf + 우클릭을 하면

 

'여기에 PowerShell 창 열기' 가 보이는데,

클릭을 해서 파워셀 터미널 창을 띄우면 된다.

 

 

 

3. PowerShell 창에 명령어 치기

 

---

명령어 : npx create-react-app project --template typescript

---

 

복사하고 붙여 넣을때는 마우스 우클릭 또는 Shift + Insert 를 눌러주면 된다.

 

이 명령어를 통해서

아주 간단하고 쉽게 리액트 + 타입스크립트 프로젝트를 세팅 할 수 있다.

 

 

 

project 부분이

내가 생성한 폴더 안에 'project' 이름으로 리액트가 적용된 폴더가 생성이 된다.

 

'project' 대신 원하는 이름으로 바꿔도 된다 !

 

 

 

나는 'react_study_project' 로 이름을 바꿔주었다.

 

명령어를 치고 엔터를 누르면

아래와 같이 install에 관련된 로그들이 쌓이고

 

Happy hacking!

이라는 문구가 뜨면 정상적으로 리액트가 install이 되었다.

 

 

4. 리액트 + 타입스크립트가 적용된 폴더 생성 확인

 

 

2번에서 내가 만든 폴더를 들어가면

react_study_poject 라는 이름으로 폴더가 생성 되어있다.

 

 

이 폴더가 리액트 + 타입스크립트가 적용된 폴더이다.

 

 

 

5. 편집기로 폴더 열기

 

내가 사용할 편집기(IDE)를 열어서 생성된 폴더를 열면 된다.

 

나는 VSCODE를 사용 했고, Open Folder를 클릭하여 해당 폴더를 선택해서 열었다.

 

 

정상적으로 작업할 폴더가 열렸다면,

위의 사진을 참고하여 VSCODE내 터미널을 켜준다.

 

 

 

6. 터미널을 이용하여 리액트 프로젝트 시작 실행하기

 

 

명령어 : npm start

 

 

VSCODE내 터미널창을 켜서 npm start 를 입력해준다.

 

 

 

정상적으로 리액트가 실행이 되었다면,

위와 같은 로그가 찍힐것 이고 !

 

 

 

이렇게 정상적으로 리액트 기본 웹 페이지가 뜰것이다.

 

 

이렇게 아주 아주 기본적인 프로젝트 세팅은 끝이 났고,

 

 

실제로 작업을 시작하기 전에 필요 없거나 사용하지 않는 파일(소스)를 지우고,

필요한 라이브러리들이 있다면 npm 'xxxx' install 해주면 된다.

 

---

 

 

 

좀 더 자세한 내용을 원하면 아래 사이트 참고 !

 

https://velog.io/@junghyeonsu/React-create-react-app-Typescript-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85-%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC

[React] create-react-app & Typescript 초기 세팅 완벽 정리