React - 1 개발환경구성 [VScode, node js, npm, yarn, npx]

React

- JS 기반으로 돌아가는 라이브러리이다. 즉, js로 돌아가는 라이브러리 모음인 것이다.

- 주로 사용자 인터페이스를 만드는 프론트 분야에서 쓰인다.

- 사용자는 약 66퍼센트로서 매우 많은 서비스가 React로 만들어졌다.

- React를 사용하면 js실력이 는다. 

 

 

React 개발환경 설정하기

React를 사용하기 전에 깔아야 하는 것들 있다.

- node js

 

window기반에서는 리눅스언어로 까는 게 편하기 때문에 git bash를 깔아서

설치하길 바란다.

 

Node JS

- 일종의 JS 런타임 구동 환경이다. 구글 Chrome V8버전 JS엔진을 사용하여 만들어졌으며 JS구동 플렛폼이라고

정의한다. JS로 돌아가는 구동 플렛폼이다. 

 

From. Wiki

Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능케 한다. 

 

nodejs.org/ko/

Node.js

위사이트에서 안정적인 LTS 버전을 다운로드 받자, 

npm

- Node js의 package 매니저이다. 즉, node js 혹은 js를 사용하는 수많은 사용자들이 만들어 둔 package 도구들을 npm에 올려놓고 npm을 이용해서 필요한 패키지들을 다운로드 받는 매니저 프로그램이다.

 

따라서 React 환경 설정시 node js를 깔면 따라오는 npm을 이용해서 package를 설치할 것이다.

보통 리눅스환경에서는 npm을 통해서 nodejs 버전관리와 npm버전 관리를 하지만 윈도우 환경은 잘안되는 것같다.

 

yarn

- npm의 문제점을 개선한 패키지매니저이다. npm보다 패키지 설치 속도가 훨씬 빠르며

npm을 통해 설치가 가능하다.

 

window 환경에서는 cmd를 통해서 명령어를 이용해 yarn 혹은 npm을 다뤄야 하지만

git bash를 이용해서 리눅스 환경처럼 설치를 해보겠다.

npx

- 우리는 리액트를 처음 실행할 때 프로젝트를 만드는 패키지인 create-react-app 명령어를 사용한다. 

 

npx create-react-app

 

위와 같이 명령어로 react 프로젝트를 생성하는데 npx는 쉽게 말하면 npm의 아들이다. 

npm의 5.2버전에서는 npx가 알아서 깔려있는데 npm의 레지스트리 패키지 사용경험을 쉽게

파악하게 합니다. 즉, npm으로 하는 다양하고 귀찮은 과정들을 쉽게 압축시켜 사용하게 합니다.

 

설치는 git bash를 이용해 설치해보자

npm install npx -g

- 여기서 '-g'는 컴퓨터 전체에 npx를 사용가능하게 패키지를 설치하겠다는 말이다.

특정 프로젝트에만 설치하고 싶다고하면 --save 명령어를 추가하면된다.

Visual Studio Code

- vscode는 다양한 확장 프로그램을 제공하는 에디터이다.

- 특히 ESLint, prettier를 사용하면 각각 자동으로 문법오류를 잡아주며, 코드 의 모양 fom의 모양을

일정하게 보기 좋게 바꿔준다. 코드의 모양을 통일성 있게 만들어주는 것이다.

- 두개의 확장프로그램은 React도 적용되며 코드의 능률을 많이 향상시켜준다.

 

현재 나는 vscode로 html, css, js를 코딩 하고 있다.