I T H

[MySchedule project] 1. frontend - 타입스크립트 초기 환경설정 본문

React + Node.js

[MySchedule project] 1. frontend - 타입스크립트 초기 환경설정

thdev 2024. 1. 25. 10:52
- myschedule project는 나의 스케줄에 관련된 모든 데이터를 관리하는 프로젝트임
- frontend 환경은 react with typeScript, backend 환경은 node.js, db는 mongoDB를 사용할 예정이다.

 

1. 먼저 프로젝트 이름을 정하고, 폴더이름을 만든다.

- my-schedule 폴더 아래 front-react폴더와 back-node-mongodb 폴더를 만들었음.

 

 

2. 타입스크립트가 적용된 탬플릿이 포함된 리액트를 install 해보자!

 - front-react폴더로 이동후 Terminal - newTerminal 클릭 후 아래와 같이 설치한다.

-  typeScript 탬플릿과 함께 리액트를 현재경로( " ./  ")에 설치한다는 뜻임.

 

 

- 설치가 정상 완료됬을때 기본 화면은 다음과 같음.

 

 

4. 라이브러리 설치

- 이전에 연습한 프로젝트가 있다면 일일히 라이브러리들을 직접 다운로드 받으면 번거롭기 때문에 

package.json의 depedencies에 있는 라이브러리들을 복사 붙여넣기 해준다. 

그 후 npm install을 하면 dependencies에 적힌 라이브러리들이 다운로드 받아짐.

 

 

 

- 설치가 제대로 되었는지 간단하게 라이브러리 하나를 불러와 테스트해보자! 

 

정상작동 화면

 

5. 간단한 초기셋팅이 끝났다면 초기 화면을 한번 띄어보자!

- 시작하기 위해선 start로 설정되 있는걸 볼수있다.

- npm run start 로  화면 띄어보기