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

 

0:00 개발환경 셋팅

1:21 리액트 프로젝트 생성은

4:49 지금까지 한게 뭔지 설명 

 

 

 

 

 

개발환경 셋팅

 

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

- 맥북 m1 등 ARM CPU를 쓰는 컴퓨터는 ARM64라고 써있는 버전을 찾아서 다운받읍시다.

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

 

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

이게 끝임

 

Q. 맥북은 다른가요? 

A. 다른거 없음

 

 

 

 

리액트 프로젝트 생성은

 

 

 

 

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

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

(참고1) 윈도우는 onedrive 이런 곳 안에 넣으면 안됩니다.

(참고2) 요즘은 한글 폴더명이 있으면 실행이 잘 안될 수 있습니다.

 

 

 

 

 

 

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

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

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

 

 

 

 

npm create vite@latest

이거 입력하면 리액트 프로젝트 생성이 가능합니다.

그 후에 프로젝트 이름짓고 이거저거 고르라고 하는데 대부분 No 고르면 되고

그 다음에 cd 어쩌구 그리고 npm install 명령어가 나올텐데

그거 차례로 터미널에 입력하면 프로젝트 생성 끝입니다.

 

참고로 예전엔 create-react-app을 이용했는데 지원종료되어

이제 npm create vite을 이용해서 설치하면 됩니다.

 

 

 

 

 

 

 

3. 에디터에서 프로젝트 폴더 오픈

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

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

에디터 켠 다음에 File - Open Folder 누른 다음에 아까 생성된 blog 폴더 선택해서 열어서 코드짭시다.

 

App.jsx 이게 메인페이지니까 거기다가 코드짜면 됩니다. 

참고로 .jsx 그리고 .js 확장자는 리액트안에선 별 차이 없습니다.

 

 

 

 

 

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

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

그리고 npm run dev 입력 후 엔터치면 됩니다.

그럼 URL이 하나 뜰텐데 브라우저 주소창에 입력해서 접속해보면 됩니다.

참고로 blog 같은 프로젝트명이 터미널에 안뜨면 폴더오픈을 제대로 안한것이니 폴더 오픈부터 잘하십쇼

 

 

 

 

 

5. 필요없는 css 지우기

css 파일이 2개 정도 있을텐데 안에 있는 내용은 쓸데없으니 지우도록 합시다.

 

body { margin : 0 }
div { box-sizing : border-box }

css파일에 이런거 아무데나 추가해두면 깔끔해보일 수 있습니다.

 

 

 

 

 

파일/폴더 설명

 

node_modules 폴더 : 설치한 라이브러리의 소스코드 보관 폴더

public 폴더 : 데이터파일 이미지파일 등 쓸데없는 파일 보관소 (여기 넣으면 나중에 사이트 발행시 원본 보존가능)

package.json : 설치한 라이브러리 기록용 파일

어쩌구.config.js : lint, vite 설정용 파일

index.html : 메인페이지인데 App.js 내용을 main.js에 넣고 그걸 index.html에 넣는 식으로 짜여져있음

 

 

 

 

 

자주 겪는 에러들

 

Q. "npm command not found 어쩌구" 에러

- 에디터 껐다 켜보기

- 대부분 nodejs 제대로 설치 안했거나 옛버전이라 그럴 수 있습니다.

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

- 한글 폴더명 쓰면 잘 안될 수 있습니다.

- 윈도우는 onedrive 같은 곳에 작업폴더 만들지 맙시다.

 

 

 

Q. npm install, npm run dev 명령시 뭔가 이상해요

폴더명에 있는 한글을 제거해봅시다.

 

 

 

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

npm 명령어 왼쪽에 sudo를 붙여봅시다.

그러니까 sudo npm 어쩌구저쩌구 입력해보면 됩니다.

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

 

 

 

 

 

 

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

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

Set-ExecutionPolicy RemoteSigned 입력합시다.

그 다음에 뭐 동의하라고 하면 y 누르고 엔터칩시다.

그 다음에 터미널 껐다켜면 npm 명령어들이 잘될 수 있습니다.

 

 

 

 

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

nodejs 버전이 낮거나 너무 높다는 뜻이며 

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

 

 

 

 

Q. npm 어쩌구 입력시 여전히 안되면 

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

 

 

 

 

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

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

- 작업폴더에 들어간 후 상단메뉴에서 파일 - Powershell 열기 - 관리자권한으로 열기 누른 다음

거기서 npm 어쩌구 명령어 입력해봅시다.