6회차 과제 - 김진현

[JinhyunMSQ]

1. 전체 개요

이 프로젝트는 React를 사용하여 유튜브 메인 스크린과 유사한 화면을 구현하는 것을 목표로 하고 있습니다.
App.js 시작하며, 여러 하위 파일들을 조합해 구성됩니다.

2. 파일 구조 설명

● App.js

• 프로젝트의 메인 파일입니다.
• Header, Sidebar, VideoThumbnails 세 개를 포함하고 있어 메인 화면의 구조를 정의합니다.
• Material-UI의 Grid 컴포넌트를 사용하고 있습니다.
• videos 배열을 VideoThumbnails에 전달하여 각 영상의 미리보기 카드가 생성되도록 합니다.

● App.css

• 스타일 시트를 제공하며, 텍스트 정렬에 대한 스타일을 포함하고 있습니다.

● Header.js

• 유튜브 헤더와 비슷한 상단 바를 나타냅니다.
• Material-UI의 AppBar, Toolbar 컴포넌트를 활용하고, MenuIcon을 포함합니다.
• 상단 바의 텍스트를 나타냅니다.

● Sidebar.js

• 유튜브화면의 왼쪽 사이드바 메뉴를 구현합니다.
• 각 ListItem은 해당되는 메뉴의 이름을 전달하며, 다양한 카테고리를 분류합니다.

● VideoThumbnails.js

• 비디오 미리보기 카드를 그리드로 나타냅니다.
• videos 배열로부터 각 영상의 정보를 전달받아 Material-UI의 Card, CardMedia, CardContent를 사용하여 영상을 정리된 형식으로 표시합니다.

● index.js

• 리액트의 루트 진입점입니다.

3. 설계 및 구조 설명

이번 과제는 컴포넌트 중심으로 설계 했습니다. 모든 주요 UI 요소는 컴포넌트로 분리되어 있어 코드의 재사용성을 높이고, 기능을 쉽게 유지보수할 수 있게 됩니다.
Material-UI 라이브러리를 활용하여 유튜브와 유사한 UI 요소를 생성하고 스타일을 표현 했습니다.
App.js에서 전체적인 페이지 레이아웃을 관리 하고 있습니다.

4. 과제 진행 중 어려웠던 점 및 문제점을 해결한 과정

● 프로젝트 구조 설계
어려웠던 점 : 처음에 어떤 파일을 만들고 각 컴포넌트의 역할을 어떻게 분배할지 고민이 되었고, YouTube 메인 화면처럼 구체적으로 어떤 구조로 작업할지 불확실했습니다.
해결 과정 : 핵심 구성 요소인 Header, Sidebar, VideoThumbnails를 분리하여 각각구성 요소의 역할을 명확하게 만들었고, App.js에서 통합하는 구조로 설계했습니다.

● Grid 시스템 사용
어려웠던 점 : 동영상 썸네일을 다양한 화면 크기에 맞게 적절히 표시하기 위해 어떤 레이아웃 시스템을 쓸지 고민했습니다.
해결 과정 : Material-UI의 Grid 시스템을 활용해 썸네일 레이아웃을 만들었고, xs, sm, md, lg 등의 속성을 활용해 다양한 기기에 적합한 디자인을 구현했습니다.

● 썸네일 및 채널 정보 배치
어려웠던 점 : 썸네일 이미지와 동영상 제목, 채널 정보를 어떻게 정렬할지에 대해서 고민 했습니다.
해결 과정 : CardMedia와 CardContent를 활용해 이미지와 텍스트를 분리하고, Typography를 사용해 적절한 크기와 색상으로 텍스트를 표시했습니다.

[tkv00]

전체적으로 Material UI 라는 리액트 라이브러리를 이용하여 코드의 빠른 구현과 시각적으로 구조가 간결한 코드인 것 같습니다!

[JinhyunMSQ]

@YoonKeumJae 코드리뷰 마쳤습니다!