Node.js와 Vue3 PDF 미리보기 & Node 버전 관리 정리

Node.js & Vue3 PDF 미리보기, Node 버전 관리 총정리

1. Vue3에서 PDF 미리보기 구현

Node 16 환경에서 Vue 3로 PDF 미리보기를 하고 싶다면, @vue-pdf-viewer/viewer 라이브러리를 추천합니다. 서버에서 PDF를 다운로드하지 않고 바로 미리보기로 보여줄 수 있습니다.

설치

npm install @vue-pdf-viewer/viewer

기본 사용 예시 (Composition API)

<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
const pdfUrl = "/your-server-path/yourfile.pdf";
</script>

<template>
  <div style="width: 1028px; height: 700px;">
    <VPdfViewer :src="pdfUrl" />
  </div>
</template>

Blob 데이터로 미리보기 (고급)

<script setup>
import { ref, onMounted } from 'vue'
import { VPdfViewer } from "@vue-pdf-viewer/viewer"

const pdfBlobUrl = ref("")

onMounted(async () => {
  const response = await fetch("/your-server-path/yourfile.pdf")
  const blob = await response.blob()
  pdfBlobUrl.value = URL.createObjectURL(blob)
})
</script>

<template>
  <div style="width: 1028px; height: 700px;">
    <VPdfViewer v-if="pdfBlobUrl" :src="pdfBlobUrl" />
  </div>
</template>

---

2. Node.js 버전 및 패키지 관리 명령어

현재 Node.js 버전 확인

node -v
node --version

설치된 패키지 리스트 확인

• Yarn (로컬): yarn list
• Yarn (글로벌): yarn global list
• npm (로컬): npm list --depth=0
• npm (글로벌): npm list -g --depth=0

Yarn 캐시 삭제 및 재빌드

yarn cache clean
rm -rf node_modules yarn.lock
yarn install
yarn build

---

3. Node.js 버전 관리 및 전환

여러 Node.js 버전을 설치하고 전환하려면 nvm(Node Version Manager)을 사용하세요.

nvm 설치

• macOS/Linux: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
• Windows: nvm-windows 공식 설치 파일 다운로드 후 설치

nvm 주요 명령어

nvm ls            # 설치된 Node.js 버전 목록 보기
nvm ls-remote     # 설치 가능한 Node.js 버전 목록 보기
nvm install 18.17.1  # 특정 버전 설치
nvm use 18.17.1      # 특정 버전 사용
nvm alias default 18.17.1  # 기본 버전 설정

현재 사용 중인 Node.js 버전 확인

nvm list 명령어를 실행했을 때 -> system으로 표시되면, 현재 nvm이 관리하지 않는 시스템 기본 Node.js를 사용 중이라는 뜻입니다.

기본 버전 변경 방법

nvm alias default 16.17.1
# 또는
nvm use 18.20.4

---