React | Development Environment Setup

Sujeong Ji·2022년 4월 8일
React
0

React

목록 보기
1/9
post-thumbnail

keyword Node.js, npm, yarn, webpack, babel, package.json, package-lock.json, yarn.lock

코드샌드박스 React 연습창 : https://codesandbox.io/s/new

개발환경 설정

node.js, yarn, VS Code


Node.js


Node.js 설치

  • 📌 Windows 의 경우엔, Node.js 공식 홈페이지 에서 좌측에 나타나는 LTS 버전을 설치해주세요.

  • 📌 macOS / Linux 의 경우엔, nvm 이라는 도구를 사용하여 Node.js 를 설치하시는 것을 권장.

    	$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
	$ nvm install --lts

🌼 Node.js
: Chrome V8 JavaScript 엔진 위에서 동작하는 JavaScript 런타임(환경)

  • 런타임 : 특정 언어로 만든 프로그램을 실행할 수 있는 환경을 의미.

  • 자바스크립트 런타임 : 2008년에 구글이 V8 엔진을 사용하여 크롬을 출시함. 이후 2009년 라이언 달(Ryan Dahl)은 다른 자바스크립트 엔진과 달리 매우 빠른 V8 엔진 기반의 노드 프로젝트를 시작하며 세상에 나오게 됨.

  • Node.js는 스크립트 언어가 아닌 '환경'이다.

  • 노드를 통해 다양한 자바스크립트 애플리케이션을 실행.

  • 사용 언어로는 자바스크립트(Javascript)를 활용.

    • JavaScript는 C/C++, Java 와 같은 프로그래밍 언어임
    • JavaScript는 독립적인 언어가 아닌 객체기반의 스크립트 언어임.
    • 스크립트 언어는 특정한 프로그램 안에서 동작하는 프로그램이기 때문에 웹 브라우저 프로그램 안에서만 동작함.
      (즉, 웹 브라우저(크롬, 사파리, 익스플로러, 파이어폭스 등)가 없으면 사용 불가)

  • Node.js가 JavaScript 를 웹 브라우저에서 독립시킴

    • Node.js를 설치하게 되면 터미널프로그램(윈도우의 cmd, 맥의 terminal 등)에서 Node.js를 입력하여 브라우저 없이 바로 실행 가능
    • 이렇게 Node.js를 이용하여 웹 브라우저와 무관한 프로그램을 개발 가능

  • Node.js를 이용하여 서버를 만들 수 있다.

    • Node.js는 내장 HTTP 서버 라이브러리를 포함
    • Node.js는 JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램임.
    • Node.js는 웹서버와 같이 확장성 있는 네트워크 어플리케이션 개발하기 위해 만들어진 소프트웨어 플랫폼으로, 특히 서버사이트에서 많이 사용됨.
    • 이전까지 Server-Client 웹사이트를 만들 때 웹에서 표시되는 부분은 JavaScript 를 사용해 만들고, 서버는 Reby, Java 등 다른 언어를 써서 만들었어야 했는데, 마침내 JavaScript 한 가지 언어로 전체 웹 페이지를 만들 수 있게 됨.

  • Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있는 것이 특징이다.

    • 이벤트 기반
      • Node.js = V8 + libuv 라이브러리 사용
      • libuv 라이브러리 = 이벤트 기반 + 논 블로킹 I/O 모델을 구현
      • 이벤트 기반(Event-driven)이란 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식을 의미
      • 즉, 이벤트 기반 시스템에서는 특정 이벤트가 발생할 때 무엇을 할지 미리 등록해두고, 이를 이벤트 리스너에 콜백함수를 등록한다.
      • 이후 이벤트가 발생하면 리스너에 등록해둔 콜백함수를 호출하며, 이벤트가 끝난 후 노드는 다음 이벤트가 발생할 때까지 대기한다.

    • 이벤트 루프 (event loop)
      • 여러 이벤트가 동시에 발생했을 때 어떤 순서로 콜백함수를 호출 할지를 이벤트 루프가 판단한다.
      • 노드는 이벤트가 종료될 때까지 이벤트 처리를 위한 작업을 반복하므로 루프라고 부른다.
    • 논 블로킹 I/O
      • 이벤트 루프를 잘 활용하면 오래 걸리는 작업을 효율적으로 처리할 수 있다.
      • 작업에는 두 가지 종류가 있는데 동시에 실행될 수 있는 작업과 동시에 실행될 수 없는 작업이다.
      • 특히 파일 시스템 접근, 네트워크를 통한 요청 작업은 입력(Input)/출력(Output)의 일종이며, 이러한 작업을 할 때 노드는 비동기 방식으로 블로킹을 만들지 않게 끔(논 블로킹) 처리한다.
      • 비동기이란 이전 작업이 완료될 때까지 대기하지 않고 동시에 작업을 수행한다.
      • 반대로 동기는 이전 작업이 끝나야만 다음 작업을 수행한다.
      • 자세하게 풀어서 아야기하면 함수 호출 시 당장 실행하는 것이 아니라(동기→블로킹) 일단 어느 곳에 쌓아 놓고 동시에 요청을 처리하고(비동기→논 블로킹) 요청이 완료된 순서대로처리(스택 이용) 한다는 말이다.

    • 싱글 스레드
      • 이벤트 기반, 논 블로킹 모델과 더불어 노드를 설명하는 키워드 중 하나는 싱글 스레드이다.
      • 자바스크립트 코드는 동시에 실행될 수 없는데 그 이유는 노드가 싱글 스레드 기반이기 때문이다.
        • 프로세스 : 운영체제에서 할당하는 작업의 단위이다. 노드나 웹 브라우저 같은 프로그램은 개별적인 프로세스이다. 프로세스 간에는 메모리 등의 자원을 공유하지 않는다.
        • 스레드 : 스레드는 프로세스 내에서 실행되는 흐름의 단위이다. 프로세스는 스레드를 여러 개 생성해 여러 작업을 동시에 처리할 수 있다. 스레드들은 부모 프로세스의 자원을 공유한다. 같은 주소의 메모리에 접근 가능하므로 데이터를 공유할 수 있다.
      • Node.js는 싱글스레드, 논 블로킹 모델로 싱글 스레드가 혼자서 일을 처리하지만 들어오는 요청 순서가 아닌 논 블로킹 방식으로 이전 작업이 완료될 때까지 대기하지 않고 다음 작업을 수행한다.

(+) Node.js 장점

  1. 웹 서버가 내장되어 있어 별도의 웹서버를 설치할 필요가 없다.

  2. I/O 작업이 많은 서버로 적합하다.

  3. 멀티 스레드 방식에 비해 적은 컴퓨터 자원을 사용한다.
    • 노드는 기본적으로 싱글 스레드, 논 블로킹 모델을 채용하므로 I/O 요청이 많이 발생하면 노드를 서버로 사용하는 것이 좋다.
    • 하지만 노드는 CPU 부하가 큰 작업에는 적합하지 않다. 우리가 작성하는 코드는 모두 스레드 하나에서 처리되기 때문에 코드가 CPU 연산을 많이 요구하면 스레드 하나가 혼자서 감당하기 어렵다.
    • 즉, 개수는 많지만 크기는 작은 데이터를 실시간으로 주고받는데 노드는 적합하다. 예를 들어 네트워트나 데이터베이스, 디스크 작업 같은 I/O에 특화되어있다. 실시간 채팅 애플리케이션, 주식 차트도 포함된다.

  4. 자바스크립트를 사용하기 때문에 JSON 형식과 쉽게 호환된다.



Yarn


Yarn 설치

npm install --global yarn
yarn --version

🌼 조금 개선된 버전의 npm
🌼 페이스북에서 만든 자바스크립트 패키지 매니저
🌼 장점 : 속도(performance), 안정성(stability), 보안성(security)

  • npm & yarn 공통점
    : 자바스크립트 패키지 매니저

    • 프로젝트에서 사용되는 라이브러리를 설치
    • 해당 라이브러리들의 종속성 및 버전 관리
      (package.json파일에서 프로젝트의 종속성과 해당 버전 번호를 추적함)

  • npm & yarn 차이점

    • (1) 속도 : 병렬 설치 (Parallel installation of packages)

      • npm : 여러 패키지를 설치시 순차적으로 설치
      • yarn : 여러 패키지 동시에 병렬로 설치 => 퍼포먼스(performance) 및 속도(speed)가 증가한다.
      • [보충 설명] yarn은 다운받은 패키지 데이터를 캐시(cache)에 저장하여 중복된 데이터는 다운로드하지 않음. 캐시에 저장된 파일을 활용함으로써 이론적으로 npm에 비해 패키지 설치속도가 매우 빠르다고 함.

    • (2) 안정성 : 자동 lock 파일 생성 (Automatic Lock file generation)

      • npm : 기본적으로 잠금 파일을 생성하지 않음. npm-shrinkwrap.json 파일이 존재 하는 경우에만 업데이트 된다고 함.

      • yarn은 (종속성이 추가되면) 항상 yarn.lock파일을 자동으로 생성하고 업데이트함.

      • 문제 예시: 예를 들어 A란 package의 최신 버전이 릴리즈 되어서 A package를 사용하려고 해도 다른 package에서 종속성에 문제가 발생하면 A package를 쓰지 못하거나 A package와 종속성이 관련된 package들를 찾아서 같이 버전업 해줘야 사용 가능하다.

    • (3) 보안성 :

      • npm : 패키지가 설치될 때 의존 관계를 가지는 다른 패키지들이 즉시 포함될 수 있도록 하는 코드를 자동으로 실행해서 편리하기도 하지만, 보안 문제에 있어 취약점이 발생 가능함.
      • yarn : yarn.lock이나 package.json 파일에 있는 것들만 설치함. 이런 방식이 모든 디바이스에 같은 패키지들을 설치하는 것을 보장하기 때문에 디바이스마다 다른 버전을 설치해서 발생할 수 있는 버그를 방지할 수 있음.
      • 문제 예시 : 예를 들어 프로젝트 구성후 버전 관리가 진행되지 않은 상태에서 새로운 프로젝트 환경 구성을 구성해 줄 때, 패키지들이 일괄적으로 최신 버전으로 유지되면서 , 현재 작업 중인 프로젝트의 패키지들과 버전이 맞지 않는 상황이 발생함. 여기서 npm update를 강제적으로 진행하게 된다면, 종속된 패키지의 업데이트로 Deprecated 된 함수가 생기고, 그로 인해 특정 함수가 동작하지 않는, '버전 불일치'로 인한 오류가 발생할 가능성이 상당히 커지게 됨.

  • npm VS. yarn 다른 명령어

  • npm VS. yarn 같은 명령어


추가 노트

  • npm 업데이트 이후, 속도는 근소한 차이
  • Yarn 장점 : 안정성, 보안성 >>> 속도
  • Yarn 단점 : 디스크 용량을 좀 더 많이 잡아먹는 편



Code Editor
: VS Code 설치


Webpack 과 Babel

보통 Webpack Bundler + Babel Loader = React 프로젝트 빌드.

리액트 프로젝트를 만들게 되면,

  • 컴포넌트를 여러가지 파일로 분리해서 저장함.
  • 컴포넌트는 자바스크립트가 아닌 JSX 라는 문법으로 작성함.

Webpack
: 여러가지의 파일을 1개로 결합하기 위해서 사용

Babel
: JSX 를 비롯한 새로운 자바스크립트 문법들을 사용하기 위해서 사용 (=JavaScript Transpiler/Compiler)


리액트 새 프로젝트 만들기

$ npx create-react-app 폴더명

$ cd 폴더명
$ yarn start 또는 npm start

(+ 추가)

package.json이란?
: 프로젝트 정보와 의존성(dependencies)을 관리하는 문서.

: 우리가 어떤 패키지(오픈소스)를 사용하는지, 패키지의 어떤 버전을 사용하는지 까지를 기록함으로써 어느 곳에서도 동일한 개발 환경을 구축할 수 있게 해줌.


< 참고 >

< 더 읽어보기 >

profile
Sujeong Ji
Studying Front-end Development 🌼
다음 포스트

React | JS, React, Component, JSX

0개의 댓글