Conversation
Summary of ChangesHello @Dobbymin, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
react-youtube 라이브러리를 사용하여 유튜브 동영상 임베드 기능을 구현하신 점이 좋습니다. 블로그에 동적인 콘텐츠를 추가하는 좋은 기능이 될 것 같습니다.
코드 리뷰에서 몇 가지 개선점을 제안드렸습니다.
가장 중요한 점은 package.json에서 더 이상 필요하지 않은 @types/react-youtube 의존성을 제거하는 것입니다. 이 패키지는 deprecated 상태이며, react-youtube 최신 버전에 타입이 내장되어 있습니다. 이 부분이 PR 설명에 언급된 "알 수 없는 오류"의 원인일 수 있습니다.
또한, YouTubeEmbed 컴포넌트에서 opts 객체를 컴포넌트 외부로 추출하여 불필요한 재생성을 막도록 제안했습니다.
전반적으로 깔끔하게 잘 구현되었습니다.
package.json
Outdated
| "@types/node": "^20", | ||
| "@types/react": "^19", | ||
| "@types/react-dom": "^19", | ||
| "@types/react-youtube": "^7.10.0", |
There was a problem hiding this comment.
react-youtube v10 이상 버전은 자체적으로 타입 정의를 포함하고 있습니다. 따라서 @types/react-youtube 패키지는 더 이상 필요하지 않으며, deprecated 상태입니다. 이 패키지를 제거하면 의존성을 깔끔하게 유지하고 잠재적인 타입 충돌을 방지할 수 있습니다. PR 설명에 언급된 "알 수 없는 오류"가 이 패키지 때문일 수도 있습니다.
이 줄을 삭제해주세요. 이전 줄의 쉼표도 제거해야 할 수 있습니다.
| 'use client'; | ||
|
|
||
| import YouTube, { YouTubeProps } from 'react-youtube'; | ||
|
|
||
| type Props = { | ||
| videoId: string; | ||
| title: string; | ||
| }; | ||
|
|
||
| export const YouTubeEmbed = ({ videoId, title }: Props) => { | ||
| const opts: YouTubeProps['opts'] = { | ||
| width: '100%', | ||
| height: '100%', | ||
| playerVars: { | ||
| autoplay: 0, | ||
| modestbranding: 1, | ||
| rel: 0, | ||
| }, | ||
| }; | ||
|
|
||
| return ( | ||
| <div className='relative my-8 aspect-video w-full'> | ||
| <YouTube | ||
| className='absolute top-0 left-0 h-full w-full' | ||
| opts={opts} | ||
| title={title} | ||
| videoId={videoId} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
opts 객체는 렌더링될 때마다 재생성될 필요가 없는 상수입니다. 컴포넌트 외부로 옮겨서 불필요한 재생성을 방지하는 것이 좋습니다. 이렇게 하면 성능에 미미하지만 긍정적인 영향을 줄 수 있고, 코드의 의도를 더 명확하게 표현할 수 있습니다.
'use client';
import YouTube, { YouTubeProps } from 'react-youtube';
type Props = {
videoId: string;
title: string;
};
const YOUTUBE_OPTS: YouTubeProps['opts'] = {
width: '100%',
height: '100%',
playerVars: {
autoplay: 0,
modestbranding: 1,
rel: 0,
},
};
export const YouTubeEmbed = ({ videoId, title }: Props) => {
return (
<div className='relative my-8 aspect-video w-full'>
<YouTube
className='absolute top-0 left-0 h-full w-full'
opts={YOUTUBE_OPTS}
title={title}
videoId={videoId}
/>
</div>
);
};
1 participant
📝 상세 내용
react-youtube라이브러리를 활용하여 유튜브 영상을 mdx 파일에 추가해서 바로 볼 수 있도록 기능을 구현하였습니다.youtube 주소에서 videoId를 추출하여 넣는 방법보다는 이 프로젝트의 컨셉이 정적 페이지 블로그인 만큼, videoId 를 직접 props로 넘겨주어 영상을 연결할 수 있도록 구현하게 되었습니다.
#️⃣ 이슈 번호
⏰ 현재 버그
콘솔창에 알수없는 오류가 발생함 ㅎㅎ
📷 스크린샷(선택)