[프론트엔드/React] 리액트 React 설치와 개발환경 셋팅을 해보장!!

(주의) 현재 Nodejs 설치시 14버전이나 16버전 찾아서 설치하시면 됩니다

 

리액트로 웹을 만들기 위해선 개발환경 셋팅이 필요합니다. 

Nodejs 최신버전, VS Code 에디터부터 우선 설치한 뒤 create-react-app 라이브러리로 프로젝트를 생성하면 끝입니다. 

 

 

(참고) 버전에러 등으로 강의와 똑같은 리액트 버전에서 코딩하고 싶다면

1. 하단 첨부파일을 압축푸신 뒤에 그 폴더를 에디터로 오픈합니다. 

2. 에디터 상단에서 Terminal - New Terminal 오픈하신 다음 npm install 을 입력하시면 필요한 라이브러리들이

설치됩니다. 

3. 이제 똑같이 코딩하시면 됩니다. 

(문제가 생길경우 그럴 때 빼곤 굳이 저랑 똑같은 버전을 맞출 필요는 없습니다.)

 

 

 

1. 일단 Node.js와 VS code 에디터 설치

 

구글에 Nodejs 검색해서 최신버전을 설치하십시오. 

근데 또 일부 환경에선 최신버전에서 npx create-react-app이 안될 수 있어서 그런 경우엔 삭제하고 LTS 버전을

설치해보도록 합시다.

예전에 Nodejs 옛버전 설치했어도 지우고 재설치 ㄱㄱ합니다. 

설치할 때 설치폴더 C드라이브로 잘 잡혀있죠? 그거 변경하지 마시고 다음 다음 계속 잘 눌러주시면 됩니다.

설치 중 chocolatey 어쩌구는 설치 안하셔도 됩니다.

 

Visual Studio Code 에디터도 구글에 검색해서 설치합니다.

(기존 에디터 쓰셔도 되지만 터미널을 기존에 안다뤄본 분들은 필수설치하세요)

 

 

 

2. 코드를 담을 작업용 폴더를 하나 만듭시다 

 

찾기좋게 바탕화면에 만드는게 어떨까요. 

 

 

 

3. VSCode 열고 아까 만든 작업용 폴더를 오픈합니다. 

 

File - Open Folder 메뉴를 이용하시면 됩니다.

그럼 왼쪽 상단에 저렇게 작업폴더명이 뜹니다.

앞으로 코드 짜거나 npm으로 뭐 하기 전 폴더가 제대로 열려있는지 꼭 체크합시다. (플리즈)

 

 

 

 

4. VSCode 에디터에서 terminal을 열어줍니다

 

작업폴더에서 터미널을 열어주어야합니다.

아까 폴더를 잘 오픈하신 뒤 상단 Terminal - New Terminal을 누르시면 됩니다. 

그럼 하단에 뭔가 까만 창이 하나 뜨죠? 그게 터미널이라는 것입니다.

터미널에 여러분이 아까 만든 폴더명이 저렇게 빨간 밑줄 처럼 잘 뜨면 리액트 설치 준비 끝입니다. 

(안뜨면 폴더 제대로 오픈 안한 것임)

 

 

 

 

5. 터미널에서 명령어를 입력합니다

 

create-react-app 라이브러리를 이용하시면 리액트 프로젝트를 쉽게 빠르게 생성할 수 있습니다.

그러니 터미널에서

npx create-react-app blog

이렇게 입력하고 엔터치십시오.

npx 어쩌구 이렇게 하시면 특정 라이브러리를 이용해 프로젝트를 하나 생성하실 수 있고

blog라는건 우리의 프로젝트명 결정하는 부분입니다. 자유롭게 작명하실 수 있습니다. 

2~3분 기다리시면 되는데,

터미널에 빨간 에러가 나면 페이지 최하단 ↓↓↓ 해결책을 살펴봅시다. 

 

 

 

 

6. 설치가 다 된 것 같으면 생성된 blog(생성한 폴더)폴더를 다시 에디터로 오픈합니다

 

설치를 완료하면 blog라는 이름의 새로운 프로젝트 폴더가 생성됩니다. 

이 blog라는 폴더를 에디터로 다시 File - Open folder로 오픈하시고 코딩 시작하시면 됩니다.

꼭 blog 폴더를 오픈하시고 코딩하시길 바랍니다. 

폴더 오픈 안하시고 코딩하다가 문제생기면 책임안짐

 

 

 

 

 

 

7. 내가 짠 코드를 브라우저에서 미리보기 하고 싶으면

 

이제 src폴더 안에 있는 App.js에 코딩 시작하시면 되는데, 코드를 잘 짰는지 미리보기 하고 싶으시면

터미널을 켜신 다음

npm start

를 입력해주시면 됩니다. 

그럼 브라우저가 자동으로 뜹니다.

(안뜨면 localhost:3000 이라고 크롬 브라우저 열고 직접 입력해주세요)

(안되면 방금만든 blog 폴더를 에디터로 제대로 오픈 안한것임)

 

보통 리액트 설치하거나 셋팅할때는 에러가 종종 나는데요~

자주는 에러에 대해서 살펴보겠습니다!! ㅎㅎㅎ

 

 

흔한에러0) 저는 설치가 10분이상 걸려요

 

설치할 때 너무 느리다면 대부분 인터넷 문제입니다. 

스타벅스에서 하지 말고 집에서 하시길 바랍니다. 

 

 

 

 

흔한에러1) npx 어쩌구 명령어 입력하자마자 에러가 난다면 

 

설치가 잘 되다가 갑자기 중간에 빨간게 뜨며 에러가 나는 대부분의 경우는

- Nodejs가 최신버전이 아닐 경우 입니다. 

윈도우나 맥이나 Nodejs 15 버전 이상을 권장드립니다. 

 

 

 

 

 

흔한에러2) npm : command not found 에러 

 

npm : command not found 라는 에러가 뜨는 것은 99%의 확률로 node 이상하게 설치하셔서 입니다. 

- 그걸 C드라이브에 설치하셨으면 작업폴더를 C드라이브안에 아무데나 만드셔서 다시 따라해보시고 

- Nodejs 삭제했다가 공식 홈페이지에서 다른 Nodejs 최신버전 다운받아서 위 설명대로 다시 설치해보십시오. 

- 맥도 brew 어쩌구 그런걸로 설치하지 마시고 다운받으세요. 

리눅스는 Nodejs 버전 업그레이드 커맨드 찾아서 입력하시면 되니 알아서 잘 하시리라 믿습니다. 

 

 

 

 

흔한에러3) 맥에서 permission이 없어요, 권한이 없어요 이런 에러가 뜬다면

 

npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'

▲ 예를 들면 이런 에러인데 폴더 수정 권한이 없다고 에러를 띄우는 것입니다.

위의 에러는 /usr/local/lib/node_modules 라는 폴더에 수정권한을 주시면 됩니다. 

터미널을 켜서 이거 둘 중에 하나를 입력해보십시오

sudo chown -R 님맥북유저이름: 위에에러뜬경로
sudo chown -R $USER 위에에러뜬경로

아마 둘 중 하나 입력하시면 대부분 해결될 겁니다. 

님맥북유저이름은 터미널에 whoami 입력하시면 나옵니다. 

 

이거 말고도 다른 경우가 있을 수 있으니 그대로 구글에 에러메세지 검색해보시면 되겠습니다. 

빠른 해결책은 그냥 sudo npx create-react-app blog 이런 식으로 npm이나 npx 쓰실 때 앞에 sudo 라는 단어를 붙여주시면 됩니다. 

설치 중간에 여러분 맥북 비번입력이 필요할 수 있습니다. 

(sudo, sudo chown 은 빠른 해결을 위한 임시 방편일 뿐이고 근본 해결책은 구글에 있습니다)

 

 

 

 

흔한 에러4) 윈도우 Powershell에서 빨간글씨로 '보안오류'가 뜹니다.

 

업데이트 안하면서 윈도우쓰는 분들이 가끔 그런거 같은데 

"허가되지 않은 스크립트 입니다 어쩌구~" 그런 에러가 뜨면

시작 - 검색 - Powershell 검색 - 우클릭 - 관리자 권한으로 실행한 뒤

Set-ExecutionPolicy Unrestricted

라고 대소문자 하나라도 틀리지않고 입력하십시오.

그럼 이제 npx, npm으로 뭐 하는거 잘됩니다. 

 

 

 

 

 

흔한에러5) 윈도우는 Powershell을 이용하는 경우도 권한이 없다고 뭐라 그럴 수 있습니다. 

 

해결책1. 터미널을 VScode 에디터에서 켜서 npx 어쩌구 그런거 하지 마시고

터미널을 이렇게 켜서 한번 똑같이 설치해보십시오. 

 

 

아까 만든 작업폴더를 탐색기로 오픈하신 다음에

파일 - PowerShell 열기 - 관리자권한으로 PowerShell 열기 눌러서 터미널을 관리자모드로 엽니다. 

이렇게 연 다음에 npx create-react-app blog 어쩌구가 되면 앞으로 터미널에서 뭐 하라고 하면 터미널 이렇게 켜서 사용하시면 됩니다. 

 

 

 

 

흔한 에러6) The engine "node" is incompatible with this module. 

 

npx로 설치시 이런 에러가 있을 수 있습니다. nodejs 버전이 낮거나 다르다는 뜻이며

nodejs를 에러메세지가 요구하는 버전으로 재설치하시면 됩니다. 

 

이외에도 에러 경우의 수가 매우 많기 때문에 정확한 에러메시지 직접 검색이 답입니다. 

 

관련 영상과 사진들 또는 소스코드를 보시려면 밑에 링크로 들어가서 참고해가면서 보시길 바랍니다!!

                                                         ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 

-참고 링크

---

리액트설치와 개발환경셋팅! - https://codingapple.com/unit/react1-install-create-react-app-npx/

리액트 React 설치와 개발환경 셋팅 (2021 ver) - 코딩애플 온라인 강좌