🕸 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에서 보내고
- 어디서 받아야하나
