210217_TIL

🍎 오늘 한 일

---

✔️ React - Youtube 클론코딩
유튜브 API를 이용해서 검색 기능을 구현하는 걸 가장 먼저 진행했다. url의 쿼리부분을 이용해서 키워드에 따라 플레이리스트에 있는 영상들이 바뀌도록 했고, 리스트 중 클릭한 영상을 메인 영상으로 보여주도록 만들었다. 그리고 나서 페어분과 디자인과 댓글, 서버 등 기능들을 추가로 덧붙여보기로 했다. 댓글을 등록하면 서버에 POST 요청을 보내 데이터가 추가되고, 댓글 컴포넌트도 화면에 하나 더 추가된다. 각 댓글에는 좋아요, 싫어요 기능이 있어서 클릭하면 숫자가 증가하고 이 버튼들도 마찬가지로 누르면 서버에 POST요청을 보내 도록 했다. 여기서 좋아요 개수를 기반으로 정렬을 할 수 있도록 댓글 정렬 기능도 추가했다. 정렬버튼을 누르면 인기순 / 등록순으로 바꿔가며 댓글들을 재정렬시킬 수 있다. 답글은 페이크데이터를 만들어서 일정하게 보이도록만 구현해뒀는데, 답글 더보기 버튼을 누르면 답글들이 보이고, 다시 누르면 숨길 수 있도록 했다.

리액트 연습을 하겠다고 시작했는데 기능을 붙이다보니 Promise부터 API, 서버까지 지난 한달동안 배웠던걸 다 적용해볼 수도 있었다. 덕분에 내가 어떤 점이 부족한지도 파악할 수 있었고, 가물가물해져가는 기억들을 되살릴 수도 있었다. 그리고 얼른 Hooks를 익혀둬야겠다는 생각도 강하게 들었다. 클래스형 컴포넌트의 불편함을 몸소 느낄 수 있는 기회이기도 했다,,

유튜브 메인페이지 완성본

추가기능1 - 댓글 인기순으로 정렬하기

추가기능2 - 답글 보기/숨기기

추가기능3 - 입력창 클릭시 댓글등록버튼 등장

 

🍎 더 공부할 것

---

✔️ React 라우팅