Node.js 용 외부 패키지 설치하기

This is an excerpt from the book "DO it! 리액트 모던 웹개발" by 전예홍.

This is a study article I've written to document my own practice and summarize the content.

책 무지 좋습니다! 따라하면서 이해가 됩니다!!

 

---

Node.js 용 외부 패키지 설치하기

npm 설치 옵션

npm i 옵션	의미	단축 명령
--save	실행에 필요한 패키지 설치. package.json 파일의 "dependencies" 항목에 등록됨	-S
--save-dev	개발에 필요한 패키지 설치. package.json 파일의 "devDependencies" 항목에 등록됨	-D

npm은 package.json 파일이 있는 디렉터리에서 실행하느 명령으로,

프로젝트 구현에 필요한 다양한 오픈소스 패키지를 npm install 또는 간단히 npm i 명령으로 설치할 수 있습니다.

설치 시, 위 2가지 옵션을 줄 수 도 있습니다.

 

Node.js 패키지는 자바스크립트로 개발된 것도 있고

타입스크립트로 개발된 것도 있습니다.

 

자바스크립트로 개발된 패키지를 타입스크립트에서 사용하려면

@types/로 시작하는 타입 라이브러리를 추가로 설치해 줘야 합니다.

 

이렇게 npm i 명령으로 패키지를 설치하면

package.json 파일이 있는 디렉터리에 node_modules라는 서브 디렉터리가 생기고

여기에 패키지가 설치됩니다.

 

프로젝트를 공유할 때는 node_modules 디렉터리를 지웁니다. 

 

---

가짜 데이터 생성을 위한 chance, luxon 패키지 설치하기

chance 패키지는 다양한 종류의 그럴듯한 가짜 데이터를 제공해 줍니다.

그리고 luxon 패키지는 '2023/03/24'와 같은 날짜를 '30분 전' 형태로 만들어 주는 기능을 제공합니다.

 

chance와 luxon은 자바스크립트로 구현되어 있으므로,

타입스크립트에서 사용하려면

@types/chance

@types/luxon

타입 라이브러리가 추가로 필요합니다.

 

npm i chance luxon
npm i -D @types/chance @types/luxon

 

설치가 잘 되었다면

가짜 데이터를 만들어봅니다.

 

cd src
mkdir data
cd data
touch index.ts util.ts image.ts chance.ts date.ts
cd ../..

 

---

util.ts 파일 작성하기

makeArray 함수는 자바스크립트가 기본으로 제공하는 Array 클래스를

간결하게 사용하기 위해 만들었다고 합니다.

 

Array는 클래스 이므로 다음처럼 new 연산자로 인스턴스를 만들어야 합니다.

export const makeArray = (length: number) => new Array(length).fill(null)
export const range = (min: number, max: number): number[] =>
  makeArray(max - min).map((notUsed, index) => index + min)
export const random = (min: number, max: number): number =>
  Math.floor(Math.random() * (max - min)) + min

 

---

image.ts 파일 작성하기

Lorem Picsum(picsum.photos/)는 다양한 테마의 고해상도 이미지를 제공하는 사이트 입니다.

이 사이트의 무료이미지의 URL은 다음 image.ts 파일에서 picsumUrl 함수를 호출하여 얻습니다.

 

---

import * as U from "./util"
// prettier-ignore
export const picsumUrl = (width: number, height: number): string =>
  `https://picsum.photos/${width}/${height}`

export const randomImage = (
  w: number = 1000,
  h: number = 800,
  delta: number = 200
): string => picsumUrl(U.random(w, w + delta), U.random(h, h + delta))

export const randomAvatar = () => {
  const size = U.random(200, 400)
  return picsumUrl(size, size)
}

chance.ts 파일 작성하기

이제 util.ts 와 image.ts 파일에 정의한 함수를 이용해

chance.ts 파일을 구현합니다.

 

import Chance from "chance"
const chance = new Chance()

export const randomUUID = () => chance.guid()
export const randomName = () => chance.name()
export const randomEmail = () => chance.email()
export const randomId = () => chance.fbid()
export const randomJobTitle = () => chance.profession()
export const randomCompanyName = () => chance.company()
export const randomSentence = (words = 5) => chance.sentence({words})
export const randomTitleText = (words = 3) => chance.sentence({words})
export const randomParagraphs = (sentences = 3) => chance.paragraph({sentences})

 

---

date.ts 파일 작성하기

import {DateTime} from "luxon"

export const makeRandomPastDate = () => {
  const value = new Date().valueOf()
  const n = 100000
  return new Date(value - Math.floor(Math.random() * n * n))
}

export const makeRelativeDate = (date: Date) =>
  DateTime.fromJSDate(date).startOf("day").toRelative()

export const randomRelativeDate = () => makeRelativeDate(makeRandomPastDate())

export const makeDayMothYear = (date: Date) =>
  DateTime.fromJSDate(date).toLocaleString(DateTime.DATE_FULL)
export const randomDayMothYear = () => makeDayMothYear(makeRandomPastDate())

---

index.ts 파일 작성하기

src/data 디렉터리의 index.ts 파일은

src/data 디렉터리에 구현한 기능을 호출하는 쪽에서

간편하게 쓸 수 있게 하는 것을 목적으로 합니다.

 

export * from './util'
export * from './image'
export * from './chance'
export * from './date'

 

 

---

가짜 데이터 사용해보기

src/App.tsx 파일에 다음 코드를 작성하여

src/data에 구현한 가짜 데이터 함수들을 사용합니다.

import * as D from "./data"

export default function App() {
  return (
    <div>
      <p>
        {D.randomName()}, {D.randomJobTitle()}, {D.randomDayMothYear()}
      </p>
      <img src={D.randomAvatar()} height="50" />
      <img src={D.randomImage()} height="300" />
    </div>
  )
}

 

---

프로젝트 정리

 

npm start 명령이 실행되는 터미널을 Ctrl + C를 눌러 정지합니다.

디스크용량도 절약하고

깃허브에 올릴 때를 대비해 node_modules 디렉터리와 package-lock.json 파일을 다음 명령으로 지워도 좋습니다.

node_modules 디렉터리에 있는 패키지는 npm i 명령으로 언제든 다시 설치할 수 있습니다.

 

rm -r -force node_modules
rm package-lock.json