프로그래머스 데브코스 10일차 with. TS 웹 풀스택

눌지 2024. 4. 19. 23:07

📚요약

지난 시간 Node.js를 활용해 웹 서버를 만드는 방법에 대해 알아봤습니다. 이번 시간에는 Docker를 활용해 mariadb를 설치합니다. 설치된 데이터베이스와 Node.js를 연결하고 페이지에서 요청하고 응답까지 받아보겠습니다.

📖DB와 DBMS

DB는 데이터를 통합해 효율적인 관리를 위한 데이터의 집합체라고 지난 시간에 배웠습니다. 여러 사람이 공유하고 사용하고, 중복을 없애고 고도로 구조화시켜 검색과 갱신의 효율화하는 목적이 있습니다.

데이터베이스 내의 데이터를 접근할 수 있도록 도와주는 것이 데이터베이스 관리 시스템(DataBase Management System, DBMS) 입니다. Oracle, MYSQL, MariaDB 등 다양한 브랜드들이 존재합니다.

📖Docker 활용

MariaDB를 사용하는 방법에는 크게 두가지가 있습니다. 직접 다운로드 받아 사용하는 방법과 Docker를 활용하는 방법입니다. 이번 시간에는 Docker를 활용하는 방법을 알아보겠습니다.

먼저 Docker Desktop을 다운로드 받아야 합니다.

이제 터미널(mac) 또는 cmd 창(window)로 가서 docker 명령어를 사용해 mariadb 이미지를 다운로드 받습니다.

🍯tip! docker도 git과 비슷하게 `docker` 명령어를 치면 간단한 명령어 리스트들이 나오게 됩니다. 이를 활용하면 좀 더 편하게 활용할 수 있습니다.

이미지를 다운로드 받는 명령어는 `docker pull mariadb` 입니다.
이미지를 다운로드 받았다면 컨테이너를 만들어야 합니다. `docker run --name mariadb -d -p 3306:3306 --restart=always -e MYSQL_ROOT_PASSWORD=root mariadb` 입니다. 명령어가 길어 조금 살펴보고 넘어가겠습니다.
--name mariadb : 컨테이너의 이름을 mariadb로 설정.
-d : 컨테이너를 백그라운드에서 실행.
-p : 호스트와 컨테이너 포트를 연결. 쉽게 얘기해 외부에서 접근할 포트 번호.
--restart=always : docker desktop을 실행 시킬 때 컨테이너 실행 또는 컨테이너가 죽을 때 재시작 설정.
-e : 비밀번호 설정.
mariadb : mariadb 이미지 사용.
만들어진 mariadb 컨테이너에 접속해 보겠습니다. 접속 명령어는 `docker exec -it mariadb /bin/bash` 입니다. 해당 명령어를 통해 컨테이너 내에서 Bash shell을 사용한 인터랙티브한 터미널 세션을 사용할 수 있습니다.
잠깐! 해당 명령어를 VSCode의 터미널에서 진행하고 있다면 오류가 발생할 확률이 큽니다. 그렇기 때문에 현재 디렉토리 위치를 'Users/User'로 바꾸던지 VSCode가 아닌 pc의 터미널이나 cmd 창을 사용하는 것을 추천합니다.
이제 터미널에 접속했다면, mariadb에 접속할 차례입니다. `mariadb -u root -p` 명령어를 사용하는데 root 사용자로 접속하고, 비밀번호를 입력받는다는 의미입니다. 비밀번호는 2번째 단계에서 작성한 root 입니다. 접속에 성공했다면 환영 메시지와 함께 화면에서 MariaDB [(none)] >을 발견할 수 있습니다.

Docker에 대한 자세한 내용은 다른 글에서 작성하도록 하겠습니다.

📖SQL

SQL, Structured Query Language의 약자로 RDBMS의 데이터를 관리하기 위해 설계한 특수 목적의 프로그래밍 언어

△SQL-위키백과

mariadb에 접속했기 때문에 우리는 그에 맞는 언어 SQL을 알아야 합니다. SQL의 경우 DBMS에 따라 조금씩 형태가 달라질 수 있습니다. 데이터의 검색, 삽입, 갱신, 삭제 명령어는 다음 글을 참고할 수 있습니다. 이 외의 명령어는 실습에 필요한 명령어만 알아보며 진행하겠습니다.

잠깐! 실습에 앞서 SQL은 항상 마지막에 ;(세미콜론)이 있어야 명령어가 끝난 것을 인식하기 때문에 잊지 말고 마지막에 써주야 합니다.

📄SQL 실습

우선 어떤 데이터베이스들이 있는지 확인하겠습니다. `show databases;` 입니다. 기본적으로 'information_schema, mysql, performance_schema, sys' 네 가지 데이터베이스들이 있습니다. 이제 저희의 데이터베이스를 만들겠습니다. `create database 데이터베이스이름;` 입니다. 원하는 이름을 적으면 만들어집니다. 이제 만들어진 데이터베이스에 접속하겠습니다. `use 데이터베이스이름;` 입니다.

`show tables`를 통해 테이블을 확인하고, `create table 테이블이름(열(column)이름 열(column)타입);`으로 테이블을 생성합니다.

이제 생성된 테이블에 데이터를 삽입(insert), 갱신(update), 삭제(delete), 조회(select)할 수 있습니다.

📖Node.js와 DB 연동

웹 서버에 데이터베이스를 연결하기 위해서는 먼저 mariadb와 연결할 수 있는 패키지를 설치해야 합니다. 패키지 설치는 npm과 yarn을 사용하는 방법이 있는데, npm을 이용해 설치를 진행합니다. 터미널에 `npm install mysql --save` 명령어를 사용하면 패키지의 설치와 함께 'package.json', 'package-lock.json' 파일과 'node_modules' 폴더가 생성됩니다.

🍯tip! 만약 패키지를 설치했는데 'package.json', 'package-lock.json' 파일과 'node_modules' 폴더가 생성되지 않는다면 다음 글을 참고해주세요~

정상적으로 설치가 끝났다면 연결을 위한 mariadb에 대한 기본 정보를 작성합니다. host를 적어주고, mariadb를 만들 때 사용했던 포트 번호, 유저와 비밀번호 마지막으로 연결할 데이터베이스까지 적어줍니다. 이렇게 만들 모듈을 index.js에서 불러와 서버를 시작하기 전에 연결을 시켜줍니다.

// database/connect/mariadb.js
const mariadb = require("mysql");

const conn = mariadb.createConnection({
  host: "localhost",
  port: 3306,
  user: "root",
  password: "root",
  database: "tennis",
});

module.exports = conn;

// index.js
const mariadb = require("./database/connect/mariadb");
mariadb.connect();

server.start(...);

연동이 된것을 확인하기 위해 한가지 작업을 해보겠습니다. 기존에 만들었던 메인 페이지의 메인을 들어가면 현재 상품 테이블(product)에 있는 값(row)들을 불러오도록 하겠습니다.

// product 테이블의 rows를 조회
mariadb.query("select * from product", function (err, rows) {
console.log(rows);
});

📖메인 페이지 연동

이제 Node.js와 데이터베이스 연결이 되었기 때문에 실제 페이지에서 서버로 요청을 보내 데이터를 조작할 수 있도록 만들어보겠습니다. 서버로 요청을 보내기 위해서는 주소를 통해 요청합니다.

잠깐! 메인 페이지에는 상품이 여러 개입니다. 이 때 어떻게 해야할까요? 요청하는 URL을 'localhost:8888/order1', 'localhost:8888/order2' 와 같이 처리할 수 있습니다. 하지만 이런 방식은 서버에서 새로운 제품이 생길 때마다 늘어나는 주소를 관리하기 힘듭니다. 그래서 쿼리스트링을 사용해 처리할 것입니다.

쿼리스트링이란? 지정된 매개변수(parameter)에 값을 할당하는 URL의 일부로 URL에서 ?로 시작하며 이름=값&이름=값의 형태로 나타내어 사용한다.

△Query string-위키백과

쿼리 스트링은 url 모듈을 사용해 추출할 수 있습니다. http.createSever함수의 onRequest 함수 내부에서 `url.parse(request.url, true).query`를 통해 사용할 수 있습니다. 쿼리 스트링을 가져왔으니 실제 요청을 위해서 버튼에 기능을 달아줍니다. `onclick="location.href = '/order?productId=1';"`을 하고 버튼을 누르면 해당 URL로 이동합니다. 서버에 URL을 처리하는 코드를 만들면 적절한 응답이 오게 됩니다. 이 때 orderlist에 주문한 상품을 추가하는 기능을 만들고 실제 orderlist로 화면에 보이게 만들어 보겠습니다.

기능을 추가하기 위해서 SQL을 사용하게 되는데 웹 서버에서 SQL을 사용하기 위해서는 mariadb 모듈을 가져와 query함수에 담아 전송하면 SQL도 처리할 수 있습니다.

// orderlist에 데이터 삽입
mariadb.query(
  `insert into orderlist values ("${productId}","${new Date().toLocaleDateString()}")`,
  function (err, rows) {
    console.log(rows);
  }
);

// orderlist 데이터 조회 및 HTML로 화면에 그리기
mariadb.query(`select * from orderlist`, function (err, rows) {
  response.write(orderlist_view);

  rows.forEach((el) => {
    response.write(`<tr>
    <td>${el.product_id}</td>
    <td>${el.order_data}</td>
    </tr>`);
  });

  response.write("</table>");
  response.end();
});

이제 Node.js를 이용해 요청과 응답을 모두 할 수 있게 되었습니다.

다음 시간에 계속...

출처 & 참고

김송아 강사님의 강의

데이터베이스, 위키백과, 2024.04.19

Docker 데모 시작 시 마다 container 함께 시작시키기, 스뎅(thDeng), 2024.04.19

일반 MIME 타입, MDN, 2024.04.19

파일 읽기 : readFile, readFileSync 차이, ch_yerini, 2024.04.19

module.export, exports, const_p, 2024.04.19