220614 Today I learned!

DB 설계, 실습
Mysql/ MariaDB 데이터 프로세스
애플 웹사이트 인터랙션 클론 강의 듣기
Vue 데이터 전송 연습
공통 프로젝트 첫번째 팀 회의

1. Fact

1) DB 설계

효율적으로 DataBase를 관리하기 위해 DB 설계는 중요하다.

효율성

파급효과: 시스템 구축에는 수많은 과정이 동반된다. 초반에 설계한 것을 수정하려고 하면 파급효과(SideEffect)가 크다.
- DB 스키마를 성능QA에서 문제가 생겨 수정하게된다면, 파국이다.
간결함: 데이터 모델은 시스템의 요구사항과 한계를 가장 명확하게 표현하는 도구이다.
- 데이터 모델을 통해 많은 관련자들이 동일하게 이해하고 작업을 진행한다. (설계도면)

실습

서비스의 완성도에 지대한 영향을 미치는 DataBase 설계
- ERD(Entity Relationship Diagram)
- Index: 추가적인 쓰기 작업과 저장공간을 활용하여 데이터 베이스 테이블의 검색 속도를 향상 시키기 위한 자료 구조
  관련 블로그
설계문서를 토대로 SQL을 작성하여, 효율적인 구현에 필요한 설계방법에 대한 고민
- SQL 작성 시, 인덱스를 설계하여 full scan을 피하도록 한다.

2) Mysql/ MariaDB 데이터 프로세스

DB에 직접 데이터를 넣어보고 가공을 하자.

데이터 이행: 실제 데이터를 운영 DB에 반영하는 작업
- 대량 데이터의 경우, 오픈 후에는 증분(신규/ 수정/ 삭제) 데이터만 반영한다. (스케줄 또는 API 연계등)
데이터 적재 시점
- 서버 Down 타임에 적재 (운영서버가 다른 DB 서버로 교체 불가인 경우)
- 사전 적재 (신규 서버 도입인 경우 미리 적재가 가능하다.)
- 서비스 오픈 후 적재 (내부 오픈 등으로 외부 오픈일이 따로 있는 경우, 운영자가 따로 정해진 시간에 적재한다.)
데이터 적재 방법
- DB 백업본 restore(특정 시점 이전까지의 데이터 dump) 사용하여, 데이터 이관 후 오픈 시점까지의 증분 데이터는 소급 반영
- 텍스트 데이터 이관
- DB TO DB 마이그레이션 (DB 또는 솔루션 사용)
- 정제된 텍스트 데이터를 DB에 직접 인서트
- 데이터 제공자 측에서 제공하는 Restful API를 호출하여 데이터 인서트 (주로 증분 데이터에만 사용)
- etc..

3) 애플 웹사이트 인터랙션 클론 강의 듣기

섹션4: 동적 위치와 크기 계산을 이용한 스크롤 인터랙션 구현
- 스크롤 애니메이션이 시작되고 끝나는 타이밍을 계산한다.
  - 먼저 해당 섹션 기준 캔버스의 y좌표를 찾는다. (offsetTop)
  - 현재 캔버스는 tranfrom: scale로 크기가 조정되어 있는 상태이기 때문에 이를 고려하여 계산한다.
정리본

4) Vue 데이터 전송

같은 기능을 세가지의 방법으로 구현해 보기.
container컴포넌트(부모) > 버튼 컴포넌트(자식1), 결과 컴포넌트(자식2) 버튼 컴포넌트(자식1)를 누르면 결과 컴포넌트(자식2)에 어떤 버튼을 클릭했는지 표시를 한다.

EvnetBus(props, emit)을 활용해 componenet간 데이터를 전송
EventBus(global)을 활용해 component간 데이터를 전송: Vue 객체 활용
Vuex를 활용한 데이터 전송: 중앙 집중소 방식

5) 공통 프로젝트 팀회의

2학기 공톡 프로젝트 첫번째 팀 회의 🎉

팀 미션 공유
팀 규칙 구체화

팀 노션 페이지

2. Feeling

프로젝트팀원들과의 첫번째 팀회의! 믿고 같이 할 수 있는 감자님(프엔스터디 팀장)이 있어서 좋다. 😆

프엔 3명(비전공자), 백엔드 3명(전공자반)로 이루어진 팀으로 같은 목적을 갖고 개발을 할 것 같다.

바로, 사용자에게 필요한서비스 만들기.

내 개인적인 욕심으로는 배포 이후에 구글 애널리틱스와 같은 유저 행동 트래킹툴을 설치하고, SNS 광고를 돌려 유저들의 action까지 보고 싶은 욕심이 있다. 😉

그래서 많은 고민이 든다. 사용자에게 필요한 서비스를 생각하는 과정이 힘들 것 같다. 어떻게 그들의 경험을 개선하고 개발을 해야 할지 , 많은 이야기를 나누어봐야할 것 같다.

또한, Vue 데이터 전송 과제를 하면서 잊고있던 vuex의 소중함을 느꼈다.

Vue-devtools 때문에, 상태 추적이 용이하다.
데이터 흐름을 파악하기 쉽다.

(+) EventBus 객체를 생성하여 데이터를 전송하는 것은 처음 구현해보았다. 그래도 vuex 최고..

3. Finding

Vue 객체를 활용한 컴포넌트간 데이터 전송 (이벤트 버스 활용법)

참고한 블로그

이벤트 버스 초기화

  
// src/utils/event-bus.js

import Vue from "vue";
export const EventBus = new Vue();

이벤트 버스는 데이터를 저장하는 제 3의 공간으로 생각하면 된다.

부모 / 자식간의 이벤트 통신을 하는 방법과 달리 컴포넌트에서 EventBus를import하여 데이터를 저장하기 때문에 더 간편하게 통신을 할 수 있다.

이벤트 버스 발행

  
<!--src/components/TheButtonGlobal-->

<template>
  <div>
    <button @click="clickOButton">O</button>
    <button @click="clickXButton">X</button>
  </div>
</template>

<script>
import EventBus from "@/utils/EventBus.js"
export default {
  name: "TheButtonGlobal",
  methods: {
    clickOButton(){
      EventBus.$emit("click-o-button");
    },
    clickXButton(){
      EventBus.$emit("click-x-button");
    }
  }
}
</script>

EventBus를 import한 뒤, $emit을 통해 이벤트를 발행한다.

이벤트 구독

  
<!--src/components/TheResultGlobal-->

<template>
<div>
  <h1>EventBus</h1>
  <h1></h1>
  </div>
</template>

<script>
import EventBus from "@/utils/event-bus.js"
export default {
  name: "TheResultGlobal",
  data : function(){
    return {
      buttonData: "Wait"
    }
  },
  created(){
    EventBus.$on("click-o-button", ()=> {
      this.buttonData = "O"
    }),
    EventBus.$on("click-x-button", ()=> {
      this.buttonData = "X"
    })
  }
}
</script>

EventBus를 import한 뒤, $on을 통해 이벤트를 구독한다.

4. Future Action & Feedback

Future Action	진행 상황	Feedback
DOM을 깨우치다	`pause 🤦‍♀️`	잠시 중단!
JavsScript DeepDive	`notStarted🌙`
와자뵤! 다시 만들기	`notStarted🌙`

22/06/14/화 DB 설계, 애플 웹사이트 인터랙션 클론 강의, Vue 데이터 전송 실습, 공통 프로젝트 첫번째 팀 회의