Week03/chaeyeon #15
Open
Week03/chaeyeon #15
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ixed해주고 나머지 요소들에 여백 넣어줌
SooY2
reviewed
Jun 4, 2024
There was a problem hiding this comment.
너무너무 잘했습니당 !!! 과제를 넘어서 스스로 새로운 도전하는 모습이 넘 멋쪄..✨ 수고했서💖
추가로 react에서는 단순 css를 지양하는데요, 그 이유는 className이 파일에 관계없이 중복성을 띄기 때문입니다! (파일별로 나눠서 class관리를 해줄 필요가 없는거죠)
각 jsx파일을 위한 css를 주고싶을 땐 module.css를 사용합니다! 관련된 정리 글 남길테니 참고해보세요! module.css
[결론] react에서 스타일링을 주고싶을 땐 styled-components같은 스타일링 라이브러리를 사용하자 !
Comment on lines
+98
to
+110
| <div className="video-item" key={video.id}> | ||
| <img src={thumbnail} alt="thumbnail" className="thumbnail" /> | ||
| <div className="video-info"> | ||
| <div className='video-title'> | ||
| <img src={profile} alt="profile" className="profile" /> | ||
| <div> | ||
| <div>{video.title}</div> | ||
| <div>{video.channel}</div> | ||
| <div>{video.views} {video.uploaded}</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
map함수 사용 좋습니다 !! 요런 컴포넌트의 경우 다른 파일로 빼주는 것도 가독성이 좋을거같아요 !!
Comment on lines
+23
to
+27
| <img src={upload_icon} alt="" /> | ||
| <img src={more_icon} alt="" /> | ||
| <img src={notification_icon} alt="" /> | ||
| <img src={profile_icon} className='user-icon' alt="" /> | ||
| </div> |
Comment on lines
+18
to
+21
| <div className="sidebar-item"> | ||
| <img src={explore} alt="shorts icon" /> | ||
| <span>Shorts</span> | ||
| </div> |
There was a problem hiding this comment.
이 부분같은 경우엔 컴포넌트화해서 map돌리는 방법을 추천합니당
Comment on lines
+6
to
+28
| const videoData=[ | ||
| { | ||
| id:1, | ||
| title:"1아빠 기다리다 렉걸린 강아지", | ||
| channel:"속삭이는 몽자", | ||
| views:"조회수 3.8만", | ||
| uploaded:"1일전" | ||
| }, | ||
| { | ||
| id:2, | ||
| title:"2아빠 기다리다 렉걸린 강아지", | ||
| channel:"속삭이는 몽자", | ||
| views:"조회수 3.8만", | ||
| uploaded:"2일전" | ||
| }, | ||
| { | ||
| id:3, | ||
| title:"3아빠 기다리다 렉걸린 강아지", | ||
| channel:"속삭이는 몽자", | ||
| views:"조회수 3.8만", | ||
| uploaded:"3일전" | ||
| }, | ||
| { |
There was a problem hiding this comment.
객체 배열같은 경우 constants라는 폴더를 만들어 그 안에 따로 관리해주면 파일관리를 더 잘 할 수 있답니당
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✨어떤 과제를 수행했나요?✨
✨어려웠던점, 트러블슈팅✨
Sidebar 컴포넌트를 만들고 넣어주었는데 서버에서 인식이 안됐다. => 문법 점검
프로그래밍 언어가 아닌 html과 달리 jsx의 문법 (모든 태그는 닫혀 있어야함, 부모 요소로 묶여야 함, class 대신 className,{} 사용)등을 지켜줘야 컴파일 에러가 나지 않아 성공적으로 컴포넌트를 렌더링 할 수 있다.
Sidebar div 박스 hover시 스크롤이 생기고 그 div안에서만 움직이는 스크롤이 되게 하고 싶었다.=>Sidebar 컴포넌트는 fixed,botton:0으로 해주고 안의 요소들을 담은 div박스는 sticky로 해주었다.
position fixed하면 다른 태그들이 fixed로 설정해둔 애들을 무시하고 겹쳐진다. 그리고 css가 깨진다.=> 다른 요소에 여백을 줘야한다.
정적으로 이미 저장해둔 데이터를 하드코딩해뒀는데 useState 와 useEffect를 이용해서 동적인 데이터를 관리하도록
코드를 바꾸어 보았다 <기능 : 비디오 데이터 관리 가능해지며, 업데이트 될 때마다 컴포넌트가 렌더링된다.>
🤔 아쉬운 점
시간이 부족하여 반응형으로 만들지 못했다. root 설정 못했다. styled-components 이용 못했다.