220330

solsolsol·2022년 3월 30일

목록 보기

14/32

👩🏻‍💻 Learn

layout

페이지에서 똑같이 사용되는 부분으로 만들어두면 같은 레이아웃을 사용하는 사이트를 만들 때 편리하다.

1 common 폴더 안에 layout 폴더 및 index.js 생성
2 페이지 레이아웃에 해당하는 폴더 및 파일 생성(ex. header, banner, footer ...)
3 layout 폴더의 index.tsx(Layout)에 각 부분 import

export default function Layout(props: ILayoutProps) {
  
  return (
    <>
      <LayoutBanner />
      <LayoutNavigation />
      <BodyWrapper>
        <LayoutSidebar />
        <Body>{props.children}</Body>
      </BodyWrapper>
      <LayoutFooter />
    </>
  );
}

4 _app.tsx 에 위에 만들어둔 Layout 컴포넌트 import

function MyApp({ Component, pageProps }: AppProps) {

  return (
    <ApolloProvider client={client}>
      <Global styles={globalStyles} />
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ApolloProvider>
  );
}

이때 _app.tsx 의 <Component {...pageProps} /> 이 부분을 props 로 Layout 페이지에 {props.children} 으로 받아오게 된다. 이름은 자동으로 children으로 설정되니 새로 만들어줄 필요 없음!

Global Style

index.tsx 파일에 공통적으로 사용할 css style 을 지정할 수 있다. 만들어둔 파일을 _app.tsx 에 import 해주기만 하면 된다.

FOIT 와 FOUT

Flash Of Invisible Text
다운로드 되지 않은 부분만 빼고 먼저 보여줌(크롬, 사파리, 파이어폭스)

Flash Of Unstyled Text
폰트가 안받아지면 디폴트로 적용시켜서 다 보여주고 다운로드 완료되면 다시 폰트를 바꿔줌(인터넷 익스플로러)

이런 일들을 예방하기 위해 폰트 용량을 줄여주면 좋다

압축률이 높은 폰트 다운받기 (woff2)
Subset-Font : 경량화 버전 다운받기(잘 쓰이지 않는 단어는 빠져있음)
** 중요한 문서에는 쓰지 말기
Fallback font : font-family에 여러가지 폰트를 선언한 후 폰트 적용이 안 될 시 다음 폰트를 순차적으로 적용시키는 방법

Carousel

Carousel 은 merry-go-round 혹은 수하물 컨베이어 벨트를 뜻한다. 둘의 공통점은? 한 자리를 빙글빙글 돈다는 것! react-slick을 이용하면 carousel image 를 적용할 수 있다.

yarn add react-slick 슬릭 다운로드
yarn add slick-carousel캐러셀 css 다운로드 후 아래 두 개 import
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

슬릭 홈페이지에서 원하는 캐러셀 코드를 가져와 붙여넣으면 끝! 클레스형으로 작성되어 있어서 함수형으로 바꿔서 넣어줬다. 스타일은 어떻게 줘야할까 고민하다가 emotion 을 사용하는게 가장 좋은 것 같아서 변수로 선언해줬다.

const Wrapper = styled.div`
  width: 100%;
  height: 300px;
  background-color: thistle;
  display: flex;
  justify-content: center;
  align-items: center;
`

const StyledSlider = styled(Slider)` // Slider를 emotion에 지정
  width: 600px;
  height: 100%;
`

const ImgBox = styled.div`
  width: 100%;
`

const BannerImg = styled.img`
  height: 300px;
  margin: 0 auto;
`

export default function LayoutBanner(){

  const settings ={
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  
  return (
  <Wrapper>
    <StyledSlider {...settings}>
        <ImgBox>
          <BannerImg src="/img/1.jpeg" />
        </ImgBox>
        <ImgBox>
        <BannerImg src="/img/2.jpeg" />
        </ImgBox>
        <ImgBox>
        <BannerImg src="/img/3.jpeg" />
        </ImgBox>
        <ImgBox>
        <BannerImg src="/img/4.jpeg" />
        </ImgBox>
        <ImgBox>
        <BannerImg src="/img/5.jpeg" />
        </ImgBox>
      </StyledSlider>
  </Wrapper>
  )
}

📝 Review

개인 프로젝트 게시판 디자인을 구상해야 하는데 떠오르는 아이디어가 없다. 디자인 구상이 안 되니 레이아웃 잡기가 망설여진다. 학원에 오고가는 시간을 이용해서 디자인을 그려봐야 할 것 같다. 나름 디자인을 그래도 전공으로 했어서인지 조금 욕심이 나긴 하는데... 그냥 욕심만 난다^_^ㅎㅎ
뭔가 하루종일 바쁘게 열심히 살고 있긴 한 것 같은데 잘 하고 있는지 모르겠다. 다른 사람들은 훌쩍 앞서나갈 때 따라가기에만 급급한 것 같고... 이번주 수업이 조금 널널해서 그런지 조금 긴장이 풀린 것 같기도 하고... 의지를 다시 다잡아야 할 필요가 있는 것 같다.