10/17 TIL : MySQL 정규화, Mbti-App에 MongoDB 적용

KDT/TIL

10/17 TIL : MySQL 정규화, Mbti-App에 MongoDB 적용

ebulsok 2022. 10. 17. 18:56

🔎 정규화

DB 설계에 있어서 중복을 최소화 하기 위해 데이터를 구조화 하는 과정
크고 조직화 되지 않은 테이블을 작고 잘 조직화 된 테이블로 변경
데이터 추가 및 삭제 시에 이상 현상을 예방할 수 있음

🚩 제1정규형(1NF): 하나의 컬럼은 반드시 하나의 속성만을 가져야 함

🚩 제2정규형(2NF): 모든 컬럼에 대한 부분 종속이 없어야 함

🚩 제3정규형(3NF): 이행 종속성(A=B, B=C여서 A=C인 경우)이 없어야 함

🔎 Foreign Key(외래 키)

정규화를 하게 되면 테이블은 최소한의 단위로 쪼개지게 됨
하지만 데이터를 불러들일 때에는 한꺼번에 많은 값을 가지는 테이블을 JOIN 해서 가지고 와야 하는 경우가 많음
JOIN을 통해 테이블을 합치는데, 이 때 기준이 되는 값(서로 공유하고 있는 값)을 외래 키라고 함

🔎 InitialData 테이블 구성

Question Table: ID_PK, QUESTION_TEXT
Answer Table: ID_PK, ANSWER_TEXT, RESULT, QUESTION_ID_FK
Explanation Table: ID_PK, MBTI_TYPE, EXPLANATION, IMG_SRC

🚩 Question Table 생성

🚩 Answer Table 생성

* cascade: 외래키가 업데이트 되었을 때 따라가는 것

🚩 Explanation Table 생성

🚩 Question Table 데이터 삽입

insert into MyDB.question (ID_PK, QUESTION_TEXT) values
    (0, '퇴근 직전에 동료로부터 개발자 모임에 초대를 받은 나!!\n\n퇴근 시간에 나는?'),
    (1, '새로운 서비스 개발 중에, 동료가 새로 나온 신기술을 쓰는게 더 편할거라고 추천을 해준다!\n\n나의 선택은!?'),
    (2, '서비스 출시 이틀 전 야근 시간, 갑자기 동료가 어!?를 외쳤다!\n\n나의 선택은?'),
    (3, '팀장님이 xx 씨 그전에 말한 기능 내일 오후까지 완료 부탁해요라고 말했다!\n\n나의 선택은?');

🚩 Answer Table 데이터 삽입

insert into MyDB.answer (ANSWER_TEXT, RESULT, QUESTION_ID_FK) values
    ('그런 모입을 왜 이제서야 알려 준거야! 당장 모임으로 출발한다', 'E', 0),
    ('1년 전에 알려줬어도 안갔을 건데 뭔... 더 빠르게 집으로 간다', 'I', 0),
    ('뭔소리여, 그냥 하던 대로 개발하면 되는거지! 기존 생각대로 개발한다', 'S', 1),
    ('오호? 그런게 있어? 일단 구글을 찾아본다', 'N', 1),
    ('무슨 버그가 발생한 거지? 아마 DB 관련 버그가 아닐까? 빠르게 동료의 자리로 달려간다', 'T', 2),
    ('아... 내일도 야근 각이구나 ㅠㅠ! 일단 동료의 자리로 가 본다', 'F', 2),
    ('일단 빠르게 개발 완료하고, 나머지 시간에 논다', 'J', 3),
    ('그거 내일 아침에 와서 개발해도 충분 하겠는데? 일단 논다', 'P', 3);

🚩 Explanation Table 데이터 삽입

insert into MyDB.explanation (MBTI_TYPE, EXPLANATION, IMG_SRC) values
    ('ESTJ', '무리한 개발 일정만 아니라면 일정을 철저하게 지킬 당신의 MBTI 는!', '/images/estj.jpg'),
    ('ISTJ', '스스로 하고싶은 분야를 끝까지 파고 들어서 끝내 성공 시킬 당신의 MBTI 는!', '/images/istj.jpg'),
    ('ENTJ', '미래의 능력 쩌는 개발 팀장님으로 개발팀을 이끌 당신의 MBTI 는!', '/images/entj.jpg'),
    ('INTJ', '혼자서 모든 것을 다 해내는 원맨 캐리의 표본! 당신의 MBTI 는!', '/images/intj.jpg'),
    ('ESFJ', '개발팀의 분위기 메이커이자 아이디어 뱅크가 될 당신의 MBTI 는!', '/images/esfj.jpg'),
    ('ISFJ', '개발팀의 마더 테레사, 고민 상담소 역할을 자처하는 당신의 MBTI 는!', '/images/isfj.jpg'),
    ('ENFJ', '당신이 있는 팀은 언제나 올바른 곳을 향하고 있습니다! 팀원은 물론 팀의 방향을 챙기는 당신의 MBTI 는!', '/images/enfj.jpg'),
    ('INFJ', '예리한 통찰력으로 모든 것을 내다보면서 완벽하게 개발을 할 당신의 MBTI 는!', '/images/infj.jpg'),
    ('ESTP', '쿨하게 자신이 할 것을 하면서 논리적인 개발을 할 당신의 MBTI 는!', '/images/estp.jpg'),
    ('ISTP', '단시간에도 효율적으로 개발하여 모든 것을 완성할 당신의 MBTI 는!', '/images/istp.jpg'),
    ('ENTP', '스스로 흥미만 생긴다면 당장에 페이스북도 만들어 버릴 당신의 MBTI 는!', '/images/entp.jpg'),
    ('INTP', '확실한 주관과 뛰어난 지능을 바탕으로 논리적 개발을 할 당신의 MBTI 는!', '/images/intp.jpg'),
    ('ESFP', '개발팀의 에너자이저! 개발팀 특유의 서먹함을 깨는 당신! 당신의 MBTI 는!', '/images/esfp.jpg'),
    ('ISFP', '뛰어난 호기심과 예술적 감각으로 개발팀의 부족함을 채워갈 당신! 당신의 MBTI 는!', '/images/isfp.jpg'),
    ('ENFP', '자유로운 영혼으로 개발팀의 윤활유 및 활력소가 되어줄 당신의 MBTI 는!', '/images/enfp.jpg'),
    ('INFP', '개발팀의 그 어떤 트러블도 당신 앞에서는 사르르 녹을뿐, 팀의 근간을 다져주는 당신의 MBTI 는!', '/images/infp.jpg');

🔎 Redux InitialData를 SQL DB로부터 받기

🚩 survey, explanation 컨트롤러 추가

현재 MySQL에 데이터는 정규화를 위해서 테이블이 분리된 상태이기 때문에 Question Table과 Answer Table을 동시에 가지고 와야 함
기존 controller 모듈에 getSurvey, getExplanation 메소드를 추가하고, JOIN으로 합친 데이터의 값 전달

// data-server/controllers/dataController.js
    getSurvey: (cb) => {
        connection.query(
          'SELECT * FROM MyDB.question q LEFT JOIN MyDB.answer a ON q.ID_PK=a.QUESTION_ID_FK',
          (err, data) => {
            if(err) throw err;
            cb(data);
          }
        );
    },
    getExplanation: (cb) => {
        connection.query('SELECT * FROM MyDB.explanation', (err, data) => {
          if (err) throw err;
          cb(data);
        });
    },

🚩 survey, explanation router 설정

// data-server/routes/data.js
    router.get('/survey', (req, res) => {
      db.getSurvey((data) => {
        console(data);
        res.send(data);
      });
    });
    
    router.get('/explanation', (req, res) => {
        db.getExplanation((data) => {
        console.log(data);
        res.send(data);
        });
    });

🚩 React에서 데이터 받기

// src/components/Start.js
useEffect(() => {
    async function fetchData() {
      const resCount = await fetch('http://localhost:4000/data/count');
      if (resCount.status === 200) {
        const num = await resCount.json();
        if (num[0].counts !== 0) setCounts(num[0].counts);
      } else throw new Error('통신 이상');

      //survey 값을 위한 JOIN Table의 데이터 받아오기
      const resSurvey = await fetch('http://localhost:4000/data/survey');
      if (resSurvey.status === 200) {
        const surveyData = await resSurvey.json();

        // explanation table의 데이터 받아오기
        const resExplanation = await fetch('http://localhost:4000/data/explanation');
        if(resExplanation.status === 200) {
          const explanationData = await resExplanation.json();
          console.log(explanationData);
        } else throw new Error('통신 이상');
      } else throw new Error('통신 이상');
    }
    fetchData();
}, [counts]);

🚩 받아온 데이터 꾸미기

DB에서 받아온 데이터는 redux에서 세팅했던 initialState와 구조가 다르기 때문에 가공이 필요함

// src/components/Start.js
function makeData(survey, explanation) {
  const initData = { survey: [], explanation: {} };
  if(initData.survey.length === 0) {
    for(let i = 0; i < survey.length; i = i + 2) {
      initData.survey.push({
        question: survey[i].QUESTION_TEXT,
        answer: [
          {
            text: survey[i].ANSWER_TEXT,
            result: survey[i].RESULT,
          },
          {
            text: survey[i + 1].ANSWER_TEXT,
            result: survey[i + 1].RESULT,
          },
        ],
      });
    }

    for(let i = 0; i< explanation.length; i++) {
      initData.explanation[explanation[i].MBTI_TYPE] = {
        explanation: explanation[i].EXPLANATION,
        img: explanation[i].IMG_SRC,
      };
    }
  }
  return initData;
}

🚩 redux 수정하기

가공한 데이터를 redux에 전달하여 초기 값으로 만들기
데이터를 초기화 하는 작업도 하나의 action이므로 redux에 action type 설정, 생성 함수 만들기, reducer 작업하기

// src/store/modules/mbti.js
// 리액트 앱 최초 실행 시 reducer에 전달할 빈 초기 값
const initStateEmpty = {
  mbtiResult: '',
  page: 0,
  survey: [],
  explanation: {},
}

// 액션 타입(문자열)
const INIT = 'mbti/INIT';
const CHECK = 'mbti/CHECK';
const NEXT = 'mbti/NEXT';
const RESET = 'mbti/RESET';

// 액션 생성 함수
export function init(data) {
  return {
    type: INIT,
    payload: data,
  }
}
// ...

// reducer
export default function mbti(state = initStateEmpty, action) {
  switch (action.type) {
    case INIT:
      return {
        ...state,
        survey: action.payload.survey,
        explanation: action.payload.explanation,
      };
// ...

🚩 만들어진 데이터 전달하기

dispatch를 통해 init() 함수에 담아서 전달

// src/components/Start.js
    useEffect(() => {
        async function fetchData() {
          const resCount = await fetch('http://localhost:4000/data/count');
          if (resCount.status === 200) {
            const num = await resCount.json();
            if (num[0].counts !== 0) setCounts(num[0].counts);
          } else throw new Error('통신 이상');

          //survey 값을 위한 JOIN Table의 데이터 받아오기
          const resSurvey = await fetch('http://localhost:4000/data/survey');
          if (resSurvey.status === 200) {
            const surveyData = await resSurvey.json();

            // explanation table의 데이터 받아오기
            const resExplanation = await fetch(
              'http://localhost:4000/data/explanation'
            );
            if (resExplanation.status === 200) {
              const explanationData = await resExplanation.json();
              const madeData = makeData(surveyData, explanationData);
              dispatch(init(madeData));
            } else throw new Error('통신 이상');
          } else throw new Error('통신 이상');
        }
        fetchData();
    }, [counts]);

🔎 MongoDB로 구현하기

🚩 MongoDB 모듈 설치 및 세팅

[터미널] npm i mongodb

// data-server/mongoConnect.js
const { MongoClient, ServerApiVersion } = require('mongodb');

const uri = process.env.MDB_URI;

const client = new MongoClient(uri, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  serverApi: ServerApiVersion.v1,
});

module.exports = client;

🚩 MongoDB controller 생성

설문용 데이터를 DB에 저장시켜주는 controller부터 생성

// data-server/controllers/mongoController.js
const mongoClient = require('../mongoConnect');
const _client = mongoClient.connect();

const initState = {
  mbtiResult: '',
  page: 0, // 0: 인트로 페이지, 1 ~ n: 선택 페이지, n+1: 결과 페이지
  survey: [
    {
      question:
        '퇴근 직전에 동료로부터 개발자 모임에 초대를 받은 나!!\n\n퇴근 시간에 나는?',
      answer: [
        {
          text: '그런 모임을 왜 이제서야 알려 준거야! 당장 모임으로 출발한다',
          result: 'E',
        },
        {
          text: '1년 전에 알려줬어도 안갔을 건데 뭔... 더 빠르게 집으로 간다',
          result: 'I',
        },
      ],
    },
    {
      question:
        '새로운 서비스 개발 중에, 동료가 새로 나온 신기술을 쓰는게 더 편할거라고 추천을 해준다!\n\n나의 선택은!?',
      answer: [
        {
          text: '뭔소리여, 그냥 하던 대로 개발하면 되는거지! 기존 생각대로 개발한다',
          result: 'S',
        },
        {
          text: '오호? 그런게 있어? 일단 구글을 찾아본다',
          result: 'N',
        },
      ],
    },
    {
      question:
        '서비스 출시 이틀 전 야근 시간, 갑자기 동료가 어!?를 외쳤다!\n\n나의 선택은?',
      answer: [
        {
          text: '무슨 버그가 발생한 거지? 아마 DB 관련 버그가 아닐까? 빠르게 동료의 자리로 달려간다',
          result: 'T',
        },
        {
          text: '아... 내일도 야근 각이구나 ㅠㅠ! 일단 동료의 자리로 가 본다',
          result: 'F',
        },
      ],
    },
    {
      question:
        '팀장님이 xx 씨 그전에 말한 기능 내일 오후까지 완료 부탁해요라고 말했다!\n\n나의 선택은?',
      answer: [
        {
          text: '일단 빠르게 개발 완료하고, 나머지 시간에 논다',
          result: 'J',
        },
        {
          text: '그거 내일 아침에 와서 개발해도 충분 하겠는데? 일단 논다',
          result: 'P',
        },
      ],
    },
  ],

  explanation: {
    ESTJ: {
      text: '무리한 개발 일정만 아니라면 일정을 철저하게 지킬 당신의 MBTI는!',
      img: '/images/estj.jpg',
    },
    ISTJ: {
      text: '스스로 하고싶은 분야를 끝까지 파고 들어서 끝내 성공 시킬 당신의 MBTI 는!',
      img: '/images/istj.jpg',
    },
    ENTJ: {
      text: '미래의 능력 쩌는 개발 팀장님으로 개발팀을 이끌 당신의 MBTI 는!',
      img: '/images/entj.jpg',
    },
    INTJ: {
      text: '혼자서 모든 것을 다 해내는 원맨 캐리의 표본! 당신의 MBTI 는!',
      img: '/images/intj.jpg',
    },
    ESFJ: {
      text: '개발팀의 분위기 메이커이자 아이디어 뱅크가 될 당신의 MBTI는!',
      img: '/images/esfj.jpg',
    },
    ISFJ: {
      text: '개발팀의 마더 테레사, 고민 상담소 역할을 자처하는 당신의 MBTI는!',
      img: '/images/isfj.jpg',
    },
    ENFJ: {
      text: '당신이 있는 팀은 언제나 올바른 곳을 향하고 있습니다! 팀원은 물론 팀의 방향을 챙기는 당신의 MBTI는!',
      img: '/images/enfj.jpg',
    },
    INFJ: {
      text: '예리한 통찰력으로 모든 것을 내다보면서 완벽하게 개발을 할 당신의 MBTI는!',
      img: '/images/infj.jpg',
    },
    ESTP: {
      text: '쿨하게 자신이 할 것을 하면서 논리적인 개발을 할 당신의 MBTI는!',
      img: '/images/estp.jpg',
    },
    ISTP: {
      text: '단시간에도 효율적으로 개발하여 모든 것을 완성할 당신의 MBTI는!',
      img: '/images/istp.jpg',
    },
    ENTP: {
      text: '스스로 흥미만 생긴다면 당장에 페이스북도 만들어 버릴 당신의 MBTI는!',
      img: '/images/entp.jpg',
    },
    INTP: {
      text: '확실한 주관과 뛰어난 지능을 바탕으로 논리적 개발을 할 당신의 MBTI는!',
      img: '/images/intp.jpg',
    },
    ESFP: {
      text: '개발팀의 에너자이저! 개발팀 특유의 서먹함을 깨는 당신! 당신의 MBTI는!',
      img: '/images/esfp.jpg',
    },
    ISFP: {
      text: '뛰어난 호기심과 예술적 감각으로 개발팀의 부족함을 채워갈 당신! 당신의 MBTI는!',
      img: '/images/isfp.jpg',
    },
    ENFP: {
      text: '자유로운 영혼으로 개발팀의 윤활유 및 활력소가 되어줄 당신의 MBTI는!',
      img: '/images/enfp.jpg',
    },
    INFP: {
      text: '개발팀의 그 어떤 트러블도 당신 앞에서는 사르르 녹을뿐, 팀의 근간을 다져주는 당신의 MBTI는!',
      img: '/images/infp.jpg',
    },
  },
};

const mongoDB = {
  setData: async () => {
    const client = await _client;
    const db = client.db('MBTI').collection('data');
    const result = await db.insertOne(initState);
    if (result.acknowledged) {
      return '업데이트 성공';
    } else throw new Error('통신 이상');
  },
};

module.exports = mongoDB;

🚩 MongoDB 용 라우터 설정

// data-server/routes/mongo.js
const express = require('express');
const router = express.Router();

const mongoDB = require('../controllers/mongoController');

router.post('/setdata', async (req, res) => {
  const msg = await mongoDB.setData();
  res.send(JSON.stringify(msg));
});

module.exports = router;

// data-server/server.js
const express = require('express');
const cors = require('cors');
const PORT = 4000;

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cors());

require('dotenv').config();

const dataRouter = require('./routes/data');
const mongoRouter = require('./routes/mongo');

app.use('/data', dataRouter);
app.use('/mongo', mongoRouter);

app.listen(PORT, () => {
  console.log(`데이터 통신 서버가 ${PORT}에서 작동 중`);
});

🚩 컨트롤러 기능 추가

방문자 수를 가져오는 getCounts
방문자 수를 증가시키는 incCounts
데이터를 받아오는 getData

// data-server/controllers/mongoController.js
    getCounts: async () => {
        const client = await _client;
        const db = client.db('MBTI').collection('counts');
        const data = await db.find({}).toArray();
        return data;
        },
        incCounts: async () => {
        const client = await _client;
        const db = client.db('MBTI').collection('counts');
        const result = await db.updateOne({ id: 1 }, { $inc: { counts: 1 } });
        if (result.acknowledged) {
          return '업데이트 성공';
        } else throw new Error('통신 이상');
        },
        getData: async () => {
        const client = await _client;
        const db = client.db('MBTI').collection('data');
        const data = await db.find({}).toArray();
        return data;
    },

🚩 mongoRouter 설정

// data-server/routes/mongo.js
    router.get('/count', async (req, res) => {
      const counts = await mongoDB.getCounts();
      res.send(counts);
    });

    router.post('/inccount', async (req, res) => {
      const msg = await mongoDB.incCounts();
      res.send(JSON.stringify(msg));
    });

    router.get('/getdata', async (req, res) => {
      const data = await mongoDB.getData();
      res.send(data);
    });

🚩 MySQL 데이터 관련 코드 정리

// src/components/Start.js
async function sqlFetchData() {
  const resCount = await fetch('http://localhost:4000/data/count');
  if (resCount.status === 200) {
    const num = await resCount.json();
    if (num[0].counts !== 0) setCounts(num[0].counts);
  } else throw new Error('통신 이상');

  //survey 값을 위한 JOIN Table의 데이터 받아오기
  const resSurvey = await fetch('http://localhost:4000/data/survey');
  if (resSurvey.status === 200) {
    const surveyData = await resSurvey.json();

    // explanation table의 데이터 받아오기
    const resExplanation = await fetch(
      'http://localhost:4000/data/explanation'
    );
    if (resExplanation.status === 200) {
      const explanationData = await resExplanation.json();
      const madeData = makeData(surveyData, explanationData);
      dispatch(init(madeData));
    } else throw new Error('통신 이상');
  } else throw new Error('통신 이상');
}

async function mongoFetchData() {
  const resMongoCount = await fetch('http://localhost:4000/mongo/count');
  if (resMongoCount.status === 200) {
    const num = await resMongoCount.json();
    console.log(num);
  } else throw new Error('통신 이상');

  const resMongoData = await fetch('http://localhost:4000/mongo/getdata');
  if (resMongoData.status === 200) {
    const data = await resMongoData.json();
    console.log(data);
  } else throw new Error('통신 이상');
}

useEffect(() => {
    // sqlfetchData();
    mongoFetchData();
}, [counts]);

// src/components/Show.js
async function sqlSendData() {
    const resInc = await fetch('http://localhost:4000/data/inccount', {
      method: 'POST',
    });
    if (resInc.status === 200) console.log(await resInc.json());
    else throw new Error('통신 이상');
}

async function mongoSendData() {
    const resInc = await fetch('http://localhost:4000/mongo/inccount', {
      method: 'POST',
    });
    if (resInc.status === 200) console.log(await resInc.json());
    else throw new Error('통신 이상');
}

useEffect(() => {
    // sqlSendData();
    mongoSendData();
}, []);

🚩 counts 값 전달

Start 컴포넌트의 방문자 수 값을 update 해줘야 하므로 useState로 값을 선언해서 hook에 전달

// src/components/Start.js
    async function mongoFetchData() {
        const resMongoCount = await fetch('http://localhost:4000/mongo/count');
        if (resMongoCount.status === 200) {
        	const num = await resMongoCount.json();
        	if (num[0].counts !== 0) setCounts(num[0].counts);
        } else throw new Error('통신 이상');

        const resMongoData = await fetch('http://localhost:4000/mongo/getdata');
        if (resMongoData.status === 200) {
        	const data = await resMongoData.json();
        } else throw new Error('통신 이상');
    }

🚩 redux initialData 전달

이 값은 바로 사용할 일이 없으며, Mbti 컴포넌트가 사용하면 되므로 state를 사용할 필요가 없음
init() 함수에 받아온 데이터만 넣어서 dispatch로 전달

// src/components/Start.js
    async function mongoFetchData() {
        const resMongoCount = await fetch('http://localhost:4000/mongo/count');
        if (resMongoCount.status === 200) {
        	const num = await resMongoCount.json();
        	if (num[0].counts !== 0) setCounts(num[0].counts);
        } else throw new Error('통신 이상');

        const resMongoData = await fetch('http://localhost:4000/mongo/getdata');
        if (resMongoData.status === 200) {
        	const data = await resMongoData.json();
        	if (data[0].survey.length !== 0) dispatch(init(data[0]));
        } else throw new Error('통신 이상');
    }

📌 코드: https://github.com/ebulsok/KDT-React-MBTI.git

저작자표시 비영리 변경금지 (새창열림)

'KDT > TIL' 카테고리의 다른 글

10/14 TIL : MySQL 적용 (0)	2022.10.17
10/12 TIL : React SPA 제작(Mbti-app) (0)	2022.10.17
10/7 TIL : Redux, 간단한 Todo-list 만들기 (0)	2022.10.14
10/5 TIL : React Router (0)	2022.10.14
9/30 TIL : React Hooks(useEffect, useMemo) (0)	2022.10.14

현재글10/17 TIL : MySQL 정규화, Mbti-App에 MongoDB 적용

괴발개발