슬랙봇 개발이 끝나자마자 합류하게 된 라이언타운 프론트엔드 개발,,,
라이언타운에서 사용하는 기술들은 한 번 써봤거나..
처음 듣는 기술이나.. 그런 것들이 너무 많아 팀원들과 함께 파트를 나눠 간단하게
스터디 자료를 만들어 서로 공유하기로 하였다!

그래서 내가 맡은 부분은 Next.js 부분!

Next.js 란?

next.js란 React로 만드는 서버사이드 렌더링 프레임워크이다.
단순하게 Next.js => React로 SSR을 할 수 있는 프레임워크 + 라우팅 기능

클라이언트 렌더링 vs 서버사이드 렌더링

• 클라이언트 렌더링 (CSR)
  • 클라이언트 렌더링의 경우 모든 js 파일을 로드하고 사용자는 웹을 보게된다.
    이때까지 사용자는 많은 시간을 대기해야 한다.
  • 서버에서 모든 js파일을 로드하고 이것을 토대로 웹을 렌더링한다.
  • 화면 깜빡임이 없어 좋지만 초기 로딩에 시간이 많이 걸린다.
  • 검색 엔진 최적화 이슈 -> SEO
    - seo 문제 : 클라이언트 사이드의 경우 js가 로드 되지 않은 경우 아무런 정보를 보이지x
    => 위의 문제들을 해결하는 것이 서버사이드 렌더링
• 서버 사이드 렌더링 (SSR)
  • html 방식을 이용한 페이지 방식이 해당
  • Next.js는 React를 SSR 가능하게 해줌
  • 서버에서 js를 로딩 후 전달해줘 클라이언트에서는 js를 로딩하는 시간이 줄어든다!
  • 검색 엔진 최적화가 가능하다!

Next.js가 제공하는 주요 기능

• hot reloading : 개발 중 저장되는 코드는 자동 새로고침
• automatic routing : pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅.
  ex) pages/page1.tsx -> localhost:3000/page1
• single file components : style jsx를 사용함으로 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들 수 있다.

파일 설명

next.js를 시작하면 src/pages에 가장 먼저 파일 두 개가 보인다.

_document.tsx

해당 파일은 있을 수도 있고 없을 수도 있다.

• 모든 페이지에 들어가는 meta 태그를 정의하거나 전체 페이지를 관리하는 컴포넌트이다.
• 서버에서만 보이고 클라이언트에서는 보이지 않는다.
• render 시 페이지 요소는 반영되지만 js는 반영하지 않는다. 따라서 console.log와 같은 js문법은 대부분 실행되지 X
• 정적인 요소를 추가할 때만 추가된다.

_app.tsx

• 이곳에서 렌더링 하는 것은 모든 페이지에 영향을 미친다!
• 컴포넌트들의 root라고 생각하면 된다.
• 내부에 컴포넌트가 존재 시 전부 실행하고 html의 body로 구성
• Component와 pageProps를 받는다.
  - props로 받은 Component => 요청한 페이지
  • GET /요청을 보냈다면 Component는 /pages/index.tsx파일이 props로 내려옴
  • pageProps => getInitialProps를 통해 내려받은 props들 (다음 포스팅에서 자세히~!)
• _app.tsx를 가장 먼저 실행 후 이후에 _document.tsx가 실행된다!

Next.js 라우팅

• 자동으로 폴더 혹은 파일 이름을 기준으로 라우팅이 가능하다!!
  pages/myPage.tsx => localhost:3000/myPage
pages/posts/[id].tsx => localhost:3000/posts/1 : id에 따라 동적 라우팅
• useRouter를 통해 동적 url 값을 읽어올 수 있다!

Example

// pages/myroom/[id].tsx
import { useRouter } from 'next/router';

const MyRoom = () => {
  // 라우터 정보를 얻기 위한 userRouter
  const router = useRouter();
  return (
    <>
      <p>마이룸입니다.</p>
      /* router에 있는 query에 대한 id를 받아오기 */
      <p>방번호는 {router.query.id}입니다.</p>
    </>
  );
};

export default MyRoom;

Link 사용

Link는 다른 페이지로 이동할 때 사용할 수 있다.

Example

import { useRouter } from 'next/router';
import Link from 'next/link';

const MyRoom = () => {
  const router = useRouter();
  const fetchedDatas = [
    {
      id: 1,
      title: '나는 포스트1',
    },
    {
      id: 2,
      title: '나는 포스트2',
    },
    {
      id: 3,
      title: '나는 포스트3',
    },
  ];
  return (
    <>
      <p>마이룸입니다.</p>
      <p>방번호는 {router.query.id}입니다.</p>
      <br />
      <ul>
        /* 받은 데이터를 하나하나 맵핑 */
        {fetchedDatas.map(({ id, title }) => (
          <li>
            <Link href={`/posts/${id}`}>
              <a>{title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </>
  );
};

export default MyRoom;

prefetching

이는 백그라운드에서 페이지를 미리 가져온다!

예를 들어, Link컴포넌트의 경우 모든 항목이 이미 로드되어 있다.
<Link prefetch href='(이동할 페이지 라우터)'>

useRouter를 사용해서도 prefetch가 가능하다!

Example

import { useRouter } from 'next/router';
import { useEffect } from 'react';

const MyRoom = () => {
  const router = useRouter();
	
	// myroom을 렌더링 시 test 페이지를 prefetch한다
  useEffect(() => {
    router.prefetch('/test');
  }, []);
  return (
    <>
      <p>마이룸입니다!</p>
      <p>방 번호는 {router.query.id}입니다!</p>
      /* 클릭하면 test를 추가한다 */
      <button type="button" onClick={() => router.push('test')}>
        test 라우터 push
      </button>
			/* 클릭하면 testpage로 이동한다 */
      <button type="button" onClick={() => router.push('/testpage')}>
        test 페이지로 이동
      </button>
    </>
  );
};