6번째 과제 - 최성임

[immms]

개발 과정

1. 레이아웃 구성

개발에 앞서 구현할 레이아웃을 먼저 파악하고, 필요한 컴포넌트를 구상함

• TopBar
• FilterBar
• VideoList
• ShortsBar
• ShortsList
  위와 같이 컴포넌트를 구성하고, 중복되는 요소인 VideoDetail과 ShortsDetail컴포넌트를 제작하여 재사용에 용이하도록 구현함.

2. 폴더 구성

components폴더에 컴포넌트 관련 js파일을 넣고,
디자인 구현에 사용되는 image파일들은 images폴더에 넣어 관리함

App.js에서 컴포넌트의 구성은 아래와 같다

3. 개발 과정

• ShortsDetail과 VideoDetail은 각각 ShortsList와 VideoList에서 porps로 건네받은 값을 사용하여 정보(조회수, 제목 등)를 나타냄

// ShortsList에서 전달받은 props값을 사용
function ShortsDetail({short, title, view}){
    return(
        <ShortsBody>
            {/* 쇼츠이미지 */}
            <Shorts>
                <ShortsImage src={short}/>
            </Shorts>
            {/* 쇼츠정보 */}
            <ShortsInfo>
                <Title>{title}</Title>
                <Views>조회수 {view}회</Views>
            </ShortsInfo>
        </ShortsBody>
    )
}

// VideoList에서 전달받은 props값을 사용
function VideoDetail({video, profil,title,channel,view,date}){
    return(
        <VideoBody>
            {/* 비디오이미지 */}
            <Video>
                <VideoImg src={video}/>
            </Video>
            
            <Info>
                {/* 프로필이미지 */}
                <Profil>
                    <ProfilImg src={profil}/>
                </Profil>
                {/* 비디오 정보 */}
                <Right>
                    <Title>{title}</Title>
                    <Channel>{channel}</Channel>
                    <Detail>
                        <Views>조회수 {view}회 • </Views>
                        <Date>{date} 전</Date>
                    </Detail>
                </Right>

            </Info>
        </VideoBody>
    )
}

• 스타일은 styled-components 라이브러리를 사용하여 구현함
• 부수적인 아이콘은 react-icons 라이브러리를 사용하여 구현함

4. 결과 화면

5. 과제 진행 중 어려웠던 점

• styled-components 라이브러리를 사용하여 스타일을 구현하니 깔끔하긴 했지만 컴포넌트 기반이기 때문에 뒤로 갈수록 생각나는 이름이 없어서 은근히 고민이 됐음. 그리고 단순 css를 사용하는 것이 좀 더 빠르다고 느꼈음. 두 가지를 적절하게 섞어서 사용해야 하는 것이 좋은지 의문.
• 이미지를 다 다르게 하고 싶어서 이미지를 캡쳐하고 삽입하는 과정에서 너무 번거로워서 조금 후회했음.. 하지만 결과물이 잘나와서 뿌듯함.
• 아이콘도 똑같이 구현하고 싶어서 TopBar 검색창을 제작하는 과정에서, 오른쪽 돋보기 부분 바탕만 색깔을 다르게 구현하는 것이 잘 안돼서 시간이 좀 소요됐지만 검색하여 방법을 찾아냈고 해결함.
• 데이터가 많아서 map 함수를 사용하면 더 깔끔한 코드를 작성해볼 수 있었을 것 같은데 아쉬움이 크다.
• import 부분도 더 간결하게 쓸 수 있는데 급하게 하느라 놓친 것 같음. 추후에 수정할 예정!

[juiuj]

• props와 컴포넌트를 적절하게 잘 사용하셨고, 이미지를 다르게 하시느라 번거로우셨을텐데 디테일까지 잘 구현하신 거 같습니다~!
• commit 을 잘 해주셔서 어떤 기능들이 추가됐는지 잘 파악이 되는 것 같습니다
• styled-components 라이브러리와 관련한 의문점은 저도 함께 고민해보도록 하겠습니다
• 기초 개념만 알고 있었는데 성임님 코드리뷰를 통해 코드 작성하는 방법에 대해서 매번 알아갑니다. 좋은 기회 주셔서 감사해요:) 수고하셨습니다!

[juiuj]

각 항목별로 주석을 잘 달아주셔서 코드 가독성이 좋은 것 같습니다!

[juiuj]

이 코드가 돋보기 부분바탕 색깔 변형 부분일까요?!
저도 몰랐는데 성임님 코드 리뷰를 통해 배워갑니다:)

[immms]

바로 밑에 SearchButton이 돋보기 부분입니다! 부모요소인 MiddleIcon에 overflow: hidden; 를 해주면 자식요소의 튀어나옴 없이 깔끔하게 구현해낼 수 있었습니다!

[juiuj]

Button을 단순히 Button 그 자체로만 사용할 수 있는 줄로만 알았는데 FilterButton등의 형식으로 변형하여 사용할 수도 있겠군요..!

[immms]

넵 styled-components 라이브러리를 사용하면 css파일을 만들어서 스타일 효과를 부여하는 것 아니라, 컴포넌트 기반으로 스타일 효과를 지원하기 때문에, 위는 버튼을 FilterbarButton이라는 컴포넌트를 만들어서 스타일을 부여하도록 한것입니다!!

[immms]

@YoonKeumJae 리뷰완료했습니다~~