🎯 데이터베이스(DB) 개념을 익히고, 구축한 DB와 연결된 웹을 구현합니다.

📙 Today I Learned

데이터베이스(Database, DB)

데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체입니다.

• 데이터 중복을 막고, 효율적이고 빠른 데이터 연산을 가능하게 합니다.
• 다수의 사용자와 애플리케이션이 데이터를 안전하게 저장하고 공유할 수 있습니다.
  
  

DBMS(DataBase Management System)

데이터를 운영하고 관리하기 위한 시스템입니다.

• 데이터를 저장, 조회, 수정, 삭제하는 기능을 제공합니다.
• 예시 : ORACLE database, MySQL, MariaDB
  
  

Docker + MariaDB를 활용한 DB 구축

Docker 🐳

Docker는 리눅스의 응용 프로그램들을 격리하는 컨테이너를 실행하고 관리하는 오픈 소스입니다.

즉, 프로그램을 실행하는 데 필요한 모든 것을 하나의 박스(컨테이너📦)에 담아, 어디서든 똑같이 실행되도록 도와주는 도구입니다.

컨테이너란?
애플리케이션 실행에 필요한 모든 요소(코드, 런타임, 라이브러리 등)를 포함한 독립된 환경입니다.
출처: Docker

Docker 설치
Docker를 사용하려면 Docker Desktop🐳을 설치해야 합니다.

• Docker 설치 가이드에서 알맞은 OS를 선택하여 설치 프로그램을 다운로드합니다.
  
  

MariaDB

MySQL의 후속 버전으로, 빠르고 안정적으로 데이터를 처리하는데 강력한 기능을
제공합니다.

Docker를 사용하여 MariaDB 설치 ( docker 실행 중인 상태 )

1️⃣ MariaDB 이미지 다운로드

docker pull mariadb

🤔 이미지란 무엇일까?

도커에서 컨테이너를 실행하려면 먼저 이미지(Image) 가 필요합니다. 이미지는 쉽게 말해, 컨테이너를 만들기 위한 기초 템플릿을 말합니다. 이미지 안에는 프로그램을 실행하는 데 필요한 환경 설정, 라이브러리, 파일들이 모두 담겨 있습니다.
출처: dataminded

그런데 도커 이미지는 그 목적에 따라 두 가지로 나눌 수 있습니다.

• 직접 만든 애플리케이션 이미지
• 기성 서비스용 이미지 (예: 데이터베이스 이미지) 👈 "우리가 진행할 이미지"

이 둘은 역할이 다르기 때문에 사용하는 방식에도 차이가 생깁니다.

---

🤔 왜 구분해야 할까요?

이미지라는 개념은 같지만,

• 애플리케이션 이미지는 내가 만든 프로그램을 실행하기 위한 환경을 담고,
• DB 이미지는 서비스(데이터베이스 등)를 실행할 수 있게 준비된 환경을 담습니다.

즉, 용도에 따라 이미지의 구조도, 사용 방법도 달라지게 되는 것입니다.

2️⃣ MariaDB 컨테이너 실행

docker run --name mariadb -d -p 3306:3306 --restart=always -e MYSQL_ROOT_PASSWORD=비밀번호 mariadb

• -e MYSQL_ROOT_PASSWORD=비밀번호: 비밀번호 설정

3️⃣ MariaDB 컨테이너에 접속

docker exec -it mariadb /bin/bash

4️⃣ MariaDB 접속

mysql -u root -p

⇒ mariadb -u 사용자이름 -p : 사용자 이름 설정

⚠️ 발생한 오류
mysql 실행 시 bash: mysql: command not found 오류가 발생했다.

💡 해결 과정
해당 오류를 검색하여 나오는 흔한 해결 방법부터 여러 해결 방법을 시도했지만 해결되지 않았고, 알아낸 결과 mariadb -u root -p 명령어를 사용해야 한다는 것, 이를 적용하니 정상적으로 실행되었다.

5️⃣ password 입력

안보여도 입력이 된 거니까 당황하지 말기! 😎

SQL(Structure Query Language)

데이터베이스에서 데이터를 관리하고 처리하는 언어입니다. 데이터를 삽입(INSERT), 생성(CREATE), 조회(SELECT), 수정(UPDATE), 삭제(DELETE)할 수 있는 명령어들이 있습니다.

데이터베이스 설정하기 ( MariaDB에 접속한 상태 )

• 방 확인
  SHOW DATABASES;
  

• 방 만들기
  CREATE DATABASE 이름;
  

• 방 들어가기
  USE 이름;

• 방 안 테이블 보기
  SHOW TABLES;
  

• 방 안에서 저장소 만들기
  CREATE TABLE 테이블명
(Enter)
(
(Enter)
  칼럼명 자료형,
  (Enter)
  ...
  (Enter)
);
  💡 Enter는 가독성을 높이기 위한 것일 뿐, 필수는 아닙니다.
  

• 테이블 데이터 조회
  SELECT 칼럼명 FROM 테이블명;
  (칼럼명에 *을 넣으면 전체 데이터 조회 가능)
  

• 특정 데이터 조회
  SELECT 칼럼명 FROM 테이블명
(Enter)
WHERE 조건;
  

• 테이블 데이터 삽입
  INSERT INTO 테이블명 (칼럼명1, 칼럼명2, ... )
(Enter)
VALUES(칼럼1 데이터, 칼럼2 데이터, ...);
  

• 테이블 데이터 수정
  UPDATE 테이블명
(Enter)
SET 칼럼명 = 수정할 값
(Enter)
WHERE 조건;
  

• 테이블 데이터 삭제
  DELETE FROM 테이블
(Enter)
WHERE 조건;

Node.js에 DB 연동

Node.js에서 MariaDB를 연동하려면 mysql 패키지를 설치하고 연결을 설정해야 합니다.

1️⃣ mysql 패키지 설치

npm install mysql --save

⇒ npm install mysql

💡 --save 옵션은 이전에는 패키지를 dependencies(프로젝트에서 필요한 패키지 목록)에 추가하기 위해 사용되었습니다. 하지만 npm 5부터는 기본적으로 dependencies에 추가되도록 변경되어 이제는 필요하지 않습니다.

2️⃣ mariadb.js 파일 설정 (DB 연결)

database > connect 폴더에 mariadb.js 파일을 생성하고, 아래와 같이 설정합니다.

❓ 왜 mariadb.js는 module.exports = conn;을 사용할까?

• mariadb.js에서 내보내는 것은 Mariadb 연결 객체 (conn) 하나뿐이므로 module.exports를 통째로 덮어씌우는 것이 적절합니다.
• exports는 단순히 module.exports의 참조(별칭)입니다.
• 여러 개의 값을 내보낼 때는 exports.키값 = 값 방식으로 내보내면 됩니다.

3️⃣ index.js 파일 설정 (연결 및 실행)

DB 연결을 설정하고, 연결을 시작합니다.

4️⃣ requestHandler.js 파일 설정 (쿼리 실행)

데이터베이스 쿼리를 실행하고, 결과를 처리합니다.

터미널 출력 결과
DB 연결 및 쿼리 실행 후 터미널에서 출력되는 결과는 다음과 같습니다.

HTML,CSS와 Node.js 연결

1️⃣ HTML 파일 읽어오기 (requestHandler.js)

requestHandler.js에서 fs 모듈을 사용하여 파일을 읽어옵니다.

readFileSync 메서드를 사용하여 main.html 파일을 읽습니다. 읽어온 파일 내용은 main_view 변수에 저장합니다.

2️⃣ 불러온 HTML 파일 내용 삽입
HTML 파일을 본문에 삽입하여 웹 페이지로 렌더링합니다.

⚠️ 이미지 파일 경로 처리

node index.js 실행 시 이미지 파일이 pathname으로 인식되어 이미지가 미생성됩니다.

3️⃣ handle 객체에 이미지 파일 경로를 key값으로 넣어 각 이미지 파일을 불러오는 함수를 value 값으로 넣어줍니다.

출력한 웹 페이지

주문 버튼 클릭 시 DB에 추가 및 페이지 이동 구현

1️⃣ MariaDB 테이블 생성

orderlist 페이지를 위해 MariaDB에서 orderlist 테이블을 생성합니다.

2️⃣ main.html 버튼에 링크 걸기

• order 버튼을 눌렀을 때 페이지 이동과 함께 주문 정보를 전달하려면, 버튼에 onclick 이벤트로 location.href를 사용합니다. product=1은 주문할 제품의 ID입니다. 이 값은 URL 파라미터로 전달됩니다.

• order list 링크를 클릭하면 orderlist 페이지로 이동합니다.

3️⃣ requestHandler.js 설정

/order와 /orderlist 경로를 처리할 핸들러 함수를 정의합니다.

• order 함수에서 버튼을 클릭할 때, 해당 주문 정보를 DB에 삽입합니다.

  • mariadb.query를 사용해 DB에 데이터를 삽입합니다.

• orderlist 함수에서는 orderlist 테이블에서 모든 주문 데이터를 조회하여 본문에 표시합니다.

  • DB에서 모든 orderlist 데이터를 조회한 후, HTML 테이블 형식으로 결과를 출력합니다.

4️⃣ server.js에 query 파라미터 추가

url.parse(request.url, true).query를 사용하여 URL의 쿼리 파라미터를 추출하고, 이를 사용해 데이터를 처리합니다.

ℹ️ true가 사용되는 이유
이 인자가 있어야 쿼리 문자열이 자동으로 객체로 변환되어 쉽게 사용할 수 있습니다.

const parsedUrl = url.parse('http://example.com/order?product=1&quantity=3&color=blue', true);
console.log(parsedUrl.query.product); // 1
console.log(parsedUrl.query.quantity); // 3
console.log(parsedUrl.query.color); // blue

URL 구성 요소 설명

http://example.com/order?product=1&quantity=3&color=blue

• URL (Uniform Resource Locator) : 자원의 위치를 나타내는 웹 주소 전체입니다.

  • http://example.com/order?product=1&quantity=3&color=blue

• 프로토콜 (Protocol) : 서버와 통신할 때 사용하는 방식입니다.

  • http

• 호스트 (Host) : 웹사이트나 서버의 주소입니다.

  • example.com

• 경로 / 패스네임 (Pathname) : 서버 내 자원이 있는 경로입니다.

  • /order

• 쿼리 문자열 (Query String) : ? 뒤에 오는 전체 문자열로, 파라미터들의 묶음입니다.

  • product=1&quantity=3&color=blue

쿼리 관련 용어

• 쿼리 파라미터 (Query Parameter) : key=value 형태의 각각의 쌍을 말합니다.

  • product=1, quantity=3, color=blue

• 파라미터 키 (Parameter Key) : 각 쿼리 파라미터의 이름입니다.

  • product, quantity, color

• 파라미터 값 (Parameter Value) : 각 파라미터 이름에 대응되는 실제 값입니다.

  • 1, 3, blue

• & 기호 : 여러 파라미터를 구분해주는 기호입니다.

  • product=1 & quantity=3 & color=blue

🧐 오늘의 발견

• Docker를 이용한 MariaDB 컨테이너 설정과 SQL 명령어의 기본적인 사용법을 알게 되었습니다.

• DB와 웹을 연동하는 과정에서 SQL를 활용할 수 있다는 것을 알게 되었습니다.

🖋️ 한 줄 회고

데이터를 가져오고 활용하는 과정에서 예상보다 많은 장애물에 부딪혔지만, 그 어려움을 해결하는 과정 속에서 데이터와의 연결 고리를 만드는 중요성을 다시 한 번 깊이 깨달았습니다.🫠