MVC 패턴으로 폴더를 나누고, 각 분류에 맞게 내용을 작성하는 것까지 수업에서 배웠다. 이제 대망의 데이터베이스 연결이다. 회원가입부터 로그인, 정보 조회 후 수정과 삭제까지 구현해보는 것이 목표 과제였다.

흐름

이를 간단하게 도식화 해보면 아래와 같다.

사용자가 웹 페이지에 접속했을 때 가장 먼저 메인 홈화면(home.ejs)을 보여준다. 여기엔 회원가입과 로그인 각각으로 이동할 수 있는 화면이 주어진다.

• 회원가입 : 아이디/비밀번호/이름을 입력 후 버튼 클릭 -> 로그인 화면 이동
• 로그인 : 아이디와 비밀번호 입력 후 버튼 클릭 -> 로그인 정보가 담긴 프로필 화면 이동
• 프로필 : 이름/비밀번호를 수정하거나 회원 탈퇴가 가능한 버튼 구현

먼저 ORM 라이브러리를 사용하지 않고 sql문을 직접 작성하는 방식으로 구현해봤다. 그 과정에서 맞닥뜨린 에러를 곁들여 예제 코드와 정리해보려 한다.

순서

1. 기본 세팅

cd 프로젝트 생성할 위치
mkdir 새 프로젝트
npm i express, ejs, mysql

2. MVC 패턴으로 폴더 구조화

3. 엔트리가 될 파일(index.js) 생성

express를 불러오거나 app.listen 사용은 이전에 계속 반복했던 거라 생략하고 라우터 진입점 부분만 기록해두겠다.

// 위 아래 코드 생략

const router = require("./routes");
app.use("/", router);

app.get("*", (req, res)=>{
    res.render("404");
});

💡 404페이지는 라우터 다음에 작성!

라우터로 설정한 페이지 외에 다른 url 접근 시 해당 페이지를 보여줄 요량으로 전체 라우터를 지정("*")한 것이기에 라우터로 설정한 주소를 먼저 기입해야 의도대로 동작한다. 자바스크립트 엔진은 위에서부터 아래로 한 줄씩 평가하기 때문에 그렇다.

4. 라우터 작성

const express = require("express");
const router = express.Router();
const user = require("../controller/Cuser");

// Main
router.get("/", user.home);

// Sign Up render & Click
router.get("/signup", user.signup);
router.post("/signup", user.post_signup);

// Sign In render & Click
router.get("/signin", user.signin);
router.post("/signin", user.post_signin);

// Profile* : Update, Delete
router.post("/profile", user.profile);
router.patch("/profile/edit/:id", user.profile_edit);
router.delete("/profile/edit/:id", user.profile_del);

module.exports = router;

앞서 정리해 둔 페이지와 기능 각각에 필요한 라우터를 작성한다. 라우터는 컨트롤러랑 연결해야 하니까 해당 파일도 불러왔다.

💡 router 모듈 내보내기

아무리 잘 작성해도 마지막에 모듈로 내보내지 않으면 (당연하게도) 모듈을 인식하지 못해 에러가 뜬다. Error: Cannot find module

5. 라우터에 연결할 컨트롤러 뼈대 작성

const Users = require("../model/User");

// 홈 렌더 GET
exports.home = (req, res) => {
    res.render("home");
};

// 회원가입 렌더 GET
exports.signup = (req, res) => {
    res.render("signup");
};
// 회원가입 기능 POST
exports.post_signup = (req, res) => {};

// 로그인 렌더 GET
exports.signin = (req, res) => {
    res.render("signin");
};
// 로그인 기능 POST
exports.post_signin = (req, res) => {};

// 프로필 (temporary) POST
exports.profile = (req, res) => {}
// 수정 PATCH
exports.profile_edit = (req, res) => {};
// 삭제 DELETE
exports.profile_del = (req, res) => {};

💡 라우터에 연결한 컨트롤러 작성 안 하면

Error: Route.patch() requires a callback function but got a [object Undefined]

콜백 함수, 즉 컨트롤러가 없다는 에러가 뜬다. 라우터를 다 작성해두고 싶다면 컨트롤러에서 콜백함수 틀만 완성하거나 아직 완성하지 않은 기능은 주석 처리하길.

근데 주석 처리했다는 것도 까먹니까 라우터와 컨트롤러는 미리 다 연결 짓는 게 좋은 것 같다.

6. 모델 & 컨트롤러 내용 작성 데이터 가공

sql문을 사용하려면 mysql 모듈을 불러와 DB와 연결하는 작업이 필요하다.

const mysql = require("mysql");
const conn = mysql.createConnection({
    host: '127.0.0.1',
    user: 'user',
    password: 'mysql 비밀번호',
    database: 'db_study'
});

💡 왜 localhost를 안 쓰고?

새싹 캠에서 하던 대로 호스트에 'localhost' 기입했더니 아래와 같은 에러가 발생했다.

Error: Connect ECONNREFUSED::1::3000

여기서 ::1이 포인트였다. 이는 0:0:0:0:0:0:0:1의 줄임말 즉 IPv6을 나타낸다. 하지만 mysql은 IPv4만을 허용하므로 IPv6으로 호스트를 작성하자 에러 메세지를 보여준 거다.

윈도우 환경에서는 'localhost'를 작성해도 문제 없었다. 글을 참조해보니 운영체제의 차이 같다. 집에서는 맥북을 쓰는데 OS는 DNS Resolver가 IPv6를 우선해서 탐색하는 듯하다.

IPv4로 탐색할 수 있도록 127.0.0.1로 작성하면 간단 해결!

💡 클라이언트가 권한이 없다니

code: 'ER_NOT_SUPPORTED_AUTH_MODE', errno: 1251, sqlMessage: 'Client does not support authentication protocol requested by server; consider upgrading MySQL client',

노드 환경에서 mysql DB 접속 시엔 root 계정이 아닌 다른 계정을 사용해야 한다. 하여, user라는 새로운 사용자를 만들어줬는데 mysql에서는 localhost 즉 내부 호스트로 설정되어있어 클라이언트 같은 외부 호스트는 접근하지 못했던 거다.

아래처럼 플러그인을 추가하는 구문을 실행해주면 된다.

mysql alter user 'user'@'localhost' identified by mysql_native_password by 'user';

수업 자료에는 비밀번호 수정 시에 사용할 구문으로 적혀있길래 넘겼었는데 mysql의 기본 db에 플러그인을 추가해주어 외부 호스트의 접근을 가능케하는 설정이었다.

그리고 모델에서 sql문으로 데이터를 각 기능에 맞게 추가/조회/수정/삭제 해준다. 클라이언트에서 요청과 함께 전달해 준 데이터를 컨트롤러가 받기 때문에 모델과 컨트롤러를 서로 연결지어야 한다. 모델의 각 모듈을 컨트롤러에서 호출하면서 필요한 인자를 넘겨주는 식으로 말이다.

data는 POST/PATCH/DELETE 요청을 통해 들어온 req.body에서, 이렇게 데이터를 받아온 후에 응답을 돌려주어야 undefined 에러가 발생하지 않으므로 cb에 콜백 함수를 넘겨준다.

모델에서 sql로 가져온 데이터를 클라이언트에 전달해야 할 경우, 콜백함수의 인자로 결과를 전달해 컨트롤러가 이를 처리할 수 있도록 한다.

exports.newUser = function (data, cb) {
    const sql = `INSERT INTO still_user (userid, name, pw)
              VALUES ('${data.userid}', '${data.name}', '${data.pw}')`

    conn.query(sql, (err) => {
        if(err) throw err;
        cb();
    });
}

exports.signIn = function (data, cb) {
    const sql = `select * from still_user
			where userid='${data.userid}'
			and pw='${data.pw}' limit 1`
    
    conn.query(sql, (err, rows) => {
        if(err) throw err;
        cb(rows);
    })
}

exports.get_user = function (id, cb) {
    const sql = `select * from still_user where id='${id}' limit 1`
    
    conn.query(sql, (err, rows) => {
        if(err) throw err;
        cb(rows);
    })
}

exports.editUser = function (data, cb) {
    const sql = `update still_user set userid='${data.userid}',
                  pw='${data.pw}',
                  name='${data.name}'
                  where id='${data.id}' limit 1`
    
    conn.query(sql, (err) => {
        if(err) throw err;
        cb();
    });
}

exports.deleteUser = function (id, cb) {
    const sql = `delete from still_user where id='${id}'`
    
    conn.query(sql, (err) => {
        if(err) throw err;
        cb();
    })
}

아래는 컨트롤러다. 이때 sql문을 통해 가져온 데이터는 무조건 배열에 담긴다. 그래서 세부 key(ex. id, name)에 접근하려면 인덱싱이 필수다. limit 1으로 제한하기도 했고, 무엇보다 기본적으로 유효성 검사를 설정해야 하니까 언제나 인덱싱 넘버가 0이다.

배열이라는 점을 이용해서 length 메서드로 결과가 존재하면 브라우저에 보여줄 값과 함께 true를 전달하고, 그렇지 않을 경우엔 false 값을 전달하게 했다.

// 회원가입 기능 POST
exports.post_signup = (req, res) => {
    Users.newUser(req.body, () => {
        res.send({ result: true });
    });
};

// 로그인 기능 POST
exports.post_signin = (req, res) => {
    Users.signIn(req.body, (rows) => {
        if(rows.length > 0) {
            res.send({result: true, id: rows[0].id});
        } else {
            res.send({result: false});
        }
    })
};

// 로그인 프로필 (temporary) POST
exports.profile = (req, res) => {
    Users.get_user(req.body.id, (row) => {
        if(row.length > 0) {
            res.render("profile", {data: row[0]});
        }
        else {
            res.redirect("/signin");
        }
    });
}
// 수정 PATCH
exports.profile_edit = (req, res) => {
    const data = {
        ...req.body,
        id: req.params.id
    };
    Users.editUser(data, () => {
        res.send({ result: true });
    })
};
// 삭제 DELETE
exports.profile_del = (req, res) => {
    Users.deleteUser(req.params.id, () => {
        res.send({result: true});
    });
};

🔆 관건은 로그인 화면과 프로필 화면의 연결

로그인 후, 프로필 화면으로 넘어갈 때 기존 로그인 정보가 그대로 담겨야 한다. 그런데 세션 같은 방식을 아직 배우지 않아서 로그인을 유지할 방법을 모른다..

대신 일반 폼 전송하면 숨겨진 input으로 특정 값을 저장할 수 있는 데다가 새로운 화면을 렌더할 수 있다는 걸 활용했다. 사용자의 고유한 정보이자 PK키인 id를 hidden input에 저장해두어 프로필 화면을 렌더하면 value에 해당 값이 입력되도록 세팅한다.

그래서 로그인 결과에 id 값도 넘기고, 프로필 렌더할 때 input에 데이터바인딩 할 유저 정보도 넘겼다.

7. 뷰 작성 (+버튼 이벤트)

// signin.ejs

// 생략

    <form name="user-form">
        <div>
            <input type="text" name="userid" placeholder="ID" />
            <input type="password" name="pw" placeholder="PASSWORD" />
            <button type="button" onclick="signIn()">Sign In</button>
        </div>
    </form>
    <form name="hidden-form" action="/profile" method="post">
        <input type="hidden" name="id" />
    </form>

// 생략

        function signIn() {
            const form = document.forms["user-form"]
                const data = {
                userid: form.userid.value,
                pw: form.pw.value,
            };

            axios({
                method: "POST",
                url: "/signin",
                data: data
            }).then((res) => {
                if (res.data.result) {
                    alert("로그인 성공!");
                    const form = document.forms["hidden-form"];
                    form.id.value = res.data.id
                    form.submit();
                } else {
                    alert("아이디나 비밀번호를 확인하세요.");
                };
            });
        };

서버에 필요한 데이터를 담아 axios로 요청을 보낸 뒤, 서버에서 보내온 응답을 받고 그 응답 중 하나인 사용자의 id를 히든 폼 input의 값으로 지정한다. 그 상태로 submit 메서드를 사용하면 폼 전송 완료다.

앞서 컨트롤러에서 프로필 화면을 렌더할 때 사용자의 데이터도 함께 보냈기 때문에 ejs 문법으로 데이터바인딩 할 수 있다.

// profile.ejs
  
// 앞 뒤 코드 생략
 <input type="hidden" name="id" value=<%= data.id %> />

💡 수정/편집 url은 params를 쓰더만

회원 수정과 삭제는 각 회원의 고유 값인 id를 사용해서 구분하므로 프론트엔드 단에서 요청할 axios의 url에도 개별적인 id를 담아야 한다.

프로필 화면을 렌더하면서 해당 사용자의 모든 정보를 input에 바인딩했던 걸 고려해 그 value를 변수로 작성해주면 된다.

        function userEdit() {
            const form = document.forms["user-form"];
            const data = {
                userid: form.userid.value,
                pw: form.pw.value,
                name: form.name.value
            }
            axios({
                method: "patch",
                url: `/profile/edit/${form.id.value}`,
                data: data
            }).then((res) => {
                if(res.data.result) {
                    alert("회원 정보 수정");
                } else {
                    alert("문제가 생겼습니다.");
                };
            });
        };

input의 id만 데이터바인딩을 안 해줘서 계속 404 서버 에러가 났었다. 폼의 id 부분은 disabled로 만들어둬서 사용을 못한다고 착각하는 바람에 대체 id의 value를 어디서 가져오면 될지 오래 고민했다.

정리하자면

큰 맥락을 이렇게 써볼 수도 있겠다.

• 어떤 기능을 만들지 기획하고
• 이 기능이 담길 전체 구조와 흐름을 파악하고
• 각 기능에 필요한 페이지를 만들어
• 페이지마다 무얼 보여줄지 생각해
• 어떤 데이터를 어떻게 가공하여
• 화면 구현하기

---

덧붙이는 말

🌱 이 예제를 4번 정도 구현해봤다. 한 번은 CR만 완성했고, 그 다음엔 CRUD 모두를 해봤고, 집에서 sequelize로 완성해보고, 오늘 수업에서는 sequelize로 하되 새 프로젝트가 아닌 지난 프로젝트에 규모를 키우는 방식으로 진행했다.

🌱 전날 집에서 실습을 한 번 했으니 다시 해보면 수월할 거라고 생각했는데... 기존 프로젝트를 유지하며 몸집을 키우는 게 생각보다 까다로웠다. 게다가 오탈자가 왜이리 많이 나던지! 대문자 하나 때문에 실습 시간을 거의 다 썼고, 한 번 흐름이 깨진 후에 다시 하려다 보니까 흐름이 너무 헷갈렸다.

🌱 덕분에 블로그 주제를 정했다. 이렇게 글로 적으며 순서를 확인하니까 어떤 데이터가 어디로 넘어가서 어떻게 보여지는지 흐름이 잡힌다. 아주 신나는 발견!

🌱 이전까진 에러 만나면 (헉) 했는데 아무리 많은 에러를 만나도 결국엔 해결할 수 있단 믿음이 생겼는지.. 원인 찾고 해결하는 것에 집중하게 된다. 그리고 에러 아무것도 없는 완벽한 상태보다 풀어가는 과정이 더 재밌는 듯.