2024년 공간정보 활용을 위한 Node.js 웹서버 프로그래밍 (2)

- calc1.js

// 더하기 함수 만들기
 
// 함수를 exports 객체의 속성으로 추가
exports.add = (a, b) => { 
    return a + b;
}

// const add = (a, b) => {
//     return a + b;
// }

// const result = add(10, 10);
// console.log(`더하기 결과: ${result}`);

 

- calc1_test.js

// CommonJs 방식 (자바스크립트에서 표준으로 사용하지 않음)
// require로 불러온 객체는 모듈 파일의 exports 객체가 됨
const calc = require('./calc1');

const result = calc.add(10, 10);
console.log(`더하기 결과: ${result}`);

 

- calc2.js

const calc = {};

calc.add = (a, b) => {
    return a + b;
}

module.exports = calc; // 객체 할당

 

- calc2_test.js

// CommonJs 방식 (자바스크립트에서 표준으로 사용하지 않음)
// require로 불러온 객체는 모듈 파일의 module.exports 객체가 됨
const calc = require('./calc2');

const result = calc.add(10, 10);
console.log(`더하기 결과: ${result}`);

 

- calc3.mjs

// 모듈 방식 (module)

const calc = {};

calc.add = (a, b) => {
    return a + b;
}

export default calc;

 

- calc3_test.mjs

// 모듈 방식 (module)
import calc from './calc3.mjs'

const result = calc.add(10, 10);
console.log(`더하기 결과: ${result}`);

 

* 다른 프로젝트 생성 후 터미널에서 npm init -y 입력 후, package.json에 "type" : "module" 추가

calc3.mjs, calc3_test.js -> .js로 변경하면 모듈 실행 가능 

 

- package.json

{
  "name": "node_training2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC", 
  "type": "module"
}

 

- calc4.js

// 상수

export const message = '안녕!';

 

- calc4_test.js

import { message } from './calc4.js';

console.log(`메시지 : ${message}`);

import * as message2 from './calc4.js';

console.log(`메시지 : ${message2.message}`);

 

- calc5.js

export const message = '안녕!';

export function show(message) {
    console.log(`메시지 : ${message}`);
} 

const calc = {};

calc.add = (a, b) => {
    return a + b;
}

export { calc };

 

- calc5_test.js

import { message, calc } from "./calcs5.js"; // 선택적 import 가능

console.log(`메시지 : ${message}`);

//show('안녕!');

console.log(`더하기 결과 : ${calc.add(10, 10)}`);

 

- server01_03.js(모듈화) => node_training2로 복사 

1. require 삭제 후 터미널에 (npm i express ,npm i mariadb, npm i body-parser) 

그리고 나서 import

import http from 'http';

import express from 'express';

import mariadb from 'mariadb';

import bodyParser from 'body-parser';

 

2. 분리

- server01_03.js

// DB 연결하기

import http from 'http';
import express from 'express';
import bodyParser from 'body-parser';
import cors from 'cors';

import { personListController, personAddController, personUpdateController, personDeleteController, personIndexController } from './controller.js'; // 함수 import

const app = express();

//CORS 설정
app.use(cors());

//public 폴더 오픈하기
app.use('/', express.static('./public'));

//뷰 설정(set은 속성 설정)
app.set('views', './views');
app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

const router = express.Router();
app.use('/', router);

// JSON.stringify에서 DB 결과를 처리할 수 있도록 설정 
BigInt.prototype.toJSON = () => {
    return this.toString();
}

// 컨트롤러 추가하고 싶을때는 여기에만 추가하면 됨!
router.route('/index').get(personIndexController);

router.route('/list').get(personListController);
router.route('/list').post(personListController);

router.route('/add').get(personAddController);
router.route('/add').post(personAddController);

router.route('/update').get(personUpdateController);
router.route('/update').post(personUpdateController);

router.route('/delete').get(personDeleteController);
router.route('/delete').post(personDeleteController);

http.createServer(app).listen(7001, () => {
    console.log(`웹서버 실행됨.`);
})

console.log(`웹서버 실행 요청됨.`);

 

- controller.js

import sql from './sql.js';
import { sendResponse, sendError } from './util.js';

import { database } from './/database.js';


export const personIndexController = async (req, res) => {
    console.log(`/index 요청 경로로 요청됨`);

    try {

        const data = {
            username: '홍길동1'
        }

        req.app.render('ex02_01', data, (err, html) => {  //확장자 제외 -> 데이터 병합 후 함수 호출
            if (err) {
                console.error(`뷰 처리 중 에러입니다. : ${err}`);
                sendError(res, err);
            }

            console.log(`렌더링 결과 : ${html}`);
            sendResponse(res, html);
        })

    } catch (err) {
        sendError(res, err);
    }
}

export const personListController = async (req, res) => {
    console.log(`/list 요청 경로로 요청됨`);

    try {
        const rows = await database.execute(sql.personList, []);
        sendResponse(res, JSON.stringify(rows));
    } catch (err) {
        sendError(res, err);
    }
}

export const personAddController = async (req, res) => {
    console.log(`/add 요청 경로로 요청됨`);

    console.log(`req.query : ${JSON.stringify(req.query)}`);
    console.log(`req.body : ${JSON.stringify(req.body)}`);
    
    let params = req.body;
 
    try {
        const rows = await database.execute(sql.personInsert, [`'${params.name}'`, `${params.age}`, `'${params.mobile}'`]);
        sendResponse(res, JSON.stringify(rows));
    } catch (err) {
        sendError(res, err);
    }
}


export const personUpdateController = async (req, res) => {
    console.log(`/update 요청 경로로 요청됨`);

    const params = req.query;

    try {
        const rows = await database.execute(sql.personUpdate, [`'${params.name}'`, `${params.age}`, `'${params.mobile}'`, `${params.id}`]);
        sendResponse(res, JSON.stringify(rows));
    } catch (err) {
        sendError(res, err);
    }
}

export const personDeleteController = async (req, res) => {
    console.log(`/delete 요청 경로로 요청됨`);

    const params = req.query;

    try {
        const rows = await database.execute(sql.personDelete, [`${params.id}`]);
        sendResponse(res, JSON.stringify(rows));
    } catch (err) {
        sendError(res, err);
    }
}

 

- sql.js

export default {
    personList: `select id, name, age, mobile from test.person`, // 속성 추가 
    personInsert: `insert into test.person(name, age, mobile) values (?, ?, ?)`
}

 

- uitl.js

export const sendResponse = (res, output) => {
    res.writeHead(200, {'Content-Type':'text/html;charset=utf8'});
    res.end(output);
}

export const sendError = (res, err) => {
    res.writeHead(200, {'Content-Type':'text/html;charset=utf8'});
    res.end(`웹서버에서 DB처리 시 에러 : ${err}`);
}

 

- setting.js

const databaseConfig = {
    host: '127.0.0.1',
    port: 3306,
    user: 'root',
    password: 'admin',
    database: 'test',
    connectionLimit: 10,
    debug: false
}

export { databaseConfig };

 

- /public 안에 ex02_01.html /views 안에  ex02_01.ejs 파일 넣기

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>테스트 01</title>
    </head>
    <body>

        <div>
            <p>테스트 01 입니다</p>
            <input type="button" value="확인" id="startButton">
        </div>

    </body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>테스트 01</title>
    </head>
    <body>

        <div>
            <p>테스트 01 입니다</p>
            <p><%= username %>님 환영합니다.</p>
            <input type="button" value="확인" id="startButton">
        </div>

    </body>
</html>

 

- ex02_02.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>테스트 02</title>

</head>

<body onload="onLoad()">

    <div>
        <p>테스트 02 입니다</p>
        <input type="button" value="확인" id="startButton">
    </div>
    
    <div id="output">

    </div>

    <script>

        function onLoad() {
            
            // 확인 버튼 클릭 시
            const startButton = document.querySelector('#startButton');
            startButton.addEventListener('click', (e) => {
                const output = document.querySelector('#output');
                output.innerHTML = `<p>확인 버튼 클릭 됨.</p>`
            })
        }

    </script>
</body>

</html>

 

- ex02_03.html

https://cdnjs.com/libraries/axios 들어가서 copy

axios - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>테스트 03</title>

</head>

<body onload="onLoad()">

    <div>
        <p>테스트 03 입니다 </p>
        <input type="button" value="확인" id="startButton">
    </div>
    <br>
    <div>
        <input type="text" id="nameInput">
        <input type="text" id="ageInput">
        <input type="text" id="mobileInput">
        <input type="button" value="추가하기" id="insertButton"> 
    </div>

    <div id="output">

    </div>

    <!-- axios 사용하기 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.7/axios.min.js"></script>

    <script>

        function onLoad() {

            // 확인 버튼 클릭 시
            const startButton = document.querySelector('#startButton');
            startButton.addEventListener('click', (e) => {

                requestPersonList();

                // const output = document.querySelector('#output');
                // output.innerHTML = `<p>확인 버튼 클릭 됨.</p>`
            })

            // 추가하기 버튼 클릭 시
            const insertButton = document.querySelector('#insertButton');
            insertButton.addEventListener('click', (e) => {
                requestPersonInsert();
            })
        }

        async function requestPersonList() {
            console.log(`requestPersonList 호출됨.`);

            try {
                const response = await axios({
                    method: 'post',
                    url: 'http://127.0.0.1:7001/list',
                    data: {},
                })

                console.log(`응답 -> ${JSON.stringify(response.data)}`);

                const output = document.querySelector('#output')
                output.innerHTML = `<p>${JSON.stringify(response.data)}</p>`;

            } catch (err) {
                console.error(`에러 -> ${err}`);
            }
        }

        async function requestPersonInsert() {
            console.log(`requestPersonInsert 호출됨.`);

            const nameInput = document.querySelector('#nameInput')
            const ageInput = document.querySelector('#ageInput')
            const mobileInput = document.querySelector('#mobileInput')

            const name = nameInput.value;
            const age = ageInput.value;
            const mobile = mobileInput.value;

            try {
                const response = await axios({
                    method: 'post',
                    url: 'http://127.0.0.1:7001/add',
                    data: {
                        name : name,
                        age : age,
                        mobile : mobile
                    },
                })

                console.log(`응답 -> ${JSON.stringify(response.data)}`);

                const output = document.querySelector('#output')
                output.innerHTML = `<p>${JSON.stringify(response.data)}</p>`;

            } catch (err) {
                console.error(`에러 -> ${err}`);
            }
        }


    </script>
</body>

</html>

 

* vue_training 폴더 생성

powershell에서 npm i -g yarn (-g는 global)

내 pc-속성-환경변수-시스템 변수-C:\Users\LX\AppData\Roaming\npm 입력

다시 powershell에서 yarn.cmd 입력해서 확인

yarn.cmd global add @vue/cli 입력 후 설치

내 pc-속성-환경변수-시스템 변수- C:\Users\LX\AppData\Local\Yarn\bin 입력

* vue.cmd create ex01

* manual 선택 -> router 에서 spacebar -> vuex spacebar -> linter까지 총 4개 선택

* 3.x로 선택 후 enter

* n enter

* esLint 맨 위에 선택 후 enter

* enter

* enter

* preset -> y

* preset as: myproject enter

* pakage manager->yarn enter

cd로 해당 경로 이동 후 yarn.cmd serve 하고 주소창에 localhost:8080 하면 vue 서버 on

 

- vue_training/ex02/src/views/HomeView.vue

<template>
  <div class="home">

    <div>
      <p>인사: {{ message }}</p>
    </div>

    <div>
      <input type="text" v-model="input1"> <!-- v-model이 input1 변수 상자를 감지하게 됨-->
      <input type="text" v-model="input2">
      <button @click="show()">확인</button>
    </div>

    <div>
      <p>{{ output }}</p>
    </div>

    <div>
      <h3 v-if="success">성공</h3>
      <h3 v-else>실패</h3>
      <button @click="changeSuccess">바꾸기</button>
    </div>

    <ul>
      <li>{{ dogs[0].name }}</li>
      <li>{{ dogs[1].name }}</li>
      <li>{{ dogs[2].name }}</li>
    </ul>

    <ul>
      <li v-for="dog in dogs" :key="dog.id">
        #{{ dog.id }} : {{ dog.name }}
      </li>
    </ul>

    <ul>
      <li v-for="(dog, index) in dogs" :key="index">
        #{{ index + 1 }} : {{ dog.name }}
      </li>
    </ul>

    <div>
      <button @click="goToAbout()">정보 화면으로</button>
    </div>

    <div>
      <button @click="goToProfile()">프로필 화면으로</button>
    </div>

    <div>
      <button @click="requestPersonList()">리스트 요청하기</button>
    </div>

    <ul>
      <li v-for="(person, index) in persons" :key="index">
        #{{ person.id }} : {{ person.name }}, {{ person.age }}, {{ person.mobile }}
      </li>
    </ul>

  </div>
</template>

<script>


export default {
  name: 'HomeView',
  data() {
    return {
      message: '안녕!',
      input1: '',
      input2: '',
      output: '',
      success: true,
      dogs: [
        {
          id: 1,
          name: '강아지1',
        },
        {
          id: 2,
          name: '강아지2',
        },
        {
          id: 3,
          name: '강아지3',
        },
      ],
      persons: []
    }
  },
  mounted() { // 이 화면이 로딩될 때 자동으로 호출됨(onload 하고 같은 기능)
    console.log(`홈 화면의 mounted 호출 됨`);
    this.message = 'Hello!';
  },
  methods: { //함수 정의하는 곳(객체로 인식해서 콤마 붙여줄 것)

    async requestPersonList() {
      console.log(`requestPersonList 호출됨.`);

      try {
        const response = await this.axios({
          method: 'post',
          url: 'http://127.0.0.1:7001/list',
          data: {},
        })

        console.log(`응답 -> ${JSON.stringify(response.data)}`);
        this.persons = response.data;

      } catch (err) {
        console.error(`에러 -> ${err}`);
      }
    },

    show() {
      console.log(`show 함수 호출 됨.`);
      this.message = '안녕하세요!';
      this.output = `${this.input1} ${this.input2}`;
    },

    changeSuccess() {
      this.success = !this.success;
    },

    goToAbout() {
      this.$router.push({
        path: '/about',
      })
    },

    goToProfile() {
      this.$router.push({
        path: '/profile',
      })
    },

  }
}
</script>

 

- vue_training/ex02/src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  },
  {
    path: '/profile',
    name: 'profile',
    component: () => import('../views/ProfileView.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

 

- vue_training/ex02/src/views/ProfileView.vue

<template>
  <div class="profile">
    <h1>프로필 화면입니다.</h1>
  </div>
</template>

 

powershell에서

yarn.cmd add axios, yarn.cmd add vue-axios 모듈 설치 

 

- vue_training/ex02/src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// axios 설정
import axios from 'axios'
import VueAxios from 'vue-axios'

createApp(App).use(store).use(router).use(VueAxios, axios).mount('#app')