웹 서비스의 이해 (4) - 데이터베이스 기초(도커, mariaDB설치)와 쇼핑몰 페이지 완성

/date 24.08.23.

/* 여담.. 블로그 올리는 거 과제도 아니지만 오늘 코드 붙잡고 씨름한 게 너무 많아서..ㅎ 기가 막혀서 글 씀 */

 

데이터베이스

 

데이터베이스란?

데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체를 데이터베이스(Database; DB)라고 합니다. 데이터를 여기저기서 찾을 필요 없이, 데이터베이스에서 모든 처리가 가능하도록 해요. 데이터를 구조화 후 관리함으로써 데이터의 중복을 막고, 효율적이고 빠른 데이터 연산에 도움을 줍니다.

 

데이터베이스에 대해 살펴볼 때 빼놓을 수 없는 시스템이 DBMS입니다. 많은 경우 DBMS = 데이터베이스라고 생각하게 되는데 결론부터 말하자면 전혀 다릅니다. 데이터베이스를 운영하고 관리하기 위해 DBMS(DataBase Management System)를 사용하는 것입니다. 데이터베이스는 그냥 데이터들의 집합체입니다. DBMS를 사용하면서 데이터의 집합체 속 데이터 관리의 비효율적인 부분을 해결합니다. 이러한 DBMS는 오라클, mySQL, mariaDB 등 다양한 회사에서 서비스를 제공 중입니다. 운영 주체는 다르지만, 데이터베이스에 연산을 요청하기 위해 사용되는 주요 명령어는 동일하다고 보아도 무방합니다.

 

SQL(Structured Query Language)은 데이터베이스에 연산을 요청하기 위해 사용되는 언어로 데이터를 생성, 조회, 수정, 삭제 등과 같은 기능을 수행할 수 있습니다. 대표적인 SQL로 SELECT(데이터 조회), INSERT(데이터 삽입), UPDATE(데이터 수정), DELETE(데이터 삭제), CREATE(데이터 생성)이 있습니다.

 

저는 mariaDB를 활용하여 쇼핑몰 페이지를 완성해 보았습니다. mariaDB를 이용하기 이위해선 도커 설치가 필요합니다.

 

https://www.docker.com/

Docker: Accelerated Container Application Development

 

 

도커는 직접적으로 컴퓨터에 뭔가를 설치하려 하지 않습니다. 쉽게 말하자면 OS 위에 도커를 한 겹 깔고, 그 위에서 프로그램이 돌아갈 수 있도록 합니다. 비유하자면 도커는 컨테이너를 여러 개 들고 다니는 셈입니다. 우리가 필요에 의해 요청을 할 때마다 컨테이너를 하나씩 주며 "이 안에 들어가서 써~!"라고 합니다. 이렇게 사용한다면 우리의 OS는 훨씬 빠르고 가벼워지겠죠? 어플리케이션 또한 독립적으로 잘 움직이게 되는 편입니다.

 

 

도커를 설치해 보겠습니다. 본인의 컴퓨터 환경에 맞는 파일로 다운로드 받으면 됩니다. 저는 맥용 도커를 다운로드하였습니다.

 

사실 제가 할 건 아무것도 없었습니다. 드래그 앤 드롭 후 다음, 다음, 다음... 계속 눌러주면 설치 완료입니다.

 

 

짜잔-!

Sign up 하라는 페이지가 가장 먼저 보이길래 계정이 있어야 사용 가능한 줄 알았더니 그건 또 아니더군요. 계정 없이도 잘만 사용 중입니다.

 

도커를 무사히 설치했으니 이제 mariaDB를 설치할 차례입니다. 터미널을 통해 진행해 보겠습니다.

 

첫 명령어는 docker pull mariadb입니다.

 

그럼 도커가 알아서 mariaDB를 당겨 옵니다. 당겨온 mariaDB를 실행시켜 봅시다.

 

명령어 넣고, password를 설정하여 실행합니다.

 

mariaDB가 있는 컨테이너에 접속합니다. 말하자면 "도커야, mariaDB 컨테이너를 실행시켜 줘~"라고 한 겁니다. 그러고 나서 mariaDB를 정식으로 실행시킵니다. mysql -u root -p 명령어를 입력해 보았습니다.

 

그랬더니 엥... 오류가 납니다. mysql이라는 명령어가 없다네요? 이게 어떻게 된 일일까요? 저는 또 빡침분노로 일렁이는 마음을 다잡고 전지전능한 구글을 통해 해결법을 서치해 보았습니다. 제가 설치한 시점의 mariaDB 서버 버전이 11.5.2로 11.0 이상이라, 이 시점부터는 mysql이라는 명령어를 mariadb로 변경했다고 하네요. 명령어를 바꿔서 실행해 보겠습니다.

 

성공했습니다. 이런 부분은 강의에서 업데이트를 해주었더라면 더 좋았을 텐데요. 아무튼 간 기쁩니다. 문제 해결~!

 

도커를 통해 mariaDB를 활용할 수 있게 되었습니다. 그럼 간단하게 SQL에 대해 정리해 보겠습니다.

 

SQL

 

데이터베이스에는 데이터를 저장할 방을 만들 수 있습니다. 각 방마다 역할이 따로 있겠죠? 테니스와 관련된 것을 모아 두는 방, 그림을 모아 두는 방... 이런 것처럼 말입니다. 하나의 DBMS를 사용하더라도 하나의 데이터만 담아 둘 필요는 없습니다. 여러 사이트를 운영하더라도 방만 따로 만들어주면 같은 DBMS에서 충분히 관리를 해줄 수 있습니다.

 

방과 관련한 간단한 명령어입니다:

• 방 확인: SHOW DATABASES;
• 방 만들기: CREATE DATABASE (방 이름);
• 방 들어가기: USE (방 이름);

 

방 안에서 저장소를 만들고 싶을 수 있습니다. 테니스와 관련된 것을 모아 두는 방이라면, 회원들의 정보, 테니스 용품의 정보, 주문 현황 정보 등을 각기 다른 구역에 저장해 두어야 나중에 꺼내 쓰기 편리합니다. 이렇게 방 안에서도 저장소의 구역을 나누어 주어야 하고, 그 저장소는 테이블, 즉 표처럼 생겼다고 생각하면 좋습니다. 

 

예를 들어 회원 정보를 위한 저장소 member를 만든다고 치겠습니다. 저장소를 생성하기 위해선 아래와 같은 명령어를 작성해야 합니다.

CREATE TABLE member
(
	id INT,
    name VARCHAR(30),
    pwd VARCHAR(30)
);

 

INT로 지정한 컬럼에는 정수만 저장할 수 있습니다. VARCHAR로 지정한다면 문자열을 넣을 수 있고, 괄호 안 숫자만큼의 문자 배열을 저장할 수 있습니다.

 

그렇다면 저장소의 데이터를 조회하고 새로 삽입하려면 어떻게 해야 할까요?

 

데이터를 조회하려면 아래처럼 명령어를 입력하면 됩니다.

SELECT 컬럼명 FROM 테이블명;

 

컬럼 상관없이 저장소의 모든 데이터를 조회하려면 컬럼명 대신 *을 넣어 주면 됩니다. 또한 특정 데이터를 조회하기 위해서는 조건을 붙여 주어야 합니다.

SELECT 컬럼명 FROM 테이블명
WHERE 조건;

 

 

테이블에 데이터를 삽입하려면 아래처럼 명령어를 입력합니다.

INSERT 컬럼명1, 컬럼명2, ... INTO 테이블명
VALUES (컬럼1데이터, 컬럼2데이터, ...);

 

이렇게 삽입한 테이블을 확인했더니, 앗차차! 수정해야 할 사항이 있습니다. 그런 경우에는 UPDATE로 수정을 해주면 됩니다.

 

UPDATE 테이블명 SET 컬럼명 = '수정할 값' WHERE 조건;

 

주의할 점은 조건을 붙이지 않으면 테이블 전체에 영향을 미친다는 것입니다. 바꾸어 말하면 테이블 전체를 수정하고 싶다면 조건을 붙이지 않으면 되겠죠?

 

이렇게 수정을 했는데도 마음에 들지 않습니다. 그냥 데이터를 삭제하는 것이 낫겠습니다. 그럴 때는 DELETE를 이용하여 데이터를 삭제해 줍니다.

DELETE FROM 테이블명 WHERE 조건;

 

마찬가지로 조건을 붙이지 않으면 테이블 전체 데이터를 삭제합니다.

 

이제 페이지 운영에 필요한 데이터베이스를 구성해 주었습니다. 데이터베이스와 node.js를 연결해 주겠습니다. VScode에서 터미널을 열고, npm install mysql --save 명령어를 입력합니다. 이는 mysql 모듈을 설치하는 명령어입니다.

 

 

 

배운 내용 토대로 쇼핑몰 페이지를 완성했습니다. 데이터베이스 파일은 일부러 제외하고 올려서 아마 그 부분은 작동하지 않을 테지만, 여타 코드는 깃허브에서 확인할 수 있습니다. 

 

https://github.com/romiwaves/w4_tennismarket

GitHub - romiwaves/w4_tennismarket

 

 

 

 

 

아래는 사족 겸 에러 해결 이야기 ...

 

• 이전 글에서 main.html을 만들며 css 파일은 외부 스타일 시트로 뺀 후 연결을 해줬다고 언급했다. 그런데 그게 내 발목을 잡을 줄은 몰랐지... 강의에서 제시하는 대로 사진 파일에 대해 requestHandler 속 function 적용도 하고, handler 안에 넣기도 했는데 절대 사진이 메인 페이지에 안 뜨는 거다. 엥... 왜 이럴까 하고 한참 고민하다가 생각해 보니 내가 외부 스타일 시트를 적용해 두고는 그걸 연결을 안 해서 그런 것 같다는 결론을 내렸다. 이걸 위해 함수를 더 늘려서 복잡한 파일로 만들긴 싫어서 그냥 내부 스타일 시트로 바꿔줬다. 그랬더니 연결 성공!
• 저번에 favicon을 function으로 받아주는 방식으로 해결을 했다고 언급했는데, 오늘 결국 오류 메세지를 출력하는 방식으로 바꿨다.
• 그랬더니 orderlist 페이지로 이동하려 하면 오류 메세지를 출력하는 거다... 하 나 진짜 환장 main.html에서 order list 페이지로 넘어가는 a 태그 url 주소를 ./orderlist로 바꿔서 해결했다.
• 이해하는 데 제일 많은 시간을 들인 건 requestHandler.js 파일... 사실 아직도 완벽하게 이해를 했다고는 말할 수 없겠다. (ㅜㅜ) 코딩이 논리적이라서 좋아하는 건데 아직 이 문법의 논리를 이해하지 못함. 그래요 나의 무지와 절대적인 투자 시간 부족 때문이겠죠... 앞으로 더 하다 보면 내가 코딩의 세계를 이해하는 해상도가 높아지리라 믿는다. (그렇지만 아직도 커비마냥 코딩 잘하는 사람을 삼켜서 비열하게 코딩 고수가 되고 싶다는 상상을 한다.)
• 아, order 버튼을 클릭하면 나타나는 thank you 멘트 페이지에서 다시 main 화면으로 돌아오는 버튼이나 링크가 있다면 좋았겠다는 생각을 했다. 수업 따라가고 이해하는 것에 급급해서 구현해보진 못했지만... 다시 한번 이 프로젝트를 톺아보며 복습할 때는 해봐야겠다.
• 이번 주는 공부하는 내내 조금 고통스러웠는데, 내가 node.js와 데이터베이스를 처음 만져본 영향이 없지 않았던 것 같다. 이제까지는 백엔드에 전.혀. 관심이 없어서 자바만 살짝 깔짝여 봤지 node.js랑은 친하게 지내지 않았고... 사실 아직도 잘 모르겠다. 나는 뒤에서 이렇게 사부작대며 연결하고 서버 구축하는 일의 매력을 아직은 깨닫지 못했다. 공부를 해서 좀 더 잘 알게 되면 나아지려나?
• 어차피 해야 하는 일이라면 즐겁게 하자는 생각으로 부정적인 말은 지양하려고 하지만, 백엔드를 다루는 한 주 동안 배움의 즐거움은 찰나요 무지의 고통은 억겁이어서 앞으로 8주간 백엔드를 더 배운다는 사실이 나에겐 좀 버겁다. 그렇지만... 이렇게 모르는 상태에서 빡세게 8주간. 될.때.까.지. 백엔드를 공부할 기회가 생긴다는 건...럭..키...비........ㅋ...ㅣ....라고 생각하렵니다... 백엔드가 재밌어지면 또 이런 사족을 쓰겠습니다 그때까지 안녕히..