프로젝트를 위한 리액트 환경세팅

리액트 환경세팅

• 안정화된 버전이라고 하여... 저 버전들을 채택

Node.js란?

• 브라우저 밖에서도 (서버를 구축하는 등의) 자바스크립트를 실행할 수 있게 해주는 런타임 환경

NPM (Node Package Manager)

• 자바스크립트를 위한 패키지 관리자
• node.js설치시 같이 설치됨

Node.js는 구글에 치면 운영체제에 맞게 다운로드가 가능함

• 다운로드 탭 클릭 -> 맞는 버전과 운영체제 선택, 다운로드 후 설치
• 다운로드 후 해당 명령어로 버전 확인 가능

node --version

• Node.js: 20.18.2 (LTS)
• React: 18.2.0 (안정화된 버전이라고 함)
• TypeScript: 5.1.6
• Next.js: 14.0.0

프로젝트 생성을 원하는 폴더까지 들어간 후

CRA 이용하여 프로젝트 생성

npx create-react-app front

• 여기서 계속 오류가 나서 ... yarn이라는 걸 사용해서 프로젝트를 생성함

yarn 설치

npm install -g yarn

• 만약 이걸로 했을 때 권한 문제로 설치가 안된다면, sudo로 설치

sudo npm install -g yarn

yarn 으로 리액트 프로젝트 생성

yarn create react-app front

프론트 폴더로 이동

cd front

생성한 프로젝트 실행

npm run start

(localhost:3000)

• 이 화면이 뜨면 리액트 실행이 되는 것
• 코드 편집은 파이썬과 동일하게 vscode로 진행

실행종료

ctrl + c

프론트 폴더로 이동후 이걸 써보면 리액트 버전을 알 수 있음

npm list react react-dom

만약 리액트가 18.2.0으로 설치되지 않았다면, 삭제후 재설치로 다운그레이드 작업하고 넘어가기

npm uninstall react react-dom
npm install react@18 react-dom@18.2.0