HTML 파일에서 이벤트 처리하는 방법
<!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>
<h1 onclick="console.log('인라인')">hello.html 파일</h1>
<script>
const h1 = document.getElementsByTagName('h1')[0];
h1.onclick = function(){
console.log('onclick');
};
h1.addEventListener('click', function(){
console.log('addEventListener');
});
</script>
</body>
</html>
위 코드에서는 3가지 방법을 사용해 이벤트 처리를 수행한다.
1. 인라인 방식
: 태그에 직접 onclick 속성을 추가하여 이벤트를 처리한다. h1의 속성으로 onclick을 추가하고, 콘솔에 '인라인'을 출력하도록 설정했다.
2. onclick 속성
: 자바스크립트에서 h1 엘리먼트에 onclick 속성을 설정하여 이벤트를 처리한다. 이 방법은 h1 객체에 동적으로 이벤트 리스너를 추가할 수 있다.
3. addEventListener
: 엘리먼트에 이벤트 리스너를 추가하는 더 고급스러운 방법이다. 여러 개의 이벤트 리스너를 한 엘리먼트에 추가할 수 있다. 이 예제에서는 'click' 이벤트에 대한 함수를 추가하여 콘솔에 'addEventListener'를 출력하도록 설정했다.
helloserver.js
- 필요한 모듈 불러오기 (http, fs, path, 사용자 정의 모듈)
- 웹 서버 생성 및 포트 설정
- 요청에 따른 파일 서비스 구현
- 에러 처리 구현
const http = require('node:http');
const fs = require('node:fs');
const path = require('node:path');
const hellonode = require('./hellonode');
const port = process.argv[2] || 33123;
먼저, Node.js의 기본 모듈인 http, fs, 그리고 path를 불러온다. 그리고 사용자 정의 모듈인 hellonode를 불러온다.
포트 번호는 명령행에서 전달된 값 또는 기본값 33123을 사용한다.
const server = new http.Server();
server.on('request', fileServe);
server.on('listening', () => console.log('Start HTTP Server.', port));
server.listen(port);
http.Server 객체를 생성하고, 요청 및 리스닝벤트를 처리하는 함수를 정의한다.
서버 객체는 클라이언트의 요청을 처리하기 위해 'request' 이벤트를 발생시키며,
'listening' 이벤트는 서버가 시작하고 대기 중일 때 발생한다.
서버는 지정된 포트에서 실행된다.
function fileServe(req, res) {
let filename = req.url.substring(1);
filename = path.join(__dirname, 'public', filename);
let filestream = fs.createReadStream(filename);
filestream.on('error', function (err) {
console.error(err);
res.writeHead(404, { 'Content-Type': 'text/html;charset=utf-8' });
res.end(`<h1>${req.url} 파일을 찾을 수 없습니다!!!.</h1>`);
});
filestream.on('open', function () {
res.writeHead(200);
});
filestream.pipe(res);
filestream.on('close', function () {
res.end();
});
}
fileServe 함수는 클라이언트 요청에 대해 처리할 파일 및 경로를 결정하고,
해당 파일을 파일 스트림을 사용해 클라이언트에 전송하기 위한 처리를 한다.
만약 파일을 찾을 수 없거나 스트림에 오류가 발생한 경우, 404 상태 코드를 반환하며 에러 메시지를 전송한다.
파일 전송이 성공적으로 이루어지면, 200 상태 코드를 전송하고 클라이언트에 파일의 내용을 전송한다.
요약하면
- 필요한 모듈을 가져온다.
- 웹 서버를 생성하고 실행한다.
- 클라이언트 요청에 따라 파일 서비스를 구현하고 에러 처리를 한다.
'Node.js' 카테고리의 다른 글
| [Node.js] TCP 클라이언트(client)와 서버(server) 만드는 방법 (0) | 2023.08.14 |
|---|---|
| [Node.js] 파일 입출력, 표준 입출력 | Stream, pipe() (0) | 2023.08.13 |
| [Node.js] ➍ 모듈(module) 사용법 | 클래스(class) (0) | 2023.08.11 |
| [Node.js] ➌ 모듈(module) 사용법 | m4, m5 (0) | 2023.08.10 |
| [Node.js] ➋ 모듈(module) 사용법 | m1, m2, m3 (0) | 2023.08.09 |
