http-server로 Vanilla JS 프로젝트 실행하기

들어가기 전에

(Arkain 개발환경에서 작업)

Arkain에서 작업한 Vanilla JS 프로젝트를 실행하려고 한다.

이번에는 React, Python처럼 기본적으로 세팅된 스택이 아닌, Blank 컨테이너를 생성해 프로젝트를 실행해볼 예정이다.

VSCode에서는 보통 Go Live 기능을 사용해 구현 화면을 바로 확인할 수 있지만, 이번 환경에서는 별도의 설정이 필요하다.

설정 과정에 앞서, Node.js와 npm이 설치되어 있지 않다면 먼저 이를 설치해야 한다.

1. Node.js & npm 설치

apt update && apt install -y nodejs npm

위 명령어를 통해 nodejs와 npm를 설치하고, 아래 명령어를 통해 정상적으로 설치되었는지 확인해본다.

node -v
npm -v

버전이 잘 출력되는 것을 보니 Node.js와 npm이 제대로 설치된 것 같다.

2. http-server를 사용한 빠른 실행

이제 바닐라 JS 프로젝트를 구름 IDE에서 실행하고자 http-server 패키지를 사용한다.

1) http-server 설치

npm install -g http-server

2) 프로젝트 폴더로 이동

cd /workspace/sudoku

3) 서버 실행

http-server -p 8080

이제 구름 IDE에서 제공하는 Preview 버튼을 클릭해보니 실행이 잘 된다.

기억하려고 정리하는 명령어

• apt(Advanced Packaging Tool)란?
  • 소프트웨어 패키지를 설치, 제거, 업데이트할 때 사용하는 패키지 관리 명령어
  • apt update, apt upgrade, apt install [패키지명], apt remove [패키지명] …
• &&란?
  • 앞 명령어(apt update)가 성공했을 경우에만 다음 명령어(apt install ...)를 실행
• apt install -y nodejs npm란?
  • nodejs와 npm을 설치하는 명령어
  • y 옵션은 **"yes"**를 의미하며, 설치 중 "이걸 설치할까요?"라는 질문에 자동으로 **모두 예(yes)**라고 응답 (즉, 사용자 개입 없이 설치가 진행)
• http-server?
  • 정적 파일(HTML, CSS, JS 등)을 브라우저에서 띄워볼 수 있게 해주는 Node.js 기반 로컬 웹 서버