6회차 과제-김지현 #10
6회차 과제-김지현 #10
Conversation
src/App.jsx
Outdated
| <Videokind kind="음악"/> | ||
| <Videokind kind="게임"/> | ||
| <Videokind kind="라이브"/> | ||
| <Videokind kind="최근에 업로드된 동영상"/> |
There was a problem hiding this comment.
이것도 map 함수를 이용해서 생성하면 좋을 거 같네요!
| return( | ||
| <> | ||
| <div className="Header"> | ||
| <img src={youtubeLogo} alt="유튜브로고" className="logo"></img> |
There was a problem hiding this comment.
글자까지 있는 유튜브 로고를 넣고 싶어서 다운받아서 했습니다! 다음엔 fontawesome 써보겠습니다!
src/Header.jsx
Outdated
| import user from "./user.png"; | ||
| import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; | ||
| import {favideo} from "@fortawesome/free-solid-svg-icons"; | ||
| import {fabell} from "@fortawesome/free-solid-svg-icons"; |
There was a problem hiding this comment.
{favideo, fabell} 이렇게 한줄로 작성해도 됩니다!
| </span> | ||
|
|
||
| <div className="settings"> | ||
| <img src={favideo} alt="영상추가"></img> |
There was a problem hiding this comment.
fontawesom은 이렇게 작성하면 아이콘 나와요!
스타일링은 className 준다음 font처럼 스탕일링 하면됩니다. fontawesome은 폰트 처럼 사용하면 돼요!
src/Header.jsx
Outdated
| ) | ||
| } | ||
|
|
||
| <FontAwesomeIcon icon={favideo} /> |
There was a problem hiding this comment.
fontawesome 사용법을 인터넷에 찾아보았을때 코드 마지막 부분에 이 코드를 넣으라고 되어있어서 넣었습니다! 빼도 잘 실행되면 삭제하겠습니다!
| } | ||
|
|
||
| .img{ | ||
| width: 90%; |
There was a problem hiding this comment.
이렇게 스타일링하면 아마 모든 파일에 img라는 className 가진 애들 모두 설정이 들어가서 따로따로 하고싶으면
클래스 이름을 다르게 하는게 좋아요
예를들어서) Video 컴포넌트 안에 img면 Video-img 이런식으로 className 짓는게 좋습니다. 나중에 프로젝트 규모가 커지면 겹치는 className이 만아져서 이렇게 하는게 좋아요
There was a problem hiding this comment.
넵 알겠습니다! 한 가지 궁금한게 있는데 video.css를 video.jsx에만 import 해주었는데도 className이 img인 다른 요소에도 적용이 되는 것은 아니지 않나요?
There was a problem hiding this comment.
이게 저도 그런줄 알았는데 어떤 이유에서인지 모르겠는데 다른 곳에서도 적용이 되더라구여 이유를 찾아봐야겠네요
|
@YoonKeumJae 코드리뷰 완료했습니다~ |
1.내가 개발한 기능
video와 shorts의 컴포넌트를 만들어 동일한 형태의 비디오들과 쇼츠들을 생성해냈다.
2.내가 개발할 때 유의깊게 개발한 부분
App컴포넌트에서 videoList와 shortsList를 작성하여 return문 안에서 이 두 리스트를 맵함수를 이용하여 내용을 넣을 수 있도록 하였다.
3.내가 개발하면서 들었던 의문사항
fontawesomeicon을 사용하였는데 코드 마지막에
"FontAwesomeIcon icon={favideo} /"
이 코드를 사용하는 이유는 무엇일까?