Development/Back

웹사이트 구성하는 방법(Node.js)

westcold 2024. 4. 7. 00:49

웹사이트 구성하는 방법

*mpa

-페이지가 여러개
-스마트폰 나오기 전에 많이 사용
-화면이 깜빡인 후에 로딩이 된다

/list
/detail
/write
/edit
위와 관련된 html을 서버가 준비 해뒀다가 클라이언트가 요청시 보내주는 게 mpa
->서버는 html페이지만 준비하고만 있으면 된다

mpa에 사용되는 언어: node js, pyhon, java, php, asp

*node.js가 무엇인가?

-웹서버 백엔드 구현을 하기 위해서 사용
-자바스크립트 영역이 서버쪽으로 확대되어 클라이언트와 서버 양쪽의 프로그램을 모두 개발이 가능해졌다.

백앤드 언어를 사용하는 이유:
-언어와 데이터베이스를 연동을 시켜논다
-서버에서 필요한 데이터를 데이터베이스에서 가져와 html형식에 맞게 바꿔준다

 

*spa

-페이지가 하나
-페이지를 이동하지 않고 안에있는 컨텐츠만 바뀌어 깜빡임이 없다
-클라이언트가 서버에게 페이지 요청을 하면 빈 html파일을 준다+js소스파일을 준다(버튼을 누르면 js파일에 있는 소스 파일이 실행이되어 컨테츠만 바꿔준다)




*api

-약속
-버튼을 누르면(행동) 어떠한 동작이 되게하는 약속(ex자판기, 컴퓨터 자판...)
-키보드 A누르면 A가 나오는 동작도 api
-어떤 행위를 원할 때 이 버튼을 누르면 서버가 내가 원하는 동작을 해주는 약속
-spa에선 거의 API를 사용한다


-spa는 백앤드와 프로트앤드 서버가 따로 있다
-유지보수 측면에서 편하다
-백앤드는 API만 존재한다
-프론트엔드 서버한테 html과 js코드를 받아온다 그래서 데이터를 백엔드에 요청함
-장점:서버는 API만 제공하고 서버는 다양한 어플리케이션으로 사용할 수 있다.(HTTP만 가능하면)




*코드정리


app.js

const express = require('express');
const mysql = require('mysql');
const app = express();
const port = 4000;

const cors = require('cors');
app.use(cors());


const conn = {
  host : 'localhost',  
  port : '3306',
  user : 'root',
  password : '----',
  database : 'my_schema'
};

let connection = mysql.createConnection(conn);
connection.connect(); // db접속


app.engine('html', require('ejs').renderFile);
app.set('view engine', 'ejs');


app.get('/', (req, res) => {
  res.render('index.html');
});

app.get('/list', (req, res) => {
  connection.query('SELECT * from board', function(error, results, fields) {
    if (error) throw error;
    console.log(results);
    res.render('list',{'data':results})
  });
 });

 app.get('/api/list', (req, res) => {
  connection.query('SELECT * from board', function(error, results, fields) {
    if (error) throw error;
    console.log(results);
    res.send(results)
  });
 });

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

 
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    블로그에 오신 걸 환영<br>
    <a href="/list">게시글 보기</a>
</body>
</html>

 
list.ejs

<!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>
    <table>
        <tr>
            <td>id</td>
            <td>writer</td>
            <td>title</td>
        </tr>
        <% for (let i=0; i<data.length; i++) { %>
        <tr>
            <td><%=data[i]['id']%></td>
            <td><%=data[i]['writer']%></td>
            <td><%=data[i]['title']%></td>
        </tr>
        <% } %>
    </table>
</body>
</html>

 
index.html-frontend

<!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>
    <div id="app">
       
    </div>
</body>
</html>

<script src="index.js"></script>

 
index.js-frontend

document.getElementById("app").innerHTML = '<a onclick="ShowList()">리스트로 이동</a>';

const ShowList = () => {
//api요청
fetch('http://localhost:4000/api/list')
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
    document.getElementById("app").innerHTML = `
            <table>
                <tr>
                    <td>
                        id
                    </td>
                    <td>
                        writer
                    </td>
                    <td>
                        title
                    </td>
                </tr>
                <tr>
                    <td>
                        ${data[0]['id']}
                    </td>
                    <td>
                        ${data[0]['writer']}
                    </td>
                    <td>
                        ${data[0]['title']}
                    </td>
                </tr>
                <tr>
                    <td>
                        ${data[1]['id']}
                    </td>
                    <td>
                        ${data[1]['writer']}
                    </td>
                    <td>
                        ${data[1]['title']}
                    </td>
                </tr>
            </table>
            `;
  })
  .catch((error) => console.log("error:", error))

   
}


//</head> spa 쉽게 구형 ->react, vue....