[21.02.23] 시작

#React #Next.js #GSAP #gitPages #github.io

---

내 사이트가 갖고싶어서... 명함같은 느낌으로... 그래서 만들어본다.

JS 프레임워크는 REACT 로, 렌더링 효율을 높여줄 SSR(Server Side Rendering) 프레임워크는 Next.js 를 이용하기로 하자.

우선 git page 의 토대가 되어줄 리포지토리를 생성하자.

보통 (본인의 계정명).github.io 로 리포지토리를 만드는 것이 국룰이다.

이렇게 되면 main 브랜치가 default 로 생길텐데, 나는 배포용 브랜치와 소스작업 브랜치를 분리하기 위해 새로 브랜치를 만드려고 한다.

git checkout -b gh-pages

만든 리포지토리를 clone 해와서 gh-pages 이름의 브랜치를 생성한다 (다른 이름으로 생성해도 괜찮다)

이제 gh-pages 브랜치는 배포용 소스만 들어가게 될 것이다.

그리고 github 해당 리포지토리 setting 에서 작업해야할 것이 있다.

방금 만든 브랜치를 배포 브랜치로 설정해놓자.

그러면 이제 배포된 goseungduk.github.io 로 접속하면 된다!

yarn init -y
yarn add react react-dom next
mkdir pages

그리고 clone 한 리포지토리에서 본격적으로 작업 시작하면 된다.

yarn init 을 하면 package.json 이 생성되는데, scripts 항목에 next 에 관련한 여러 명령들을 추가해주자.

참고로, deploy 는 마지막으로 배포할 때 쓰는 명령이다. next를 안쓰는 react 프로젝트는 gh-pages 라이브러리로 한 큐에 해결할 수 있다.

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "deploy": "rm -rf node_modules/.cache && next build && next export && touch out/.nojekyll && git add out/ && git commit -m \"Deploy Next.js to gh-pages\" &&  git subtree push --prefix out origin gh-pages"
  }

// @/pages/_app.js

import React from 'react'
import "../styles/globals.scss";

const MyApp = ({Component,pageProps})=>{
    return (
        <Component {...pageProps} />
    )
}

MyApp.getInitialProps=async (context)=>{
    const {ctx, Component} = context;
    let pageProps={};

    if(Component.getInitialProps){
        pageProps=(await Component.getInitialProps(ctx)) || {};
    }

    return {pageProps};
}

export default MyApp;

우선 공통적인 컴포넌트 역할을 할 _app.js 를 구성했다.

getInitialProps 는 나중을 대비해서 일단 추가해 놓았다.

// @/styles/globals.scss

@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=East+Sea+Dokdo&display=swap');
body{
    content: "";
    background: url('../images/depressionRose.jpg');
    background-size: cover;
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#title{
    margin-top: 1vw;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 30%;
}
#title h1{
    font-size: 10vw;
    line-height: 0.9;
    font-weight: 400;
    font-family: 'East Sea Dokdo', cursive, 'Black Han Sans', sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
}
#title h1 span{
    color:white;
    transform: translateY(100px);
    opacity: 0;
    display: inline-block;
}

전체적으로 유지되어야할 글꼴 및 디자인 요소들이다.

글꼴은 구글폰트 에서 구할 수 있다. SCSS 형식이니 유의!

GSAP 애니메이터도 적용하였다.

// @/pages/index.jsx

const MainPage = () => {

  const best=useRef(null);
  const tl=gsap.timeline();

  useEffect(()=>{
    tl.from(best.current.children[0].children, {duration:1, y: 800,opacity:0.5});
    tl.to(best.current.children[0].children,{duration:2, opacity:1,stagger:0.2});
  }) // fromTo(target, duration, {fromVars}, {toVars})

  return (
    <div>
      <div ref={best} id="title">
      <h1>
        <span>E</span>
        <span>F</span>
        <span>F</span>
        <span>O</span>
        <span>R</span>
        <span>T</span>
        <span>_</span>
        <span>H</span>
        <span>A</span>
        <span>C</span>
        <span>K</span>
        <span>E</span>
        <span>R</span>
      </h1>
    </div>
  </div>

간단하게 gsap.timeline() 의 객체를 이용해서 글자가 차례대로 나오도록 설정했다.

끗.

다음과제

• jest, storybook 으로 테스팅 환경 구축
• sidebar 제작