보안 전공생의 공부

정적 웹사이트 제작 본문

WEB/Node

정적 웹사이트 제작

수잉 2021. 9. 29. 14:32

app.use(express.static(__dirname+'/public'));

app.use 함수는 app.get과 다르게 HTTP method나 route에 상관없이 서버에 요청이 올 때마다

무조건 콜백함수가 실행된다.

위에서는 express.static(__dirname+'/public')를 호출하고 있다.

이는 node.js에서 프로그램이 실행중인 파일의 위치/public route를 static 폴더로 지정하는 것이다.

현재 파일 구조

따라서 '/'에 접속하면 '파일 위치/public'에 연결되고,

'/css'에 접속하면 '파일 위치/public/css에 연결된다.

 

 

/public 폴더에서 보여줄 index.html파일

<!-- public/index.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>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/master.css">
    

</head>
<body>
    <h1>공부하는 휴학생</h1>
    <div onload="init()" style="float:right; color: #ECB601;font-family: serif;">
    <h3>현재시간 <span id="time" ></span></h3>
    </div>
</body>
<script>
    
    function movepage(){
        location.href="/about";
    }

     var clockTarget = document.getElementById("time");
    
    function time() {
    var date = new Date();
    var month = date.getMonth();
    var clockDate = date.getDate();
    var day = date.getDay();
    var week = ['일', '월', '화', '수', '목', '금', '토'];  
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();

    clockTarget.innerText = `${month+1}월 ${clockDate}일 ${week[day]}요일` +
         `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes }`  : minutes }:${seconds < 10 ? `0${seconds }`  : seconds }`;
}

function init() {
    time();
    setInterval(time, 1000); //1000 = 1초 

}

init();

</script>
</html>
/* public/css/master.css */

h1{
    font-family: 'Gaegu', cursive;
    font-size: '18px';
}

- 현재시간 표시하는 코드 출처 : https://badstorage.tistory.com/51

 

[javascript] Study Timer 만들기

만든 이유 및 소감 개인적으로 공부할때는 타이머를 켜놓고 공부를 하는데(공부 다 해놓고 타이머에 기록된 공부 시간을 보면 좀 뿌듯하다.) 전에 HTML, CSS를 공부할때 마침 타이머가 없기도 했고

badstorage.tistory.com

 

- 웹폰트 사용하기 : https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

static route에 접근할 때, 파일 이름을 지정해주지 않으면 자동으로 index.html 파일을 찾게 된다.

즉, '/'에 접속하면 '파일 위치/pulbic/index.html' 파일에 연결한다.

 

실행 결과

 

 

 

출처 : https://www.a-mean-blog.com/ko/blog/Node-JS-%EC%B2%AB%EA%B1%B8%EC%9D%8C/Hello-World/Static-%ED%8F%B4%EB%8D%94-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0

 

Node JS 첫걸음/Hello World!: Static 폴더 추가하기 - A MEAN Blog

소스코드 이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실

www.a-mean-blog.com

 

'WEB > Node' 카테고리의 다른 글

주소록 만들기 / module  (0) 2021.10.14
주소록 만들기 / show, edit, update, destroy  (0) 2021.10.07
주소록 만들기 / index, new, create  (0) 2021.10.07
MongoDB를 node.js에 연결하기 | mongoDB 연결 오류 문제 해결  (2) 2021.10.04
express 모듈로 서버 구성하기  (0) 2021.09.22
'WEB/Node' Related Articles more
Comments