CSS flex

flex-grow 속성

기본적으로 0

• 기본은 최대한 커질려고 하지않고 자기자신 만큼 영역을 만들려한다(0)
• 값이 1이 되면 최대한 커질려하며 다른 영역을 채울 수 있는 만큼 채운다.

ex)
A와 B를 양 옆으로 하고 싶은데
A의 속성에 flex-grow:1로 하면 B를 쭉 밀어낸다.

flex-grow:1 해보기 결과

A영역이 쭉 늘어나고 B영역이 밀려난 것을 알 수 있다.

justify-content로 해보기

justify-content: space-between를 A,B의 부모 태그에 추가하면 아래와 같다.

• 비슷한 결과이면서 영역이 A영역이 flex-grow때보단 줄어든 것을 확인 할 수 있다.

flex-shrink 속성

기본적으로 1

• 즉, 브라우저가 줄어드는 만큼 줄어드는것에 영향을 받는다.

flex-shrink를 0으로 하면?

• 브라우저가 줄어들어도 shrink가 0으로 감소하지않는다.
  (글자가 영역을 넘어 깨지지않는다)

text-overflow

숨겨진 오버 플로우의 콘텐츠 처리방법

text-overflow : ellipsis

영역을 넘어갈 경우 글자들을 ...으로 대체한다.

vuex

기존 vue의
1. 하위 컴포넌트에서 중간에 거쳐야 할 컴포넌트가 많을 경우와
2. Event bus를 사용하나 컴포넌트간 통신시 관리가 쉽지않은 문제를 해결

vuex 종류

1. state : 공통으로 사용할 변수 정의
2. getters : 계산된 속성의 공통 사용 정의
3. mutations : state를 변경시키는 역할 / 동기처리 (State관리)
4. actions : mutations를 실행시키는 역할 / 비동기처리

vuex 동작 순서

1. 컴포넌트는 Dispatch를 통해 Actions을 접근합니다.
   1.1 Actions안에 있는 대상끼리도 서로 dispatch를 할 수 있다.
2. Action에서는 보통 Backend API를 호출하여 값을 가져온 후에, Commit을 통해 Mutations에 접근합니다.
3. Mutations에서는 크롬 확장 프로그램인 Devtools와 통신을 하여 디버깅이 쉽도록 기능을 제공하는 역할을 할 뿐 이니라, Mutate 를 통해 State를 변경 합니다.
4. State가 변경되면 컴포넌트는 다시 렌더링 되어 화면에 나타냅니다.

vuex 예시

파일 내용이 이와 같다.

• store/index.js

import {createStore} from 'vuex'
import workspace from './workspace'

export default createStore({
  modules : {
    workspace
  }
})

workspace라는 내용으로 module을 가져와 처리한다.

• WorkspaceItem.vue 일부

methods : {
        async createWorkspace() {
          await this.$store.dispatch('workspace/createWorkspace',{
            parentId : this.workspace.id
          })
          this.showChildren = true;
        },
        deleteWorkspace() {
          this.$store.dispatch('workspace/deleteWorkspace',{
            id:this.workspace.id
          })
        }
      }

methods에서 this.$store.dispatch를 통해 createWorkspace와 deleteWorkspace에 요청을 한다.

• workspace.js 일부

actions: {
  async createWorkspace({dispatch}, payload = {}) {
      const {parentId} = payload
      const workspace = await _request({
        method : 'POST',
        body   : JSON.stringify({
          title : '',
          parent: parentId
        })
      })

      await dispatch('readWorkspaces')  // nav 목록 갱신
      router.push({
        name : 'Workspace',
        params:{
          id: workspace.id
        }
      })
    },
      
      ....
      
      
 async deleteWorkspace({state,dispatch}, payload) {
      const {id} = payload
      await _request({
        id,
        method : 'DELETE',
      })
      console.log(id,router.currentRoute.value.params.id)
      console.log(state,state.workspaces[0].id)
      await dispatch('readWorkspaces')
      if( id === parseInt(router.currentRoute.value.params.id, 10)){
        router.push({
          name : 'Workspace',
          params : {
            id : state.workspaces[0].id
          }
        })
      }
   ....
   
   
   async readWorkspaces({commit ,dispatch }) {
      const workspaces = await _request({
        method : 'GET',
      })
      commit('assignState', {
        workspaces: workspaces
      })
      dispatch('findWorkspacePath')
      if(!workspaces.length){
        dispatch('createWorkspace')
      }

    },
},
  
mutations : {
    assignState(state,payload){
      Object.keys(payload).forEach(key=>{
        state[key] = payload[key]
      })
    }
  },

둘다 실행을 하면서 dispatch로 readWorkspaces를 접근한다
readWorkspaces는 또다시 새로운 dispatch를 하고
commit을 통해 mutations에 접근한다.
mutations의 assignState를 통해 state가 변경되고 이를 통해
컴포넌트가 렌더링 된다.

vue 피드백

props와 store 차이

props는 부모 자식간의 부모에서 자식으로 전달하는 것에 대한 것이고
store는 서로간의 관계가 존재하지않는 다른 컴포넌트들 간에 공통된 데이터를 쓰이게 해준다.

컴포넌트를 나누는 기준

어떤 대상을 재사용할 것 같을 떄 독립적인 기능으로 분리시킬 필요가 있냐에 따라

http / https

http에서 https로 요청은 가능
https에서 http로 요청은 X

store와 computed

store로 값을 받을 떈 computed로 받아야한다.

Vuex 스토어에 있는 state를 가져오기 위해서는 state로 접근해서 Vue 컴포넌트의 계산된 속성(computed)에 주입 해야한다.

출처

vuex