고귀양이의 노트.

보통 유튜브 어느 페이지든 상관없이 항상 위쪽에 달려있는 것이 있다.

보통 그러한 유형의 UI를 Header라고 부른다. 명색의 스트리밍 사이트니까 우리도 추가해주자

styled-components

이전 강좌에서 기본 styling 을 위한 디렉토리를 삭제했는데, 그 이유는 styled-components를 사용할 것이기 때문이다.

styled-copmonents는 javascript 라이브러리로 CSS-in-JS를 위한 라이브러리다. 별도의 css 파일을 작성하지 않고,

component 파일에 함께 작성 할 수 있기 때문에 파일이 많아졌을때 일일이 어떤 style인지 확인해야할 

수고를 덜어줄 수 있다.

대신 CSS때문에 파일 길이가 증가한다. 때문에 컴포넌트의 경계를 잘 설정하여 한 컴포넌트가

너무 비대해지지 않게 주의해야 한다.

설치는 간편하게 프로젝트 디렉토리에서 "yarn add styled-components"으로 모듈을 추가하면 된다.

컴포넌트 추가하기

react에서 컴포넌트 추가하는것과 동일하다 (애초에 react 위에서 돌아가니..) class 형보다는 짧게 작성 가능한

함수형 컴포넌트가 요새 트렌드 이기때문에 여기서도 그렇게 한다.

import styled from "styled-components";

const TopPanel = styled.div`
  display: flex;
  top: 0px;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  background: #ffffff;
`;

const TopLogo = styled.div`
  height: 100%;
  width: 300px;
  background: url("/static/images/logo.png") no-repeat;
  background-size: 90% 70%;
  background-position: 10% 30%;
  box-sizing: border-box;
`;

const TopRightPanel = styled.div`
  height: 100%;
  margin: 10px;
`;

const Header = () => {
  return (
    <TopPanel>
      <TopLogo />
      <TopRightPanel></TopRightPanel>
    </TopPanel>
  );
};

export default Header;

애초에 전문 프론트엔드 개발자도 아니고 div로 퉁쳐서 만들었다.

styled-components의 사용법은 보다시피 간단하다!

1. 컴포넌트의 태그로 들어갈 이름을 변수명으로 한다.

2. styled.태그 뒤에 백틱( ` ) 으로 감싸고 그 안에 css style을 명시한다.

이렇게 하고 header 이기 때문에 _app.jsx 컴포넌트에다가 넣어준다.

import Header from "../components/Header";

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Header></Header>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

이제 모든 페이지는 header가 출력된다.

정적 라우팅

유튜브를 보면 로고 부분 클릭시 home( index ) 페이지로 이동한다. Next JS에서는 요러한 정적 페이지로 이동하는 것을

<Link> 태그를 이용하여 구현 할 수 있다.

import styled from "styled-components";
import Link from "next/link";

//...

const Header = () => {
  return (
    <TopPanel>
      <Link href="/">
        <TopLogo />
      </Link>
      <TopRightPanel></TopRightPanel>
    </TopPanel>
  );
};

export default Header;

위 코드처럼 Logo를 Link태그로 감싸면 자동으로 클릭을 바인딩하여 href="" 페이지로 이동시켜준다.

(그냥 / (index) 페이지로 해두면 이동 안하는 것처럼 보일 수 있으니 확인하고 싶으면 없는 페이지라도

써보면 확인 가능하다!)

로고 위로 올라오면 커서 모양도 바뀌게 css나 <a>태그로 적당히 묶어주자!

NextJS? 

React 프레임워크로, 이미 웹 프레임워크인 React 위에 굳이 NextJS를 올리는 이유는

바로 SSR을 쉽게 지원하기 때문이다.

SSR?

SSR(Sever Side Rendering)은 CSR (Client Side Rendering)과는 대조적인 방식으로, 결국

브라우저가 해석하는 문서 (HTML)의 대부분이 이미 만들어져서 나온다.

원래 다 그런 것 아니야?? 할 수 있지만, 요새 대부분의 웹사이트에 접속하면 

데이터가 아직 없어서 아무것도 표시 못하다가 사용자별 데이터가 들어오면 그제서야 component를

만들어서 렌더링을 한다.

그래서 SSR을 사용하면 사용자 경험을 올릴 수 있는 장점이 있지만, 그만큼 서버의 연산 자원을 활용해야 하는

단점이 있다. 그래서 SSR과 CSR을 적절히 섞어서 써야 한다.

프로젝트 생성

"npx create-next-app"을 하면 알아서 npm이 관련 dependencies를 함께 설치해준다.

그래서 react, react-dom, next가 함께 설치 된다.

설치된 디렉토리를 VSCode를 열어보면 다음과 같을 것이다.

pages : next js의 기본 라우팅을 해주는 디렉토리로 해당 디렉토리내 컴포넌트의 이름으로 자동으로 라우팅이 된다.

     ex) pages/board.js  =>  "xxx.myapp-domain.xx/board"  로 외부에서 접속 가능 

public : image나 영상등을 넣게 된다. 기본적으로 정적 리소스에 대한 참조( background-image 같은것들 )를

          이 디렉토리 내에서 한다.

styles : next js에서 제공하는 기본 styling 방법을 위한 디렉토리.

pages/api : 기본 api route를 지원받기 위한 디렉토리로, 이 녀석 덕분에 백엔드의 기능이 적은 

               규모가 작은 어플리케이션이라면, 별도 백엔드 없이 요거 하나로 충분하다.

_app.js : 좀 특별한 컴포넌트로 모든 페이지에 적용되는 컴포넌트다. 보통 공통의 레이아웃은 여기에 위치한다.

일단 컴포넌트는 _app.js, index.js를 제외하고 싹다 날리자. styles 디렉토리도 안쓸거니 날리자.

index.jsx의 내용들도 다 날리고 심플하게 "hello, nextjs"만 남긴 뒤 app을 구동시켜서 브라우저로 확인해보자.

"npm run dev" 혹은 "yarn run dev"로 실행 할 수 있다.

// index.jsx
export default function Home() {
  return <div>hello, next js</div>;
}

이제 기본 프로젝트 설정은 다 끝났다.