망할고양이의 도피처

Create-react-app 설치 이후 서버를 실행하기 위해 아래 그림과 같이 터미널을 열어준다.

그리고 명령어를 입력

서버가 실행되어야하지만 오류가 나는 경우가 있다.

# 오류.1 - 터미널이 Winodws Powershell로 되어있는경우 

해결방안 

기본터미널 프로그램을 변경한다. 

CTRL + SHIFT + P 를 눌러 아래 그림과 같은 창을 호출한다.

Selectr Default Profile이라는 키워드로 검색 후 아래 항목을 선택

Terminal : Select Default Profile 선택 후 Command Prompt를 선택하여 기본 터미널 프로그램을 선택합니다. 

# 오류.2 기본터미널 프로그램을 cmd로 변경하였으나 npm이 실행이 되지 않는 경우

해결방안

설치한 nodejs의 경로를 환경변수에 추가한다.

# 오류.2에 해당하는겨우 VSCode를 종료한 뒤 재실행한다.

위의 그림과 같이 터미널에 정상적으로 서버가 실햄됨과 동시에 브라어저에 위 그림과 같은 페이지가 열리게 된다. 

먼저 ReactJS가 설치될 폴더를 하나 생성합니다. 

이 생성된 폴더에 ReactJS를 설치할 계획입니다.

터미널을 하나 실행합니다. 

윈도우즈 검색에서 cmd 라고 검색해도 아래 그림과 같이 찾을 수 있습니다. 

명령 프롬프트에 아래 그림과 같이 입력하여 create-react-app를 설치합니다. (npm이 아니고 npx 입니다.)

최초 설치시에는 시간이 좀 걸릴 수 있습니다. 

<주의사항 react_01 이라는 프로젝트 명은 대문사를 사용하면 오류가 발생합니다. ex) myReactJS >

실행 결과 

.

.

.

설치가 완료되었다면 이전에 설치한 VSCode를 실행하고 해당 폴더를 열어줍니다. 

예시) c:\dev\react_01

해당 폴더를 선택해준 경우 정상적으로 파일이 자동으로 생성되어 있는 것을 확인할 수 있습니다.

Webpack, Babel등을 추가로 설치하여 개발환경을 구성하는데에 초보자에게는 상당한 어려움이 있으나 Create-react-app를 이용하면 환경설정을 쉽게 할 수 있습니다.