ClipArt WebPage 구현 개발일지 - 2.Maria DB에 데이터 베이스 추가하기

저번에 데이터 명세서를 작성한 것을 토대로 MariaDB 에 등록하는 과정을 거쳐봤다.

1. mydb 라는 데이터베이스를 추가해줬다.

CREATE DATABASE mydb;
use mydb;

2. clip_art 라는 table 을 추가.

 CREATE TABLE clip_art (
  serial_number INT PRIMARY KEY,
  title VARCHAR(100),
  wallpaper VARCHAR(100)
);

PRIMARY KEY:

It ensures that the values in the 
specified column or columns are unique and not null.

검색을 할 때 사용되는 key 값으로 중복되지 않고 null 이 될 수 없다.

VARCHAR(100)

문자열(String) 과 비슷한 Type 으로 뒤에 괄호는 데이터의 크기를 의미하는 것이다.
ex) VARCHAR(100) -> 100글자의 문자열

wallpaper VARCHAR(100)

mariaDB 에 사진을 저장하는 방법은 보통 3가지가 있다.
그 중 2가지 방법을 소개하자면
1.BLOB 타입에 사진 그 자체를 저장하여 불러오는 방법과
2.VARCHAR 타입에 사진의 Path 를 저장하여 그 Path 를 사용하여 불러오는 방법이 있다.

나는 그 중 BLOB 방식은 관리하기 상대적으로 힘들고 등록하는 방법도 잘 모르겠어서
VARCHAR 타입에 사진의 Path을 저장하는 방식으로 구현할까 한다.
-> 만약 관리가 힘들고 잘 안된다면 BLOB 방식으로 구현할 생각도 있다.

3. pictures table 추가.

CREATE TABLE pictures (
  picture_id INT PRIMARY KEY,
  serial_number INT,
  picture_name VARCHAR(100),
  picture_image VARCHAR(255),
  added_time DATETIME,
  FOREIGN KEY (serial_number) REFERENCES clip_art(serial_number)
);	

FOREIGN KEY (serial_number) REFERENCES clip_art(serial_number)

pictures table 의 clip_art에서 serial_number 의 관계성을 추가시켜 주었다. 이를 통해 clip_art 안의 pictures 가 있는 것을 구현할 수 있게 만들었다.

등록 예시

INSERT INTO pictures (picture_id, serial_number, picture_name)
VALUES (1, 1, 'image1.jpg');

INSERT INTO pictures (picture_id, serial_number, picture_name)
VALUES (2, 1, 'image2.jpg');

INSERT INTO pictures (picture_id, serial_number, picture_name)
VALUES (3, 1, 'image3.jpg');

이런 식으로 등록하면 될 것이다.

추가적인 사항 - imageSize

내가 이미지 사이즈도 구할 수 있는 기능 또한 추가하려하는데 DataBase 로 처리하지 않고 그냥 javaScript 상으로 처리할 것 같다.

예시코드

function displayImageDimensions(imageUrl) {
  var image = new Image();
  image.src = imageUrl;

  image.onload = function() {
    var width = image.naturalWidth;
    var height = image.naturalHeight;

    console.log("Image dimensions: " + width + " pixels (horizontal) x " + height + " pixels (vertical)");
  };
}

// Example usage
var imageUrl = "path/to/your/image.jpg";
displayImageDimensions(imageUrl);

REF

To implement a function where multiple pictures can be registered in the "clip_art" table in MariaDB, you can create a separate table to store the pictures and establish a one-to-many relationship between the "clip_art" table and the "pictures" table.

Here's an example of how you can structure the tables and implement the function:

1. Create the "clip_art" table with a primary key:

CREATE TABLE clip_art (
  serial_number INT PRIMARY KEY,
  title VARCHAR(100),
  wallpaper VARCHAR(100)
);

2. Create the "pictures" table with a foreign key referencing the "clip_art" table:

CREATE TABLE pictures (
  picture_id INT PRIMARY KEY,
  serial_number INT,
  picture_name VARCHAR(100),
  FOREIGN KEY (serial_number) REFERENCES clip_art(serial_number)
);

3. To register multiple pictures for a clip art set, you can insert multiple rows into the "pictures" table, each associated with the corresponding "serial_number":

INSERT INTO pictures (picture_id, serial_number, picture_name)
VALUES (1, 1, 'image1.jpg');

INSERT INTO pictures (picture_id, serial_number, picture_name)
VALUES (2, 1, 'image2.jpg');

INSERT INTO pictures (picture_id, serial_number, picture_name)
VALUES (3, 1, 'image3.jpg');

In this example, we're inserting three rows into the "pictures" table, all associated with the clip art set identified by "serial_number" 1. Each row represents a separate picture with a unique "picture_id" and "picture_name".

By using this approach, you can register multiple pictures for each clip art set and establish the relationship between them through the "serial_number" foreign key.

---

피드백

1. 정말 하기 싫지만 해야할 일이 있을 때 너가 공부하기에 정말 좋은 공간 (카페)에 가서 알람 1시간 맞춰두고 진짜 딱 이것만하고 논다는 마인드로 집중력있게 밀도있게 하기

2. 코딩에 있어서 감이 안잡히면 일단 chatGPT 에 물어봐서 키워드를 뽑아내고 개념을 조금이라도 완성하면서 길을 찾아가자

3. 글을 2개 나눠서 작성하자

   • 문제해결, 생각 글: 문제 해결 과정을 막무가내로 작성한 글.

   • 피드백 글: 문제가 완전히 해결되고 문제 해결 과정을 정리한 글, 깔끔해야 함