With BooduckSound(Web02)
| J017 | J024 | J066 | J137 | J155 | J164 | J167 | J202 |
|---|---|---|---|---|---|---|---|
| 김기한 | 김미정 | 김현민 | 윤해수 | 이인송 | 이찬호 | 이태욱 | 차재명 |
| @vgihan | @guiyomj | @rudy3091 | @haesoo9410 | @ingong | @ChanhoLee275 | @leetaewook | @Coreight98 |
 |
 |
 |
 |
 |
 |
 |
 |
- 토스트 알림
- react-toastify 라이브러리 사용
- Toast 로 감싸면 console.error 대신 toast.error 라고만 치면 바로 적용가능
- 칸반보드 드래그 앤 드랍
- 아직 불안정
- 아예 갈아엎는중
- 드래그앤드랍시 발생하는 이벤트가 여러개 있음
- dragstart, dragenter, dragover, drop
- ref 객체를 둬서 드래그중인 객체, 밑에 깔려있는 객체, 카테고리를 관리
- 상태를 변경시킬때 배열 안에 객체가 있음 리스트를 카피해서 slice떠서 중간에 끼워넣는식으로 구현함
- 배열을 새로 만들어서 immutable 하게 끼워넣었음
- id 속성을 따로 줘서 drop 할때 이벤트 타겟의 id를 참조해서 바꿈
- https://moong-bee.com/posts/react-drag-and-drop-list-sortable
- socket 통신으로 유저 상태 전달
- group 별로 서비스를 이용하게 할 예정
- room으로 격리
- 처음에는 클라이언트 소켓 인스턴스에 끼워넣어서 전달
- socket.data 프로퍼티가 유지될수있음
- 여러 데이터를 메모리에 배열로 던져놓음 -> 레디스 같은걸 써서 안전하게 관리를 하는게 좋음
- 마이그레이션 필요
- 리스트 뷰 개인 할일과 프로젝트 할일 필터링 및 완료 삭제
- 개인 할일과 프로젝트의 할일을 완료할수있도록
- 필터링 기능도 구현
- 삭제기능 구현
- 상태관리 라이브러리 마이그레이션 작업
- 도전과제 중 하나
- 상태관리 라이브러리를 사용하지 않다 돌아가는 중에 바꾸기
- 관리하는 상태는 user 상태 (할일, 프로필이미지, 등등), 로드맵에 그려지는 에픽, 에픽에 속한 스토리에 대한 3가지
- 그 중 user 상태를 리코일로 갈아엎음
- 확실히 안쓰다 쓰니까 차이점이 느껴짐
- 디자인 컴포넌트 스토리북 적용 (일단은 버튼만...)
- 테스트로 활용하긴 어렵다
- 컴포넌트 자체를 확인하는 역할
- 주는 option에 따라 변경
- 디자이너들과 협업할 일이 많은데 스토리북 자체를 배포해서 소통하기 좋은 라이브러리
- 모달, 드롭다운, 버튼, 아이콘 등에 대해 적용해볼 예정
- 미리 정의한 컴포넌트들을 문서화했는데, 이걸 시각적으로 확인하기 좋은 환경을 제공해줌
- 날짜계산 알고리즘
- 소켓 연결 관리
- 메일 발송
- nodemailer 라이브러리 사용
- html 내용이랑 옵션을 주면 메일이 발송됨
- 인증정보를 관리하는 로직은 아직 미완성
- 스토리북 환경설정
- package.json 에 storybook 명령어 등록
- 관련 라이브러리 설치
- .storybook 폴더 아래에 설정파일
- addDecorator 함수(?)로 global style 이나 theme provider 에 선언한 정보를 사용가능
- 컴포넌트 책임 분리하기 (Kanban, KanbanColumn, AddBtn, Modal)
- Recoil 로 Migration 하기
- 편해졌던 점?
- 상태 변화가 다른 렌더링에 영향 X
- 가장 큰 장점이지만 깊은 상태 전달을 하는일이 많이 없어 아직 체감은 안되는 상태
- 공유상태를 내부상태처럼 쉽게 사용 가능
- 공유된 상태지만 useState 쓰듯 사용가능
- useRecoilState
- 상태 정의를 분할하여 코드 분할 가능
- user 상태 중 자신이 속한 프로젝트 내부 할일에 대한 배열, 개인의 할일에 대한 배열
- context로 분리할 정도는 아니지만 애매한 상태들
- user 상태에서 selector로 위에서 말한 상태들만 뽑아와서 useState 쓰듯 관리가능
- 코드 분리가 가능해서 가독성도 좋고 관리하기 편해짐
- 리액트 suspense
- 도전과제 중 하나
- 동적 라우팅, code splitting
- 리코일이 suspense와 결합하기 좋음
- ERD가 궁금합니다 !
- 게임 플레이 기능 구현
- 게임 시작, 스킵, 정답 맞추기, 결과 화면, 타이머
- 버그 수정
- 노래가 한 번씩 나오지 않는 문제 해결🐼
- 플레이리스트 노래 검색 할 때 inputText 깨진 거 복구🐼
- GAME_END에서 점수 초기화하기💫
- 방 옵션 변경 모달에서 CSS 개선 (비밀번호 label 간격이랑, input with button 벌어진거) 🐼
- 방 옵션 변경에서 비밀번호 없앨 수 있게 하기🦥
- 플레이리스트 선택(인풋wit버튼) 모달에서 인풋 가로 늘리기💫
- 스킵 버튼 클릭 시 바로 비활성화 시키기 (start 버튼도 마찬가지)🦥
- 힌트가 앞서서 나오는 오류 수정💫
- 스킵 인원 수 옵션 어떻게 처리할지 생각할 것
- GAME_END에서 화면에 뭐 띄울지 생각하고 구현할 것🦥
- 방 생성할 때 페이지에 잠깐 있다가 게임 페이지로 넘어가는 현상 느린 컴퓨터에서는 그 텀이 너무 길게 느껴지는 점 개선 🍔
- SKIP 이벤트 상태가 playing이 아니면(resting or waiting이면) 서버에서 무시🍔
- START_GAME에서 이벤트 상태가 waiting이 아니면 무시 🍔
- ffmpeg ROUND_END 할 때 destroy 시키기 🍔
- 유튜브 검색 어떻게 돌아가는 건가 (got 라이브러리로 HTML 얻어서 크롤링)
- ytdl 라이브러리 수정해서 사용
- 유튜브에 있는 watch=~~로 google video에 있는 url을 알아내서 stream을 알아냄
- 크롤링을 하려했는데 잘 안됐음
- got 라이브러리 -> 정보들을 다 가져옴
- html로 파싱을 해서 결과를 가져옴
- 그 결과를 받아서 필요한 데이터들만 뽑아서 보내주고
- 바로 클라이언트에서 처리
- 결론은 크롤링을 사용했음
- 썸네일도 가져오는데, 지금은 사용하지 않고 있음
- 지금은 썸네일을 제외하고 title만 나오도록 되어있음
- 유튜브 api가 있는데 사용하지 않으신 이유가 있나요?
- 일정 건수 이상이면 요금이 부과돼서..
- ytdl 라이브러리 수정해서 사용
- 채팅에서 한글 칠 때 살짝의 버벅임이 있는데 이슈로 관리 대상인가요?
- drag and drop을 할 때 immutable 하게 변경 상태를 유지하는 방법
- 테스트코드 쓰셨나요?
- 초반에 몇 개 썼다가 야심차게 포기...