웹개발3 [Develog] 유튜브 API 요청 후 파이어베이스에 저장하는 방법2 1탄 [Develog] 타입스크립트 + 유튜브 API로 데이터 요청 후 파이어베이스로 저장하는 방법 첫 번째로 했던 작업은 타입스크립트로 유튜브 API를 요청하고 요청한 데이터를 가공해서 파이어베이스에 저장하는 방법이었다. 이 때는 API 사용법이 아직 익숙하지 않아 플레이리스트를 요청 subtlething.tistory.com 저번시간에 유튜브 API를 이용해 데이터를 받아 오는 것 까진 했는데 생각해보니 우리 프로젝트에서는 플레이리스트가 필요했다. 우리가 짠 와이어 프레임 상 대시보드 페이지에 아래처럼 강의 리스트를 보여줘야 하기 때문이다.. 근데 이미 데이터를 단일 데이터로 넣었는뎅...... 힝 대시보드 없애버릴까 싶었지만 개발자로서 그럴 쑨 없쥐 플레이리스트 가져오기? 그게 왜 안되겠어. 바로 .. 2023. 1. 29. Redux로 투두리스트 만들기 문제 해결 원장님께 질문을 통해 문제를 해결할 수 있었다. 1. checked가 true임에도 화면상에서는 체크가 해제된 이유 => 렌더링이 되지 않았기 때문! 렌더링은 state나 props가 변경될 때 수행이 되는데, checked는 단순 속성이 자동으로 변경된 것이기 때문에 렌더링이 이루어지지 않는 것으로 보인다. onChange를 통해 todo의 상태(isDone)가 변경될 때 렌더링이 되므로 그 때 checked 속성도 수동으로 변경시켜준다. 왼쪽의 기존 코드는 조건문을 통해 변경시켜주고 오른쪽의 수정된 코드는 todo.isDone의 상태를 통해 변경시켜준다. 2. 수정 시 내용 입력이 없으면 기존 내용이 사라지는 오류 이 부분은 set이되지 않아서 발생한 오류이다. 기존의 코드는 다음과 같고 40번째 줄.. 2022. 12. 20. [React] Redux, React-router-dom으로 TodoList만들기 1. 구현모습 1) 메인 페이지 2) 상세 페이지 2. 시나리오 1) 메인페이지에서 input창에 내용 입력하여 버튼 클릭 시 dispatch를 통해 setTodo에 새로운 데이터를 payload로 전송 → 전송된 데이터를 useSelector를 통해 가져온 데이터 리스트를 화면에 뿌림 2) 체크버튼 클릭 시 상태 변경 : 완료↔진행중, dispatch를 통해 isDone 상태 변경내용 전달 3) Todo 제목 클릭 시 상세 페이지로 이동 4) 상세페이지에서는 id, title, contents를 보여줌 5) 수정 버튼 클릭 시 제목, 내용 수정 화면이 나타나고 버튼명은 완료로 변경됨 6) 삭제버튼 클릭 시 해당 todo는 삭제되고 navigate를 통해 메인페이지로 넘어감 7) Home 버튼 클릭시 메.. 2022. 12. 15. 이전 1 다음
