01장 노드JS 개념 이해하기 + 다운로드 (npm과 yarn이란?)

노드 JS란 무엇일까?

노드js

안녕하세요 jju_developer입니다.

오늘부터 대망의 react에 대해서 공부를 하게되었습니다!

 

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.

말이 참 어렵죠?

 

Java 언어가 모든 OS 운영체제에서 Virtual Machine (VM) 환경 안에서 Runtime 이 구동되듯이

Node.JS 는 웹브라우저에 종속적인 자바스크립트에서 외부에서 실행할 수 있는 Runtime 환경을

Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경을 제공하게 됩니다.

이것을 Node.JS 라고 정의할 수 있습니다.

 

웹 브라우저에서 동작하는 간단한 웹 애플리케이션은 브라우저만으로도 개발을 할 수 있지만!

프로젝트의 규모가 커짐에 따라 React, jQuery와 같은 외부 라이브러리를 도입하거나 Babel, Webpack, ESlint 등 여러 가지 도구를 사용해야 할 필요가 있다. 이때 Node.js와 npm이 필요한 것입니다.

 

간단히 말해 브라우저에서만 동작하던
자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경이
Node.js이라는 것입니다.

npm(node package manager)은 자바스크립트 패키지 매니저입니다.

Node.js에서 사용할 수 있는 모듈들을 패키지화하여 

모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공합니다.

자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지를 검색하여 재사용할 수도 있습니다.

 

Node.js를 이용하여 서버를 만들 수 있다는 것입니다.

이전까지 Server-Client 웹사이트를 만들 때 웹에서 표시되는 부분은

JavaScript 를 사용하여 만들어야만 했으며, 서버는 Reby, Java 등 다른 언어를 써서 만들었어야 했는데

마침내 한 가지 언어로 전체 웹 페이지를 만들 수 있게 된 것입니다.

---

npm과 yarn이란?

npm과 yarn은 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자입니다.

전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스(opens new window)에

올리면 npm, yarn과 같은 패키지 관리자를 통해 설치 및 삭제가 가능합니다.

그리고 명령 줄 인터페이스(Command-line interface, CLI)를 통해 패키지 설치 및 삭제뿐 아니라 패키지 버전 관리, 의존성 관리도 편리하게 할 수 있습니다.

npm과 yarn의 정확한 차이는 무엇일까요? 우리는 어떤 툴을 사용해서 패키지 관리를 해야 할까요?

#npm이란?
npm은 노드 패키지 매니저(Node Package Manager)의 줄임말로 노드를 설치할 때 

자동으로 설치되는 기본 패키지 관리자입니다. 

 

크게 두 가지 역할을 수행합니다.
1. 온라인 플랫폼 (opens new window)입니다.

사람들이 노드 패키지를 만들고, 업로드하고, 공유할 수 있는 공간으로 누구나

온라인 플랫폼(npm 레지스트리)에 게시된 패키지를 사용할 수 있습니다.

2. 명령 줄 인터페이스입니다.

온라인 플랫폼과 상호 작용하기 위해 명령 줄 인터페이스를 사용하며 패키지 설치 및 제거가 가능합니다.

#yarn이란?

2016년 페이스북에서 개발한 패키지 관리자입니다.

리액트(React)와 같은 프로젝트를 진행하며 겪었던 어려움을 해결하기 위해 개발되었고,

npm 레지스트리와 호환하면서 속도나 안정성 측면에서 npm보다 향상되었습니다.

2016년 페이스북이 공개한 아티클 (opens new window)을 읽어보시면 좋을 것 같습니다

 

속도
npm과 yarn의 주요 차이점 중 하나는 패키지 설치 프로세스를 처리하는 방법입니다. npm은 패키지를 한 번에 하나씩 순차적으로 설치합니다. 그에 비해 yarn은 여러 패키지를 동시에 가져오고 설치하도록 최적화되어 있어 패키지 설치 속도 측면에서 yarn이 npm보다 빠릅니다.

#보안
yarn은 보안 측면에서 npm보다 더 안전한 것으로 알려져 있습니다. npm은 자동으로 패키지에 포함된 다른 패키지 코드를 실행합니다. 이로 인해 보안 시스템에 몇 가지 취약성이 발생하며 나중에 심각한 문제가 발생할 수 있습니다. 반면에 yarn은 yarn.lock 또는 package.json파일에 있는 파일만을 설치합니다. 보안은 yarn의 핵심 기능 중 하나이지만 최근 npm의 업데이트에서 npm의 보안 업데이트도 크게 향상되었습니다.

 

[결론] npm vs. yarn
NPM에서 여러 패키지를 설치할 때, 패키지가 완전히 설치될 때까지 기다린 후 다른 패키지를 설치합니다.

즉, 작업은 패키지별로 순차적으로 실행됩니다.

하지만 YARN은 이러한 작업을 병렬로 설치하므로 퍼포먼스와 속도가 증가합니다.

---

Node.js 설치하기

다운로드 & 설치
• 다운로드: https://nodejs.org/dist/v16.13.0/
• 설치파일: node-v16.13.0-x64.msi

 

nodejs 다운로드

다운로드가 완료되면 

이러한 커맨드 창이 뜹니다.

커맨드 창이 뜨면 아무 키나 눌러주고

변경하기를 허락하냐고 하면 허락하기를 눌러줍니다.

이게 뭐지..? 일단 넘기기

관리자 권한으로 실행

설치한 노드 js를 확인하기 위해서 버전을 확인해 줍니다.

# node 버전 확인
D:\dev\workspace\react>node -v
v16.13.0
# npm 버전 확인
D:\dev\workspace\react>npm -v
8.3.0

# 추가 작업(옵션입니다.): 명령 프롬프트를 관리자 권한으로 실행하여 아래와 같이 수행합니다.# C:\Windows\system32>npm install --global --production windows-build-tools@4
# C:\Windows\system32>choco install python visualcpp-build-tools
# C:\Windows\system32>npm config set msvs_version 2017

 

저는 nam만 깔았습니다.

---

커맨드 창에서 node 사용

 

이렇게 보면 커맨드 창에서 자바스크립트를 사용하는 모습을 볼 수 있습니다.

 

---

yarn 설치와 리액트 앱 생성

npm으로 yarn을 설치합니다.

위에서 한걸 따라 하셨으면 따로 설치 없이 확인이 가능합니다.

앞으로 각종 설치는 npm 대신 yarm을 사용하도록 합니다.

VSCODE로 돌아가서

커맨드 창을 변경해 줍니다.

 

 

커맨드를 변경

 

리액트 앱 생성
create-react-app client 명령어로 client라는 프로젝트를 생성합니다.

프로젝트 생성한 후 client 경로를 보면 package.json, node_modules 등의 파일과 폴더가 생성되었습니다.

# 1. 실습 디렉터리 생성하기
D:\dev\workspace\react>mkdir lab
D:\dev\workspace\react>cd lab

# 2. 리액트 앱 생성하기
D:\dev\workspace\react\lab>yarn create react-app client

# 3. 리액트 앱 구동하기
D:\dev\workspace\react\lab>cd client
D:\dev\workspace\react\lab\client>yarn start

 

아래 이미지 참조!

 

오류가 뜨면 VSCODE 껐다가 다시 키면 정상적으로 다운로드 가능합니다.

 

다운로드 후

# 3. 리액트 앱 구동하기
D:\dev\workspace\react\lab>cd client
D:\dev\workspace\react\lab\client>yarn start

이 부분을 실행하면 아래와 같습니다.

저는 이미 클론을 받은 것이 있기 때문에

이 부분이 실행이 된 것입니다.

import logo from './logo.svg';

import './App.css';

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer"

        >

          Learn React

        </a>

      </header>

    </div>

  );

}

export default App;

App는 하나의 기능을 정의해 놓은 것입니다.

 

이 부분이 index.js에 import 되어 사용되게 됩니다.

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

 

서버를 내리려면 terminal 창에 컨트롤+C를 누르면 서버가 내려갑니다.

코딩 학원에서 강사님 수업 따라가면서 놓치신 부분있으면

댓글 달아주세요

 

감사합니다.