오늘 한 것

BYOM에서 Server Control이 필요한 부분 구현

✅ DJ가 선택 한 노래가 화면에 표시된다.

  • Todolist, posts, chats 등에서 어떤 item을 수정하고 싶을 때 어떻게 수정 요청을 할까?
  • 해당 item의 id를 잉ㅇ해 db에서 id로 item을 찾고, 수정, 삭제를 한다.

✅ musics selected false -> true로 저장
✅ selected가 유지되고, false -> true , true -> false로 수정할 수 있다.

배운 것

개념정리 : 왜 binding이 필요한가 ?

종종 setState is not a function 이라는 에러가 떴다. 문제는 callback을 부른 문맥과 callback이 있는 문맥이 달라서 일어났던 오류였는데 해결책으로 bind(this)를 줬다. 어떤 의미 일까? 왜 해야할까?

  • 참고 : 컴포넌트에 함수 전달하기, Passing Functions to Components

    How do I bind a function to a component instance ?
    this.statethis.props 같은 컴포넌트 attributes를 함수가 접근하여 조작 할 수 있는 방법은 여러가지가 있다.

    1. Bind in Constructor
    2. Class Properties
    3. Bind in Render
      render에서 Function.prototype.bind 를 사용하면 컴포넌트가 렌더 될 때마다, 새로운 함수가 만들어지게 된다. 이는 성능 저하를 일으킬 수 있다.
    4. Arrow function in Render
      마찬가지로 컴포넌트가 렌더될 때 arrow function을 써도 성능 저하가 일어난다.

그렇다면 왜 binding이 필요할까 ? 자바스크립트에서 이 두 코드는 같지 않다.

obj.method(); 
// obj의 member로써의 method를 호출하면 
// method 실행 context내에서 this는 obj로 가리키고 있다. 

var method = obj.method();
method();
// 전역 컨텍스트에서 method를 호출하고 있기 때문에 
// method의 this는 global object인 window를 가리키고 있다. 

Binding 함수는 두번째 코드가 첫번째와 동일하게 동작하게끔 만들어준다. 즉 method() 호출할 때 this가 obj인 상황을 만들고 싶음

React에서는 다른 컴포넌트로 전달하는 method를 bind 해야한다. 예를 들어 <button onClick={this.handleClick}>this.handleClick 을 전달한다. 여기서 handleClick 함수를 bind 하고 싶을 수 있다. 하지만 render method나 lifecycle method는 bind 할 필요 없다 : 이들을 다른 컴포넌트들에 전달하지 않으니까!

🌟 binding의 의미
arrow function은 컴포넌트와 bind 하는 기능이 들어가 있나 ?

  • array.filter
    array 안의 모든 elements를 대상으로 특정 기준에 맞는 element들을 선별하여 새로운 array를 만드는 함수이다.
  • ._id 로 findIdAndUpdate, .then
  • emit의 callback
  • Container의 componentDidMount의 역할
    component가 mount되면 db에 있는 모든 데이터들을 다 fetch 해서 가져온다.
    componentDidMount() {
      this.getDataFromDb();
      if (!this.state.intervalIsSet) {
        let interval = setInterval(this.getDataFromDb, 1000);
        this.setState({ intervalIsSet: interval });
      }
    }
    setInterval을 정해서 주기적으로 db를 가져오는 건가?

websockets
react this state is not a function

구현하면서 이해 안가는 부분

  • componentDidMount는 아예 컴포넌트가 제일 처음 마운트되고 바로 일어나는 이벤트인가? 여기서 마운트의 정확한 뜻은 뭘까?
    = Mounting : React 엘리먼트를 DOM 노드에 추가할 때 발생하는 이벤트
  • componentDidMount에서의 setState
  • input checkbox의 값을 어떻게 유지해야할까

추가적으로 구현해야 할 부분

Server Control 이 필요한 부분

  • DJ가 노래를 수정, 삭제 할 수 있다.
    id로 수정, 삭제 database
  • 이미지, 로고 전달하기

Client

  • Main 화면 Mobile 용, Web용 CSS size 잡기
  • Mobile에서 닉네임 input 안되는 문제 해결하기
  • 이미지 적용해서 전반적인 느낌 구현하기

문제

실시간으로 받다보니 music들이 너무 빠르게 올라갈 것 같다.

내일 할 것

  • bind 의미 한번 더 보기
  • websocket 의미 정확히 하기
  • MPL 폰트 적용, 메인 화면 괄호 SVG 만들기, 위치 잡기