[Stockly] (5) : React 프론트엔드 환경 설정

https://ekeprl.tistory.com/73

[Spring AI] (4) : 텔레그램 봇 연동 - 목표가 알림 구현

지난 포스팅에 작성한 목표가 알림을 끝으로 백엔드 기능을 모두 구현했다.

 

이번 포스팅부터는 프런트엔드를 React로 구현해보려 한다.

 

1. Node.js 설치

리액트를 사용하기 위해 컴퓨터가 리액트 코드를 읽을 수 있도록 변환해 주는 Node.js를 먼저 설치해야 한다.

https://nodejs.org

Node.js — Run JavaScript Everywhere

사이트로 이동해

설치파일 다운로드

다운로드를 완료했다면 인텔리제이 터미널로 들어간다.

node -v    //Node.js의 버전 확인
npm -v	   //노드 패키지 관리자 버전 확인

두 명령어를 입력해 설치가 잘 되었는지 확인한다.

설치 완료 확인

 

2. React 프로젝트 생성

npx create-react-app #{이름}

 

설치과정

프로젝트 생성 명령어를 입력한 후 

npm start

실행

위 사진처럼 정상적으로 실행이 된다면,

결과

브라우저 기본 React 화면이 자동으로 열리게 된다.

 

이상 React 설치 및 실행 포스팅을 마치겠습니다.

 

감사합니다.