이미지 관련 데이터를 위한 서버 구축하기(7)

호박이와 칼림바·2023년 10월 30일
DatabaseMariaDBescape 문자phpsql유니코드 문자

React_Album 프로젝트(1)

목록 보기
7/10
post-thumbnail

📗목차

서버는 XAMPP를 사용하여 PHP 로컬 서버를 구현할 것이다.
XAMPP는 Apache, Mysql, PHP, 펄, Tomcat을 포함하고 있으며 사용자가 간단하게 설치할 수 있게 도와주는 프로그램이다.

아래의 코드는 지난 번 Carousel 구현하기(6)에서 만든 이미지 관련 데이터 파일이다.

const imageData = [
    {
        id: 1,   
        title: "고양이",
        urlLeft: [
            "images/cat/cat.jpg",
            "images/cat/cat_box.jpg",
        ],
        urlRight: [
            "images/cat/cat_sleep.jpg",
            "images/cat/cat_stand.jpg",
        ],
        txt: [
            "울 집 귀여운 고양이입니당.",
            "이름은 호박이😻"
        ],
    },
    (...) // 생략
    {
        id: 4,   
        title: "내가 먹은 음식",
        urlLeft: [
            "images/food/음식1.jpg",
            "images/food/음식2.jpg",
            "images/food/음식7.jpg",
        ],
        urlRight: [
            "images/food/음식5.jpg",
            "images/food/음식4.jpg",
            "images/food/음식3.jpg",
            "images/food/음식6.jpg",
        ],
        txt: [
            "맛있겠다. 다시 보자.🍰"
        ],
    },
];

export default imageData;

이 이미지 관련 데이터를 DB에 넣기 위해 json 형태로 변환할 것이다.

data.json

[
    {
        "id": 1,   
        "title": "고양이",
        "urlLeft": [
            "images/cat/cat_pretty.jpg",
            "images/cat/cat.jpg",
            "images/cat/cat_closeup.jpg",
            "images/cat/cat_box.jpg"
        ],
        "urlRight": [
            "images/cat/cat_sleep.jpg",
            "images/cat/cat_stand.jpg"
        ],
        "txt": [
            "울 집 귀여운 고양이입니당.",
            "이름은 호박이😻"
        ]
    },
    {
        "id": 2,   
        "title": "졸업식",
        "urlLeft": [
            "images/graduation/graduation1.jpg",
            "images/graduation/graduation4.jpg"
        ],
        "urlRight": [
            "images/graduation/graduation2.jpg",
            "images/graduation/graduation3.jpg"
        ],
        "txt": [
            "2023년 8월 31일🎉",
            "졸업식 날 찍은 사진입니다."
        ]
    },
    {
        "id": 3,   
        "title": "셀카",
        "urlLeft": [
            "images/myFace/face1.jpg",
            "images/myFace/face2.jpg"
        ],
        "urlRight": [
            "images/myFace/face3.jpg",
            "images/myFace/face4.jpg",
            "images/myFace/face6.jpg"
        ],
        "txt": [
            "내 얼굴🤗",
            "^ㅇ^"
        ]
    },
    {
        "id": 4,   
        "title": "내가 먹은 음식",
        "urlLeft": [
            "images/food/food7.jpg",
            "images/food/food1.jpg",
            "images/food/food2.jpg"
        ],
        "urlRight": [
            "images/food/food5.jpg",
            "images/food/food4.jpg",
            "images/food/food3.jpg",
            "images/food/food6.jpg"
        ],
        "txt": [
            "맛있겠다. 다시 보자.🍰"
        ]
    }
]

1. 데이터베이스 생성하기

데이터를 저장하기 위해 먼저 데이터베이스를 하나 생성해보겠다.
DB 관리툴인 DBeaver를 실행하여 다음 코드를 입력하자.

SHOW DATABASES;
CREATE DATABASE album CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE album;
SHOW TABLES;

데이터베이스를 생성할 때 유니코드 문자 처리를 하기 위해 설정한 부분이 있는데,
위에서 data.json 파일을 보면 이모지를 사용했다.
이모지는 유니코드 문자로 인코딩되어 있다.

유니코드 문자를 사용하지 않았다면 아래와 같이 코드를 작성했을 것이다.

CREATE DATABASE album;

1.1 테이블 생성하기

"txt": [
    "울 집 귀여운 고양이입니당.",
  	"이름은 호박이😻"
]

txt에는 이런 식으로 이모지(유니코드 문자)가 들어간다.
그렇기 때문에 txt 타입을 utf8mb4로 설정해주었다.

이제 DB에 이미지 관련 데이터를 넣어 보도록하자.
이미지 관련 데이터를 수동으로 DB에 저장하지 말고 PHP를 사용하여 동적으로 저장해보겠다.

2. 이미지 관련 데이터를 데이터베이스에 저장

2.1. PHP로 data.json 파일 읽어오기

data.json 파일의 데이터를 DB에 넣기 위해서 PHP를 사용할 것이다.

INSERT_db.php

<?php
$host = 'localhost';
$user = 'root';
$pw = 'system';
$dbName = 'album';

$mysqli = new mysqli($host, $user, $pw, $dbName);
$mysqli->set_charset("utf8mb4"); // 4바이트의 인코딩

if ($mysqli->connect_error) {
    die("데이터베이스 연결 실패: " . $mysqli->connect_error);
}

echo "데이터베이스 연결 성공<br>";

// 데이터 파일 읽기
$dataFile = file_get_contents('data.json');
$imageData = json_decode($dataFile, true);

if ($imageData === null) {
    die("data.json 파일을 읽어올 수 없거나 JSON 파싱 오류가 발생했습니다.<br>");
}

$mysqli->close();
?>

  • 유니코드 문자를 지원하는 인코딩 방식으로 utf8mb4를 사용
    $mysqli->set_charset("utf8mb4"); // 4바이트의 인코딩

  • JSON형식 문자열을 배열로 변환하는 PHP 함수 사용
    $imageData = json_decode($dataFile, true);

2.2. 테이블에 이미지 관련 데이터 넣기

foreach($imageData as $item) {
    $title = $item['title'];
    $urlLeft = json_encode($item['urlLeft']);
    $urlRight = json_encode($item['urlRight']);
    $txt = json_encode($item['txt'], JSON_UNESCAPED_UNICODE);

    // 이미 데이터가 있는지 확인
    $checkDuplicateQuery = "SELECT * FROM image_data WHERE title = '$title'";
    $duplicateResult = $mysqli->query($checkDuplicateQuery);

    if ($duplicateResult->num_rows == 0) {
        $insertQuery = "INSERT INTO image_data (title, urlLeft, urlRight, txt) 
        VALUES ('$title', '$urlLeft', '$urlRight', '$txt')";

        if ($mysqli->query($insertQuery) === TRUE) {
            echo "데이터가 성공적으로 삽입되었습니다.<br>";
        } else {
            echo "데이터 삽입 오류: " . $mysqli->error;
        }
    }
}
  • 반복문을 통해 각 JSON 항목을 순회하면서 테이블에 삽입
  • urlLeft, urlRight, txt 이 세 배열을 JSON 문자열로 변환
  • 이미 DB에 있는 title 값과 중복되지 않는 항목만 삽입

2.3. 이미지 관련 데이터 삽입 전체 코드

INSERT_db.php

<?php
  $host = 'localhost';
  $user = 'root';
  $pw = 'system';
  $dbName = 'album';

  $mysqli = new mysqli($host, $user, $pw, $dbName);
  $mysqli->set_charset("utf8mb4"); // 4바이트의 인코딩

  if ($mysqli->connect_error) {
      die("데이터베이스 연결 실패: " . $mysqli->connect_error);
  }

  echo "데이터베이스 연결 성공<br>";

  // 데이터 파일 읽기
  $dataFile = file_get_contents('data.json');
  $imageData = json_decode($dataFile, true);

  if ($imageData === null) {
      die("data.json 파일을 읽어올 수 없거나 JSON 파싱 오류가 발생했습니다.<br>");
  }

  foreach($imageData as $item) {
      $title = $item['title'];
      $urlLeft = json_encode($item['urlLeft']);
      $urlRight = json_encode($item['urlRight']);
      $txt = json_encode($item['txt'], JSON_UNESCAPED_UNICODE);

      // 이미 데이터가 있는지 확인
      $checkDuplicateQuery = "SELECT * FROM image_data WHERE title = '$title'";
      $duplicateResult = $mysqli->query($checkDuplicateQuery);

      if ($duplicateResult->num_rows == 0) {
          $insertQuery = "INSERT INTO image_data (title, urlLeft, urlRight, txt) 
          VALUES ('$title', '$urlLeft', '$urlRight', '$txt')";

          if ($mysqli->query($insertQuery) === TRUE) {
              echo "데이터가 성공적으로 삽입되었습니다.<br>";
          } else {
              echo "데이터 삽입 오류: " . $mysqli->error;
          }
      }
  }

  $mysqli->close();
?>

서버를 실행하면 데이터가 성공적으로 삽입되었다는 메시지가 출력된다.

DBeaver에서도 데이터가 잘 들어갔는지 확인해보자.

잘 들어갔다.

이제 DB에 들어간 이미지 관련 데이터를 검색하는 코드를 작성할 것이다.
이 코드는 프론트에서 이미지 관련 데이터를 읽어오기 위한 것이다.

3. 이미지 관련 데이터 검색

GET_db.php

<?php
    header("Access-Control-Allow-Origin: *");
    $host = 'localhost';
    $user = 'root'; 
    $pw = 'system';  
    $dbName = 'album'; 

    $mysqli = new mysqli($host, $user, $pw, $dbName);
    $mysqli->set_charset("utf8mb4"); // 4바이트의 인코딩

    if ($mysqli->connect_error) {
        die("데이터베이스 연결 실패: " . $mysqli->connect_error);
    }

    $selectQuery = "select * from image_data;";    
    $result = $mysqli->query($selectQuery);

    if ($result) {
        $imageData = array();

        while ($row = $result->fetch_assoc()) {
            $imageData[] = $row;
        }

        // 결과를 JSON 형식으로 출력
        echo json_encode($imageData, JSON_UNESCAPED_UNICODE);
    } else {
        echo "데이터를 불러오지 못했습니다.";
    }
   
    mysqli_close($mysqli); 
?>
  • 유니코드 문자를 escape 문자를 처리하지 않고 그대로 표현하기 위함
    echo json_encode($imageData, JSON_UNESCAPED_UNICODE);

서버를 실행하여 GET_db.php 파일을 실행한 결과를 확인할 수 있다.

이렇게 이미지 관련 데이터를 출력했다면 이제 다음은 프론트와 연결하는 것이다.
다음 포스팅에서 API 호출하여 이미지 관련 데이터를 활용해보겠다.

profile
호박이와 칼림바
프론트엔드 개발자입니다.
이전 포스트

Carousel 구현하기(6)

다음 포스트

Axios를 활용하여 이미지 관련 데이터 불러오기(8)

0개의 댓글