React.js 개발환경
-
로컬 개발환경 세팅
-
nvm 설치
-
nvm은 Nodj.js를 여러버전으로 설치하여 관리해 주는 도구. 추후 Node.js버전을 업데이트하거나 프로젝트별로 버전이 다른 Node.js를 사용하고 싶을때는 이 도구가 꼭 필요하다. -
터미널에서 아래의 명령어를 입력하면 바로 설치된다.
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
-
설치가 완료되면 새창을 띄워서 설치여부를 확인해 본다.
nvm —version- 혹시라도 버전 정보가 보이지 않으면 직접 프로파일에 등록시켜 줘야 한다.
export NVM_DIR ="$HOME/nvm"[-s "$NVM_DIR/nvm.sh"]&& \. "$NVM_DIR/nvm.sh"
-
-
Node.js 설치
-
mvn 설치가 완료되었으면 node.js 최신버전을 설치한다.
-
`nvm install —lts -
공식 다운로드 링크: https://nodejs.org/ko/download/
-
버전 확인
$node -v
-
-
-
패키지매너지 yarn 설치
-
npm과 같은 역할을 하는 패키지 매니저. npm의 문제점들을 개선한 툴로 npm보다는 패키지를 빠르게 설치할 수 있다. npm을 사용해도 큰 문제는 없음. npm의 경우, 의존 라이브러 갯수가 많아지면 설치속도가 많이 느려지고 설치기준으로 의존성 라이브러리의 버전이 결정되기 때문에 설치시기에 따라 다른 버전이 설치될 수 있음. -
$ brew update -
$ brew install yarn -
$ echo 'export PATH="(yarn global bin):$PATH"' >> ~/.bash_profile -
버전 확인
$yarn --version
-
혹시라도 homebrew를 설치하지 않았다면 아래의 포스트를 참조
-
에디터 설치 - vscode
-
vscode 다운로드 경로: https://code.visualstudio.com/Download
-
vscode 확장 플러그인 설치
- ESLint (필수) - 자바스크립트 유효성 체크
- Relative Path - 상대경로의 파일의 경로를 편하게 작성할 수 있게 해주는 경로코드 Assistant
- React code snipperts (필수) - Charalampos Karypidis 가 제작자인 것 설치
- React-beautify - 리액트 코드의 정리
-
-
리액트 프로젝트 관리자 create-react-app 설치
-
$ yarn global add create-react-app- create-reacat-app 툴은 커맨드라인 툴이기 때문에 모든 디렉토리에서 필요하므로 전역적으로 설치
-
reactJs 프로젝트 생성
-
$create-react-app [프로젝트명] -
프로젝트 생성이 완료되었으면 프로젝트 폴더 이동후
yarn start로 실행-
$yarn start -
이 명령어는 yarn을 통해서 프로젝트의 소스를 웹브라우저에서 실행가능한 형태로 '빌드'하는 것을 포함한다. 여러개로 분리된 파일들을 하나로 합쳐서 패키징을 하고,
ES6 형태로 작성된 코드를 구 버전의 자바스크립트 엔진이 해석할 수 있는 코드로 변환하는 작업도 포함되어 있다.
-
-
웹브라우저에서 아래의 주소로 확인
-
-
-
최근댓글