React 과제 Youtube App 만들기 4조(장문정, 홍성민, 이정재, 조민호) #3
Conversation
There was a problem hiding this comment.
특별히 피드백 드릴 내용이 없을정도로 좋은 코드였습니다!
README 하단에 작성해주신 고찰과 관련해 몇가지 코멘트 드리면서 리뷰 마치도록하겠습니다.
프로젝트 하시느라 고생 많으셨습니다.!
고찰 Comment
Youtube에서 제공하는 다양한 API를 활용한 프로젝트를 기획하고 계신다면 Chrome Extension을 함께 공부해보시는것을 추천합니다.
youtube 영상 내 한국어 댓글만 남기기, 지금 보는 영상의 타임라인별 책갈피를 빠르게 남기기 등 함께 사용한다면 보다 더 다양한 기능들을 적용시켜보실 수 있을것입니다.
2.
CSS 관리를 위한 여러 방식들이 존재하나 개인적으로는 scss를 추천합니다.
scss는 css preprocessor 즉 전처리기로 webpack과 같은 module bundler를 통해 css로 변환 됩니다. css에서 제공해주지 않는 Programmatically한 기능(변수, 함수, 상속 등)을 제공하고 있어
개발 시간을 줄이고 유지보수에서도 굉장히 좋습니다.
또한 개발중에 만들게된 공용 파일들은 프로젝트를 넘어서 까지도 재사용에 용이합니다.
| yarn-debug.log* | ||
| yarn-error.log* | ||
|
|
||
| package.json |
There was a problem hiding this comment.
package.json 파일을 ignore할 경우 의존성 관리를 비롯한 설정 내용을 공통적으로 적용할 수 없습니다.
| export function ApiProvider({ children }) { | ||
|
|
||
| const [darkMode, setDarkMode] = useState(false); | ||
|
|
||
| const toggleDarkMode = ()=>{ | ||
| setDarkMode(prev => !prev); | ||
| } | ||
|
|
||
| return ( | ||
| <ApiContext.Provider value={{ youtube, darkMode, toggleDarkMode}}>{children}</ApiContext.Provider> | ||
| ); | ||
| } |
There was a problem hiding this comment.
다크모드와 관련된 내용을 분리하신점은 굉장히 좋습니다. 해당 내용을 지워주신다면 더욱 좋을것 같습니다.
| async #searchByKeyword(keyword) { | ||
| console.log('search facthing'); | ||
| return this.instance | ||
| .get('search', { | ||
| params: { | ||
| part: 'snippet', | ||
| maxResults: 5, | ||
| type: 'video', | ||
| q: keyword, | ||
| }, | ||
| }) | ||
| .then((res) => res.data.items) | ||
| .then((items) => | ||
| items.filter((item) => item.id.kind !== 'youtube#channel') | ||
| ) | ||
| .then((items) => | ||
| items.map((item) => ({ | ||
| ...item, | ||
| id: item.id.videoId, | ||
| })) | ||
| ); | ||
| } |
There was a problem hiding this comment.
async-await 구문과 Promise.then이 혼용되어 사용되고 있습니다.
두가지 중 한가지를 택하셔서 사용하시는것을 추천드립니다.
| this.instance = axios.create({ | ||
| baseURL: 'https://youtube.googleapis.com/youtube/v3', | ||
| params: { | ||
| key: process.env.REACT_APP_YOUTUBE_API_KEY, | ||
| }, | ||
| }); | ||
| } |
There was a problem hiding this comment.
공식문서를 참고하셔서 interceptors를 사용하여 에러 핸들링을 해보시는것을 추천합니다.
There was a problem hiding this comment.
isOver state가 더보기 필요 여부와 더보기 활성 여부 두가지 상태값을 동시에 나타내고 있습니다.
이로 인해 의도한바와 다르게 설명이 200자가 넘지않을 경우에도 더보기와 간략히가 나오고 있습니다.
한가지 state를 추가하여 별도로 관리하시는것을 추천합니다.
| <iframe | ||
| title={snippet.title} | ||
| width='100%' | ||
| height='600' | ||
| alt='youtube#video' | ||
| src={`https://www.youtube.com/embed/${videoId}`} | ||
| frameBorder='0' | ||
| style={{ borderRadius: 8 }} | ||
| /> |
There was a problem hiding this comment.
frameBorder 속성은 deprecated되었습니다. Border 값을 설정해야할 경우 css를 통해 진행하시면 됩니다. 보다 자세한 내용은 공식 문서를 확인하시길 바랍니다.
There was a problem hiding this comment.
alt 속성은 iframe 태그에서 사용하지 않습니다. 작성해도 문제는 없으나 alt에서 기대되는 기능들을 지원받을 수 없습니다.
React 과제 Youtube App 만들기
🖥️ 프로젝트 소개
⏰ 진행 기간
⚙️ 사용 기술
👤맴버 구성
✍🏻 역할
📌 주요 기능 및 영상
🎬 구현 영상
✅ 동영상 목록 확인 및 검색
✅ 동영상 정보
✅ 댓글
✅ 테마 변경
✅ 반응형
🤔 고찰
특정 video data를 불러올 때, 리액트 쿼리가 정상적으로 작동하지 않는 문제를 겪었습니다.
첫 번째 동영상 선택 시에는 data가 제대로 왔으나 다음 선택된 동영상에서는 data가 받아와지지 않았습니다.
처음에는 원인을 몰라 임시방편으로
useEffect()를 사용하여 렌더링 시키는 방식으로 해결하여 진행하였습니다.key 값에 videoId를 추가하지 않아 videoId가 변경되어도 쿼리를 요청하지 않았던 것을 깨달아 해결하였습니다.기본적으로 잘 알려진 Youtube API를 사용하여 적용 및 기능 구현을 완료했지만,
관련된
다양한 API에 대해서는 시간관계상 알아보지 못해 적용할 수 없었던 점에서 아쉬움이 남았습니다.따라서 해당 과제 이후에도 적용할 수 있는 부분이 있다면 수정해보고 싶습니다.
최근 리액트와 함께 사용할 수 있는
스타일 라이브러리 및 프레임워크가 다양해졌습니다.이런 기술을 사용하면 CSS 파일을 별로도 생성하지 않아도 되는 장점이 있기 때문입니다.
따라서
리팩토링시간을 통해 이러한 기술을 적용해 보는 것도 개인 성장에 도움이 될 것 같습니다.