🕸 Git clone, fork 내용 정리

🎉 BYOM 프로젝트

  • axios 이용하여 playlist 가져오기
  • mongoose 로 DB 연결
  • nickname 입력 후에 playlist와 musicinputform만 보이도록 수정
  • socket 연결 후 nickname server에 전달
    • 이 후 nickname db에 있는지 확인, 없으면 저장 / 있으면 에러 표시
  • Thinking in React : 언제 state, props를 써야하는지 조금이나마..이해..

    state와 props 구별 ( React 공식 문서 )

  • 부모에게서 전달된다면 state가 아님
  • 시간이 지나도 값이 변경되지 않으면 state 가 아님
  • 다른 state나 props에 의해 조작될 수 있다. : state가 아님

PlayList Component의 componentDidMount에서 axios 비동기 요청을 통해 db에 저장되어 있는 playlist들을 가지고 올 것이다.
가져온 playlist들은 state? props?
-> 수정) PlayList 위의 Container component의 componentDidMount 이벤트에서 axios로 데이터 가져오는 것으로 수정함. 가져온 musics들은 state로 저장하고, playList에 props로 전달해주었다.

❓ 아직 왜 musics를 state로 저장해야하는지는 이해가 안감
❓ 모바일에서 왜 nickname submit이 안될까?

Component

변경 전

  • App
    • LoginForm
    • PlayList
    • MusicInputForm

변경 후

  • App

    • Layout
      • LoginForm
      • Container
        • PlayList
        • MusicInputForm
  • Layout에서 state로 socket과 user(닉네임) 가지고 있음

  • user가 있으면 Container, 없으면 LoginForm

LoginForm

  • nickname 입력
  • 닉네임 이미 있는지 체크하기
  • 해당 nickname을 MusicInputForm 에서 사용할 수 있게 하기
  • nickname이 입력되면 PlayList와 MusicInputForm 이 보이기

MusicInputForm

Artist, Title이 입력되고 nickname과 함께 socket으로 보낸다.

❓nickname이 어떻게 route를 이동할 때 계속 유지되게 할 수 있을까?
❓artist, title 보내고, db에서 저장 후 broadcast로 서버에서 해당 내용을 모든 클라이언트에게 전송

  • 어디 component에서 보내고
  • 어디서 받아야하나