React / Node.js, npm, npx 설치 및 기본 사용법 (Mac)

 

React

자바스크립트 UI 라이브러리로 다음과 같은 특징들을 가지고 있다.

• 가상 DOM을 통해 효율적으로 렌더링이 가능
• 컴포넌트 기반의 재사용 가능한 UI를 가짐
• 단방향 데이터 바인딩
• JSX 문법으로 직관적인 UI 작성
• SPA(Single Page Application) 개발 지원

 

 

React를 사용하는 이유

1. 코드 일관성이 높음

vanila Javascript (순수 Javascript)는 코드에 정해진 규격(변수 선언, 네이밍, 함수 선언 등)이 없기 때문에 일관성이 떨어져 서로의 코드에 적응하기 어려울 수 있다. 하지만 리액트에서는 컴포넌트 구조, 네이밍 규칙, 파일 구조, 상태 관리 방식 등 일관된 규칙을 적용할 수 있기 때문에 가독성, 유지보수성을 향상시킬 수 있다.

 

2. SPA 프레임워크

리액트는 SPA(단일 페이지 애플리케이션)으로 페이지 로딩 시 초기에 필요한 모든 리소스들을 로드하고, 이후 새로운 콘텐츠는 동적으로 로드해 전체 페이지를 새로고침하지 않고 상호 작용이 가능하게 해 여러 페이지 간의 내비게이션을 부드럽게 만들었다.

 

3. 가상 DOM 사용

vanila Javascript는 실제 DOM을 조작해 작업하기 때문에 변경 사항이 생길 시 전체 페이지를 다시 렌더링하기 때문에 코드가 많아질수록 무거워진다. 리액트는 컴포넌트의 상태가 변경될 때 가상의 DOM(실제 DOM의 경량화된 복제본)에 먼저 변경 사항을 반영하고, 실제 DOM에는 필요 변경 사항만 적용하기 때문에 성능을 최적화할 수 있다.

 

 

---

 

Node.js

브라우저 밖에서 자바스크립트 엔진을 꺼내서 쓰게 해주는 Javascript Runtime Environmenet이다. 

즉 브라우저를 키지 않아도 자바스크립트를 컴퓨터에서 수행할 수 있어 서버도 자바스크립트로 작성할 수 있게 되었다.

 

node.js 설치 방법에는 홈페이지에서 직접 다운로드 받는 방법도 있지만, nvm을 통해 여러 버전을 사용할 수 있도록 관리하는 것을 권장한다고 한다. node 버전 차이로 인해 어떤 기기에서는 정상적으로, 어떤 기기에서는 오류가 날 수도 있는데, 그럴 때 버전을 맞춰야 하기 때문에 제거/재설치를 반복하는 경우가 많아지면 번거로워진다. 때문에 제거/재설치의 과정 없이 nvm을 설치해 필요한 노드 버전을 그때그때 사용할 수 있기 때문이다.

 

 

nvm으로 다운로드

 

 

참고로 저 이미지대로 따라하면 안될 확률이 높다 (일단 내가 그랬다...)

왜냐면 nvm이 설치가 안되있을 확률도 높기 때문이다. 저 첫번째 명령어로는 안되더라

 

그전에 앞서 일단 먼저 homebrew가 설치되어있어야 한다. homebrew 설치는 여기서 다뤘었다

 

 

homebrew 버전 확인 (혹시모르니까..)

brew -v
#Homebrew 4.4.27

 

 

homebrew로 nvm 설치

- nvm 설치

#homebrew로 nvm 설치
brew install nvm

 

- nvm 환경변수 설정

#nvm 폴더 생성
mkdir ~/.nvm

#zsh 환경변수 파일 열기 (사용하는 쉘의 종류에 따라 다르다고함. .bashrc, .bash_profile, .zshenv 등...)
vi ~/.zshrc

# .zshrc 내용
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

 

.zshrc 내용의 경우에는 파일 열기를 했을 경우 vi 형식의 에디터가 열리는데, 아래 내용을 입력하고  :wq  를 입력 후 엔터를 누르면 저장이 된 상태로 vi 에디터에서 나갈 수 있다.

 

- 저장한 코드를 적용

source ~/.zshrc

 

- nvm이 진짜 설치됐는지 확인

nvm -v
#0.40.2

 

 

node 설치하기

나는 강의에서 나온대로 v.20.19.0으로 설치했다.

# Node.js 다운로드 및 설치:
nvm install 20

 

node도 진짜 설치되었는지 확인하기

node -v 
#v20.19.0
nvm current 
#v20.19.0
npm -v 
#10.8.2

 

node의 여러 버전 확인해보기

#모든 버전 확인
nvm ls-remote

 

내 버전은 우측의 v20.19.0

 

LTS는 가장 안정적이기 때문에 저 버전으로 다운로드 받기를 추천한다고 한다.

이 때 다른 버전을 사용하고 싶다! 하면 위에서 설치한 것 처럼  nvm install 버전명  을 사용하면 된다.

 

#다른 버전 설치해보기
nvm install v22.14.0

#내가 설치한 버전들 확인해보기
nvm ls

#버전 바꾸기 (이 버전을 사용하겠다고 선언)
nvm use 20.19.0

 

 

 

노드 사용해보기

 

터미널에 node를 입력한 후, 코드를 입력해보면 브라우저의 콘솔창처럼 잘 실행되는 것을 볼 수 있다!

 

 

또 이제 visual studio code에서도 실행해볼 수 있다.

 

 

 

---

 

npm

Node Package Manager의 약어로, Javascript로 만들어진 패키지들을 설치, 배포, 관리해주며, node.js를 설치하면 동시에 설치된다.

npm은 package.json 파일을 통해 패키지 의존성과 프로젝트의 정보를 관리한다. 

 

 

package.json 파일 생성

 

프로젝트의 root 디렉토리에서 아래 명령어중 하나를 실행하면 package.json 파일을 생성할 수 있다.

나는 기본설정값으로 생성하기 위해 npm init -y를 입력했다.

npm init

#기본 설정값
npm init -y
#or
npm init --yes

 

 

 

그러면 위와 같은 package.json 파일이 생성되어있는데, 파일 내의 각각의 키가 뭘 의미하냐면

 

• name
  프로젝트의 이름
  배포할 때 겹치는 이름이면 안되기 때문에 고유한 이름을 지어주는게 좋으며,
  url로도 사용되고 설치 시 디렉토리 이름이 되기 때문에 url과 디렉토리에서 모두 쓸 수 있는 이름이어야 한다.
  node나 js가 이름에 들어가면 안되며, 대문자를 포함해서는 안되고, _이나 .로 시작할 수 없다.
• version
  프로젝트의 현재 버전
  버전은 항상 세 자리로 이루어져 있는데, SemVer 방식의 버전 넘버링을 따르기 때문이다.
  기본값은 1.0.0이지만 패치 / 마이너 / 메이저 업데이트를 하면서 버전을 바꿔줄 수 있다.
  
  
• main
  프로젝트의 메인이 되는 모듈 ID
  위 이미지의 경우 npm.js 기반으로 동작
  
  
• scripts
  명령어를 미리 작성해두고 간편하게 명령어를 실행하는 단축 명령어의 집합
  npm run "스크립트"로 사용이 가능하다
  ex) npm run test
  
  
• keywords
  프로젝트 검색 시 참조되는 키워드 (npm search로 검색시 리스트에 표시됨)
  
  
• author
  프로젝트 작성자 정보로 한 사람만 지정한다.

"author": {
    "name": "Your Name",
    "email": "you@example.com",
    "url": "http://your-website.com"
  },
  // 또는
  "author": "Your Name <you@example.com> (http://your-website.com)"

 

• license
  배포한 패키지의 저작권에 대한 정의
  값으로는 ISC / MIT 가 많이 쓰인다.
  ISC : 무료 사용 / 무료 복사 / 출처 없어도 가능
  MIT : 무료 사용 / 무료 복사 / 출처 남겨야됨
  
  
• description
  프로젝트 설명
  keywords처럼 npm search로 검색 시 리스트에 표시됨

 

---

 

 

npm 패키지 설치하기

 

npm에는 수많은 패키지들이 있고 실제로 많이 사용되곤한다.

최근 인기있는 npm중 뭐가 더 사용되는지 그 추세를 알아보고싶다면 npm trends를 참고해서 인기있는 npm들을 확인해볼 수 있다.

 

https://npmtrends.com/angular-vs-react-vs-vue

 

 

일단 npm에 있는 패키지들을 사용하기에 앞서 javascript 모듈을 사용할 때 CommonJS (node.js의 표준)포맷과 ES6의 모듈 시스템을 비교해볼 필요가 있다.

 

	CommonJs (node.js)	ES6 (브라우저 환경)
내보내기	module.exports	export default
가져오기	require	import

 

 

1. CommonJS 

 

간단하게 곱하기 결과를 출력하게 하는 모듈 multiply.js와 구구단 2단의 결과를 도출할 two.js를 생성했다.

 

multiply.js

const multiply  = (x,y) => console.log(`${x} x ${y} = ${x*y}`);

module.exports = multiply;

 

two.js

const multiply = require('./multiply.js');

multiply(2,3);
multiply(2,4);
multiply(2,5);
multiply(2,6);

/*
2 x 3 = 6
2 x 4 = 8
2 x 5 = 10
2 x 6 = 12
*/

 

 

2. ES6

 

multiple.js

const multiply  = (x,y) => console.log(`${x} x ${y} = ${x*y}`);

export default multiply;

 

two.js

이 때 맨위 import문을 작성할때 from 부분은 from "./multiply" 으로 자동완성이 될 수도 있는데, 그냥 두면 오류가 발생하니 .js를 뒤에 붙여 확실히 경로를 정해주는 편이 좋다..

import multiply from "./multiply.js";

multiply(2,3);
multiply(2,4);
multiply(2,5);
multiply(2,6);

 

이렇게 하면 오류는 없다만 경고 메시지가 뜨는데,

ES6으로 모듈 시스템을 만들고자 할 때는 package.json에서 다음과 같이  "type" : "module"  을 추가해주는게 좋다. 

 

package.json

{
  "name": "250402",
  "version": "1.0.0",
  "main": "npm.js",
  "type": "module",
  // 생략...
  }

 

 

---

 

진짜 npm 패키지 설치하기

 

날짜를 다루는 데 도움이 되는 Day.js를 먼저 설치해볼 것이다. 

 

npm i dayjs
#i는 install의 약어

 

설치하면 해당 패키지의 모듈이 프로젝트 폴더에 추가되고 내 package.json에도 추가가 된다.

 

 

이제 commonJs와 ES6에서 day.js를 불러와서 간단하게 사용하는 방식을 알아볼 것이다.

 

 

1. CommonJs 

 

day.js

const dayjs = require('dayjs');

const now = dayjs();

console.log(now.toString());
console.log(now.format());
console.log(now.format('YYYY-MM-DD')); // 사용자 정의 형식
console.log(now.format('YYYY년 MM월 DD일')); // 한글 형식

const date1 = dayjs('2024-04-02');
const date2 = dayjs('2025-04-02');

console.log(date2.diff(date1, 'day'));// 일 단위 차이
console.log(date2.diff(date1, 'month'));

 

결과

사실 여기서 이상한게 있다면... 이걸 캡쳐했을 시점에서는 내가 형식을 yyyy-mm-dd 이런식으로 소문자로 써서 mm, dd부분이 분(minute)과 dd(요일)로 출력되어있다...

 

 

2. ES6

 

위에 서술한 것 처럼 package.json에 "type" : "module",을 추가해줘야 한다.

 

day.js

import dayjs from "dayjs";

const now = dayjs();

console.log(now.toString());
console.log(now.format());
console.log(now.format('YYYY-MM-DD')); // 사용자 정의 형식
console.log(now.format('YYYY년 MM월 DD일')); // 한글 형식

const date1 = dayjs('2024-04-02');
const date2 = dayjs('2025-04-02');

console.log(date2.diff(date1, 'day'));// 일 단위 차이
console.log(date2.diff(date1, 'month'));

 

이런식으로 패키지를 사용해 또 다른 패키지를 만들 수도 있는데, 이 경우 패키지에 대한 의존성이 생긴다.

 

package-lock.json

 

아까 day.js를 설치한 이후로 package-lock.json이라는 파일이 생성됐는데, 

package.json이 지금 프로젝트의 기본 설정 파일이라면, package-lock.json은 정확한 버전의 의존성 및 하위 의존성을 기록한다.

예를 들어서 next를 설치했을 때, package.json에는 다음과 같이 추가된다.

 

package.json의 dependencies 값

 

반면 package-lock.json에는 다음과 같이 추가된 것을 볼 수 있다....

 

 

next에서 또 사용하는 다양한 module들이 추가로 설치되어있다. 이는 next가 next 자체뿐만이 아닌 다른 패키지에도 의존하여 만들어진 패키지이기 때문이다.

package-lock.json에는 next가 의존하고 있는 각각의 패키지들이 조금이라도 어긋나면 실행되지 않을 수 있기 때문에 하위 의존성도 기록하고 있고, 이로 인해 누구나 동일한 환경에서 실행이 가능해진다.

 

next를 삭제하면 800줄이 넘어가던 패키지 내역들이 사라지는 걸 확인할 수 있다.

 

 

package.json / package-lock.json

 

 

 

---

 

npx

Node Package eXecute의 약어로, npm 패키지를 실행하는 도구다. npm 5.2.0 이후로 버전에 포함됐다.

 

npx가 필요한 경우

1. 패키지를 일회성으로 사용 시

• npm : 패키지 다운 => 사용 => 사용 후 삭제
• npx : 패키지 실행

 

cowsay는 재미를 위해 사용되는 프로그램으로, 주로 메시지를 강조하거나 재미있는 효과를 위해 활용된다. 설치없이도 사용이 가능하다.

아래와 같이 npx cowsay hello를 명령해봤다.

 

 

이 때 처음에는 need to install ~....하라면서 설치하라는거 아닌가?? 싶었는데

이는 패키지가 로컬이나 글로벌에 없으면 그냥 임시로 다운로드 되는 것 뿐이며, 영구적이지 않다. 터미널을 다시 열 경우 재다운로드 해야한다. (package.json이나 package-lock.json에 추가되는 것처럼 설치되는 것이 아님)

npx -y cowsay "hello"나 -y를 --yes로 변경해 작성하면 자동으로 승인돼서 위와 같은 프롬프트는 뜨지 않는다고 한다.

 

cowsay를 npm으로 설치하기 ⬇️

1. npm i cowsay로 설치

 

2-1. package.json의 scripts에 특정 구문을 cowsay라는 명령어로 추가후 실행

2-2. scripts에 추가하는 것 말고 cowsay.js를 따로 생성 (commonjs 식으로 진행)

//cowsay.js
const cowsay = require('cowsay');

console.log(
    cowsay.say({
        text: 'Hello...',
        e: 'oO',
        T: 'U'
    })
);

 

 2-2-1. 터미널에 node cowsay.js 명령어 입력

 

 

 

2. 프로젝트 환경 구축 시

패키지를 npm으로 설치하고 사용할 경우 내가 직접 바꾸지 않는 한 계속 같은 버전이다.

그러나 npx로 실행시키면, 실행시킬 때 마다 최신 버전을 불러오기 때문에 버전에 대해 크게 신경쓸 필요가 없어진다.

 

예를 들어 리액트를 npx로 실행해봤다.

 

npx create -react-app react-app

 

 

17500줄이 넘어가는 package-lock.json 파일....

 

 

기존 폴더 npx-practice에 react-app 프로젝트가 생성된 걸 확인할 수 있다.

react-app의 기본 구조를 생성하는 데에만 17500줄이 넘어가는데 이 패키지를 주기적으로 관리해주기란 상식적으로 불가능하다.

때문에 npx를 사용하면 설치 없이 최신 버전을 자동으로 다운해 실행할 수 있다.

 

---

 

nvm 설치는 2어진님의 블로그를,

npm의 package.json 관련 내용은 쫄리님의 블로그를 많이 참고했다... 감사합니다:)