Experience/[Clone YouTube] GyuTube

[Clone YouTube] Header & Navigator

winCow 2021. 8. 7. 00:29

1. Header & Navigator

 

 

scr는 contens, header, navigator로 다시 나누어진다. 이전에 header의 일부를 마크업했다.

 

 

2. Header

이전에 분석했던 유튜브의 header

 

얼추 비슷하게는 되고 있는 것 같다.

마크업 중인 페이지

 

헤더만 봐도 복잡하다. 이렇게 컴포넌트 하나하나 폴더를 나눠서 넣는게 맞는지에 대한 의문은 남지만, 버튼 클릭 이벤트에 따라 상태가 바뀔테니 나눠 두는 것이 나중에 더 알아보기 쉬울 것 같다. 변수나 파일 이름을 짓는 것은 평생 어려울 것 같다.

 

마찬가지로 네비게이터도 최대한 나누었다.

 

import React from "react";
import styled from "styled-components";
import HeaderLogo from "./headerLogo/HeaderLogo";
import HeaderSearch from "./headerSearch/HeaderSearch";
import HeaderBtns from "./headerBtns/HeaderBtns";

const HeaderStyle = styled.div`
  padding: 0 16px;
  height: 56px;
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0px;
  left: 0px;
`;

const Header = () => {
  return (
    <HeaderStyle>
      <HeaderLogo />
      <HeaderSearch />
      <HeaderBtns />
    </HeaderStyle>
  );
};

export default Header;

메인 Header는 위와 같이 작성했다. padding, height 등의 고정 길이들은 실제 유튜브 사이트를 분석했다. 아직 마크업밖에 한 것이 없어서, 대부분 이런 형태이므로, 사실 특별히 기록으로 남길만한 것은 것은 아직 없다.

 

다만, position: sticky는 스크롤을 아래로 내려도 (0,0) 위치에 헤더가 자리하도록 만들기 위해서 사용했는데, 방법이 틀린 것인지 스크롤을 일정 길이 이상 내리면 헤더가 올라가 버린다. 그리고 아래의 콘텐츠가 자리를 침범하기도 하고, 콘텐츠가 생기는데 왜 필터에 올려 놓은 버튼이 못생겨지는지 모르겠다. 이 부분을 자세히 알아봐야겠다.

 

 

3. 기타

 - 마크업을 완성한 후에 이벤트 처리를 할 예정인데, React와 Styled Components를 이용하니 확실히 읽기 편하다. 이리저리 폴더를 오가며 만드는 것이 불편하다면 불편하지만, 하나의 파일에 하나의 컴포넌트만을 만들어서 그런지 적어도 파일을 볼 때 집중력이 흩어지는 것은 막을 수 있는 것 같다.


- 자주 쓰지 않다보니 가끔 헷갈릴 때가 있는데, 패딩이나 마진에 네 개의 값을 입력할 때, top부터 시계 방향으로 값을 입력해야 한다.

 

 - SearchBar에서 flex 속성(flex-grow, flex-shrink, flex-basis)을 사용했다.

const HeaderSearchWrap = styled.div`
  flex: 0 1 728px;
  min-width: 320px;
  height: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

flex-basis로 정한 아이템의 기본 너비는, flex-grow에 의해 늘어나거나 flex-shrink에 의해 줄어드는데, flex-grow, flex-shrink에 전달되는 값은 형제 아이템들과의 비율이다. flex-grow가 0인 경우, 레이아웃 너비보다 아이템의 너비 합이 더 작으면 아이템 오른쪽 끝에 여백이 남게 되고, flex-shrink가 1인 경우에는 레이아웃이 줄어들면 아이템이 자동으로 축소된다. flex-basis를 728px, min-width를 320px로 정해 두었기 때문에, 이 SearchBar 아이템은 기본 728px의 너비를 가지게 될 것이고, 최소 320px까지는 자동으로 축소될 것이다.

댓글수0