개발 환경을 준비하기 전 정리 !
자바스크립트 패키지 관리 도구에는 npm 과 yarn이 있다
npm: 'node package manager'의 약자로 node.js 와 react.js에서 사용하는 대부분의 패키지를 설치할 수 있다.
npm 은 node.js와 함께 설치된다.
yarn: 페이스북에서 만든 패키지 관리 도구로, npm에 비해 캐싱,보안, 신뢰성등이 개선되었다.
1. node.js 다운로드
node.js 공식 웹사이트에 접속해 14.4.0 버전을 다운로드 한다.
64비트 윈도우 운영체제인 경우에는 node-v14.4.0-x64.msi를 다운로드 한다 .
2. node.js 설치
다운로드 한 파일을 실행해 설치를 시작하고 무한 next ...후 finish 버튼을 클릭한다. (체크 박스 선택은 하지 않습니다 )
3. node.js 및 npm 설치 확인
명령 프롬프트를 실행하여 node -v , npm -v 명령어로 설치된 node.js 와 npm의 버전을 확인한다.
4. react 프로젝트의 워크스페이스로 사용할 폴더 생성
(저는 대부분 프로젝트를 바탕화면에 만들기 때문에 바탕화면에 폴더를 생성했습니다.)
cmd 창에서 cd 명령어를 이용해 생성한 폴더로 경로를 이동한다.
5. yarn 설치
npm install 명령어로 yarn을 설치한다. yarn -v 명령어로 설치된 yarn의 버전을 확인한다.
6. create-react-app 설치
npm install -g create-react-app -> create-react-app를 설치한다.
create-react-app client -> client 라는 프로젝트를 생성한다.
7. react 서버 실행
client 경로에서 yarn start 명령어로 react 서버를 실행한다.
http://localhost:3000 url을 열면 다음과 같은 화면을 확인 할 수 있다.
개발 환경 준비 끝 !
리액트 공부하러 가보자고 !
'리액트' 카테고리의 다른 글
리액트 생명주기 함수 componentDidMount() 사용하기 (0) | 2023.01.24 |
---|---|
리액트 생명주기 함수 static getDerivedStateFromProps(props, state) 사용하기 (0) | 2023.01.24 |
리액트 생명주기 함수 constructor(props) 사용하기 (0) | 2023.01.17 |
리액트 생명주기 함수 render() 사용하기 (0) | 2023.01.17 |
리액트 Component 사용하기 (0) | 2023.01.17 |