(5) JavaScript Module - npm, 서드파티 모듈

Node.js는 다른 개발자나 회사들이 만들어 놓은 모듈이 정말 많은데

이러한 모듈을 서드파티 모듈이라고 했을 때,

서드파티 모듈은 npm(node package manager) registry라는 곳에 모여 있으며

즉 npm으로 서드파티 모듈을 설치할 수 있다.

 npm install

우선 터미널에서 npm intall date-fns을 입력하는데

여기서 npm install 뒤에는 설치할 서드파티 모듈 이름을 적는 곳이다.

서드파티 모듈의 date-fns는 이미 만들어져있는 모듈이며 날짜를 다를 때 쓰이는 모듈이다.

 

설치가 완료되면 기존의 mjs파일 말고 다음과 같이 파일들이 생성되는데

우선 node_modules 디렉토리를 먼저 살펴보자.

node_modules는 방금 설치한 date-fns 모듈이 저장되는 곳이다.

date-fns 디렉토리를 열어보면 모듈에 해당하는 코드가 전부 들어있는 곳이라고 볼 수 있다.

저 모든 서드파티 모듈의 코드를 이해할 필요는 없고 어떻게 사용하는지만 알면된다.

 

여기서 중요한 점은 node_modules 디렉토리와 json 파일들은

npm install을 실행한 디렉토리에 생기게 된다는 것인데

그말은 다른 폴더에서는 date-fns를 사용할 수 없다는 것이다.

처음에 터미널에서 04.npm이라는 디렉토리에서 npm install을 실행했으니

04.npm외의 다른 폴더에는 당연히  서드파티 모듈을 설치하지 않았으니 사용할 수 없는 것이다.

이제 한번 서드파티 모듈을 직접 사용해보자

---

서드파티 모듈 사용하기 - date-fns 

date-fns는 자바스크립트에서 날짜와 시간을 다룰 때 유용한 기능을 제공해주는 라이브러리이다.

date-fns는 국제화와 같이 최신 기능을 다양하게 지원해주기에

자바스크립트환경에서 다재다능하게 사용할 수 있으며 속도가 빠르고, 크기도 가볍다.

한번 날짜 객체를 원하는 문자열 형태로 바꿔보자.

---

특정 문자열 형태로 바꾸는 과정을 포매팅(formatting)이라고 하는데 말 그대로 format 함수를 사용한다. 먼저 다음과 같이 format 함수를 가져온다.

// main.mjs

import { format }  from 'date-fns'

서드파티 모듈도 똑같이 import 문법을 사용하는데from 뒤에 원래 파일 경로를 작성했지만 우리는 서드파티 모듈을 사용하기 때문에뒤에 모듈의 이름인 'date-fns'를 작성해주면 된다.

 

다음과 같이 format 함수를 사용하는 코드를 추가해보자

// main.mjs

import { format }  from 'date-fns'

const dateString = format(new Date(2024,12,24), 'MM/dd/yyyy')

console.log(dateString);

자바스크립트의 Date 객체(2024, 12, 24)와 format 형식을 아규먼트('MM/dd/yyy')로 전달해 주면

형식대로 날짜를 포매팅 해준다.

※ new Date 부분에서 dd(month)는 인덱스 0에서 시작한다

 

date-fns 라이브러리는 날짜 포매팅 외에

날짜 정렬, 날짜 간의 연산 등 다양한 기능을 지원한다.

 

자바스크립트로 웹 페이지 화면을 만들 때는

날짜를 포매팅을 해야하는 경우가 많이 때문에 

이런 날짜 라이브러리 하나 정도는 알고 있는 것이 좋다.

 

date-fns 라이브러리의 다양한 정보 확인하기 - link