티스토리 뷰
Node.js에서 많이 쓰이는 express 모듈을 사용해 간단한 웹 서버를 열어보겠습니다.
Node.js v16.13.1
npm v8.3.0을 기준으로 작성된 글입니다.
버추얼 박스 우분투 가상머신에서 진행합니다.
버추얼 박스에 리눅스 운영체제 우분투 설치 & 세팅하기
버추얼 박스를 이용해 우분투 가상 머신 환경을 구축합니다. 버추얼 박스가 설치되어 있어야 합니다. 저는 v6.1.18를 사용하였습니다. 우분투 v20.04.3 환경을 구축합니다. 버추얼 박스는 가상 머신
munak.tistory.com
Node.js 설치는 아래글을 참고하시면 됩니다.
[Node.js] 설치하기
여러 설치 방법 중 NVM을 이용한 Node.js 설치 방법을 다룹니다. Ubuntu 20.04을 사용합니다. 저는 아래 글에서 생성한 AWS EC2 인스턴스에 VS 코드를 연결하여 진행하겠습니다. AWS EC2 인스턴스 생성하기
munak.tistory.com
express는 npm을 통해 설치할 수 있는 모듈중 하나로
node.js의 웹 프레임워크 입니다.
웹 서비스 개발을 위한 여러 클래스와 라이브러리들이 합쳐져 있는 형태라고 할 수 있습니다.
먼저 프로젝트를 진행할 폴더를 하나 만들어 줍니다.
이곳에서 필요한 모든 모듈, 코드, 파일들을 관리할 것입니다.
그리고 해당 폴더에서 터미널을 실행시킵니다.
이제 npm을 통해 express를 설치하면 됩니다.
express
Fast, unopinionated, minimalist web framework
www.npmjs.com
아래 명령어를 터미널에 입력합니다.
$ npm install express
다음으로 아래코드를 입력한 app.js를 생성합니다.
express를 통해 3000번 포트로 웹서버를 열고
클라이언트가 접속하면 "Hello World"를 보내주는 코드입니다.
const express = require('express')
const app = express()
app.get('/', function (req, res) {
res.send('Hello World')
})
app.listen(3000)
이제 실행시켜봅니다.
서버가 작동하는듯 터미널이 멈춰있는 것을 볼 수 있습니다.
Firefox로 http://localhost:3000/로 접속합니다.
다음과 같이 나온다면 성공입니다.
HTML 문서를 보내고 싶다면 sendFile 메소드를 사용하면 됩니다.
매개변수로 응답하고자 하는 문서의 경로를 적어줍니다.
저는 서버인 app.js와 같은 폴더에 map.html을 생성하고 다음과 같이
app.js를 수정하였습니다.
const express = require('express')
const app = express()
app.get('/', function (req, res) {
res.sendFile(__dirname + '/map.html');
})
app.listen(3000)
map.html은 다음과 같이 네이버 API를 이용해 간단한 지도를 나타낸 문서입니다.
자세한 내용은 아래글을 참고하시면 됩니다.
[네이버 지도 API] 클라이언트 아이디 발급 받기
학교 텀 프로젝트로 네이버 지도 API를 사용해보았습니다. 당시 API를 처음 사용해 보는 거라 미숙했고 지금도 잘하지 못하지만 제 작은 경험이 누군가에게 도움이 되길 바랍니다. NAVER 지도 API v3
munak.tistory.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>간단한 지도 표시하기</title>
<script type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>
<script>
//지도 객체 생성
var map = new naver.maps.Map('map', {
zoom: 6
});
</script>
</body>
</html>
다시 app.js를 실행시키고 http://localhost:3000/로 접속해 보겠습니다.
잘 접속되고 지도도 잘 뜨는것을 확인할 수 있습니다 ㅎㅎ
이번 글에서는 이런게 있다 정도만 소개하려 합니다.
코드 분석은 다음 글인 채팅 프로그램에서 조금 더 공부해 올려보겠습니다.
감사합니다.
공부한 내용을 복습/기록하기 위해 작성한 글이므로 내용에 오류가 있을 수 있습니다.
'JS | Node.js' 카테고리의 다른 글
| [Node.js] MySQL 연결하기 + RowDataPacket 데이터 사용하기 (0) | 2022.02.07 |
|---|---|
| [Node.js] Socket.IO 채팅 프로그램 만들기 (0) | 2022.01.07 |
| [JS] 네이버 지도 API 클라이언트 아이디 발급 받기 (0) | 2022.01.03 |
| [Node.js] 웹 서버 구축 후 파일 업로드 기능 구현하기 (0) | 2021.12.31 |
| [Node.js] 설치하기 (NVM, npm) (0) | 2021.12.28 |