- 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다.
13버전이하 아니면 17버전은 쓰면 안됩니다.
설치 경로는 C드라이브 어쩌구 되어있는거 바꾸지말고 그대로 쓰는게 좋습니다.
설치 중 chocolatey 어쩌구는 설치 안하셔도 됩니다.
- Visual Studio Code 에디터도 구글에 검색해서 설치합니다.
(기존 에디터 쓰셔도 되지만 터미널을 기존에 안다뤄본 분들은 필수)
리액트 프로젝트 생성
2-1. 작업용 폴더를 하나 만들어줍니다
2-2. 폴더에 shift + 우클릭해서 여기서 powershell 열기를 누릅니다.
npx create-react-app project_name
- 에디터에서 프로젝트 오픈
프로젝트 설치했으면 프로젝트이름의 폴더가 하나 생성되는데 (저는 blog)
그 폴더를 에디터로 오픈해서 코드짜면 됩니다.
Visual studio code 에디터 켠 다음에 File - Open Folder 누른다음에 아까 생성된 blog 폴더 선택하면 됩니다.
- App.js가 메인페이지임
src 폴더 안에 있는 App.js 이게 메인페이지니까 거기다가 코드짜면 됩니다.
- 내 사이트를 브라우저로 미리보기 띄우고 싶으면
에디터 상단메뉴중에 Terminal - New Terminal 누릅니다.
그럼 터미널이 뜨는데 거기다가 npm start 입력후 엔터치면 미리보기 뜹니다.
npm start
오류 발생시
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. 윈도우인데 아직도 터미널에서 뭐 하는거 안되면
이상한 보안프로그램 끄십시요 특히 Ahnlab security 어쩌구
작업폴더를 오픈한 다음 파일 - Powershell 열기 - 관리자권한으로 열기 누른 다음
거기서 npx 어쩌구 해서 프로젝트 생성해봅시다.
참조 : 코딩애플 리액트 강의 https://codingapple.com/
Top comments (0)