6조 과제 제출 (강해경, 강현주, 김지원, 안가을) #7
Conversation
Chore: Project setting
Chore: Project setting-3
Chore: Project setting
…o kanghaekyung
jiwon) feat: create VideoCard component
create header, nav ui
💄 Add : header, nav componenet
💄 update : home page layout
🏗️ Edit: router structure, Delete: Router.jsx
Complete related video bar layout
💄 Add: related video bar
…o kanghaekyung
🐛 Fix error when click related video
…o kanghaekyung
📝 update: Readme.md
💄 update style
Update readme.md
| return ( | ||
| <div className='hidden md:flex p-4 gap-2'> | ||
| <Button buttonName={'전체'} clicked={clicked} /> | ||
| <Button buttonName={'실시간'} clicked={clicked} /> | ||
| <Button buttonName={'음악'} clicked={clicked} /> | ||
| <Button buttonName={'뉴스'} clicked={clicked} /> | ||
| <Button buttonName={'믹스'} clicked={clicked} /> | ||
| <Button buttonName={'게임'} clicked={clicked} /> | ||
| <Button buttonName={'요리'} clicked={clicked} /> | ||
| <Button buttonName={'축구'} clicked={clicked} /> | ||
| <Button buttonName={'최근에 업로드된 동영상'} clicked={clicked} /> | ||
| </div> |
There was a problem hiding this comment.
가독성을 위해 반복문을 통해서 Button을 렌더링하도록 바꾸는것을 추천합니다.
| const Buttons = ({ setVideos, setType }) => { | ||
| const [clicked, setClicked] = useState('전체'); | ||
|
|
||
| const Button = ({ buttonName, clicked }) => { | ||
| if (clicked === buttonName) | ||
| return ( | ||
| <button className='bg-white h-8 text-xs px-3 rounded-xl text-black'>{buttonName}</button> | ||
| ); | ||
| return ( | ||
| <button | ||
| className='bg-[#272727] hover:bg-[#3d3d3d] h-8 text-xs px-3 rounded-xl text-white' | ||
| onClick={() => { | ||
| setClicked(buttonName); | ||
| if (buttonName === '전체' || buttonName === '최근에 업로드된 동영상') { | ||
| setType(''); | ||
| getMostPopularVideos().then((data) => { | ||
| setVideos(data); | ||
| }); | ||
| } | ||
| // setType('search'); | ||
| getSearchVideos(buttonName, '').then((data) => setVideos(data.items)); | ||
| }} | ||
| > | ||
| {buttonName} | ||
| </button> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
video 값의 변경을 Buttons.jsx에서 진행하고 있어 필요없는 결합이 생겼습니다.
이는 추후 Button 컴포넌트를 변경해야하거나 로직이 변경될 경우 수정이 어렵게 만드는 요인으로 작용합니다.
Button의 역할은 아래 두가지만 가지고 있는것이 맞습니다.
- 선택된 type에 맞추어 버튼을 렌더링하는것
- 클릭할 경우 type을 변경시켜주는것
따라서 아래와 같은 순서로 분리하는것을 추천합니다.
- Home.jsx에서 useEffect를 통하여 type이 변경될 경우
getMostPopularVideos또는getSearchVideos가 실행되도록 합니다. - Buttons.jsx의 경우 클릭시 setType을 변경하도록 수정합니다.
There was a problem hiding this comment.
추가로 if(clicked === buttonName)를 통하여 분기처리하기보다는
변수를 한개 추가하여 아래와 같이 변경하는것을 추천합니다.
(위 코멘트를 참고하여 click과 관련된 동작을 고려하여 코드를 수정해야 정상 작동합니다.)
const buttonClass = (clicked === buttonName) ? "bg-white" : "bg-[#272727] hover:bg-[#3d3d3d]";
return (
<button className=`${buttonClass} h-8 text-xs px-3 rounded-xl text-black`>{buttonName}</button>
);
| useEffect(() => { | ||
| getMostPopularVideos().then((data) => { | ||
| setVideos(data); | ||
| }); | ||
| }, []); |
There was a problem hiding this comment.
https://github.com/KDT1-FE/KDT-Youtube/pull/7/files#r1084010614
를 참고하여 수정을 진행하시는것을 추천합니다.
| part: 'snippet', | ||
| part: 'contentDetails', |
There was a problem hiding this comment.
params를 object 형식으로 여러번 선언해줄 경우 가장 아래있는 part만 정상적으로 전달됩니다.
이는 object key는 유일해야하기 때문에 발생되는 현상입니다.
문서에 따르면 comma(,)를 통해 구분지어 여러 값을 전달할 수 있다 나와있으므로
해당 코드를 제외하고도 이와 같은 형식을 가지고 있는 모든 코드를 아래와 같이 수정하는것을 추천합니다.
(Dev tool의 Network 탭을 확인해보시거나 console로 결과를 확인해보면 전달되는 값이 다른것을 확인해보실 수 있습니다.)
| part: 'snippet', | |
| part: 'contentDetails', | |
| part: 'snippet, contentDetails', |
| )} | ||
| </div> | ||
| {video && ( | ||
| <VideoCardInfo video={video.snippet} videoId={videoId} chVideoId={chVideoId} type={type} /> |
There was a problem hiding this comment.
chVideoId 값은 사용하지 않는데 명시되어있는것 같습니다.
|
|
||
| const VideoDuration = ({ videoId }) => { | ||
| const [videoLength, setVideoLength] = useState(''); | ||
|
|
||
| useEffect(() => { | ||
| getVideoDuration(videoId).then((data) => setVideoLength(data)); | ||
| }, []); | ||
|
|
There was a problem hiding this comment.
videoId가 object일 경우 분기 처리 필요 (VideoCardInfo.jsx처럼)
또는 reqeust.js에서 미리 데이터를 나눠주는것도 좋을것 같음
| </div> | ||
| </div> | ||
| <div> | ||
| <div className='text-sm mt-1 w-fit'>{text}</div> |
There was a problem hiding this comment.
영상과 댓글정보를 불러올 때 일부 특수문자가 html 태그나 entity로 출력되는 현상을 해결하기 위해서는
링크 와 같은 방식으로 렌더링을 진행해야합니다.
이는 기본 문법의 경우 innerText로 변경되고
위 링크에서 설명하는 방식은 innerHTML로 변경되기에 제대로 변경사항이 적용되는것입니다.
다만, 링크에도 나와있듯이 이는 보안에 취약하므로 해당 텍스트의 값을 전달하는 주체가 안전한지 판단한 후 사용하는것을 추천합니다.
There was a problem hiding this comment.
youtube api를 살펴보니
textDisplay 대신 textOriginal를 사용하면 위 방식 없이도 해결이 가능하네요
| getChannelData(channelId).then((data) => setChannelData(data)); | ||
| getPlayListId(channelId) | ||
| .then((data) => getPlayListItems(data)) | ||
| .then((data) => setPlayListItems(data)); | ||
| getSubscriberInfo(channelId).then((data) => setSubscriberCount(data)); |
There was a problem hiding this comment.
여러개의 비동기 요청을 순서와 상관없이 보내야할 경우에는
Promise.all을 사용하는것이 보다 빠릅니다.
💦 어려웠던 점 코멘트영상목록을 불러오는 api가 여러가지이고 응답데이터 양식과 뎁스가 가지각색이라 혼란스러웠습니다. 페이지에 다른 컴포넌트가 들어오거나 구조의 변경이 생기는 경우 다시 그 구조에 맞게 반응형 스타일로 변경시켜주어야 하는 부분이 어려웠습니다. 다만, 무조건 해당 방식을 사용한다면 동일한 기능을 하는 컴포넌트가 여러개로 분산되어 관리가 오히려 어려워질 수 있습니다. 이 외 다른 어려웠던 점의 경우 모두 잘 해결되어 있어 코멘트를 남기지 않았습니다. |
💡 질문사항 및 미해결 에러영상과 댓글정보를 불러올 때 일부 특수문자가 html 태그나 entity로 출력되는 현상 같은 API 요청이 여러 번 전송되는 문제 메인화면에서 썸네일을 호버했을 때 자동재생 ... 확실한 조건을 걸고 싶은데 어떤 조건을 걸어야 할지 조언을 구하고 싶습니다 |
|
해당 프로젝트의 경우 지난번과 비교하였을 때 너무 코드가 깔끔해져서 놀랐습니다. P.S. |
리액트 토이프로젝트(6조) - 유튜브 클론코딩
프로젝트 소개
✨배포사이트 - 🔗 6tube - Toy Project
👩💻 팀원 소개
⚙기술 스택
📆 과제 기간
📌 작업영역 및 구현 기능 설명
강해경
반응형 디자인에 초점을 맞춰 헤더와 사이드바를 구현했습니다.
iframe태그를 이용해 해당영상을 플레이하고 채널과 영상에 대한 정보를 화면에 출력했습니다.
메인페이지에서 해당 태그별 영상목록을 불러올 수 있는 버튼을 구현했습니다. '전체'와 '최근업로드된동영상' 클릭시에는 핫트렌드 영상을 불러오고 이 외 버튼은 해당내용을 검색했을 경우 나오는 영상목록을 출력해 줍니다.
강현주
현재 재생중인 영상과 관련된 영상 리스트가 출력되도록 구현했습니다.
현재 재생중인 영상의 댓글과 작성자 정보가 출력되도록 구현했습니다.
김지원
반응형 디자인에 초점을 맞춰 영상 목록을 구현했습니다. 썸네일 이미지에 마우스가 호버될 경우 영상이 자동재생됩니다.
채널 타이틀을 클릭할 경우 채널의 상세 페이지로 이동합니다. 주어진 API를 이용해 채널 정보, 해당 채널의 플레이리스트를 보여주고 있습니다.
안가을
메인에서 키워드 검색 시 검색결과 페이지로 이동합니다.
💦 어려웠던 점
처음 세팅(같은 작업환경을 만드는 부분)이 어려웠습니다.
API 요청의 할당량이 정해져 있어 원하는 만큼 테스트를 해볼 수 없었던 점이 어려웠습니다.
영상목록을 불러오는 api가 여러가지이고 응답데이터 양식과 뎁스가 가지각색이라 혼란스러웠습니다.
페이지에 다른 컴포넌트가 들어오거나 구조의 변경이 생기는 경우 다시 그 구조에 맞게 반응형 스타일로 변경시켜주어야 하는 부분이 어려웠습니다.
영상플레이 영역의 크기를 조절하고 반응형으로 구현하는 것이 어려웠습니다.
.
💡 질문사항 및 미해결 에러