스푸 기록 보관소

퀴즈게임, 상식의 발견, 개발 2일차- 웹서버 띄우기 본문

게임공작소

퀴즈게임, 상식의 발견, 개발 2일차- 웹서버 띄우기

스푸♡ 2025. 6. 17. 07:00

이번에 개발할 퀴즈 게임은 누구나 접속해서 플레이 할 수 있도록 웹으로 개발할 계획입니다.

그렇다면 먼저 게임을 개발할 저의 PC를 웹사이트를 띄울 수 있는 서버로 변신(?)시켜야합니다.

 

변신시키는 방법은 여러가지가 있지만

그 중에서 가장 쉽고 간단한 방법은 nodejs라는 걸 사용하는 방법이 있습니다.

 

구글신님께 nodejs에 대해 아래와 같이 물어봤습니다. 

 

 

 

 

 

 

위와 같은 사이트가 먼저 뜹니다. 클릭해서 들어가 봅시다.

 

 

 

 

 

 

 

 

 

 

 

뭐 이런저런 얘기가 나오지만 우선 다운로드 받아봅니다.

다운 받는 거는 돈이 들지 않으니 그냥 클릭!!!

그리고

다운 받은 파일을 클릭해서 실행합니다.

 

 

 

 

 

 

 

뇌를 깨끗하게[ 비우고 Next 버튼을 계속 클릭합니다.

 

 

 

 

 

 

 

완료되었다는 창이 뜨면 설치가 끝난 겁니다.

모든 준비가 완료되었습니다.

 

 

 

 

윈도우키 + R을 누르면 화면 좌측하단에 아래와 같은 창이 뜹니다.

여기에 cmd라고 입력하고 Enter를 누릅니다.

 

 

아래와 같은 윈도우 창이 뜹니다.

여기까지 뇌를 비우고 따라하셨다면 계속 비우고 따라하시길 바랍니다.

 

마치 근의 공식으로 방정식을 풀 듯, 그냥 공식대로 푼다고 생각하시고 따라하시면 됩니다.

node -v 라고 입력하면 아래와 같이 v22.16.0 이라고 뜹니다. 

 

설치된 nodejs의 버전 22.16.0 이라는 뜻입니다.

몰라도 상관없습니다.

아무 숫자가 뜬다면 설치에 성공한 겁니다.

 

 

 

QuizGame 웹사이트를 개설해 보겠습니다.

저는 C드라이브에 Project 폴더 밑에 Webgame 폴더 밑에 QuizGame폴더를 만들었습니다.

 

npm init -y 라고 입력합니다.

 

npm install express 라고 입력합니다.

영어로 add가 나오니 뭔가 추가 되었다는 거겠죠.ㅎ

 

 

 

개발 2일차는 우선 웹페이지를 띄우는데 의의를 두려고 합니다.

아래 코드는 웹서버를 띄우기 위한 코드입니다.

마치 이차방정식을 쉽게 푸는 근의 공식 같은 겁니다.

그냥 그대로 입력한 후 server.js라는 파일을 생성하겠습니다.

// server.js
const express = require('express');
const path = require('path');
const app = express();
const PORT = 3000;

// 정적 파일 제공 (public 폴더 안 HTML, CSS, JS 등)
app.use(express.static(path.join(__dirname, 'public')));

// 루트 요청시 index.html 반환
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '', 'index.html'));
});

app.listen(PORT, () => {
  console.log(`서버 실행 중: http://localhost:${PORT}`);
});

 

index.html 파일을 생성하겠습니다. 그리고 아래 코드를 입력합니다.

원래 실무에서는 index.html 생성하지 않습니다.

보안에 취약하기 때문에 다른 이름을 써야합니다.

하지만, 저는 해커한테 털려도 잃을 것이 없습니다.

그냥 index.html로 갑니다.ㅎ

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>My Web Page</title>
</head>
<body>
  <h1>Hello, Node.js 웹서버!</h1>
</body>
</html>

 

VSCode로 보면 전체 프로젝트 파일 구조는 아래와 같습니다.

해커에게 털리기 딱 좋은 구조죠.ㅎ

 

 

 

node server.js라고 입력하고 엔터를 치면

서버 실행 중이라는 메시지가 뜹니다. 

브라우저 창에 localhost:3000이라고 입력해 보겠습니다.

 

 

 

localhost는 내 PC에서 내 웹서버를 바로 붙을 때 사용하는 주소같은 거입니다.

외부에서 붙을 때는 PC IP를 사용해야합니다.

 

 

 

 

제 로컬망에 붙어있는 스마트폰에서 IP로 붙어봤습니다.

잘 열립니다.

 

 

이제 PC에서도 할 수 있고 웹브라우저에서도 할 수 있는 게임을 개발할 모든 환경이 완성되었습니다.

다음 포스트에서는 본격적으로 게임 화면을 개발해 보겠습니다.

'게임공작소' 카테고리의 다른 글

퀴즈게임, 상식의 발견, 개발 3일차 - 삽질+삽질  (16) 2025.06.22
퀴즈게임, 상식의 발견, 개발 1일차- 데이터수집 국가편  (22) 2025.06.14
퀴즈게임, 상식의 발견 - 기획  (34) 2025.06.07
타자 연습 게임, 타이핑 몬스터(7) - 스테이지, 타수  (31) 2025.04.13
타자 연습 게임, 타이핑 몬스터(6) - 플레이어 사망 및 사운드  (20) 2025.03.16
'게임공작소' Related Articles more