> 주제 : node.js 활용 디지털 시계 만들기 프로젝트
세부 내용
수업 시간에 공부한 node.js 활용 디지털 시계 만들기 프로젝트를 실습한다. (addHTML.js & clock.html)
이때 CSS 코드는 강사가 지도한 코드를 수정하여 자신만의 스타일로 탈바꿈한다.
// addHTML.js
const http = require("http");
const fs = require("fs");
var morgan = require("morgan");
//Morgan은 HTTP 요청에 대한 로깅을 처리하는 미들웨어이다. "combined" 형식의 로깅을 사용하여
요청에 대한 정보를 기록한다.
var logger = morgan("combined");
//서버설정 : 서버가 바인딩될 호스트 이름과 포트 번호를 설정한다.
const hostname = "127.0.0.1";
const port = 3000;
//http 서버 설정 : http.createServer 함수를 사용하여 HTTP 서버를 생성.
요청에 대한 처리를 위한 콜백 함수를 전달
const server = http.createServer(function (req, res) {
//요청 처리
logger(req, res, function (err) {
if (err) return console.log(err);
//fs.readFile을 사용하여 "./public/clock.html" 파일의 내용을 읽는다.
읽은 파일 내용을 HTTP 응답으로 전달하며, 응답 상태 코드와 헤더를 설정한다
fs.readFile("./public/clock.html", function (err, data) {
res.statusCode = 200;
res.writeHead(200, { "Content-Type": "text/html" });
res.end(data);
});
});
});
//서버 시작
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
http: Node.js의 내장 모듈로, HTTP 서버와 클라이언트를 생성하기 위해 사용됩니다.
fs: Node.js의 내장 모듈로, 파일 시스템 작업을 처리하기 위해 사용됩니다. (파일 읽기/쓰기/삭제)
morgan: HTTP 요청에 대한 로깅을 처리하는 미들웨어입니다. 웹 애플리케이션의 동작을 추적하고 디버깅하는 데 도움을 줍니다. morgan을 사용하면 요청에 대한 정보(메서드, URL, 상태 코드 등)와 응답 시간을 로깅할 수 있습니다. 또한 사용자 정의 로그 형식을 설정하여 필요한 정보만 로깅하도록 조정할 수도 있습니다.
<clock.html> --> css 스타일 커스터마이징
<!DOCTYPE html>
<html lang="en">
<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">
<title>Javascript Clock</title>
<style>
@font-face {
font-family: 'EliceDigitalBaeum_Bold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_220508@1.0/EliceDigitalBaeum_Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
*{
font-family: 'EliceDigitalBaeum_Bold';
box-sizing: border-box;
font-size: 32px;
}
body{
margin: 0;
color: rgb(255, 255, 255);
background: linear-gradient(to bottom right, #ffcd38, #ff3399, #6600cc);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.clock{
min-width: 430px;
margin: 0 auto;
padding: 50px 0;
text-align: center;
border: 30px groove rgb(255, 255, 255);
border-radius: 80px;
box-shadow: 12px 6px 8px 2px rgba(0, 0, 0, 0.2);
}
.today{
margin-bottom: 20px;
font-size: 20px;
}
.time{
margin-top: 10px;
font-size: 40px;
}
</style>
</head>
<body>
<div class="clock">
<div id="today" class="today"></div>
<div id="time" class="time"></div>
</div>
<script>
// 요소 선택
const todayDiv = document.getElementById('today');
const timeDiv = document.getElementById('time');
// getTime 함수
function getTime(){
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
let date = now.getDate();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();
month = month < 10 ? `0${month}` : month;
date = date < 10 ? `0${date}` : date;
hour = hour < 10 ? `0${hour}` : hour;
minute = minute < 10 ? `0${minute}` : minute;
second = second < 10 ? `0${second}` : second;
todayDiv.textContent = `${year}년 ${month}월 ${date}일`
timeDiv.textContent = `${hour}:${minute}:${second}`
}
// setInterval 메소드
getTime()
setInterval(getTime, 1000);
</script>
</body>
</html>
뭔가.. 색깔 아무거나 했는데 인스타그램 분위기가 나는군..%%
