2021 10 10

2021-10-10¶

vuejs¶

이미지 꽂아 넣기 - style: background-image: url() 로 꽂아넣기 - vue에서는 style 속성 데이터 바인딩을 object 형식으로 할 수 있음
```
<div :style="{ fontSize : '20px', marginTop : '10px', backgroundImage : 'url(경로)'"></div>
```

axios 활용 1. 설치: npm install axios 2. axios로 요청

import axios from 'axios';

axios.get('서버URL').then( 결과 => {
   요청 성공 시 실행할 코드~
}).catch( () => {
   요청 실패 시 실행할 코드~
})

라우터 vs 탭 - 탭의 상태를 저장해두고, 상태에 따라 보여줄 컴포넌트를 다르게 - 다른 페이지가 필요하면 vue-router, 간단한 UI들은 탭으로 만들어도 ㄱㅊ

slot 문법 - props로 부모->자식 데이터 전송과 또다른 것 - 자식은 <slot></slot> 이라는 태그로 데이터가 꽂힐 곳 정해둠 - 부모는 <자식컴포넌트>데이터</자식컴포넌트> 이렇게 사이에 데이터 작성해서 보냄 - 등록은 안해도 되지만, 딱 보내서 보여줘야할떄만 쓰는게 좋아보임

mitt 라이브러리 1. 설치: npm install mitt 2. mitt 사용법: this.emitter.emit('이벤트명작명', '데이터)

상태관리 Vuex 1. src 안에 store.js 만들고 코드 작성
```
import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {

    }
  },
})

export default store
```
2. store.js를 main.js에 등록
```
import store from './store.js'
app.use(store).mount('#app')
```
- [mutations] - vuex 안의 state는 mutations 항목에서 데이터 수정방법 정의하고 변경한다 - mutations 안에 함수를 정의해두자 - 순수하게 state 변경되는 로직만 넣자 - ajax는 actions에서 처리 - [actions] - ajax는 여기서 처리하자
```
actions : {
  getDataFromServer(context){
    axios.get('').then(()=>{ 
      context.commit('mutations함수명') 
    })
  }
}
```

Computed - 약간 static block 느낌 - 미리 계산 결과를 저장해둬서 데이터바인딩으로 가져다 쓸 수 있음

computed : {
  now2(){
    return new Date()
  }
}, 
methods : {
  now(){
    return new Date()
  }
}

mapState, mapMutations, mapActions
- vuex에 관리되고 있는 state, mutations, actions 들을 컴포넌트에서 편하게 등록하고, 데이터 바인드 가져다 쓸 수 있음
```
import {mapState, mapMutations} from 'vuex'

computed : {
  ...mapState(['state이름1', 'state이름2']),
  ...mapMutations([ '좋아요', 'setMore' ])
}
```

PWA로 웹앱 만들기
1. pwa 라이브러리 설치: vue add pwa 2. service-worker.js(오프라인 사용을 위한 정적 리소스 캐싱), manifest.json(앱의 이름/아이콘/테마색 등 설정)이 생성

DB 서버 튜닝¶

메모리 튜닝 - [Thread] - MySQL 커넥션마다 하나의 쓰레드 생성하여 요청 처리. 쓰레드 메모리 할당/해제가 비용 큼

MariaDB [(none)]> SHOW STATUS LIKE '%THREAD%';
+------------------------------------------+--------+
| Variable_name                            | Value  |
+------------------------------------------+--------+
| Delayed_insert_threads                   | 0      |
| Innodb_master_thread_active_loops        | 10     |
| Innodb_master_thread_idle_loops          | 796828 |
| Performance_schema_thread_classes_lost   | 0      |
| Performance_schema_thread_instances_lost | 0      |
| Slow_launch_threads                      | 0      |
| Threadpool_idle_threads                  | 0      |
| Threadpool_threads                       | 0      |
| Threads_cached                           | 1      |
| Threads_connected                        | 11     |
| Threads_created                          | 12     |
| Threads_running                          | 1      |
| wsrep_thread_count                       | 0      |
+------------------------------------------+--------+
13 rows in set (0.00 sec)

- [caching] - 내부적으로 mysqld에서 하나만 확보되는 "Global Buffer"와 Thread 별로 확보되는 "Thread Buffer" - Thread Buffer에 메모리 많이 할당하면 성능 Up - 하지만 Connection이 갑자기 늘어나면 메모리 부족해서 swap 발생 - [커넥션 튜닝] - connect_timeout: MySQL이 클라이언트로부터 접속 요청을 받는 경우 몇 초까지 기다릴지 - interactive_timeout: mysql>과 같은 콘솔이나 터미널 유지시간 - wait_timeout: 접속한 후 쿼리가 들어올 때까지 기다리는 시간. - max_connections: 서버가 허용하는 최대한의 커넥션 수 - back_log: 얼마만큼의 커넥션을 큐에 보관할지에 대한 설정값

실행 계획과 인덱스¶

[튜닝 절차] 1. 일단 조회 - 의도한 결과가 맞니? - 조회 건수, fetch time/duration time 등 확인 2. 개선 대상 파악 - 실행계획 확인 - 조건절 컬럼, 조인/서브쿼리 구조, 정렬 등 확인 - 인덱스 현황 파악 3. 개선

[실행 계획] - EXPLAIN SELECT * FROM 'subway'.'programmer';

[인덱스] - 생성: CREATE INDEX 'idx_user_id' ON 'subway'.'programmer' - 삭제: DROP INDEX 'idx_user_id' ON 'subway'.'programmer' - Index Full Scan: 리프 블록 전체 스캔 (인덱스 풀 스캔) - Index Unique Scan: where '=' 조건으로 검색

쿼리 튜닝하기¶

[인덱스] - 인덱스 칼럼 가공 X - 아래처럼 사원번호에 Substring 이딴거 걸어놓으면 인덱스 혜택 못받아 - LIKE '%??' 이딴것도 힘들겠지? - WHERE char_column = 10 이렇게 데이터타입 다른것도 인덱스 못쓰겠지? - <>, NOT IN, NOT BETWEEN 이런것도 인덱스 혜택 못받겠지?
```
EXPLAIN 
SELECT *
    FROM 사원
WHERE SUBSTRING(사원번호, 1, 4) = 1100
    AND LENGTH(사원번호) = 5
```
- 인덱스 순서 고려 - 인덱스 걸려있는데 order by 하면 연산 일어나지도 않아 (개꿀) - where 절로 자주 조회하는 컬럼을 앞에 두세요

- 인덱스를 제대로 사용하는지 확인 - 인덱스 스캔과정에서 얻은 정보를 잘 활용중인지 확인!

- 복합 인덱스시 범위 검색 컬럼을 뒤에 둘 것 - 범위는 뒤에 인덱스로 걸어!

[조인문] - 조인 연결 key들은 양쪽 다 인덱스를 가지고 있자 - 데이터가 적은 테이블을 랜덤액세스 할 것 - 드라이빙 테이블 데이터가 주로 적은게 좋다 - 모수 테이블 크기를 줄이자 - FROM 서브쿼리를 활용 - Join 하는 대상 테이블을 줄여버릴 생각을 해보자! - 서브쿼리 보다는 조인문이 성능이 좋다