[Node.js] Board Project #1

Web/Node.js

[Node.js] Board Project #1

kevin3709 2022. 5. 18. 02:11

Node.js와 api를 공부하기 위해 간단한 게시판을 만들어보고자 한다.

시간 날때 짬짬히 할 예정이라 꽤나 장기 프로젝트가 될 예정이다.

먼저 Node.js 를 깔아주자

https://nodejs.org/en/

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

Node -v

사용할 폴더를 만들어 주고 Node.js 가 설치되었는지 확인해보면 설치가 완료된 것을 볼 수 있다.

npm init
npm install express --save

cmd에 두 명령어를 입력해 각각 Node프로그램을 시작하고 express를 다운받는다.

//app.js
var express = require("express");
var app = express();

app.listen(3000, function(){
    console.log("listening on port 3000");
});

app.get("/", function(req, res){
    res.sendfile(__dirname + "/index.html");
});

main.js과 간단한 index.html을 만들고 서버가 잘 열렸는지 확인해보자

index.html에 간단한 메뉴와 게시판 테이블을 세팅을 만들어 봤다.

추가적인 CSS는 나중에. 일단은 기능부터.

이후 MySQL과 연결해 게시물과 댓글을 DB에 저장할 예정이다.

1일차

//app.js
var express = require("express");
var app = express();

app.listen(3000, function(){
    console.log("listening on port 3000");
});

app.get("/", function(req, res){
    res.sendfile(__dirname + "/main.html");
});

app.get("/index", function(req, res){
    res.sendfile(__dirname + "/index.html");
});

//main.html
<html>
    <head>
        <title>my new Nodejs web page!</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="menu">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/index">board</a></li>
                <br><br>
            </ul>
        </div>
        <h1>Wellcome to My New Page!!!!</h1>
    </body>
</html>

//index.html
<html>
    <head>
        <title>my new Nodejs web page!</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="menu">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/index">board</a></li>
                <br><br>
            </ul>
        </div>
        <table border="1" align="center" height="30">
            <tr>
                <h1 align="center">자유게시판</h1>
                <td width="50" align="center">No</td>
                <td width="600" align="center">Title</td>
                <td width="150" align="center">Writer</td>
                <td width="70" align="center">Views</td>
            </tr>
            <tr>
                <td width="50" align="center"></td>
                <td width="600" align="center"></td>
                <td width="150" align="center"></td>
                <td width="70" align="center"></td>
            </tr>
        </table>
    </body>
</html>