node.js로 html화면과 mysql 연결 및 값 저장 || query문 '?'쓰는 이유

🗃️javascript/프로젝트

node.js로 html화면과 mysql 연결 및 값 저장 || query문 '?'쓰는 이유

하얀성 2023. 11. 4. 16:14

node.js의 get, post 주의사항들

1. get은 '/주소' 로 들어가면 바로 실행. / post는 submit할때 실행.

2. get은 req.query를 통해, req.post는 body를 통해서 데이터를 불러옴.

(query를 통해 요청매개변수를 url부터 가져오는것. / post는 덮어쓰기이니, body 를 통해 요청본문을 가져온다.)

get은 /주소로 들어가자 자동실행으로 요청하고 받아옴. 하지만 데이터는 없으니

query(요청매개변수)에 아무것도 담기지 않은채로 rendering됨. my name is 옆이 빈 상태. 렌더링 되는게 html뿐임.

app.get('/express', (request, response) => {
    let name = request.query.name;
    console.log(request.query);
    response.render("index.html", {
        user: name
    })
});

3. 하나의 요청에는 하나의 응답만을 보낼 수 있다.

아래처럼 response.send . response.render 두개의 응답을 하면 오류발생. 한개로 줄이자.

-틀린 코드-

app.post('/submit',(request, response)=> {
    
    response.send("<h1>post 방식의 요청입니다</h1>")
    let ititle = request.body.ititle;//post는 body로 데이터접근
    console.log(request.body);
    response.render("input.html", {
        title: ititle
    })
})

화면과, 서버와 db 잇기

(html, node.js, mysql 사용)

input.html

<body>
  <h2 style="text-align: center;">게시판 정보를 입력해주세요</h2>
  <form method="post" action="/submit">
    <table>
      <tr>
        <td> 제목: <input type="text" name="ititle"></td>
        <td> 작성자: <input type="text" name="iname"></td>
        <td> 내용: <input type="text" name="icontent"></td>
        <td> 작성날짜: <input type="text" name="idate"></td>
        <td> <input type="submit" value="입력"></td>
      </tr>
    </table>
  </form>

  <h2>제목은 {{ title }}</h2>
  <h2>작성자는 {{ name }}</h2>
  <h2>내용는 {{ content }}</h2>
  <h2>작성날짜는 {{ date }}</h2>

</body>

server.js

(폴더 view 안에서 html 파일들 저장해서 따로 렌더링 하는것 잊지말기)

(get, post, 이미지 렌더링을 nunjucks를 통해 한꺼번에 해결. mysql 모듈을 통해 mysql과 연결. 버전따라 오류해결해함)

const bodyParser = require('body-parser');
const express = require('express');
const app = express();
const nunjucks = require('nunjucks')
const mysql = require('mysql');

const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '1234',
    database: 'class'
  });

  connection.connect(err => {
    if (err) {
      console.error('An error occurred while connecting to the DB');
      throw err;
    }
    console.log('Connected to MySQL Database!');
  });

app.set("view engine", "html")
nunjucks.configure(__dirname + "/view", {
    express: app
})
app.use(bodyParser.urlencoded({ extended: true}))

app.get('/submit', (request, response) => {
    let ititle = request.query.ititle; 
    let iname = request.query.iname; 
    let icontent = request.query.icontent; 
    let idate = request.query.idate; 
    console.log(request.query);
    response.render("input.html", {
        title: ititle,
        name: iname,
        content: icontent,
        date: idate
    })
});

app.post('/submit',(request, response)=> {//post는 body로 데이터접근
    let ititle = request.body.ititle; 
    let iname = request.body.iname; 
    let icontent = request.body.icontent; 
    let idate = request.body.idate; 
    
    let query = 'insert into fun (title, name, content, date) VALUES (?,?,?,?)';
    connection.query(query, [ititle, iname, icontent, idate], (err, results) => {
        if (err) {
            console.error('An error occurred while inserting data', err);
            response.status(500).send('Database error occurred');
        } else {
            response.render("input.html", {
                title: ititle,
                name: iname,
                content: icontent,
                date: idate
            })
        }
    })
})

app.listen(52273, () => {
    console.log('Server ruuning at http://127.0.0.1:52273');
})

쿼리문에서 ?를 values 값에 쓰는이유

이렇게 쓰는게 원래는 맞을 텐데??????????? 왜 ?를 사용해서 윗코드를 작성했을까?

let query = `insert into fun (title, name, content, date) VALUES ('${ititle}', '${iname}', '${icontent}', '${idate}')`;
connection.query(query, (err, results) => {
    // ...
});

쿼리 스트링을 작성할 때 ? 를 사용하는 것은 SQL 인젝션과 같은 보안 문제를 예방하기 위한 일반적인 방법이다. 매개변수화된 쿼리를 사용하면 라이브러리가 각 매개변수의 값을 적절히 이스케이프하여 SQL 실행 시 안전하게 만들어줌.

질문에서 언급한 것처럼, ? 대신 직접 값을 쿼리 문자열에 삽입할 수는 있지만 이는 권장되지 않는다. 왜냐하면 이렇게 하면 사용자 입력을 직접 쿼리에 삽입하기 때문에 SQL 인젝션 공격에 취약해지기 때문.

: mysql 버전문제 오류 해결하기

에러 메시지 ER_NOT_SUPPORTED_AUTH_MODE는 MySQL 8.0 이상 버전에서 기본 인증 플러그인이 caching_sha2_password로 변경되었기 때문에 발생할 수 있음

많은 MySQL 클라이언트 라이브러리와 프레임워크가 아직 이 새로운 인증 메커니즘을 지원하지 않을 수 있음.

1. 내 user 이름, 비밀번호를 입력하여

MySQL 콘솔에서 실행하여 사용자의 패스워드 암호화 방식을 변경

이후 종료후 다시 들어가보자.

ALTER USER 'yourusername'@'localhost' IDENTIFIED WITH mysql_native_password BY 'yourpassword';

mysql 버전 최신화, mysql2 설치

(mysql2 설치 안하고 mysql 최신화만 해준 뒤 실행했는데 mysql 모듈에 에러발생하니 설치하는 걸 추천)

npm update mysql

npm install mysql2

'🗃️javascript > 프로젝트' 카테고리의 다른 글

메모장 만들기[경고창 발생, 페이지 나누기 ,ssr에 따른 템플릿사용결정] (0)	2023.11.08
node.js 게시판 만들기 (0)	2023.11.06
숫자야구게임 (0)	2023.06.19
사칙연산 계산기(2)[더 작은 거부터 만들고 풀어보자.] (0)	2023.04.06
사칙연산 계산기(1)[중복제거 : 고차함수와 target.event.textContent ] (0)	2023.04.05

현재글node.js로 html화면과 mysql 연결 및 값 저장 || query문 '?'쓰는 이유

하얀성의 개발 메타인지