Next.JS? Nest.JS?

BirdsOnTree·2022년 11월 14일
nest.jsnext.js
0

Other

목록 보기
1/4
post-thumbnail

안정적이고 효율적인 웹 응용 프로그램을 개발하는 데 필요로 했고 그렇게 나온게 Next.JS와 Nest.JS 서버 사이드 렌더링 프레임 워크이다.

Next.JS?

Next.js는 2016년에 ZEIT에서 만든 웹사이트와 웹 애플리케이션을 구축하기 위한 자바스크립트 프레임워크이다.
React를 기반으로 구축되었으며 React를 사용하여 서버 측 렌더링 및 정적 웹 애플리케이션을 구축하는 데 도움을 준다.

Next.js는 자체 Node.js 서버와 함께 제공되므로 개발자가 Next.js를 훨씬 쉽게 설정할 수 있다.
캐싱, 프로그래밍 아키텍처 또는 Next.js가 등장하기 전에 필요한 다른 문제(예를 들어 이러한 문제를 처리할 시간을 할애하는 것)에 대한 걱정 없이 단순 인덱스 가능한 HTML 출력을 사용자에게 보내는 데 사용할 수 있다.

Next.JS의 장점

  • React 구현을 통해 이미 React를 알고 있는 개발자가 새로운 지식 없이도 Next.js를 쉽게 사용할 수 있다.

  • 이를 지원하는 대규모 오픈 소스 커뮤니티가 있어 Next.js 또는 내장된 프로젝트와 관련된 문제에 대한 도움말을 쉽게 찾을 수 있다.

  • Automatic code splitting은 페이지 로딩 속도를 높이는 데 도움이 준다.

  • Next.js는 기본적으로 서버 측 렌더링을 수행하기 때문에 성능과 SEO에 맞춰져 있다. 개발자가 동적 메타 태그를 포함하는 데 도움이 되는 헤드 구성 요소가 함께 제공된다.

Next.JS의 단점

  • Next JS 프레임워크에는 미리 빌드된 프론트 페이지가 거의 없으므로 개발자는 전체 프론트 엔드를 처음부터 빌드해야 한다.

  • 개발 및 관리 측면을 처리할 전담 인력이 필요할 수 있다.

Nest.JS?

Nest.js는 웹 애플리케이션 구축을 위한 오픈 소스 프레임워크로서, TypeScript를 사용하며 Angular와 유사한 구성 요소 기반 아키텍처를 사용하여 작성되었다.

Nest.js는 플랫폼 간 기능과 유연성을 제공하고 OOP(객체 지향 프로그래밍), FP(기능 프로그래밍) 및 FRP(기능 반응 프로그래밍)의 측면을 결합한 프레임워크이다.

Nest.JS의 장점

  • Nest를 다른 프레임워크와 함께 사용하거나 단독으로 사용할 수 있다.

  • MongoDB 및 PostgreSQL을 포함하여 TypeScript를 지원하는 모든 데이터베이스와 함께 사용할 수 있다.

  • Nest는 파일 시스템을 API로 사용할 수 있으므로 설정이 필요 없다.

  • Node.js 위에 구축되었으므로 백엔드에서 실행할 수 있다. 여기서 Node.js 프레임워크를 사용하여 백엔드를 구축할 수 있다.

  • NestJS는 다른 모듈에 의존하는 모듈을 생성하여 애플리케이션을 효율적으로 개발하기 위한 프레임워크이다. 이러한 방식으로 여러 프로젝트에 동일한 기술과 코드를 쉽게 재사용할 수 있다.

Nest.JS의 단점

  • Nest는 최고의 기능과 통합 기능을 갖춘 잘 만들어진 소프트웨어 애플리케이션이지만 문서?적으로 문제가 좀 있다.

  • Nest가 TypeScript와 Angular를 선택하는 데 있어 우위를 점하고 있지만 이를 뒷받침하는 대규모 조직은 없다.

Next.js와 Nest.js의 인기도

  • 깃허브

Next.js는 깃허브에서 38,000개의 별과 4,000개의 포크를 받았고,
Nest.js는 깃허브에서 17,000개의 별과 1,000개의 포크를 받았다.

  • 회사 및 개발자 스택

총 82개의 회사와 69개의 개발자 스택이 과거에 Next.js를 언급하였고,
12개 회사와 13개 개발자 스택이 Nest.js를 참조하는 것으로 나타났다.

Next.JS에 대해서

본인은 React에 조금 더 연이 있기 때문에 Next.JS에 대해서 좀 더 알아보았다.

서버 사이드 렌더링하는 이유?

  • 클라이언트 렌더링의 경우 모든 js 파일을 로드하고 사용자는 웹을 보게되는데 이때 사용자는 많은 시간을 대기해야 한다.

  • seo 문제: 클라이언트 사이드의 경우 자바스크립트가 로드 되지 않은 경우 아무런 정보도 보이지 않는다.
    구글의 검색엔진의 경우 자바스크립트가 로드되지 않은 페이지를 검색엔진으로 스캔함으로 결론적으로 검색에 아무 페이지도 걸리지 않게 됩니다.

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

  • hot reloading
    개발 중 저장되는 코드는 자동으로 새로고침된다.

  • automatic routing
    pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅된다.
    (pages/page1.tsx -> localhost:3000/page1)
    public 폴더도 pages의 폴더와 동일하게 라우팅 할수있다. 그러나 모든사람이 페이지에 접근할 수 있으므로 지양해야 한다.

  • single file components
    style jsx를 사용함으로 컴포넌트 내부에 해당 컴포넌트만 스코프를 가지는 css를 만들수 있습니다...?? (추후 공부 필요)

  • server landing
    서버렌더링을 한다.
    클라이언트 렌더링과 다르게 서버렌더링을 한 페이지의 페이지 소스보기를 클릭하면 내부에 소스가 있다.

  • code splitting
    dynamic import를 이용하면 손쉽게 코드 스플리팅이 가능하다.
    코드 스플리팅은 내가 원하는 페이지에서 원하는 자바스크립트와 라이브러리를 렌더링 하는 것으로 모든 번들(chunk.js)이 하나로 묶이지 않고, 각각 나뉘어 좀 더 효율적으로 자바스크립트 로딩 시간을 개선할 수 있습니다.

  • typescript
    타입스크립트 활용을 위해 웹팩을 만지거나 바벨을 만질 필요 없다.
    타입스크립트를 설치하고 (yarn add typescript @types/node @types/react) 명령어 (yarn run dev)만 하면 자동으로 tsconfig, next-end.d.ts가 생성되어 타입스크립트로 코딩이 가능해진다.

  • _document.tsx
    meta 태그를 정의하거나, 전체 페이지에 관려하는 컴포넌트이다.

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
export default class CustomDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          // 모든페이지에 아래 메타테크가 head에 들어감 // 루트파일이기에 가능한
          적은 코드만 넣어야함 전역 파일을 엉망으로 만들면 안된다 // 웹 타이틀,
          ga 같은것 넣음
          <meta property="custom" content="123123" />
        </Head>
        <body>
          <Main />
        </body>
        <NextScript />
      </Html>
    );
  }
}

이곳에서 console은 서버에서만 보이고 클라이언트에서는 안보인다.
render 요소는 반영하지만 페이지 구성 요소만 반영되고 js는 반영 하지 않기 때문에 console은 보이지 않는다. 즉, componentDidMount 같은 훅도 실행 되지 않는다.

  • _app.tsx
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

_app.tsx는 클라이언트에서 띄우길 바라는 전체 컴포넌트로서 실행되면서 내부의 다른 컴포넌트들을 실행시키고, 다른 모든 페이지에 영향을 준다.

_app.tsx이 실행 된 다음 _document.tsx가 실행됨

내부에 컴포넌트가 있다면 전부 실행하고 html의 body로 구성
Component, pageProps를 받는다.

여기서 props로 받은 Component는 요청한 페이지이다.
GET / 요청을 보냈다면, Component 에는 /pages/index.js 파일이 props로 내려오게 된다.

pageProps는 페이지 getInitialProps를 통해 내려 받은 props들을 말합니다.

페이지를 업데이트 하기 전에 원하는 방식으로 페이지를 업데이트 하는 통로

console은 client, server 둘다 콘솔 찍힌다.

  • sass 사용하기
    따로 config 파일을 정의 하지 않고이 css 파일을 scss로 바꾸고 yarn add sass --dev 를 해주면 next에서 알아서 설정을 해준다.

  • Link 사용하기
    보통 페이지간 이동은 a 태그를 사용하나 next에서는 사용하지 않는다.
    a 태그를 사용하면 라우팅 되면 다시 번들 파일을 받기 때문이다. 또한 redux을 쓰시는 경우 store의 state 값이 증발되는 현상도 일어나기 때문이다. 그렇기 때문에 a 태그는 전혀 다른 사이트로 페이지를 이동시켜 다시 돌아오지 않는 경우만 사용하고, 그 이외에는 모두 Link 태그를 사용해야 한다.

  • 동적 url
    가변적으로 변하는 url에 대해 동적 url을 지원한다. [ ] 문법으로 동적 페이지를 생성하는 동적 url을 만들 수 있다.

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

export default () => {
  const router = useRouter();

  return (
    <>
      <h1>post</h1>
      <p>postid: {router.query.id}</p>
    </>
  );
};

위처럼 작성하면 localhost:3000/123 으로 접속시 postid 가 123으로 나온다.
pages/[값].tsx 왼쪽 페이지 구조의 값은 router.query.값과 동일하다.

  • prefetching
    백그라운드에서 페이지를 미리 가져온다. 뷰포트에있는 모든 항목 (초기 또는 스크롤을 통해)이 미리 로드된다. 정적 생성을 사용하는 JSON페이지는 더 빠른 페이지 전환을 위해 데이터가 포함 된 파일을 미리 로드한다. 이건 Link 컴포넌트를 사용해서 이뤄진다. 링크 컴포넌트를 렌더링할때 아래 형식으로 prefetch 값을 전달해주면 데이터를 먼저 불러온다음에 라우팅을 시작한다. 프로덕션 레벨에서만 이루어진다.
<Link prefetch href="...">
  • next/router 사용법
    react의 react-router-dom과 사용 방법은 거의 유사합니다.
    link에 있는 preferch 기능도 사용 가능합니다.
import { useEffect } from "react";
import { useRouter } from "next/router";
import posts from "../posts.json";

export default () => {
  const router = useRouter();

  const post = posts[router.query.id as string];
  if (!post) return <p>noting</p>;

  useEffect(() => {
    router.prefetch("/test");
  }, []);

  return (
    <>
      <h1>{post.title}</h1>
      <h1>{post.content}</h1>
      <button onClick={() => router.push("test")}>go to Test</button>
    </>
  );
};
  • server side lifeCycle
  1. nextJs 서버가 GET 요청을 받는다.
  2. GET 요청에 맞는 pages/Component를 찾는다.
  3. _app.tsx의 getInitialProps가 있다면 실행한다.
  4. route에 맞는 페이지의 Component의 getInitialProps가 있다면 실행한다. pageProps들을 받아온다.
  5. _document.tsx의 getInitialProps가 있다면 실행한다.
  6. pageProps들을 받아온다.
  7. 모든 props들을 구성하고, _app.tsx -> page Component 순서로 렌더링
  8. 모든 Content를 구성하고 _document.tsx를 실행하여 html 형태로 출력한다.
  • dynamic component import
    dynamic component import는 react에서 lazy하게 component를 import 해오는 방식과 유사하다.
    dynamic하게 처음 보여줘도 안되는 컴포넌트는 import 하지 않게 됨으로, 초기 화면 렌더링 속도를 상승시키기 위해 사용한다.
    주의점은 페이지에 진입할때 맨처음 보이는 컴포넌트라면 dynamic 메소드를 사용할 이유가 없습니다.?
    아래 예시는 typescript에서 props를 내려줄때 type 정의를 어떻게 하는지를 보여준다.
import React, { useState } from "react";
import dynamic from "next/dynamic";

const DynamicComponent = dynamic<{ nowTab: number }>(() =>
  import("./DynamicComponent")
);

const Index = () => {
  const [nowTab, setNowTab] = useState(0);

  return (
    <>
      {nowTab === 0 && <div>0 tab</div>}
      {nowTab === 1 && <DynamicComponent nowTab={nowTab} />}
    </>
  );
};

Next.js에 대해서는 추후 추가적인 공부가 필요할듯..

출처:
[SOLUTELABS]
https://www.solutelabs.com/blog/next-js-vs-nest-js

[기억보다 기록을]
https://kyounghwan01.github.io/blog/React/next/basic/#next-js%E1%84%80%E1%85%A1-%E1%84%8C%E1%85%A6%E1%84%80%E1%85%A9%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8C%E1%85%AE%E1%84%8B%E1%85%AD-%E1%84%80%E1%85%B5%E1%84%82%E1%85%B3%E1%86%BC

profile
BirdsOnTree
다음 포스트

REST API

0개의 댓글