[ 코딩온 ] KDT 웹 풀스택 13기 / 7월 2주차 회고 / MVC

[ 코딩온 ] KDT 웹 풀스택 13기 / 7월 2주차 회고 / MVC - MySQL 연결

write3027 2024. 7. 14. 19:21

2024.07.12 금

Mysql과 node.js(Model)연결하는 방법

1. vs code에 mysql2 설치. //npm i mysql2

2. Mysql에서 테이블 미리 만들기.

3. env파일에 Mysql 로그인 정보 입력.

//.env
HOST=localhost
MYUSER= //아이디 입력
PASS= //비밀번호 입력
DATA=  //사용할 DB이름 입력

4. env파일에서 정의한 환경 변수를 이용해 MySQL 연결.

//user.js
//model

require('dotenv').confing(); //.env파일 사용하기 위함
const mysql = require('mysql2/promise'); //mysql을 이용하기 위함

//Mysql에 연결할때 사용할 함수
const getConn = async() => {
	return await mysql.createConnection({
            host : process.env.HOST,
            user : process.env.MYUSER,
            password : process.env.PASS,
            database : process.env.DATA
    });
};

//로그인
const userLogin = async(userid, pw) => {
	const conn = await getConn();   //1. 연결
        query = 'SELECT * FROM user_mvc WHERE userid = ? AND pw = ?';
        const [rows] = await conn.query(query, [userid, pw]);   //2. 쿼리 실행
        await conn.end();   //3. 연결 끊기
        return rows;
};

//controller에서 사용하기 위해 모듈 내보내기
module.exports = { userLogin };

5. controller에서 model에 정의한 함수를 사용해 프론트(view)로 내보낸다.

//user.js
//controller

const userModel = require('../model/user'); 

//login
const userLogin = async (req, res) => {
	const {userid, pw} = req.body; //프론트(view)에서 받은 정보
        
        //model의 userLogin함수 실행, 
        // model에서 return 된 값 data에 저장.
        const data = await userModel.userLogin(userid, pw); 

        if(data.length > 0) //결과값이 있으면. 즉 로그인 정보가 일치하면 {
            res.json({result : true, data}); //json데이터 프론트(view)로 보냄.
        } else {
            res.json({result : false});
        }  
};

//router에서 사용하기 위해 모듈 내보내기
module.exports = { userLogin };

6. view에서 controller를 사용하면 끝.

(사용할 페이지는 router, controller에 미리 정의해둬야 함. res.render('login'); 사용.)

<!-- login.ejs -->
<!-- view -->

<!DOCTYPE html>
<html>
<head>
	<meta charset = "utf-8">
    <title></titie>
    //axios쓸 때 필요한 cdn 가져오기
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 
</head>
<body>
	<h3>로그인 페이지</h3>
    <form> 
    	<input type="text" id = "id" placeholder="아이디" /><br />
        <input type="password" id="pw" placeholder="비밀번호" /><br />
        <button type="button" onclick="loginFunc()">로그인</button>
    </form>
    
    <script>
    	function loginFunc() {
        	const data = {
                userid : document.querySelector("#id").value,
                pw : document.querySelector("#pw").value
            }
            
            axios({
            	method : 'post',
                //url : router에 정의해 놓은 login controller의 url
                url : '/api/user/login', 
                data
            }).then((res) => {
            	if(res.data.result) {
                	alert("로그인 성공!!");
                } else {
                	alert("로그인 실패ㅠ");
                }
            });
        }
    </script>
</body>
</html>

mvc로 파일을 나눠서 실행할때는 기능구현을

server.js -> router -> (controller <-> model) -> view 순으로 순차적으로 파일을 작성하는것이 헷갈리지 않는다.

controller에 모든 기능을 한꺼번에 구현하려 하지 말고, 하나씩 controller, model에 완성시켜 나가는것이 헷갈리지 않게 코딩할 수 있다.

view파일을 작성은 axios에서 연결될 url의 api controller코드를 보면서 차근차근 코드를 작성하면 된다.

mvc모델은 파일이 여러개로 나뉘어 있고, 비동기처리로 두개 이상의 파일을 동시에 봐야해서 이해하기 매우 어려웠다.

하지만 로그인 기능 하나를 직접 코딩해보며 이해하니깐 나머지 회원가입, 수정, 삭제 페이지 등을 완성하는건 수월했다.

mvc같이 파일이 많고, 기능이 많은 코드를 분석할때는 코드 전체를 한번에 이해하려고 하기 보다는

기능 하나라도 직접 코딩해보고, 함수 구조와 코드의 역할을 완벽하게 이해하는것이 중요한것 같다.