[WebGPU] Node.js & npm 설치하기
Written on February 7th, 2024 by Imeamangryang
WebGPU란?
최신 GPU의 기능들을 웹에서 사용하기 위한 API다.
기존에는 WebGL이 주로 사용되었지만, 성능적인 제약이 많았다. 이를 보완하기 위해 나온 것이 WebGPU다.
WebGL과 달리 WebGPU는 Vulkan, Metal, Direct3D 12가 제공하는 API를 기반으로 모바일 및 데스크톱 플랫폼에 고성능의 그래픽 처리 환경을 제공해준다.
Node.Js & npm(Node Package Manager) 설치하기
우선 WebGPU를 사용하기 위한 환경으로 Node.js와 npm을 설치해준다.
먼저 아래 사이트로 들어가 npm을 설치한다.
사용하는 운영체제에 해당하는 링크로 들어가 nvm을 설치한다.
본인은 Windows 10을 이용하고 있어 nvm-windows를 선택했다.
해당 경로로 들어가 nvm을 설치해주자.
Command Prompt를 실행하여 다음처럼 뜬다면 제대로 설치된 것이다.
설치했다고 끝난 것이 아니다. nvm을 통해 어떤 버전을 사용할 것인지 지정해주어야한다.
무엇을 하느야에 따라 자유롭게 정할 수 있겠지만 일단은 Latest version으로 설치하여 지정해주었다.
프로젝트 생성하기
이제 프로젝트를 만들 차례이다.
원하는 경로에 프로젝트 폴더를 만들고 Command Prompt에서 해당 경로로 들어가 다음 명령어를 입력한다.
npm init -y
그럼 아래와 같이 json파일이 하나 만들어질 것이다.
그 다음 테스트 용도로 간단한 html파일을 만들고 package.json파일의 scripts 부분을 아래와 같이 수정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
website test!
</body>
</html>
{
"name": "1.npm_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npm run install-missing-dependencies",
"install-missing-dependencies": "npm i",
"serve": "http-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"http-server": "^14.1.1"
}
}
다시 Command Prompt로 돌아가 해당 명령어를 입력한다.
npm start
그러면 위와 같이 파일들이 생길 것이다.
이제 http server를 열어 결과를 확인해보자.
Command Prompt에 들어가 http-server를 실행한다.
npm run serve
서버가 정상적으로 실행되었다면 아래 주소를 통해 결과를 확인할 수 있다.
