리액트>설치와 개발환경 셋팅

개발환경 셋팅

 

1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다. 

- 남자답게 숫자 높은 최신버전 써도 되는데 그로 인한 버그와 배포시 에러는 알아서 감수해야함

- 설치 경로는 C드라이브 어쩌구 되어있는거 바꾸지말고 그대로 쓰는게 좋습니다.

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

 

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

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

 

Q. 맥북은 다른가요? 

A. 다른거 없음

 

 

 

 

리액트 프로젝트 생성은

 

 

 

 

1. 작업용 폴더를 하나 만들어줍니다

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

 

 

 

 

2. 폴더에 shift + 우클릭해서 여기서 powershell 열기를 누릅니다.

맥북은 손가락 두개 클릭해서 터미널열기 누르면 됩니다. 

 

 

 

 

 

3. 그럼 터미널이라는게 나오는데 

 

npx create-react-app blog  

이거 그대로 입력하고 엔터누르면 프로젝트 생성 끝입니다.

blog 대신 여러분의 리액트 프로젝트명을 기입해보십시오 

안되면 하단을 참고해서 에러를 해결해보거나 

npm create vite@latest 입력해서 Vite 써서 리액트 셋팅해도 됩니다. 이거 입력하면 터미널에 여러가지 입력하라고 핱텐데 그대로 입력하면 됩니다. 

 

 

 

 

 

 

 

4. 에디터에서 프로젝트 오픈하려면  

프로젝트 설치했으면 프로젝트이름의 폴더가 하나 생성되는데 (저는 blog)

그 폴더를 에디터로 오픈해서 코드짜면 됩니다.  

Visual studio code 에디터 켠 다음에 File - Open Folder 누른다음에 아까 생성된 blog 폴더 선택하면 됩니다.

 

 

 

 

 

5. App.js가 메인페이지임

src 폴더 안에 있는 App.js 이게 메인페이지니까 거기다가 코드짜면 됩니다. 

 

 

 

 

 

6. 내 사이트를 브라우저로 미리보기 띄우고 싶으면 

에디터 상단메뉴중에 Terminal - New Terminal 누릅니다. 

그럼 터미널이 뜨는데 거기다가 npm start 입력후 엔터치면 미리보기 뜹니다. 

 

 

 

- 저처럼 blog 같은 프로젝트명이 터미널에 안뜨면 폴더오픈을 제대로 안한것입니다. 폴더 오픈부터 잘하십쇼

- 브라우저 자동으로 안뜨면 localhost:3000 이라고 크롬 브라우저 열고 직접 입력해주세요

 

 

 

 

 

 

 

 

 

 

----------------------------------

 

터미널에 뭐 입력할 때 20% 확률로 에러가 뜹니다.

해결방법을 알아봅시다. 이러면 대부분 해결이고 이거 외엔 구글검색 ㄱㄱ 

 

 

 

Q1. 저는 리액트 프로젝트 설치가 10분 이상 오래걸려요 

 

스타벅스에서 하지 말고 집에서 합시다.

 

 

 

 

Q2. "npx command not found 어쩌구" 에러

 

- 터미널 다시 껐다 켜보세요 

- 대부분 nodejs 제대로 설치 안해서 그렇습니다. 옛날 버전이라 그럴 수 있습니다. 

- 맥북이면 brew 그런거 쓰지 말고 다운받읍시다. 

- 윈도우는 C 드라이브에 얌전히 설치합시다. 

- 리눅스는 알아서 nodejs 설치나 버전 업데이트 명령어 잘 입력하면 될듯요 

 

 

 

 

Q3. 맥북인데 "permission이 없어요" 에러

 

프로젝트 생성시 저런 에러가 뜨면 터미널에 

sudo npx create-react-app blog 입력해보면 됩니다.

비번입력하라고 하면 맥북 비번 입력하면 됩니다. 

 

 

 

 

 

 

Q4. 윈도우인데 "허가되지 않은 스크립트 입니다 어쩌구~" 에러

 

윈도우 하단 검색메뉴에서 Powershell 검색 - 우클릭 - 관리자 권한으로 실행한 뒤

Set-ExecutionPolicy Unrestricted

라고 대소문자 하나라도 틀리지않고 입력하고 엔터칩니다.

그 다음에 뭐 선택하라고 하면 y 누르고 엔터치면 될듯요

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

 

 

 

 

 

Q5. The engine "node" is incompatible with this module 에러 

 

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

nodejs를 요구하는 버전으로 재설치하시면 됩니다. 

 

 

 

 

Q6. npm 어쩌구 입력시 안되면 

 

https://imspear.tistory.com/31 이런거 참고해서 환경변수 등록해봅시다. 

 

 

 

 

Q7. 윈도우인데 아직도 터미널에서 뭐 하는거 안되면 

 

- 이상한 보안프로그램 끄십시요 특히 Ahnlab security 어쩌구 

- 작업폴더를 오픈한 다음 파일 - Powershell 열기 - 관리자권한으로 열기 누른 다음

거기서 npx 어쩌구 해서 프로젝트 생성해봅시다. 

 

 

 

Q8. 그래도 뭔가 안되면

 

npm create vite@latest 명령어로 vite 써서 설치해도 됩니다.

설치 후엔 프로젝트 폴더 오픈해서 터미널에서 npm install 눌러야하고 

미리보기 시작 명령어는 npm run dev입니다.

 

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

 

 

 

 

(참고)

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

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

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

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

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