[STUDY] React 환경 설정하기(2)

환경설정(1)에서 필요한 프로그램을 모두 설치했다면, 이번편에서는 리액트 앱을 만들고 구동 시켜보자

과거에는 리액트 앱을 만들기 위해 웹팩, 바벨과 같은 도구를 이용하여 비교적 복잡하게 실행가능한 앱을 만들어냈다고 한다. 하지만 최근에는 create-react-app이라는 보일러 플레이트를 이용하여 보다 간단하게 리액트 앱을 만들 수 있다.

1. 리액트 앱 생성

먼저 명령프롬포트를 실행하고 리액트 앱을 만들고 싶은 위치로 이동하여 다음 명령어를 입력하자.

npx create-react-app [study_app](원하는 이름으로)

위와 같이 명령어를 치고 잠시 기다리면 study_app 폴더가 만들어진것을 확인 할 수 있다.

2. 리액트 앱 열기

그럼 앞서 설치한 VSCode를 이용하여 study_app을 열어보자
폴더를 여는 방법은 두가지가 있는데

1. study_app 폴더를 마우스 우클릭하여 [Code(으)로 열기]를 클릭
2. VSCode를 먼저 실행 한 뒤 [파일] -> [폴더 열기]를 눌러 study_app 폴더를 선택

둘 중 더 편한 방법으로 선택하여 study_app 폴더를 열면 아래와 같은 화면을 볼 수 있다.

3. 리액트 앱 실행

VScode는 터미널을 내장하고 있어 별도의 명령프롬포트창 또는 터미널창을 띄우지 않아도 된다.
상단에 [터미널] -> [새 터미널] 버튼을 누르면 터미널창이 나타난다.
아래와 같은 명령어를 입력한다.

npm start

명령어를 실행하고 잠시 기다리면 우측과 같이 컴파일에 성공하고

브라우저와 함께 이 화면이 자동으로 뜨면 성공적으로 리액트 앱을 구동시킨것이다.
(자동으로 뜨지 않는다면 브라우저에서 직접 [http://localhost:3000/] 입력하여 확인한다.

여기까지 보일러 플레이트를 이용하여 간단하게 리액트 앱을 만들고 실행했다.

다음 순서로는
1. 스프링 부트 프로젝트 생성
2. 간단 Rest API 만들기
3. 현재 만든 리액트 앱에서 API 호출하여 결과 띄우기
와 같은 순서를 진행하여 Project의 개발환경에 남은 부분을 마무리해보겠다.