* 저번 포스팅에서 node.js 로 웹서버를 구축한 뒤 다음과 같이 간단하게 'Hello World'가 띄워지는 웹페이지를 확인해보았다.
이번에는 html 파일을 이용해 웹페이지를 만들어볼 것이다.
1. Express 설치
-
Express.js는 Node.js 를 편리하게 사용할 수 있는 웹 프레임워크를 뜻한다. 웹개발을 위한 다양한 기능을 제공한다고 한다.
-
Express를 설치하기 전에 'npm'이 미리 설치되어 있어야 한다.
-
npm 설치 : npm install -g express-generator
-
express 설치 : npm install express
-
2. 웹페이지에서 띄워줄 html 파일 작성하기
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>웹페이지 타이틀</title>
</head>
<body>
<p>Hello world!!!!!!!!!!!</p>
<p>Hi!</p>
</body>
3. 터미널로 실행시킬 js 파일 작성하기
var express = require('express'); // express framework 사용
var fs = require('fs'); // 파일 로드시 사용
var http = require('http'); // node 내장 모듈 불러옴
var app = express();
var hostname = '172.30.120.240'; // localhost
var port = 3000;
console.log('Server running at http://'+hostname+':'+port);
app.get('/', function (req, res) {
fs.readFile('index.html', function(error, data){
if(error){
console.log('에러가 발생했습니다.');
}else{
console.log('웹페이지 실행!');
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(data);
}
})
});
var server = app.listen(3000, function () {
console.log('앱 로드 성공입니까 11');
});
4. 웹서버 실행하기
- 터미널에 위 js 파일이 있는 경로로 들어가 'node 파일이름.jsp' 를 입력해 웹서버를 실행시킨다.
-
아래와 같이 호스트 ip를 웹브라우저에 입력하면 제대로 띄워지는 것을 확인할 수 있다.
** 이제 옛날에 했던 html , css, javaScript 이용해서 페이지를 보기좋게 만들어주면 된다... 갈 길이 멀다...
'iOS > iOS 앱개발' 카테고리의 다른 글
| [swift] 웹통신하기 - 3. 간단 예제 : Navtive 버튼을 클릭 시 웹뷰 배경색 변경하기 (0) | 2020.03.08 |
|---|---|
| [swift] WKWebView란 (0) | 2020.03.08 |
| [swift] 웹통신하기 - 1. node.js를 이용한 간단한 웹서버 구축 (0) | 2019.12.01 |
| [swift] 웹통신하기 - 0. 네트워크 기본 지식 (0) | 2019.12.01 |
| [swift] 앱에서 다른 앱 호출하기2 (1) | 2019.12.01 |