Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

6회차과제 - 김주희 #8

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Conversation

juiuj
Copy link

@juiuj juiuj commented May 8, 2024

컴포넌트 구조

이미지 (1)-1

  • Header
  • Nav
  • Video
  • ShortsHeader
  • Shorts

과제 진행 중 아쉬웠던 점 및 어려웠던 점

  • 컴포넌트 분리하는 과정에서 components 폴더에 넣은 후부터 실행과정에 오류가 생겨서 해결점을 찾기 위해 고민했는데, App.js에 import 하는 과정에서 경로를 지정해주지 않았음을 깨달았습니다. 오류를 찾는 과정에서 시간 낭비가 적지 않게 발생한 거 같아서 아쉽지만, 이 경험을 토대로 다음 코드 작성에는 이와 같은 오류 발생 가능성을 줄일 수 있을 거 같습니다.
  • img 삽입과 style 적용, props 사용 부분에서 익숙치 않아 어려움을 겪었고, 이 부분은 과제 제출 후에도 스스로 고민 해 보고 해결하도록 하겠습니다.

그 외

  • 이번 6회차 과제를 통해 컴포넌트 분리의 중요성을 체감할 수 있었습니다. 확실히 분리 후 코드의 가독성이 좋아졌고, 향후 재사용에도 용이할 것 같다는 생각이 들었습니다.

Copy link

@immms immms left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저와 다르게 css파일로 스타일을 적용하셨는데 styled-components 라이브러리도 한 번 써보시는 것 추천드립니다!!. 훨씬 코드가 깔끔해지는 것 같아요.
과제하시느라 수고하셨습니당~~: )

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 리드미 파일은 없어도 될 것 같습니당!

return(
<div className="shorts">
<div className="ShortsList">
<img src={img} alt="" />
Copy link

@immms immms May 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이미지 삽입 시, 사용할 이미지를 폴더 안에 넣어놓고, 해당 사진의 경로를 import 해준 후 사용해줘야 합니당.
그리고 이미지와 그에 따른 text들이 반복적으로 들어갈 것이기 때문에 재사용성이 높은 것들은 컴포넌트로 만들어서 사용하는게 좋을 것 같습니다.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 부분과 관련하여 어려움을 겪고 있었는데 알려주신 방법을 사용하면 해결할 수 있을 거 같습니다. 감사합니다!

Comment on lines +6 to +12
<div className="Nav-bar">
<li>전체</li>
<li>음악</li>
<li>게임</li>
<li>랩</li>
<li>만화영화</li>
</div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

li태그들은 ul태그로 감싸는 것이 더 좋을 것 같습니당

<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

favicon을 지우셨다면 이부분도 없어도 될 것 같아용

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵! 수정하도록 하겠습니다:)

Comment on lines +7 to +9
<div className="VideoList">
<img src={img} alt="" />
</div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분도 반복적인 부분을 컴포넌트로 만들고, 해당 컴포넌트로 props를 이용해 프로퍼티를 넘겨주는게 좋을 것 같습니당

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이미지 반복과 관련하여 고민이 있었는데 props를 이용하면 되겠군요~ 참고하겠습니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants