리액트(React)의 기본 설치

＠ 리액트 설치법

 

프론트 기반 편집을 하기 위해서는 편집기가 필요한데,

편리하고 무료로 많이 쓰는 편집기로는 Visual Studio Code가 존재한다.

 

이 편집기는 https://code.visualstudio.com/ 에서 다운받을 수 있으며,

Visual Studio Code - Code Editing. Redefined

 

HTML과 CSS, JavaScript는 이곳에서 주로 편집한다. (이클립스도 가능은 하지만, 기본으로 색이 뜨지 않아서 불편하다.)

 

깔았으면, 리액트는 Node.js의 npm(node package manager)을 이용하므로 다운을 받아야한다.

Node.js는 https://nodejs.org/ko 여기서 다운받으면 된다.

Node.js — 어디서든 JavaScript를 실행하세요

 

다운받은 후 cmd를 키고 node -v를 입력한 다음 버전이 뜨면 설치가 된 것이다.

 

이제 리액트를 설치할 차례이다. 일단 작업할 공간에 react라고 폴더를 하나 만든다.

(이름은 아무거나 상관 없다. 작업 공간을 만드는 것이다.) 그리고 비주얼 스튜디오 코드로 이 폴더를 연다.

Open Folder...로 폴더를 연다

그러면 왼쪽의 EXPLORER에는 폴더가 들어갈 것이다. 그 후 비주얼 스튜디오 코드의 맨 아래 선을 마우스로 들어올린다.

맨 밑을 보면 검정색 선같은 것이 있다.

이것을 들어올리면 비주얼 스튜디오 코드에서 터미널을 사용할 수 있을 것이다. 이것은 파워셀을 비주얼 스튜디오 코드에서 작성하기 편하게 하는 것이다.

 

그리고 그 밑에 주소로 '주소\react> ' (폴더명을 다르게 했으면 다른 폴더명)이 터미널에 뜰 것이다.

그 이후 터미널에 'npx create-react-app [프로젝트명]'(여기서는 test)를 입력하면 리액트가 생성된다.

(리액트를 생성하는 것인데, 프로젝트 밖의 위치에서 생성해야 한다.)

생성하기 전에는 cd를 이용해서 적정한 위치로 이동해야 합니다. 저 위치는 리액트 프로젝트를 생성할 위치에 놓아야한다.

(참고 : 'cd ..'은 해당 폴더에서 이전 폴더로 가며 'cd 폴더명'은 해당 폴더 안으로 간다.)

그리고 터미널에 입력을 잘못 했을 경우, 오른쪽 위에 있는 powershell을 누르고 Kill Terminal을 하고 다시 열면 된다.

 

반응형

 

※ 만약에 비주얼 스튜디오 코드에서 보안 오류 PSSecurityException가 발생한다면?

찾기에서 Window Powershell을 입력하고 관리자 모드로 연다.

그 다음 'Set-ExecutionPolicy -ExecutionPolicy RemoteSigned'을 입력하고 엔터를 누른다.

(참고로 두번째 -ExecutionPolicy는 띄어져있다.)

그러면 다음과 같은 경고가 나오는데 모두 예(A)를 누르면 그 후 비주얼 스튜디오 코드를 재실행하면 비주얼 스튜디오 코드에서 관리자 모드로 터미널을 사용할 수 있게 된다.

자세한 것은 https://learn.microsoft.com/ko-kr/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.5을 참고하며,

만약 위의 명령어를 써도 똑같은 오류가 난다면, 'Set-ExecutionPolicy -ExecutionPolicy Undefined -Scope CurrentUser'를 입력하고 A를 누르면 된다.

 

그러면 처음 설정할 때 설치를 할 것인지 물어보는데 y를 누르면 된다.

그러면 설치 과정에 터미널이 엄청 바쁘게 움직이는데, 뒤에 npm error가 몇 개 뜨는 것은 신경쓸 필요가 없다

(운영체제에 따라서 맞지 않는 react가 error가 뜨는 것이다.)

 

react가 잘 설정됐는지 확인하는 방법은 'cd [프로젝트폴더명]'으로 들어가서 프로젝트 내부로 들어간다음 'npm start'를 입력하면 그 프로젝트의 서버가 실행이 된다.

그 후 방화벽이 일부 기능을 차단했다고 뜨면, 액세스 허용을 하면 'http://localhost:3000/'으로 페이지가 뜰 것이다. 그렇게 뜬다면 서버의 실행이 성공한 것이다.

 

※ 만약 'ERROR in ./src/reportWebVitals.js'이 서버 실행 이후에 뜬다면?

서버를 종료(터미널에서 Ctrl+C를 누르면 종료된다.)를 하고, 'npm istall web-vitals'를 하고 다시 서버를 실행하면 된다.

(이것은 오류가 날 때마다 인스톨하며, 프로젝트를 만들 때마다 인스톨해야한다.)

서버를 실행했을 때 오류 메시지 없이

이 화면이 실행이 된다면 정상적으로 리액트가 설치가 된 것이다. 이제 리액트를 만지면 된다.

 

헷갈리지 말아야할 것이 리액트의 프로젝트 생성은 프로젝트 외부에서 해야하며, 리액트 서버 실행은 프로젝트 내부에서 해야한다. test 폴더 안에 들어간 위치에서 외부로 나가려면 'cd ..'을 입력하면 외부로 나갈 수 있다.