리액트 강의처럼 독학 배우기

리액트 인강을 구매하고 싶지만 인강을 구매하기에는 귀찮으신 분들, 저의 얇은 지식으로 도움 드릴테니 같이 공부해봅시다. 리액트를 배우기 이전에 html , css, javascript의 기초 지식이 없으신 분들은 이것부터 공부하고 오셔야 이해하는데 도움이 될 것입니다. 

 

위의 언어들을 모르는데 굳이 보시겠다면 굳이 말리지는 않겠습니다.

 

 액트를 쓰는 이유

 

javascript로 만들면 매우 긴 코드가 필요하여 javascript로 된 라이브러리인 리액트로 사용하면 간결하고 가독성 있는 코드를 만들수 있습니다.

html을 함수, array, object로 보관하여 재사용이 가능합니다.

 

 

 개발 환경셋팅

 

- Node.js를 검색후 LTS버전 설치

- 코드 편집기 설치(저는 vsCode를 사용합니다. 이 블로그에서는 vsCode를 기준으로 작성되어집니다. 왜냐하면 제가 vsCode는 터미널도 존재하기때문에 이거를 사용하는게 신상에 좋을 듯 합니다.)

 

 

 프로젝트시작

바탕화면에 새폴더 만듭니다.

vsCode 열기 폴더 열기를 누른 후 방금 만들 새 폴더 열어 봅니다.

vsCode 상단에 보면 터미널 클릭해 봅니다.

npx create-react-app 리액트폴더명을 작성 후 엔터를 눌러 봅니다.

리액트 프로젝트 시작 끝납니다.

 내가 만들고 있는 리액트 브라우저에서 확인하기

 

App.js가 메인 페이지 입니다.

터미널에 npm start 입력합니다.

(터미널에 에러가 나온다면 폴더를 잘못 열겁니다. 제대로 다시 열고 다시 터미널에 작성해봅시다.)

 

 여러 애러 고치는 방법

1. 에러 문구 그대로 복사합니다. 구글에 들어가서 붙여 넣기 합니다.

2. found 어쩌구 에러: 전체 껏다 다시 켜기

3. 맥북에서 에러 sudo npx create-react-app 리액트폴더명을 입력해봅니다. 그리고 맥북 비밀번호를 입력합니다.

4. 허가되지 않은 스크립트입니다 에러: 시작 버튼에서 powershell 검색 후 우클릭합니다. 관리자 권한으로 실행합니다. 그리고 Set-ExecutionPolicy Unrestricted를 입력하고 y를 입력후 엔터칩니다.

 

저도 에러가 났습니다.

npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\parkHyeongWoo\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent 

이러한 에러가 나왔는데요. 당연히 저도 구글링을 해봤고 해결방법은

npm uninstall -g create-react-app 

npm add create-react-app

npx create-react-app 폴더이름  

전역으로 설치된 리액트를 제거 하고 npm으로 리액트를 다시 설치하고 셋팅해주라고 나와서 위의 세가지를 순차적으로 했더니 오류가 사아졌습니다.

 

 

 

여기까지 리액트의 설치방법과 프로그램 셋팅하는 방법이였습니다. 오늘은 여기까지만 배워봅시다.

진짜 리액트 시작은 아직 안했습니다. 바로 리액트 다음 단계를 배우고 싶다면 다음 글을 읽으면 되겠습니다.