🎉학교 프로젝트 결과물로 사이트 만들기(1) - 스토리보드 제작 및 DB설계도 만들기

• 📝스토리보드 작성 , 스토리보드 기반 디자인, ERD 작성
• DB 서버열기와 DB에 더미데이터 넣기
• 메인 페이지 제작
• 회원가입 페이지 제작
• 프로젝트등록 페이지 제작
• 결제 페이지 제작

이 포스터는 학교 프로젝트의 포트폴리오를 작성한 것이다.
프로젝트의 내용은 크라우드 펀딩을 받을 수 있는 게임개발사이트 만들기이다.

사이트 구조

학교에서 팀 프로젝트로 사이트 하나를 만들어오라는 과제를 받았다.
총 4명이서 팀 프로젝트를 진행시켰고 각각 역할을 정했는데

1. PM
2. 디자인
3. Front_End
4. Back_End

중에서 나는 Back_End역할을 맡았다.

DB설계도 만들기

가장 처음에 진행한 작업은 PM 의 스토리보드 작성이었다.
이 스토리보드를 기반으로 디자인과 Back_End는 작업을 하였는데
디자인은 zeplin에 작업물을 올리고
Back_End는 ERD로 작업을해서 공유하였다.

(ERD 사이트에서 작업을 하였는데 유료화가 되어서 캡처본으로 밖에 올릴 수가 없었다..)
ERD를 짜는 도중에 한개의 테이블이 여러개의 테이블을 참조해야하는 상황이 나와서 골머리를 썩였는데.

사진과같이 2개의 필드에 PK를 걸어놓고 각테이블을 참조하는방식으로 데이터를 관리하여 해결하였다.
PK를 걸어놓은 필드가 sys_user_id , sys_project_id 2개이기 때문에 2개 필드의 값을 고유값으로 인식하는걸 확인할 수 있었다.

ERD를 기반으로 DB를 다 만든다음에 카페24에서 도메인을 사서 DB서버를 열었다.

데이터 삭제 처리

만약에 사이트에서 삭제해야하는 데이터가 생겼다고 가정해보자.
그럴때 DELETE 쿼리를 이용하여 데이터를 삭제하면된다고 생각하였었지만 거의 모든 table이 Forien Key로 다른 table의 데이터를 참조하고 있는 상태이기 때문에 DELETE쿼리를 사용하는것은 별로 좋은 방법이 아니라고 생각되어

그림에 나오는 f_div 필드를 만들어 활성화 데이터와 비활성화 데이터를 구분짓기로 하였다.

더미데이터 INSERT

만들어진 DB에 데이터를 INSERT하기로 하였다.
open api를 하나 구해서 api로 호출한 JSON값에서 필요한 정보만 추려네 배열에 담아서 Table에 INSERT 하였다.

DB connection

const mariadb = require("mariadb");

const pool = mariadb.createPool(
  {
    host: "funware.shop",
    user: "junseok816",
    connectionLimit: 5,
    password: "암호",
    port: ????,
    database: "junseok816",
    multipleStatements: true,
  }
);

pool.getConnection()
      .then((conn) => {
        conn.beginTransaction();
        conn.query("SELECT 1 as val").then((rows) => {
          // rows: [ {val: 1}, meta: ... ]
          console.log("connect");
          conn.batch(
            "INSERT INTO tbl_project (f_project_name , f_storyline, f_summary, f_register_account , f_donate_limit , f_par_value ,f_date_limit,  sys_register_id , f_div) VALUES (?,?,?,?,?,?,20210523,1,'Y');",
            arr
          );
          conn.commit();
        });
      })
      .catch((err) => {
        console.log(err);
      });

getConnection() 함수를 호출시킨다음에 "SELECT 1 as val" 같은 무조건 실행이되는 Query문을 날려 연결이 잘 되어있는지 확인한 후
batch() 메소드를 호출하여 원하는 SQL 문의 일괄 처리를 실행합니다.
이때 VALUES 안에 들어있는 ?의 위차랑 배열의 요소들의 위치를 맞추면 ?에 원하는 값을 INSERT할 수 있습니다.

api 호출 및 배열에 값 넣기

axios({
  url: "https://api.igdb.com/v4/games",
  method: "POST",
  headers: {
    Accept: "application/json",
    "Client-ID": "???",
    Authorization: "Bearer ???",
  },

  data:
    "fields name,storyline,summary, screenshots.url, cover.url ,videos.video_id; where genres != (2, 8, 9, 11, 13, 15, 16, 24, 25, 26, 30, 31, 32, 34, 35, 36) & storyline != null & summary != null & screenshots.url != null & cover.url != null & videos.video_id != null   & involved_companies.company.name != null & involved_companies.company.description != null & involved_companies.company.logo != null &involved_companies.company.websites != null; limit 100; offset 400;",
})
  .then((response) => {
    var arr = new Array(0);
    response.data.forEach((v_game) => {
      v_dona_limit = Math.floor(1000000 + Math.random() * 9000000);
      v_accout =
        "은행" + String(Math.floor(4190000000 + Math.random() * 900000000));
      v_par_value = Math.floor(Math.random() * 10000)+1000;
      var srr = new Array(
        v_game.name,
        v_game.storyline,
        v_game.summary,
        v_accout,
        v_dona_limit,
        v_par_value
      );
      arr.push(srr);
    });

전체 코드

const axios = require("axios");
const mv_Express = require("express");
const app = mv_Express();
const port = 3000;
const mariadb = require("mariadb");


const pool = mariadb.createPool(
  {
    host: "funware.shop",
    user: "junseok816",
    connectionLimit: 5,
    password: "",
    port: ????,
    database: "junseok816",
    multipleStatements: true,
  }
);

app.use(mv_Express.static("public"));

axios({
  url: "https://api.igdb.com/v4/games",
  method: "POST",
  headers: {
    Accept: "application/json",
    "Client-ID": "???",
    Authorization: "Bearer ???",
  },

  data:
    "fields name,storyline,summary, screenshots.url, cover.url ,videos.video_id; where genres != (2, 8, 9, 11, 13, 15, 16, 24, 25, 26, 30, 31, 32, 34, 35, 36) & storyline != null & summary != null & screenshots.url != null & cover.url != null & videos.video_id != null   & involved_companies.company.name != null & involved_companies.company.description != null & involved_companies.company.logo != null &involved_companies.company.websites != null; limit 100; offset 400;",
})
  .then((response) => {
    var arr = new Array(0);
    response.data.forEach((v_game) => {
      v_dona_limit = Math.floor(1000000 + Math.random() * 9000000);
      v_accout =
        "은행" + String(Math.floor(4190000000 + Math.random() * 900000000));
      v_par_value = Math.floor(Math.random() * 10000)+1000;
      var srr = new Array(
        v_game.name,
        v_game.storyline,
        v_game.summary,
        v_accout,
        v_dona_limit,
        v_par_value
      );
      arr.push(srr);
    });

    console.log(arr);

    pool
      .getConnection()
      .then((conn) => {
        conn.beginTransaction();
        conn.query("SELECT 1 as val").then((rows) => {
          // rows: [ {val: 1}, meta: ... ]
          console.log("connect");
          conn.batch(
            "INSERT INTO tbl_project (f_project_name , f_storyline, f_summary, f_register_account , f_donate_limit , f_par_value ,f_date_limit,  sys_register_id , f_div) VALUES (?,?,?,?,?,?,20210523,1,'Y');",
            arr
          );
          conn.commit();
        });
      })
      .catch((err) => {
        console.log(err);
      });
    console.log("INSERT tbl_project completed...");
  })
  .catch((err) => {
    console.error(err);
  });

app.listen(port, () => {
  console.log("starup");
});