시작
사실 개발을 처음 접하는 사람으로서, 무엇을 어떻게 시작해야 할지 모르는 것이 가장 어려운 부분이다. 1월에는 22 Basic Challenge의 커리큘럼을 통해서 공부를 진행하였지만, 완주 이후에는 다시 무엇을 해야하는지에 대한 고민이 컸다. 책도 읽어보고, 여러 영상들을 시청하면서 지금 나의 수준에서 할 수 있는 것들을 찾아보았다. 간단한 게시판 만들기와 로그인 및 회원가입에 대한 추천들이 많았기에, 구현해보고자 시작하게 되었다. 마침 유튜브 우리밋 채널에 좋은 영상강의를 찾을 수 있었고, 그것을 통해 공부를 진행해보고자 한다.
express로 서버 띄우기
express 모듈이 설치가 되어있지 않았다면, 모듈을 설치해준다.
npm install express --save아래 코드로 간단하게 서버를 띄울 수 있었다.
const express = require('express');
const app = express();
app.listen(3000, function(){
console.log("서버 가동");
});또한 라우팅(routing)도 구현할 수 있었다. 라우트는 의미하는 바가 넓지만, 여기서는 클라이언트가 URL로 접근하는 경로를 안내해주는 행위라고 볼 수 있다. 즉, 라우팅은 클라이언트가 접근하는 경로에 따라 서버가 알맞는 동작을 처리할 수 있도록 만들어주는 것이라고 이해할 수 있다.
app.get('/',function(request,response){
response.send("여기는 루트입니다.");
});
app.get("/login",function(request,response){
response.send("여기는 로그인 화면입니다.");
});로그인 화면 만들기
아래 코드를 통해서 간단한 로그인 화면을 만들어주었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login-Lecture</title>
</head>
<body>
<input type="text" placeholder="아이디"><br>
<input type="text" placeholder="비밀번호"><br>
<button>로그인</button>
</body>
</html>로그인 뷰(view) 분리하기
로그인 뷰(view)를 최적화하기 위해서 분리해주는 과정을 거쳤다. views라는 폴더를 생성한 후, views폴더 안에 home이라는 폴더를 추가적으로 생성해준다. 그리고 ejs파일을 만들어서 폴더 안에 넣어준다. ejs란 Embedded JavaScript의 약자로, 쉽게 말하면 자바스크립트에 내장되어 있는 html파일이라고 생각하면 된다.
express의 경우 템플릿을 렌더링하기 위해서는 애플리케이션 설정이 필요하다. 링크를 참고했다.
// app.js
app.set("views", "./views");
app.set("view engine", "ejs");
app.get("/", function(request,response){
response.render("home/index");
});
app.get("/", function(request,response){
response.render("home/login");
});라우팅 분리
로그인 뷰(view) 분리하는 것과 마찬가지로 routes라는 폴더를 생성한 후, routes폴더 안에 home이라는 폴더를 추가적으로 생성해준다. 그리고 js파일을 만들어 준다.
//index.js
"use strict"; // 엄격 모드 / 디버깅이 쉬워지고 발생 가능한 에러들을 예방한다.
const express = require("express");
const router = express.Router();
router.get("/", function(request,response){
response.render("home/index");
});
router.get("/login", function(request, response){
response.render("home/login");
});
module.exports = router; // 내보내주기 위한 명령어그리고 app.js에서 받아주기 위해서 app.use() 메소드를 사용하여 d아래 코드를 추가해준다. 이 메소드는 미들 웨어를 등록해주는 메소드이다. 미들 웨어가 무엇인지 잘 몰라서 공부해보아야겠다
const home = require("./routes/home");
app.use("/", home); // use -> 미들 웨어를 등록해주는 메서드컨트롤러 분리
router.get("/login", function(request, response){
response.render("home/login");
});위의 코드 같은 경우, 도메인을 받아서 실질적으로 기능을 하는 부분은 함수 쪽이다. 따라서 저 함수 부분을 컨트롤러로 볼 수 있다. 저 컨트롤러를 분리시켜 조금 더 효율적인 코드를 만들어 낼 수 있다. routes폴더에 js파일을 추가시켜준다.
//home.ctrl.js
"use strict";
function hello (request,response){
response.render("home/index");
};
function login (request,response){
response.render("home/login");
};
module.exports = {
hello,
login,
};객체로 내보내준 파일을 index.js에서 변수로 지정을 해준다.
//index.js
"use strict";
const express = require("express");
const router = express.Router();
const ctrl = require("./home.ctrl");
router.get('/', ctrl.hello); // .연산자를 통해서 간단히 변경 가능
router.get("/login", ctrl.login);
module.exports = router;app.listen() 모듈화
bin이라는 폴더를 생성한 후, js파일을 생성해준다.
//www.js
"use strict";
const app = require("../app");
const PORT = 3000;
app.listen(PORT, function(){
console.log("서버 가동");
});app.js에서 내용을 www.js에서도 받을 수 있도록 내보내줄 수 있게 module.exports = app;를 추가해준다. 이후, app.js가 아닌 www.js 파일을 실행시키면 정상적으로 작동되는 것을 확인할 수 있었다.
느낀 점
처음 게시판을 만들 때는 혼자 작업을 해서 그런지 하드코드들이 많았다. 그리고 하나의 파일 안에 많은 내용들이 들어있으며 정리도 안되어있는, 말 그대로 혼자 가지고 놀아본 느낌이 강했다. 설 연휴동안 '함께 자라기, 애자일로 가는 길'을 읽고 함께 성장하는 문화에 대해 관심을 가지게 되면서 오늘 각 내용에 맞게 분리하는 최적화 작업이 어떤 코드가 효율적인 코드인지, 유지 보수가 잘 되는 코드인지 알 수 있는 기회인 것 같았다. 역시 사람들이 이렇게 해라, 저렇게 해라하는 것보다 내가 직접 해보고 느끼는 것이 더 와닿는다. 아직 할 게 더 남았으니 학습해 나가면서 즐겁게 배우고 싶다!
참고
