Notice
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- 캘린더 라이브러리
- Update
- RCPS
- Token
- 달력 라이브러리
- stock option
- 로그인
- userManagement
- mypage
- MRC
- jsonwebtoken
- 밸류즈
- 관리자페이지
- 공통메서드
- ui탬플릿
- 배포
- Ajax
- 마이페이지
- 이미지 업로드
- Styled Components
- 빌드 및 배포
- Typesciprt
- 인증처리
- 파생상품평가
- 스프링시큐리티
- 로그인 로직
- register
- react
- 회원가입로직
- 밸류즈 홈페이지
Archives
- Today
- Total
I T H
[MySchedule project] 1. frontend - 타입스크립트 초기 환경설정 본문
- 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 로 화면 띄어보기



'React + Node.js' 카테고리의 다른 글
[MySchedule project] 6. JWT(json web token) / 로그인 로직(1) (2) | 2024.01.30 |
---|---|
[MySchedule project] 5. backend - 회원가입 로직 (0) | 2024.01.25 |
[MySchedule project] 4. frontend - 회원가입 로직 (1) | 2024.01.25 |
[MySchedule project] 3. frontend - redux 세팅(redux-toolkit사용) + typescript (0) | 2024.01.25 |
[MySchedule project] 2. frontend - 레이아웃 / react- router 설정 (1) | 2024.01.25 |