TIL_211220_Frontend

 

업무용 자아를 분리하여 창작물(코드)에 대한 평을 스스로에게까지 끌어오지 말자.

다만 코드가 계속 만족스럽지 못한 평을 받는다면 능력을 객관적으로 평가해볼 필요가 있다.

기능부터 공부하고 스타일은 그 다음이다.

쓸데없는 코드는 빼고 최소한의 코드로 간결하게 작성하는 게 좋은 코드!

줄맞추기/들여쓰기는 디버깅을 위해 정말 중요!

name/value 값으로 한글 no -> DB에 들어갈 때 코드로 들어가기 때문

코드를 계속 쳐서 손이 익숙해지게 해야함!!

속성 공부할 때 중요한 점 : 이게 필수인지 아닌지

var/const/let

-> var는 쓰지말고, 일단 무조건 const, but 밑에서 값이 변경되면 let

 

component

요소

부분부분 나누기 (매우 중요!)

- header component

- body

- footer component

 

 * 디렉토리까지 쓰면 index 파일의 경우엔 자동인식함(/index.vue 생략 가능)

 

 

Not Found

- 위에 안잡힌 모든 '잘못된 주소'를 위함

- NotFound 설정을 위한 path('*')는 반드시 맨 하단에 위치

 

 

props

property

부모 컴포넌트 - 자식 컴포넌트로 값 전달할 때 쓰는 기능

변수를 전달할 때는 v-bind를 이용해서 전달한다.

* v-bind:user는 :user과 같다.

자세한 props 사용

 

 

emit

자식이 부모에게 값을 전달할 때 쓰는 기능

<alice @updateTodo="updateTodo($event)" />

위의 updateTodo는 원래는 서로 다르다. 왼쪽의 updateTodo는 alice에서 오고 오른쪽의 updateTodo는 parent에게서 온다.

이 호출 메소드, 응답 메소드를 짝지을 수 있어야 한다.

- emit보단 store(vuex)를 쓴다.

 

event bus

자식 컴포넌트끼리 event를 발생시킬 수 있다.(권장은 하지 않는다. store를 사용하면 된다.)

  created() {
    EventBus.$on('aliceSaid', message => {

      this.aliceMessage = message

    })
},

  methods: {

    whatIsaid: function () {

      this.count += 1

      EventBus.$emit('bobSaid', `I don't know. x ${this.count}`)

    }

  }

EventBus.$on('받는 이벤트명', 인자(콜백함수) => {
인자로 뭘할건지
})

EventBus.$emit('보낼 이벤트명', '보내는 내용')

 

 

Store(Vuex)

Vuex란 state를 관리할 수 있도록 도와주는 상태 관리 라이브러리이다.

보통 Store라고 명칭한다.

react(react에도 있음)랑 vue를 쓰는 이유 중 하나

export default {
  state: {
      // 담는 그릇 | 프로젝트에서 공통으로 사용할 변수를 정의 | 프로젝트의 모든 곳에서 참조 및 사용 가능(각 컴포넌트에서 동일한 값 사용 가능)
},
  getters: {
     // 그릇을 내보내는 전용 / getters을 통해 state값을 호출 한다. | computed에 담아야 한다.
},
  mutations: {
    // state에 요리를 담는 전용 | mutations는 동기적(위의 함수가 실행되고 종료된 후 그 다음 아래의 함수가 실행됨)이어야 함.(비동기 사용 불가) | commit('함수명', '전달인자')로 실행 | mutation 내에 함수 형태로 작성 
},
 actions: {
    // mutations(요리)를 실행시키는 역할 | action은 비동기적(순서에 상관 없이 먼저 종료된 함수의 피드백을 받아 후속 처리) 사용이 가능하다. (action에서 mutation을 호출하는 방법을 권장함) | dispatch('함수명', '전달인자')로 실행 | actions 내에 함수 형태로 작성(비동기 처리이기 때문에 주로 콜백함수로 작성)
 }
}

=> store의 기본! 사용법이 정해져 있으므로 그대로 쓰면 됨

 

 

Axios

Axios 설치
> npm install axios vue-axios --save

* dependencies : 서비스할 때도 사용됨

* devDependeciesd : 개발할 때만 사용됨

 

SocketIo

socket 통신 aka. 유선전화

web은 req-res 한번 하면 통신이 끊어짐 => socket이 불가능(계속 통신이 이어져 있어야 함)

ws : web socket (wss: web socket secure)

socketIo로 간단한 채팅 기능을 구현했다.

* io : input, output

* \n : 엔터

 

 

 

느낀 점

하나를 알면 둘을 모르겠다...ㅎㅎ

특히 emit부터 좀 어라? 하다가 store은 이해가 잘 가지 않는다.

기본 개념이 너무 안잡혀있어서 그런가 싶기도 하다.

일단 처음 접하는 것이기 때문에 사용법부터 익히는 게 답...반복하는 수밖에...+구글링도...