봄날은 갔다. 이제 그 정신으로 공부하자

node.js로 웹서비스 만들기 (1. 개발 환경 구축) 본문

학습

node.js로 웹서비스 만들기 (1. 개발 환경 구축)

길재의 그 정신으로 공부하자 2023. 6. 27. 10:08

"node.js로 웹서버 만들기" 시리즈는 제가node.js를 사용해 웹서버를 만들면서 공부하는 내용을 잊어버리지 않고 기억하기 위해 기록하는 글 입니다.

 

이번 글은 그 첫번째 글로 내 Mac에 node.js와 웹 서버 개발에 필요한 각종 라이브러리들을 설치하는 부분에 대한 기록 입니다.

 

 

사전 작업 (작업 환경 설정)

가장 기본이되는 node.js와 mysql을 command 창에서 아래 명령어를 사용해 설치합니다.

$ brew install node
$ brew install mysql

 

아래 경로에서 코딩에 사용할 Visual studio code를 다운로드 받아 설치합니다.

https://code.visualstudio.com

 

아래 경로에서 DB Tool인 DBeaver을 설치합니다.

https://dbeaver.io/download/

 

자, 이제 기본적인 툴 및 개발 환경 설치는 완료되었으므로 이제 프로젝트를 만들어줍니다.

 

적당한 위치에 프로젝트 폴더를 생성하고 해당 폴더로 이동합니다.

$ mkdir newQuiz
$ cd newQuiz

 

npm 명령어를 사용해 node.js 프로젝트를 생성해줍니다.

$ npm init

 

위 명령어 실행 시 계속 무언가를 입력하라고 나오는데 그때는 그냥 괄호에 있는 내용을 그대로 입력해주면 됩니다.

 

프로젝트에 필요한 프레임워크 설치

아래 명령어를 사용해 프로젝트에 필요한 프레임워크들을 설치합니다.

여기서는 기본적인 것만 설치하고 개발하는 과정에 추가로 필요한게 있으면 더 설치할 계획 입니다.

$ npm install express
$ npm install ejs
$ npm install body-parser
$ npm install -g nodemon
$ npm install bootstrap
$ npm install express-session
$ npm install memorystore
$ npm install mysql

 

VS code로 package.json 파일을 열어 프로젝트에 필요한 프레임워크들이 정상적으로 설치되었는지 확인합니다.

 

설치한 프레임워크들에 대한 설명

express

express는 쉽게 서버를 구성할 수 있도록 만든 프레임워크로 node.js 웹 애플리케이션 프레임워크로 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공합니다.

express에는 웹 애플리케이션을 만들기 위한 각종 라이브러리와 미들웨어 등이 내장되어 있어 개발하기 편하고 가장 많은 곳에서 보편적으로 사용되기 때문에 초보자가 express 사용 시 충분한 레퍼런스 검색이 가능하다는 장점이 있습니다.

express는 node.js의 http 내장 모듈을 사용하여 아래 코드와 간단히 웹서버를 띄울 수 있습니다.

 

사용 예시

// index.js
const http = require('http');
const express = require('express');
const app = express();
const server = http.createServer(app);

app.get('/', (req, res) => {
	res.send('Hello express!!!');
});

server.listen(3000);

 

ejs

ejs는 Embedded JavaScript Template의 약자로 node.js에서 가장 많이 사용하는 템플릿 엔진입니다.

ejs는 기존의 HTML 문법에 한해서 <% %>를 사용하여 크게 벗어나지 않아 더욱 쉽게 서버의 데이터를 사용하거나 코드를 실행 할 수 있는 장점이 있습니다.

ejs의 기본 문법은 아래와 같습니다.

<%# ... %>  // 주석
<% ... %>  // JS 코드
<%= ... %> // 변수 출력(html escape 처리: >를 $gt로 변환)
<%_ ... _%> // 태그내부 공백 제거
<%- ... %> // html escape안하고 변수 출력

 

사용 예시

ejs는 index.js에서 아래와 같은 작업을 통해 사용이 가능합니다.

// index.js
const path = require('path');
const express = require('express');
const routes = require('./routes/index');
const app = express();

// view engine 템플릿 사용을 명시
app.set('views' , path.join(__dirname, 'views'));
app.set('view engine' , 'ejs'));

app.use('/', routes);
app.use('/about', routes);

var router = express.Router();

// '/about' URL이 들어오면 'about'으로 render, title에 "Hello World!" 출력
router.get('/about', function(req, res) {
	res.render('about', {title: 'Hello World!'});
});

module.exports = router;

 

프로젝트 폴더에 "views" 폴더를 만들고 하위에 about.ejs 파일을 만들고 아래와 같이 기본 정보를 입력합니다.

 

// about.ejs 
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

 

index.js에서 아래와 같이 view engine에서 views 폴더를 사용한다고 명시하였으므로

app.set('views' , path.join(__dirname, 'views'));
app.set('view engine' , 'ejs'));

 

사용자가 브라우저 주소창에 'localhost:3000/about' 입력 시 아래 코드가 입력된 주소값을 받아

views 폴더의 about.ejs 파일을 실행 시키고 그때 title값을 'Hello World!'로 전달합니다.

router.get('/about', function(req, res) {
     res.render('about', {title: 'Hello World!'});
});

 

about.ejs는 전달받은 {title: 'Hello World!'} 값을 <%= title %> 문법을 사용해 HTML에 표시해줍니다.

 

body-parser

클라이언트 POST or PUT request data의 body로부터 파라미터를 편리하게 추출할 수 있도록 도와주는 node.js 프레임워크 입니다.

 

사용 예시

ejs 파일에 버튼 클릭 시 HTTP post 메소드를 호출하도록 아래와 같이 작업합니다.

// create_quiz.ejs
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <script src="//code.jquery.com/jquery.min.js"></script>
    <title>퀴즈 제출하기</title>
  </head>
  <body>
      ...
      <div class="input-group mt-3">
            <span class="input-group-text" style="width: 90px">퀴즈 내용</span>
            <textarea id="contents" class="form-control" aria-label="contents" placeholder="[필수] 문제를 입력해주세요." ></textarea>
      </div>
      ...
      <div class="text-center mt-3">
            <button type="button" class="btn btn-primary w-50" id="done">제출하기</button>  
      </div>
  </body>
</HTML>

<script>
$("#done").click(function() {
	$.post("/quiz/create_quiz", {
        	contents: contents.value
    }, function(data, status){
        alert("문제 등록: " + status);
        window.location  = '/quiz';
    }
});
</script>

 

이제 view에서 보낸 post를 받을 수 있도록 js 파일에 아래와 같이 추가합니다.

// OX 퀴즈 만들기 요청
router.post('/create_quiz', function(req, res){
    var body = req.body;
    var contents = body.contents;
    
    var sql = 'INSERT INTO quiz (createdAt, contents) VALUES(CURRENT_TIMESTAMP, ?)';
    var param = [contents];
    conn.query(sql, param, function(err, result){
        if(err) console.log('query is not excuted. insert fail...\n' + err);
        else {
            console.log(result);
            res.sendStatus(200);
        }
    });
});

 

nodemon

코드가 수정될 때마다 서버를 내렸다 올렸다하는 것은 매우 번거로운 작업인데 이를 자동으로 해주는 것이 툴이 nodemon입니다.

 

package.json "scripts"항목에 아래와 같이 nodemon을 추가합니다.

실행 시 아래와 같이 실행해주면 됩니다.

$ npm run dev

 

bootstrap

bootstrap은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 javascript로 만든 프레임워크로 bootstrap을 사용하면 디자인 및 크로스 브라우징에 사용하는 리소스를 상당 부분 절약할 수 있습니다.

 

사용 예시

bootstrap을 사용하기 위해서는 index.js 파일에 아래와 같이 한줄 만 추가해주면 됩니다.

router.use('/bootstrap', express.static(path.join(__dirname, "../node_modules/bootstrap/dist")));

 

HTML에서는 아래 코드를 링크하여 사용해야 합니다.

<link rel='stylesheet' href='venders/bootstrap/css/bootstrap.min.css' />
<link rel='stylesheet' href='venders/bootstrap/css/bootstrap-grid.min.css' />
<link rel='stylesheet' href='venders/bootstrap/css/bootstrap-reboot.min.css' />
<script src='venders/bootstrap/js/bootstrap.min.js'></script>
<script src='venders/bootstrap/js/bootstrap.bundle.min.js'></script>
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
  <title>ABOUT</title>
</head>
<body>
  <h2>이곳은 about page 입니다.</h2>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-light">Light</button>
  <button type="button" class="btn btn-dark">Dark</button>
  <button type="button" class="btn btn-link">Link</button>
</body>
</html>

 

express-session & memorystore

express에서 세션을 관리하기 위해 필요한 프레임워크들

 

사용 예시

// index.js
const session = require('express-session');
const MemoryStore = require('memorystore')(session);

app.use(session({}))

 

mysql

mysql은 다음 글에서 아래 글에서 자세히 설명합니다.

https://als2019.tistory.com/131

 

'학습' 카테고리의 다른 글

node.js로 웹서비스 만들기 (3. 기본적인 mysql query)  (0) 2023.07.01
node.js로 웹서비스 만들기 (2. mysql 설정하기)  (0) 2023.06.29
Android 13 - 번외 (테마 앱 아이콘 만들기)  (0) 2022.08.01
Android 13 - 8편 (새로운 기능: 기타)  (0) 2022.07.29
Android 13 - 7편 (새로운 기능: 개인 정보 보호 및 보안)  (0) 2022.07.27
'학습' Related Articles more
Comments