# [CSS] 모달 오픈시 Body 스크롤 막는 방법

모달 오픈시에 body의 스크롤을 막는 방법에 대해서 알 수 있습니다.

서비스 개발을 하다보면 Body의 스크롤을 막아야하는 경우가 있는데요.
예를 들어 모달을 오픈했을 때 모달의 백그라운드가 스크롤이 발생하지 않도록 막아야 하는 경우가 있습니다.

<img src="/assets/img/2023-01-05-모달-오픈시-Body-스크롤-막는-방법-1.gif" width="500" />

이렇게 특정 상황에서 모달의 스크롤을 막는 방법에 대해서 정리하겠습니다.

<br>

## body-scroll-lock

### 설치

```bash
yarn add body-scroll-lock
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

타입 스크립트 사용시 아래 명령어도 실행

```bash
@types/body-scroll-lock
```

<br>

## 코드

body-scroll-lock은 아래와 같이 사용할 수 있는데요.
disableBodyScroll에는 target Element를 넣어주어야합니다.
targetElement는 모달, 네비게이션과 같이 스크롤을 해야하는 요소를 넣어주면 됩니다.
아래 예시에서는 버튼을 타겟 엘리먼트로 잡았지만,
**스크롤을 막지 않아야하는 모달 같은 요소를 넣어주면 됩니다.**

아래 예시는 리액트를 사용했기 때문에 useRef를 사용해서 ref를 생성해주고
disableBodyScroll에 useRef.current 로 target Element 를 지정해주었습니다.

```tsx
import React, { useRef } from "react";
import { disableBodyScroll, clearAllBodyScrollLocks } from "body-scroll-lock";

const BodyScrollLock = () => {
  const blockButton = useRef<any>(null);
  return (
    <div>
      <button
        ref={blockButton}
        type="button"
        onClick={() => {
          disableBodyScroll(blockButton.current);
        }}
      >
        바디 스크롤 금지
      </button>
      <button
        type="button"
        onClick={() => {
          clearAllBodyScrollLocks();
        }}
      >
        바디 스크롤 해제
      </button>
      <div style={{ border: "1px solid #000", overflow: "auto", marginTop: 30 }}>긴 텍스트</div>
    </div>
  );
};

export default BodyScrollLock;
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

위와 같이 작성하면 '바디스크롤 금지' 버튼 클릭시 body에 overflow: hidden 속성이 추가된 것을 보실 수 있습니다.

<img src="/assets/img/2023-01-05-모달-오픈시-Body-스크롤-막는-방법-2.png" />

<br>
<br>

<img src="/assets/img/2023-01-05-모달-오픈시-Body-스크롤-막는-방법-1.gif" width="500" />

<br>

## body에 직접 overflow: hidden을 추가하는 방식

바디 스크롤을 막는 방법이 body에 overflow:hidden 속성을 주는 방식이기 때문에
body-scroll-lock을 사용하는 대신에 직접 body요소에 overflow: hidden을 부여하는 방식으로 해결할 수 있습니다.

body에 직접 style을 적용하는 방식은 아래와 같이 할 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```tsx
import React, { useRef } from "react";
import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from "body-scroll-lock";

const BodyScrollLock = () => {
  const refModal = useRef<any>(null);
  return (
    <div>
      <button
        type="button"
        onClick={() => {
          const body = document.getElementsByTagName("body");
          body[0].style.overflow = "hidden";
        }}
      >
        바디 스크롤 금지
      </button>
      <button
        type="button"
        onClick={() => {
          const body = document.getElementsByTagName("body");
          body[0].style.overflow = "auto";
        }}
      >
        바디 스크롤 해제
      </button>
      <div style={{ border: "1px solid #000", overflow: "auto", marginTop: 30 }}>긴 텍스트</div>
    </div>
  );
};

export default BodyScrollLock;
```

body-scroll-lock 라이브러리를 사용해서 모달 오픈시 Body 스크롤을 막는 방법에 대해서 정리합니다

CSS 모달 오픈시 Body 스크롤 안되게 막는 방법

# Nextjs 14 App Router 프로젝트 초기 세팅 방법

Nextjs 14 버전이 안정화 버전으로 자리잡으면서 Page Router 대신 App Router를 보다 적극적으로 쓸 수 있을 것 같아서 App Router를 이용한 클론 코딩을 해보려고 합니다.

기술 스택으로는 Nextjs(App Router) + React Query + React Context + MSW를 사용할 예정입니다.

MSW는 백엔드 까지 만들 수는 없으니 가짜 목업 데이터를 위해서 사용하려고 합니다.

저는 Nextjs의 App Router 를 사용할 예정이기 때문에 [Nextjs 공식 문서](https://nextjs.org/docs)에서 아래 사진처럼 App Router 기반으로 작업을 하겠습니다.

<img src="/assets/img/2024-02-10-Nextjs-14-App-Router-프로젝트-초기-세팅-(트위터-클론)-1.png" width="500" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 저장소 셋팅

Nextjs 의 앱라우터를 사용하기 위해서는 node 버전이 18.170 이상이어야 합니다.

아래 명령어를 입력하면 기본 셋팅이 완료된 nextjs 프로젝트를 만들 수 있습니다.

```bash
npx create-next-app@latest
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

초기 셋팅을 직접 하고싶으시다면 비어있는 프로젝트에 아래 명령어들로 직접 next를 설치하실 수도 있습니다.

```bash
// yarn 사용시
yarn add next@latest react@latest react-dom@latest

// npm 사용시
npm install next@latest react@latest react-dom@latest
```

저는 nextjs 셋팅이 완료된 상태에서 시작할거기 때문에 npx 를 이용한 명령어로 설치하겠습니다.

설치하면 아래와 같이 nextjs 프로젝트 기본 정보들을 입력해주어야 하는데요.

<img src="/assets/img/2024-02-10-Nextjs-14-App-Router-프로젝트-초기-세팅-(트위터-클론)-2.png" width="500" />

저 항목들은 다 그대로 놔둬도 되지만 저는 src/ 디렉토리 하위에 개발 코드들을 작성하기 위해 `src/` 디렉토리 생성 메뉴만 제가 yes로 변경했습니다.

저장소 설치가 완료되면 에디터를 켜서 yarn 명령어로 필요한 패키지들 설치를 완료해줍니다.

<img src="/assets/img/2024-02-10-Nextjs-14-App-Router-프로젝트-초기-세팅-(트위터-클론)-3.png" width="500" />



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 프로젝트 실행

yarn 명령어로 패키지 설치까지 완료했다면 아래 명령어를 통해서 프로젝트를 실행할 수 있습니다.

```bash
yarn dev
```

<img src="/assets/img/2024-02-10-Nextjs-14-App-Router-프로젝트-초기-세팅-(트위터-클론)-4.png" width="500" />

실행한 후에는 http://localhost:3000/ 에서 확인할 수 있습니다.

![Alt text](</assets/img/2024-02-10-Nextjs-14-App-Router-프로젝트-초기-세팅-(트위터-클론)-5.png>)

npx로 프로젝트를 생성했기 때문에 저희가 원치 않은 내용들이 들어가 있는데요. 이제 Nextjs 에서 기본적으로 작성해준 내용들은 제거하고 제가 원하는 코드를 작성하면 됩니다.

다음 글에서는 nextjs App Router에서 라우팅을 하는 기본적인 방법에 대해서 알아보도록 하겠습니다.

Nextjs 14 App Router 프로젝트 저장소 세팅 방법

# npx에 대해 알아보기(npm과 차이점)

npx가 나오게 된 이유와 npm과의 차이에 대해서 이해할 수 있습니다.

## npx가 나오게 된 이유

Node.js와 npm의 확산으로 JavaScript 개발 생태계는 급속도로 성장했습니다. 이러한 성장은 개발자들에게 무수히 많은 라이브러리와 도구를 제공했지만, 동시에 버전 관리, 패키지 설치, 실행 등의 복잡성도 증가시켰습니다. 이러한 문제를 해결하기 위해 npm 5.2.0 버전에 `npx`가 도입되었습니다.

`npx`는 npm 패키지를 더 쉽고 유연하게 실행할 수 있게 해주는 도구로, 개발자들이 글로벌 설치 없이 한 번의 명령어로 패키지를 실행할 수 있게 해줍니다. 이는 특히 다양한 버전의 도구나 라이브러리를 실험하거나 일회성 스크립트를 실행할 때 매우 유용합니다. 본문에서는 `npx`의 기본 개념, 주요 기능 및 장점, 실제 사용 사례, 그리고 사용 시 주의해야 할 사항들에 대해 자세히 다루어 보겠습니다.

## npx의 기본 개념

`npx`는 Node.js 환경에서 npm 패키지를 실행하는 한 가지 방법으로, npm(Node Package Manager)에 포함된 도구입니다. npm을 통해 패키지를 설치하고 관리하는 것이 일반적이지만, `npx`는 설치 과정 없이 패키지를 실행할 수 있는 기능을 제공합니다. 이는 특히 글로벌 설치를 피하면서 패키지를 실행하고 싶을 때 유용합니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

### npx와 npm의 차이점

- **npm**: Node.js 패키지를 설치하고 관리하기 위한 기본 도구입니다. 주로 라이브러리의 설치 및 프로젝트의 의존성 관리에 사용됩니다.
- **npx**: npm 5.2.0 버전부터 도입된 도구로, npm 레지스트리에 있는 패키지를 설치하지 않고 바로 실행할 수 있게 해줍니다. npx는 일회성 명령 실행이나, 다양한 버전의 도구를 시험해보는 등의 용도로 유용합니다.

`npx`를 사용함으로써 개발자는 패키지를 로컬 또는 글로벌로 설치할 필요 없이, npm 레지스트리에 있는 패키지를 즉시 실행할 수 있습니다. 이는 특히 CI/CD 파이프라인 구성이나 특정 빌드 스크립트를 실행할 때 매우 효과적입니다. 또한, `npx`는 요청된 패키지가 로컬에 설치되어 있지 않은 경우, 자동으로 npm 레지스트리에서 패키지를 찾아 설치하고 실행한 후, 더 이상 사용하지 않을 경우에는 자동으로 삭제합니다. 이러한 특성은 디스크 공간을 절약하고, 패키지 관리를 더욱 효율적으로 만들어 줍니다.

## npx의 주요 기능과 장점

`npx`는 Node.js 개발 환경에서 매우 유용한 도구로, 다음과 같은 주요 기능과 장점을 제공합니다:

### 일회성 패키지 실행

`npx`를 사용하면 패키지를 글로벌로 설치하지 않고도 일회성으로 실행할 수 있습니다. 이는 특정 스크립트나 도구를 임시적으로 사용할 때 매우 유용하며, 시스템의 글로벌 환경을 깨끗하게 유지할 수 있게 돕습니다.

### 글로벌 설치 없이 패키지 실행

개발자들은 `npx`를 통해 글로벌 설치 없이 로컬에 설치된 패키지를 쉽게 실행할 수 있습니다. 이는 프로젝트별로 다른 버전의 도구를 사용할 때 특히 유용합니다.

### 패키지 버전 관리 및 테스트 용이성

`npx`는 다양한 버전의 패키지를 쉽게 테스트할 수 있게 해줍니다. 명령어를 통해 특정 버전을 지정하여 실행할 수 있으므로, 버전 호환성 테스트가 용이합니다.

### 실행할 패키지의 자동 다운로드와 캐싱

`npx`는 실행하려는 패키지가 시스템에 설치되어 있지 않은 경우, 자동으로 npm 레지스트리에서 패키지를 찾아 설치하고 실행합니다. 실행 후에는 필요에 따라 캐시를 통해 패키지를 재사용할 수 있으며, 이는 네트워크 비용과 시간을 절약해줍니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 실행 중인 Node.js 환경에 맞는 패키지 실행

`npx`는 현재 프로젝트의 `node_modules/.bin` 디렉토리를 자동으로 참조하여, 해당 프로젝트에 설치된 패키지 버전에 맞는 도구를 실행합니다. 이는 프로젝트별로 다른 버전의 도구를 사용해야 할 때 충돌을 방지해줍니다.

이러한 기능과 장점 덕분에 `npx`는 Node.js 개발자들 사이에서 필수적인 도구로 자리 잡았으며, 개발 프로세스를 더욱 효율적이고 유연하게 만들어줍니다.

## 실제 사용 사례

`npx`는 Node.js 생태계에서 다양한 시나리오에서 유용하게 사용됩니다. 아래는 몇 가지 주요 사용 사례를 소개합니다.

### 임시 도구 실행

`npx`를 사용하면 컴퓨터에 영구적으로 설치하지 않고도 패키지를 일회성으로 실행할 수 있습니다. 예를 들어, `http-server` 패키지를 사용하여 현재 디렉토리에 있는 정적 파일을 임시로 호스팅할 수 있습니다.

### 프로젝트 초기화

다양한 프로젝트 생성 도구(예: `create-react-app`, `vue-cli`, `angular-cli`)를 `npx`와 함께 사용하여 새 프로젝트를 쉽게 시작할 수 있습니다. 이 방법을 사용하면 글로벌 설치 없이 최신 버전의 도구를 사용할 수 있습니다.

### 다양한 버전의 도구 테스트

`npx`를 사용하여 특정 버전의 패키지를 명시적으로 실행함으로써, 다양한 버전의 도구나 라이브러리를 쉽게 테스트할 수 있습니다. 이는 개발자가 프로젝트에 가장 적합한 도구의 버전을 결정하는 데 도움이 됩니다.

### CI/CD 파이프라인 통합

CI/CD 파이프라인에서 `npx`를 사용하여 필요한 빌드 도구나 테스트 러너를 실행할 수 있습니다. 이는 파이프라인 구성을 단순화하고 도구의 버전을 쉽게 관리할 수 있게 합니다.

자세한 정보와 추가적인 사용 사례에 대해서는 [Node.js 공식 문서](https://nodejs.org/en/) 및 [npm 공식 문서](https://docs.npmjs.com/)에서 찾아볼 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## npx 사용 시 주의사항

`npx`는 매우 유용한 도구이지만 사용 시 몇 가지 주의사항을 고려해야 합니다. 이러한 주의사항을 이해하고 준수함으로써, 보안 위험을 최소화하고 `npx`의 이점을 최대한 활용할 수 있습니다.

### 보안 측면에서의 고려사항

`npx`를 사용할 때는 실행하는 패키지의 출처와 신뢰성을 항상 확인해야 합니다. 악의적인 코드가 포함된 패키지를 실행하는 것은 시스템 보안에 심각한 위험을 초래할 수 있습니다. 가능하면 잘 알려진 출처의 패키지만 사용하고, 필요한 경우 패키지의 소스 코드를 검토하는 것이 좋습니다.

### 캐시 관리

`npx`는 패키지를 실행할 때 자동으로 패키지를 다운로드하고 캐시합니다. 이는 네트워크 사용량과 실행 시간을 줄여주지만, 캐시된 패키지가 오래되었거나 더 이상 사용하지 않는 경우가 있을 수 있습니다. 따라서 주기적으로 `npx` 캐시를 정리하는 것이 좋습니다. 캐시를 관리하는 방법에 대한 자세한 정보는 [npm 캐시 문서](https://docs.npmjs.com/cli/v7/commands/npm-cache)에서 확인할 수 있습니다.

### 실행 명령어의 정확성

`npx` 명령어를 사용할 때는 실행하고자 하는 패키지와 명령어의 옵션이 정확한지 확인하는 것이 중요합니다. 잘못된 패키지 이름이나 옵션을 사용하면 예상치 못한 동작이나 오류가 발생할 수 있습니다. 특히, 패키지 이름이 비슷한 경우 실수로 다른 패키지를 실행할 위험이 있으므로 주의해야 합니다.

### 환경 변수의 영향

`npx`를 사용할 때는 환경 변수가 패키지 실행에 미치는 영향을 고려해야 합니다. 일부 패키지는 환경 변수를 사용하여 구성되며, 이러한 변수가 예상과 다르게 설정되어 있으면 문제가 발생할 수 있습니다. 환경 변수와 관련된 문제를 방지하기 위해, 필요한 환경 변수가 올바르게 설정되어 있는지 확인하고, 필요한 경우 문서를 참조하여 적절한 설정을 적용해야 합니다.

`npx` 사용에 대한 추가적인 안내와 모범 사례는 [npm 공식 문서](https://docs.npmjs.com/)에서 제공하는 가이드라인을 참조하는 것이 좋습니다.

npx와 npm과 차이점 및 각각 특징 알아보기

# nvm 사용해서 node 버전 쉽게 바꾸는 방법

## Node 버전 관리에 NVM을 사용해야 하는 이유

### 다중 버전 관리

개발자가 여러 프로젝트를 동시에 진행할 때, 각 프로젝트마다 요구하는 Node.js의 버전이 다를 수 있습니다. NVM을 사용하면, 한 컴퓨터 내에서 여러 버전의 Node.js를 쉽게 설치하고 관리할 수 있어, 각 프로젝트에 적합한 환경을 설정할 수 있습니다.

### 호환성 문제 해결

새로운 Node.js 버전들은 새로운 기능을 도입하고 오래된 기능들을 폐기할 수 있습니다. 이로 인해 호환성 문제가 발생할 수 있는데, NVM을 통해 특정 버전으로 쉽게 전환함으로써, 이러한 호환성 문제를 해결할 수 있습니다.

### 개발 및 테스트 환경 일관성



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

프로젝트를 개발하고 테스트하는 환경이 프로덕션 환경과 일치하지 않을 때 문제가 발생할 수 있습니다. NVM을 사용하면, 모든 환경에서 동일한 Node.js 버전을 사용하여 이러한 문제를 최소화할 수 있습니다.

### 쉬운 버전 업그레이드 및 다운그레이드

NVM을 사용하면, 새로운 Node.js 버전을 테스트하거나 이전 버전으로 쉽게 다운그레이드할 수 있습니다. 이는 특히 새 버전에서 발생할 수 있는 문제를 사전에 감지하고 대응하는 데 유용합니다.

### 글로벌 패키지 관리

NVM을 사용하면, Node.js 버전을 전환할 때 글로벌로 설치된 패키지를 유지할 수 있습니다. 이는 개발 환경을 일관되게 유지하는 데 도움이 됩니다.

NVM은 이러한 문제들을 해결함으로써, 개발자가 보다 유연하고 효율적으로 작업할 수 있는 환경을 제공합니다.

## NVM 설치하기

NVM을 사용하면 여러 버전의 Node.js를 쉽게 관리할 수 있습니다. 다음은 macOS, Linux 및 Windows에서 NVM을 설치하는 방법에 대한 지침입니다.

### macOS 및 Linux에서 NVM 설치



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

macOS와 Linux 사용자는 curl 또는 wget을 사용하여 NVM 설치 스크립트를 실행할 수 있습니다. 터미널을 열고 다음 중 하나의 명령어를 입력하세요.

**Curl을 사용하는 경우:**

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
```

**Wget을 사용하는 경우:**

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

설치 후, 터미널을 닫았다 다시 열거나, source ~/.bash_profile, source ~/.bashrc, source ~/.zshrc, 또는 해당 쉘 구성 파일을 실행하여 변경사항을 적용하세요.

### NVM 설치 확인

NVM이 성공적으로 설치되었는지 확인하려면, 터미널 또는 명령 프롬프트를 열고 다음 명령어를 입력하세요.

```bash
nvm --version
```

정상적으로 설치되었다면, 설치된 NVM의 버전 번호가 표시됩니다.

## 실용적인 NVM 명령어

NVM(Node Version Manager)을 사용하면 다양한 버전의 Node.js를 쉽게 설치, 관리 및 전환할 수 있습니다. 아래는 NVM을 사용할 때 유용한 몇 가지 기본 명령어들입니다:

### 버전 설치

새로운 Node.js 버전을 설치하려면 다음 명령어를 사용하세요:

```shell
nvm install <버전>
```

예시: Node.js 버전 14.17.0을 설치하려면

```shell
nvm install 14.17.0
```

### 버전 제거

설치된 Node.js 버전을 제거하려면 다음 명령어를 사용하세요:

```shell
nvm uninstall <버전>
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

예시: Node.js 버전 14.17.0을 제거하려면

nvm uninstall 14.17.0

### 버전 나열

시스템에 설치된 모든 Node.js 버전을 나열하려면 다음 명령어를 사용하세요:

```shell
nvm ls
```

설치 가능한 모든 Node.js 버전을 보려면:

```shell
nvm ls-remote
```

### 특정 버전 사용

특정 Node.js 버전을 사용하려면 다음 명령어를 사용하세요:

```shell
nvm use <버전>
```

예시: Node.js 버전 14.17.0을 사용하려면

```shell
nvm use 14.17.0
```

## 특정 프로젝트에 대한 Node.js 버전 지정

프로젝트의 특정 버전 요구사항에 맞추어 Node.js 버전을 지정하려면 프로젝트 루트에 .nvmrc 파일을 생성하고 원하는 버전 번호를 기입하세요. 그 후, 프로젝트 디렉토리에서 nvm use 명령을 실행하여 해당 버전을 활성화할 수 있습니다.

nvm 사용해서 node 버전 쉽게 바꾸는 방법

# Nextjs App Router 라우팅 정리

App Router는 말 그대로 App 디렉토리의 모든 파일과 폴더들을 라우터로 사용하는 Nextjs 14의 방법입니다.
기존의 Page Router는 Page하위의 디렉토리들을 라우터로 사용했었는데요. 그것보다 많은 것들이 업그레이드가 되었으니 차근차근 알아가보겠습니다.

# Next.js 애플리케이션에서 라우트 정의하기

Next.js 애플리케이션에서 라우트를 정의하는 방법은 파일 시스템 기반의 라우터를 사용합니다. 다음은 라우트를 생성하고 구성하는 방법입니다:

## 1. 폴더 구조

프로젝트의 각 폴더는 URL 세그먼트에 매핑되는 라우트 세그먼트를 나타냅니다. 중첩된 라우트를 생성하려면 폴더를 중첩합니다.

## 2. 라우트 세그먼트용 특수 파일

라우트 세그먼트를 사용하려면 `page.js`라는 특수 파일을 사용해야 합니다.
이 파일에 있는 내용들이 사용자에게 보여지는 것입니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 3. 파일 확장자

`page.js`와 같은 특수 파일은 `.js`, `.jsx`, 또는 `.tsx`와 같은 확장자를 가질 수 있습니다.
기본적으로 Next.js 는 타입스크립트를 지원하기 때문에 별도의 설정 없이 .tsx를 사용할 수 있습니다.

## 4. UI 만들기

각 라우트 세그먼트에 대한 UI를 만들기 위해 특수 파일 규칙을 사용합니다. 일반적으로 다음과 같습니다:

- `pages`: 특정 라우트에 대한 고유한 UI를 표시하는 데 사용됩니다.
- `layouts`: 여러 라우트 간에 공유되는 UI를 표시하는 데 사용됩니다.

layouts는 항상 고정인 부분이라고 생각하시면 됩니다. 예를 들어 항상 노출되어있는 사이드바 라던가, 푸터 같은 경우에는 layout에 위치할 수 있습니다. 그 Layout 하위에 url에 따라서 맞는 pages가 노출되는 것이죠. /home인 경우에는 home/pages, /explore 인 경우에는 explore/pages가 그려지는 것입니다.

### 1. 라우트 만들기

예를 들어 `/admin/auth` 경로를 정의하려면 다음 단계를 따릅니다:

- `pages` 디렉토리 내에 `admin`라는 이름의 폴더를 만듭니다.
- `admin` 폴더 내에 `auth`라는 이름의 또 다른 폴더를 만듭니다.
- `auth` 폴더 내에 `page.js` 파일을 생성합니다.

폴더 구조는 다음과 같습니다:

pages/
└── admin/
└── auth/
└── page.js



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 2. UI 정의

`page.js` 파일 내에서 React 컴포넌트를 내보내어 이 라우트 세그먼트의 UI를 정의합니다. 예를 들면 다음과 같습니다:

```js
// pages/admin/auth/page.js

import React from "react";

const authPage = () => {
  return (
    <div>
      <h1>auth 대시보드</h1>
      {/* 여기에 컴포넌트 내용을 작성 */}
    </div>
  );
};

export default authPage;
```

이제 `/admin/auth` URL로 이동하면 Next.js가 이 `page.js` 파일에 정의된 UI를 렌더링합니다.

## index 페이지 만들기

예를 들어, index 페이지를 만들려면 app 디렉터리에 page.js 파일을 추가합니다:

```jsx
// `app/page.tsx`는 `/` URL의 UI입니다
export default function Page() {
  return <h1>Hello, Home page!</h1>;
}
```

그런 다음, 추가 페이지를 만들려면 새 폴더를 만들고 해당 폴더에 page.js 파일을 추가합니다. 예를 들어, /admin 경로에 대한 페이지를 만들려면 새로운 admin라는 폴더를 만들고 그 안에 page.js 파일을 추가합니다:



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```jsx
// `app/admin/page.tsx`는 `/admin` URL의 UI입니다
export default function Page() {
  return <h1>Hello, admin Page!</h1>;
}
```

1. 페이지에는 .js, .jsx 또는 .tsx 파일 확장명을 사용할 수 있습니다.
2. 페이지는 항상 경로 디렉토리 하위에 위치할 수 있습니다.
3. 경로 세그먼트이 사이트 url로 사용되려면 page.js 파일이 필요합니다.
4. 페이지는 기본적으로 서버 컴포넌트입니다만 클라이언트 컴포넌트로 설정할 수 있습니다. 'use client' 사용
5. 페이지는 데이터를 가져올 수 있습니다.

 

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 레이아웃

레이아웃은 여러 경로에서 공유되는 UI입니다. 내비게이션 중에 레이아웃은 상태를 보존하고 상호 작용하며 다시 렌더링되지 않습니다. 레이아웃은 중첩될 수도 있습니다.

레이아웃을 정의하려면 layout.js 파일에서 기본 React 컴포넌트를 내보냅니다. 컴포넌트는 렌더링 중에 자식 레이아웃(있는 경우) 또는 페이지가 되는 children prop을 받아야 합니다.

예를 들어, 레이아웃은 /admin 및 /admin/settings 페이지와 공유됩니다:

```js
// layout.js 특별 파일
export default function adminLayout({
  children, // 페이지 또는 중첩된 레이아웃
}: {
  children: React.ReactNode,
}) {
  return (
    <section>
      {/* 공유 UI를 여기에 포함합니다. 예: 헤더 또는 사이드바 */}
      <nav></nav>

      {children}
    </section>
  );
}
```

루트 레이아웃 (필수)
루트 레이아웃은 앱 디렉터리의 최상위에서 정의되며 모든 경로에 적용됩니다. 이 레이아웃은 필수이며 서버에서 반환된 초기 HTML을 수정할 수 있도록 html 및 body 태그를 포함해야 합니다.

```jsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {/* 레이아웃 UI */}
        <main>{children}</main>
      </body>
    </html>
  );
}
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 레이아웃 중첩

기본적으로 폴더 계층 구조에서 레이아웃은 중첩됩니다. 이는 자식 레이아웃을 children prop을 통해 래핑합니다. 특정 경로 세그먼트(폴더) 내에 layout.js를 추가하여 레이아웃을 중첩할 수 있습니다.

예를 들어, /admin 경로에 대한 레이아웃을 만들려면 admin 폴더 내에 새 layout.js 파일을 추가합니다:

```jsx
// 중첩된 레이아웃
export default function adminLayout({ children }: { children: React.ReactNode }) {
  return <section>{children}</section>;
}
```

위의 두 레이아웃을 결합하면 루트 레이아웃(app/layout.js)이 대시보드 레이아웃(app/admin/layout.js)을 래핑하고, 대시보드/\* 내의 경로 세그먼트를 래핑합니다.

- .js, .jsx 또는 .tsx 파일 확장명을 레이아웃에 사용할 수 있습니다.
- 루트 레이아웃에만 `<html>` 및 `<body>` 태그를 포함할 수 있습니다.
- layout.js와 page.js 파일이 동일한 폴더에 정의된 경우 레이아웃이 페이지를 래핑합니다.
- 레이아웃은 기본적으로 서버 컴포넌트이지만 클라이언트 컴포넌트로 설정할 수 있습니다.
- 레이아웃은 데이터를 가져올 수 있습니다. 데이터 가져오기 섹션을 참조하세요.
- 부모 레이아웃과 그 자식 간에 데이터를 전달하는 것은 불가능합니다. 그러나 동일한 데이터를 경로에서 여러 번 가져올 수 있으며, React는 성능에 영향을 미치지 않고 요청을 자동으로 중복 처리합니다.
- 레이아웃은 그 하위 경로 세그먼트에 액세스할 수 없습니다. 모든 경로 세그먼트에 접근하려면 클라이언트 컴포넌트에서 useSelectedLayoutSegment 또는 useSelectedLayoutSegments를 사용할 수 있습니다

Nextjs App Router 라우팅 방법 정리

# Nextjs AppRouter 라우팅 기초 정리

# 라우팅 기본 사항

> 계속하기 전에 라우팅 기본 사항을 이해하면 도움이 됩니다.

모든 애플리케이션의 뼈대는 라우팅입니다. 이 페이지에서는 웹의 라우팅에 대한 기본 개념과 Next.js에서 라우팅을 처리하는 방법을 소개합니다.

## 용어

먼저, 문서 전반에 사용되는 이 용어를 볼 수 있습니다. 간단한 참고 사항입니다:

![용어](/assets/img/Fundamentals_0.png)

- Tree: 계층 구조를 시각화하기 위한 관습입니다. 예를 들어, 부모 및 자식 컴포넌트가 있는 컴포넌트 트리, 폴더 구조 등이 있습니다.
- Subtree: 새로운 루트(첫 번째)에서 시작하여 잎(마지막)에 도달하는 트리의 일부입니다.
- Root: 트리 또는 서브트리의 첫 번째 노드, 예를 들어 루트 레이아웃입니다.
- Leaf: 자식이 없는 서브트리의 노드, 예를 들어 URL 경로의 마지막 세그먼트입니다.

![용어](/assets/img/Fundamentals_1.png)

- URL Segment: 슬래시로 구분된 URL 경로의 일부입니다.
- URL Path: 도메인 이후에 오는 URL의 일부입니다 (세그먼트로 구성됨).

## 앱 라우터

버전 13에서 Next.js는 새로운 React Server Components를 기반으로 한 App Router를 도입했습니다. 이 라우터는 공유된 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원합니다.

App Router는 새로운 app 디렉터리에서 작동합니다. app 디렉터리는 점진적인 채택을 허용하기 위해 pages 디렉터리와 함께 작동합니다. 이렇게 함으로써 애플리케이션의 일부 라우트를 새로운 동작으로 전환하면서 다른 라우트를 이전 동작을 위해 pages 디렉터리에 유지할 수 있습니다. 애플리케이션이 pages 디렉터리를 사용하는 경우 Pages Router 문서도 참조하십시오.

> 참고: App Router가 Pages Router보다 우선합니다. 디렉터리 간 라우트는 동일한 URL 경로로 해석되어 충돌을 방지하기 위해 빌드 시간 오류가 발생합니다.

![App 라우터](/assets/img/Fundamentals_2.png)

기본적으로 app 내부의 컴포넌트는 React Server Components입니다. 이것은 성능 최적화이며 쉽게 채택할 수 있으며 Client Components도 사용할 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

> 권장 사항: Server Components에 대해 처음이라면 Server 페이지를 확인하세요.

## 폴더 및 파일의 역할

Next.js는 파일 시스템 기반의 라우터를 사용합니다:

- 폴더는 경로를 정의하는 데 사용됩니다. 경로는 루트 폴더부터 마지막 잎 폴더에 포함된 page.js 파일까지의 파일 시스템 계층 구조를 따릅니다. 라우트 정의 참조.
- 파일은 경로 세그먼트에 표시되는 UI를 생성하는 데 사용됩니다. 특별한 파일 참조.

## 라우트 세그먼트

라우트의 각 폴더는 라우트 세그먼트를 나타냅니다. 각 라우트 세그먼트는 URL 경로에서 해당 세그먼트에 대응됩니다.

![라우트 세그먼트](/assets/img/Fundamentals_3.png)

## 중첩 라우트

중첩 라우트를 생성하려면 서로 중첩된 폴더를 중첩하면 됩니다. 예를 들어, 새로운 /dashboard/settings 라우트를 만들려면 app 디렉터리에 두 개의 새 폴더를 중첩하면 됩니다.

/dashboard/settings 라우트는 세 개의 세그먼트로 구성됩니다:

- / (루트 세그먼트)
- dashboard (세그먼트)
- settings (잎 세그먼트)

## 파일 규칙

Next.js는 중첩된 라우트의 특정 동작을 위해 특별한 파일 세트를 제공합니다:

> 참고: 특별한 파일에는 .js, .jsx 또는 .tsx 파일 확장자를 사용할 수 있습니다.

## 컴포넌트 계층 구조

라우트 세그먼트의 특별한 파일에 정의된 React 컴포넌트는 특정 계층 구조로 렌더링됩니다:

- layout.js
- template.js
- error.js (React 오류 경계)
- loading.js (React suspense 경계)
- not-found.js (React 오류 경계)
- page.js 또는 중첩된 layout.js

![컴포넌트 계층 구조](/assets/img/Fundamentals_4.png)

중첩된 라우트에서 세그먼트의 컴포넌트는 해당 부모 세그먼

트의 컴포넌트 안에 중첩됩니다.

![중첩된 라우트](/assets/img/Fundamentals_5.png)



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 공존

특별한 파일 외에도 자신의 파일(예: 컴포넌트, 스타일, 테스트 등)을 app 디렉터리의 폴더 내에 공존시킬 수 있습니다. 이는 폴더가 경로를 정의하고, 페이지.js 또는 라우트.js에서 반환된 내용만 공개적으로 주소 지정 가능하기 때문입니다.

![공존](/assets/img/Fundamentals_6.png)

프로젝트 구성 및 공존에 대해 자세히 알아보세요.

## 고급 라우팅 패턴

App Router는 더 고급 라우팅 패턴을 구현하는 데 도움이 되는 규칙 세트도 제공합니다. 이러한 패턴에는 다음이 포함됩니다:

- 병렬 라우트: 동시에 두 개 이상의 페이지를 동일한 보기에 표시할 수 있게 합니다. 각각 독립적으로 탐색할 수 있습니다. 자체 하위 탐색이 있는 분할 보기에 사용할 수 있습니다. 예: 대시보드.
- 라우트 가로채기: 라우트를 가로채고 다른 라우트의 맥락에서 표시할 수 있습니다. 현재 페이지의 맥락을 유지해야 하는 경우 사용할 수 있습니다. 예: 하나의 작업을 편집하는 동안 모든 작업 보기 보기 또는 피드에서 사진 확대하기.

이러한 패턴은 더 풍부하고 복잡한 UI를 구축하는 데 도움이 되며, 과거에는 작은 팀 및 개별 개발자가 구현하기가 복잡했던 기능을 더 democrazing합니다.

Nextjs AppRouter 라우팅 기초 정리

# Nextjs14의 클라이언트 컴포넌트 이해하기

# 클라이언트 컴포넌트

클라이언트 컴포넌트를 사용하면 클라이언트에서 요청 시 렌더링되는 대화형 UI를 작성할 수 있습니다. Next.js에서 클라이언트 렌더링은 옵트인 방식으로, 명시적으로 React가 클라이언트에서 어떤 컴포넌트를 렌더링해야 하는지 결정해야 합니다.

이 페이지에서는 클라이언트 컴포넌트가 어떻게 작동하는지, 언제 사용해야 하는지에 대해 알아보겠습니다.

## 클라이언트 렌더링의 장점

클라이언트에서 렌더링 작업을 수행하는 것에는 몇 가지 이점이 있습니다.

- 상호 작용성: 클라이언트 컴포넌트는 상태, 이펙트 및 이벤트 리스너를 사용할 수 있으므로 사용자에게 즉각적인 피드백을 제공하고 UI를 업데이트할 수 있습니다.
- 브라우저 API: 클라이언트 컴포넌트는 지리 위치 또는 로컬 저장소와 같은 브라우저 API에 액세스할 수 있으므로 특정 사용 사례를 위한 UI를 구축할 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## Next.js에서 클라이언트 컴포넌트 사용하기

클라이언트 컴포넌트를 사용하려면 파일의 상단에, import 문 위에 React의 "use client" 지시어를 추가하면 됩니다.

"use client"는 서버와 클라이언트 컴포넌트 모듈 사이의 경계를 선언하는 데 사용됩니다. 이는 파일에 "use client"를 정의하면 해당 파일을 포함한 다른 모든 모듈, 즉 하위 컴포넌트도 클라이언트 번들의 일부로 간주된다는 것을 의미합니다.

```typescript
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
```

아래 다이어그램은 toggle.js에서 onClick 및 useState를 사용할 때 "use client" 지시어가 정의되지 않으면 오류가 발생하는 것을 보여줍니다. 기본적으로 이러한 API가 사용되는 서버에서 컴포넌트가 렌더링되기 때문입니다. toggle.js에 "use client" 지시어를 정의하면 React에게 컴포넌트와 해당 API를 사용할 클라이언트에서 렌더링할 것을 알려줄 수 있습니다.

<img src="/assets/img/Client-Components_0.png" />

> 여러 use client 진입 지점 정의하기:
> React 컴포넌트 트리에서 여러 "use client" 진입 지점을 정의할 수 있습니다. 이를 통해 애플리케이션을 여러 클라이언트 번들(또는 가지)로 분할할 수 있습니다. 그러나 클라이언트에서 렌더링할 컴포넌트마다 "use client"를 정의할 필요는 없습니다. 한 번 경계를 정의하면 모든 하위 컴포넌트와 모듈이 클라이언트 번들의 일부로 간주됩니다.

## 클라이언트 컴포넌트는 어떻게 렌더링되나요?

Next.js에서 클라이언트 컴포넌트는 전체 페이지 로드(애플리케이션을 처음 방문하거나 브라우저 새로 고침에 의한 페이지 다시로드)인 경우 또는 후속 탐색인 경우에 따라 다르게 렌더링됩니다.

### 전체 페이지 로드

초기 페이지 로드를 최적화하기 위해 Next.js는 클라이언트 및 서버 컴포넌트 모두에 대해 서버에서 정적 HTML 미리보기를 렌더링합니다. 이것은 사용자가 처음으로 애플리케이션을 방문할 때 페이지의 내용을 즉시 볼 수 있도록 하기 위한 것입니다. 클라이언트가 클라이언트 컴포넌트 JavaScript 번들을 다운로드, 구문 분석 및 실행하기 전에도 마찬가지입니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

서버에서:

- React는 서버 컴포넌트를 React 서버 컴포넌트 페이로드(RSC Payload)라는 특수한 데이터 형식으로 렌더링합니다. 이는 클라이언트 컴포넌트에 대한 참조를 포함합니다.
- Next.js는 RSC 페이로드와 클라이언트 컴포넌트 JavaScript 지침을 사용하여 서버에서 경로에 대한 HTML을 렌더링합니다.

그런 다음 클라이언트에서:

- HTML은 경로의 빠른 비대화형 초기 미리보기로 즉시 사용됩니다.
- React 서버 컴포넌트 페이로드가 사용되어 클라이언트 및 서버 컴포넌트 트리를 조정하고 DOM을 업데이트

합니다.

- JavaScript 지침이 사용되어 클라이언트 컴포넌트를 활성화시키고 UI를 상호작용적으로 만듭니다.

> hydration이란 무엇인가요?
> hydration은 DOM에 이벤트 리스너를 추가하여 정적 HTML을 상호 작용 가능하게 만드는 과정입니다. hydration은 hydrateRoot React API로 수행됩니다.

### 후속 탐색

후속 탐색에서 클라이언트 컴포넌트는 서버에서 렌더링된 HTML 없이 완전히 클라이언트에서 렌더링됩니다.

이는 클라이언트 컴포넌트 JavaScript 번들이 다운로드되고 구문 분석된 후 React가 RSC 페이로드를 사용하여 클라이언트와 서버 컴포넌트 트리를 조정하고 DOM을 업데이트합니다.

## 서버 환경으로 되돌아가기

가끔은 "use client" 경계를 선언한 후 서버 환경으로 돌아가야 할 수 있습니다. 예를 들어 클라이언트 번들 크기를 줄이거나 서버에서 데이터를 가져오거나 서버에서만 사용 가능한 API를 사용하려는 경우입니다.

Client 및 Server 컴포넌트와 Server Actions을 교차로 삽입하여 실제로 클라이언트 컴포넌트 내부에 중첩되어 있더라도 코드를 서버에 유지할 수 있습니다. 자세한 내용은 구성 패턴 페이지를 참조하십시오.

Nextjs14의 클라이언트 컴포넌트 사용 방법

# Nextjs14의 서버컴포넌트 이해하기

Nextjs의 서버컴포넌트에 대해서 쉽게 이해하실 수 있습니다.

# 서버 컴포넌트

React 서버 컴포넌트를 사용하면 서버에서 렌더링되고 선택적으로 캐시될 수 있는 UI를 작성할 수 있습니다. Next.js에서는 스트리밍 및 부분 렌더링을 가능하게 하기 위해 렌더링 작업이 경로 세그먼트로 나누어지며 세 가지 다른 서버 렌더링 전략이 있습니다.

- 정적 렌더링
- 동적 렌더링
- 스트리밍

## 서버 렌더링의 장점

서버에서 렌더링 작업을 수행하는 것에는 몇 가지 이점이 있습니다.

- **데이터 가져오기**: 서버 컴포넌트를 사용하면 데이터 가져오기를 서버로 이동하여 데이터 소스에 가깝게 할 수 있습니다. 이는 렌더링에 필요한 데이터를 가져오는 데 걸리는 시간을 줄이고 클라이언트가 수행해야 하는 요청 수를 줄여 성능을 향상시킬 수 있습니다.
- **보안**: 서버 컴포넌트를 사용하면 클라이언트에 민감한 데이터와 로직을 유지할 수 있습니다. 예를 들어 토큰 및 API 키를 노출시키지 않고 서버에 보관할 수 있습니다.
- **캐싱**: 서버에서 렌더링하면 결과를 캐시하고 다음 요청 및 사용자 전체에 걸쳐 재사용할 수 있습니다. 이는 각 요청마다 수행되는 렌더링 및 데이터 가져오기 양을 줄여 성능을 향상시키고 비용을 절감할 수 있습니다.
- **번들 크기**: 서버 컴포넌트를 사용하면 이전에 클라이언트 자바스크립트 번들 크기에 영향을 미쳤을 수 있는 큰 종속성을 서버에 유지할 수 있습니다. 이것은 클라이언트가 서버 컴포넌트를 위한 JavaScript를 다운로드, 구문 분석 및 실행할 필요가 없으므로 인터넷 속도가 느린 사용자나 성능이 낮은 기기를 사용하는 사용자에게 이점이 있습니다.
- **초기 페이지 로드 및 첫 번째 콘텐츠 표시 (FCP)**
  : 서버에서는 페이지를 렌더링하는 데 필요한 JavaScript를 다운로드, 구문 분석 및 실행하는 동안 대기하지 않고 사용자가 페이지를 즉시 볼 수 있도록 HTML을 생성할 수 있습니다.
- **검색 엔진 최적화 및 소셜 네트워크 공유 가능성**: 렌더링된 HTML을 검색 엔진 봇이 페이지를 인덱싱하고 소셜 네트워크 봇이 페이지에 대한 소셜 카드 미리보기를 생성하는 데 사용할 수 있습니다.
- **스트리밍**: 서버 컴포넌트를 사용하면 렌더링 작업을 청크로 분할하여 준비되는 대로 클라이언트로 스트리밍할 수 있습니다. 이를 통해 사용자는 서버에서 전체 페이지를 렌더링할 때까지 기다릴 필요 없이 페이지 일부를 먼저 볼 수 있습니다.

## Next.js에서 서버 컴포넌트 사용하기

기본적으로 Next.js는 서버 컴포넌트를 사용합니다. 이를 통해 추가 구성 없이 서버 렌더링을 자동으로 구현할 수 있으며 필요할 때 클라이언트 컴포넌트를 사용할 수 있습니다. 자세한 내용은 [클라이언트 컴포넌트]()에서 확인하실 수 있습니다.

## 서버 컴포넌트가 렌더링되는 방법은?

서버에서 Next.js는 렌더링을 조정하기 위해 React의 API를 사용합니다. 렌더링 작업은 다음과 같은 두 단계로 분할됩니다: 개별 경로 세그먼트 및 Suspense Boundaries.

각 청크는 다음과 같은 두 단계로 렌더링됩니다:

- React는 서버 컴포넌트를 특수한 데이터 형식인 React Server Component Payload (RSC Payload)로 렌더링합니다.
- Next.js는 RSC Payload와 클라이언트 컴포넌트 JavaScript 지시문을 사용하여 서버에서 HTML을 렌더링합니다.
  그런 다음 클라이언트에서:
- HTML은 페이지를 즉시 볼 수 있도록 서버 컴포넌트의 빠른 비대화형 미리보기로 사용됩니다. 이는 초기 페이지 로드에만 해당됩니다.
- React 서버 컴포넌트 페이로드는 클라이언트 및 서버 컴포넌트 트리를 조정하고 DOM을 업데이트하는 데 사용됩니다.
- JavaScript 지시문은 클라이언트 컴포넌트를 수화하고 애플리케이션을 상호 작용 가능하게 만드는 데 사용됩니다.
  > React 서버 컴포넌트 페이로드 (RSC)란 무엇인가요?
  > RSC 페이로드는 렌더링된 React 서버 컴포넌트 트리의 간결한 바이너리 표현입니다. 클라이언트의 React에서 DOM을 업데이트하는 데 사용됩니다. RSC 페이로드에는 다음이 포함됩니다:
- 서버 컴포넌트의 렌더링된 결과
- 클라이언트 컴포넌트가 렌더링될 위치에 대한 자리 표시자 및 그들의 JavaScript 파일에 대한 참조
- 서버 컴포넌트에서 클라이언트 컴포넌트로 전달된 모든 props



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 서버 렌더링 전략

서버 렌더링에는 정적, 동적 및 스트리밍의 세 가지 하위 집합이 있습니다.

### 정적 렌더링 (기본값)

정적 렌더링에서는 경로가 빌드 시간에 렌더링되거나 데이터 재유효화 후에 백그라운드에서 렌더링됩니다. 결과는 캐시되어 콘텐츠 전송 네트워크 (CDN)로 푸시할 수 있습니다.
정적 렌더링은 사용자에게 개인화되지 않은 데이터가 있는 경로에 유용하며 빌드 시간에 알 수 있는 정적 블로그 글이나 제품 페이지와 같은 경우에 해당합니다.

### 동적 렌더링

동적 렌더링에서는 각 사용자에게 요청 시간에 경로가 렌더링됩니다.
동적 렌더링은 사용자에게 개인화된 데이터가 있는 경로 또는 요청 시간에만 알 수 있는 쿠키 또는 URL의 검색 매개변수와 같은 정보가 있는 경로에 유용합니다.

> 캐시된 데이터를 사용한 동적 라우트
> 대부분의 웹 사이트에서 라우트는 완전히 정적이거나 완전히 동적이 아닙니다. 예를 들어 캐시된 제품 데이터를 사용하고 일정 간격으로 재검증되는 동안 캐시되지 않은 개인화된 고객 데이터가 있는 전자 상거래 페이지가 있을 수 있습니다.
> Next.js에서는 캐시된 및 캐시되지 않은 데이터를 모두 사용하는 동적으로 렌더링되는 경로를 가질 수 있습니다. 이는 RSC 페이로드와 데이터가 별도로 캐시되기 때문에 동적 렌더링을 선택할 때 요청 시간에 모든 데이터를 가져오는 것의 성능적인 영향에 대해 걱정할 필요가 없음을 의미합니다.
> 전체 경로 캐시 및 데이터 캐시에 대해 자세히 알아보세요.

#### 동적 함수

동적 함수는 요청 시간에만 알 수 있는 정보를 기반으로 합니다. 예를 들어 사용자의 쿠키, 현재 요청 헤더 또는 URL의 검색 매개변수입니다. Next.js에서 이러한 동적 함수는 다음과 같습니다:

- cookies() 및 headers(): 서버 컴포넌트에서 이를 사용하면 전체 경로가 요청 시간에 동적으로 렌더링됩니다.
- searchParams: Pages 프롭을 사용하면 페이지가 요청 시간에 동적으로 렌더링됩니다.
  이러한 함수를 사용하면 전체 경로가 요청 시간에 동적으로 렌더링됩니다.

#### 동적 렌더링으로 전환

렌더링 중에 동적 함수 또는 캐시되지 않은 데이터 요청이 발견되면 Next.js는 전체 경로를 동적으로 렌더링하도록 전환합니다. 다음 표는 동적 함수와 데이터 캐싱이 경로를 정적으로 또는 동적으로 렌더링하는 데 어떻게 영향을 미치는지를 요약합니다:

| Dynamic Functions | Data Cached | Rendering Strategy   |
| ----------------- | ----------- | -------------------- |
| No                | Cached      | Statically Rendered  |
| Yes               | Cached      | Dynamically Rendered |
| No                | Not Cached  | Dynamically Rendered |
| Yes               | Not Cached  | Dynamically Rendered |

위 표에서 경로가 완전히 정적으로 렌더링되려면 모든 데이터가 캐시되어야 합니다. 그러나 동적으로 렌더링되는 경로는 캐시된 및 캐시되지 않은 데이터 가져오기를 모두 사용할 수 있습니다. 이는 RSC 페이로드와 데이터가 별도로 캐시되기 때문에 요청 시간에 모든 데이터를 가져오는 것의 성능에 대해 걱정할 필요가 없음을 의미합니다. 개발자로서 정적 및 동적 렌더링 중에서 선택할 필요는 없으며 Next.js가 사용되는 기능과 API에 따라 각 경로에 대해 자동으로 최적의 렌더링 전략을 선택합니다. 대신 특정 데이터를 캐시하거나 재검증하는 시점을 선택하고 UI의 일부를 스트리밍할지 여부를 선택할 수 있습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

### 스트리밍

<img src="/assets/img/Server-Components_0.png" />

스트리밍을 사용하면 서버에서 UI를 점진적으로 렌더링할 수 있습니다. 작업은 청크로 분할되어 준비되는 대로 클라이언트로 스트리밍되어 사용자가 전체 콘텐츠 렌더링이 완료될 때까지 기다리지 않고도 페이지의 일부를 볼 수 있습니다.

<img src="/assets/img/Server-Components_1.png" />

스트리밍은 Next.js App Router에 기본으로 내장되어 있습니다. 이는 초기 페이지 로드 성능 및 전체 경로를 렌더링하는 데 블록되는 느린 데이터 가져오기에 따라 UI를 개선하는 데 도움이 됩니다. 예를 들어 제품 페이지의 리뷰입니다.
로딩.js 및 React Suspense를 사용하여 경로 세그먼트를 스트리밍할 수 있습니다.

자세한 내용은 [로딩 UI]() 및 [스트리밍 섹션]()을 참조하세요.

Nextjs14의 서버컴포넌트 이해하기

# Tanstack Query(react-query)로 서버 데이터 가져오는 방법

React-Query의 버전 5는 Tanstack Query로 이름이 바뀌었는데, 사용방법이 간단하니 오늘은 그 내용에 대해서 알아보겠습니다.

## 0. tanstack query 설치

```bash
$ npm i @tanstack/react-query
$ pnpm add @tanstack/react-query
$ yarn add @tanstack/react-query
```

설치를 완료했다면 reactquery Provider를 만들어줘야하는데요.

`RQProvider.tsx`

```tsx
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { ReactNode, useState } from "react";

export default function RQProvider({ children }: { children: ReactNode }) {
  const [client] = useState(
    new QueryClient({
      defaultOptions: {
        queries: {
          refetchOnWindowFocus: false, // 다른 윈도우 탭 갔다 오면 다시 데이터를 가져오겠다
          retryOnMount: true, // 리액트에 컴포넌트가 언마운트 되었다가 다시 마운트 되면 데이터를 가져온다
          refetchOnReconnect: true, // 인터넷 연결이 끊겼다가 다시 연결되는 순간 가져온다
          retry: false, // 실패시 몇번 더 가져올 것인가, false 를 하면 에러페이지 보여줌
        },
      },
    })
  );

  return (
    <QueryClientProvider client={client}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}
```

`ReactQueryDevtools`는 브라우저에서 react-query로 가져온 데이터들을 쉽게 보고 관리할 수 있는 데브툴인데요. 개발할 때는 이걸 추가해놓고 보시는 것이 좋습니다. devtool관련해서는 따로 게시글을 작성하도록 하고 이번 글에서는 데이터를 fetch하는 부분까지만 작성하겠습니다.

<img src="/assets/img/2024-02-12-Tanstack-Query(react-query)로-서버-데이터-가져오는-방법-1.png" width="500" />

<img src="/assets/img/2024-02-12-Tanstack-Query(react-query)로-서버-데이터-가져오는-방법-2.png" width="500" />

## 1. QueryClient 생성

```tsx
{...중략}
import { HydrationBoundary, QueryClient, dehydrate } from "@tanstack/react-query"; // 1. 필요한 모듈 import

export default async function Home() {
  const queryClient = new QueryClient(); // 2. queryClient 생성

  await queryClient.prefetchQuery({ queryKey: ["posts", "recommends"], queryFn: getPostRecommends }); // 3. 데이터 prefetch
  await queryClient.prefetchQuery({ queryKey: ["posts", "following"], queryFn: getFollowingPosts });

  const dehydratedState = dehydrate(queryClient); // 4. queryClient dehydrated
  return (
    <>
      <HydrationBoundary state={dehydratedState}> {/* 5. 하이드레이션 바운더리 설정 */}
        <div className={cx("tab_wrap")}>
          <div className={cx("tab_inner")}>
            <h2 className={cx("page_title")}>홈</h2>
            <Tab />
          </div>
        </div>
        <PostForm></PostForm>
        <HomePosts />
      </HydrationBoundary>
    </>
  );
}
```

위 코드는 QueryClient를 생성하는 전체 코드입니다. 주석에 tanstack query에 필요한 내용들을 적어두었는데 아래에 다시 한번 정리해두겠습니다.

## 1. 필요한 모듈 import

```tsx
import { HydrationBoundary, QueryClient, dehydrate } from "@tanstack/react-query"; // 1. 필요한 모듈 import
```

@tanstack/react-query에서는 데이터를 fetch해오는 곳과 사용하는 곳 이렇게 두가지로 나뉜다고 보시면 됩니다.
서버 컴포넌트에서는 데이터를 fetch해오는데, 이 때 필요한 모듈은 세개가 있습니다.

- QueryClient : QueryClient를 생성하는 함수
- dehydrate: QueryClient에서 prefetch 한 state를 dehydrate해주는 함수
- HydrationBoundary: QueryClient에서 prefetch 한 state들을 어디서 사용할지 바운더리를 정해주는 함수

## 2. 데이터 prefetch

```tsx
const queryClient = new QueryClient(); // 2. queryClient 생성

await queryClient.prefetchQuery({
  queryKey: ["posts", "recommends"],
  queryFn: getPostRecommends,
}); // 3. 데이터 prefetch
await queryClient.prefetchQuery({
  queryKey: ["posts", "following"],
  queryFn: getFollowingPosts,
});

const dehydratedState = dehydrate(queryClient); // 4. queryClient dehydrated
```

그 다음에는 `new QueryClient()` 를 통해서 queryClient를 생성해줍니다.
생성한 queryClient의 prefetchQuery함수를 통해 데이터를 미리 불러올 수 있는데요.

prefetchQuery에서는 `queryKey` 객체와 `queryFn`를 필요로 합니다.
`queryKey`는 데이터를 페칭하는데 필요한 키값이라고 보시면 됩니다. 이 코드로 예를 들자면, queryKey가 ["posts", "recommends"]이므로 포스트, 추천 즉 추천포스트들을 불러오는 키라고 보시면 됩니다. 이 키를 설정하는 것은 개발자가 정할 수 있습니다. 그렇다면 `["posts", "following"]`는 팔로잉한 사람들의 포스트를 불러오는 것이겠죠?

그 다음 queryFn는 이 때 데이터를 fetch하는 함수를 넣어주는 것입니다. `getPostRecommends` 함수는 아래와 같이 추천 포스트를 가져오는 함수입니다. 여기서는 실제 백엔드가 없기 때문에 msw를 이용해 목업 데이터를 리턴해주고 있는데요.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

```tsx
export async function getPostRecommends() {
  const res = await fetch(`http://localhost:9090/api/postRecommends`, {
    next: {
      tags: ["posts", "recommends"],
    },
    cache: "no-cache",
  });

  return res.json();
}
```

`msw handler`

```tsx
  http.get("/api/postRecommends", ({ request }) => {
    const url = new URL(request.url);
    const cursor = parseInt(url.searchParams.get("cursor") as string) || 0;
    return HttpResponse.json([
      {
        postId: cursor + 1,
        User: User[0],
        content: `${cursor + 1} Z.com is so marvelous. I'm gonna buy that.`,
        Images: [{ imageId: 1, link: faker.image.urlLoremFlickr() }],
        createdAt: generateDate(),
      },
      {
        postId: cursor + 2,
        User: User[0],
        content: `${cursor + 2} Z.com is so marvelous. I'm gonna buy that.`,
        Images: [
          { imageId: 1, link: faker.image.urlLoremFlickr() },
          { imageId: 2, link: faker.image.urlLoremFlickr() },
        ],
        createdAt: generateDate(),
      },
      {
        postId: cursor + 3,
        User: User[0],
        content: `${cursor + 3} Z.com is so marvelous. I'm gonna buy that.`,
        Images: [],
        createdAt: generateDate(),
      },
      {
        postId: cursor + 4,
        User: User[0],
        content: `${cursor + 4} Z.com is so marvelous. I'm gonna buy that.`,
        Images: [
          { imageId: 1, link: faker.image.urlLoremFlickr() },
          { imageId: 2, link: faker.image.urlLoremFlickr() },
          { imageId: 3, link: faker.image.urlLoremFlickr() },
          { imageId: 4, link: faker.image.urlLoremFlickr() },
        ],
        createdAt: generateDate(),
      },
      {
        postId: cursor + 5,
        User: User[0],
        content: `${cursor + 5} Z.com is so marvelous. I'm gonna buy that.`,
        Images: [
          { imageId: 1, link: faker.image.urlLoremFlickr() },
          { imageId: 2, link: faker.image.urlLoremFlickr() },
          { imageId: 3, link: faker.image.urlLoremFlickr() },
        ],
        createdAt: generateDate(),
      },
    ]);
  }),
```

## 3. hydration boundary 지정하기

tanstack query를 통해서 가져온 데이터는 모든 컴포넌트에서 사용할 수 있는 것이 아닌데요.
그 범위를 지정해줘야 합니다.

```tsx
	{...중략}
  const dehydratedState = dehydrate(queryClient); // 4. queryClient dehydrated
  return (
    <>
      <HydrationBoundary state={dehydratedState}> {/* 5. 하이드레이션 바운더리 설정 */}
        <div className={cx("tab_wrap")}>
          <div className={cx("tab_inner")}>
            <h2 className={cx("page_title")}>홈</h2>
            <Tab />
          </div>
        </div>
        <PostForm></PostForm>
        <HomePosts />
      </HydrationBoundary>
    </>
  );
}
```

위 코드에서는 홈 컴포넌트에서 `<HomePosts/>` 하위에서 추천 포스트와 팔로잉 포스트 컴포넌트를 사용하기 때문에 바운더리를 넓게 지정했는데요. 이 바운더리는 개발자가 원하는 범위를 지정할 수 있습니다.

여기까지 작성하면 서버 컴포넌트에서 데이터를 미리 페칭하는 과정까지는 완료가 되었습니다.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 4. fetch한 데이터 사용하기

react-query를 통해 fetch한 데이터를 사용할 차례인데요.

```tsx
"use client";

import { getPostRecommends } from "@/app/_lib/getPostRecommends";
import { useQuery } from "@tanstack/react-query"; // use Query import
import Post from "../Post";
import { IPost } from "../PostArticle";
import { Fragment } from "react";

export default function PostRecommends() {
  const { data } = useQuery<IPost[]>({
    queryKey: ["posts", "recommends"],
    queryFn: getPostRecommends,
    staleTime: 60000,
    gcTime: 100000,
  });
  return (
    <Fragment>
      {data?.map((v) => (
        <Post key={v.postId} post={v} />
      ))}
    </Fragment>
  );
}
```

위 컴포넌트에서 query에 있는 데이터를 사용하는 곳인데요.
useQuery에서도 동일하게 queryKey와 queryFn을 필요로 하는데요. 위에서 서버 컴포넌트에서 작성했던 queryKey와 queryFn과 동일 한 값을 넣어주시면 됩니다.

이렇게 한 뒤에 리턴 값에서 data를 꺼내 사용하면 tanstack query를 사용해서 데이터를 가져오는 작업이 완료됩니다.

위 코드에 있는 것처럼 staleTime과 gcTime, 그리고 isLoading, isFetching과 같이 여러 state를 지정하고 가져올 수 있는데요.
이 내용에 대해서는 다음에 따로 작성하도록 하겠습니다.

Tanstack Queryreact-query로 서버 데이터 가져오는 방법

# Tanstack ReactQuery로 무한스크롤 구현하기(react-intersection-observer)

<img src="/assets/img/1.gif" width="500" />

무한 스크롤을 구현하는 방법에는 많은 것들이 있지만 요즘 방법은 react-intersection-observer를 사용해서 브라우저에 특정 요소가 보여지고 있는지 옵저버를 통해 새로운 데이터를 불러오는 방식을 지향하고 있습니다.

tanstack react query에서는 react-intersection-observer와 함께 사용하면 매우 쉽게 무한 스크롤을 구현할 수 있는 방법을 제공하고 있는데요. 오늘은 그 방법에 대해서 알아보려고 합니다.

아래 코드들은 [Tanstack Query(react-query)로 서버 데이터 가져오는 방법]()에 나와있는 코드를 기준으로 설명하고 있으니 참고 부탁드립니다.

## 1. prefetchInfiniteQuery로 변경

무한 스크롤 구현을 위해서 기존에 사용하던 prefetchQuery를 prefetchInfiniteQuery로 변경해줍니다. prefetchInfiniteQuery는 prefetchQuery와 다르게 initialPageParam을 필요로 하는데요. initialPageParam은 무한스크롤을 불러올 데이터의 첫번째 아이디라고 생각하시면 됩니다.

```tsx
export default async function Home() {
  const queryClient = new QueryClient();

  // 무한 스크롤 구현을 위해 prefetchQuery -> prefetchInfiniteQuery로 변경
  await queryClient.prefetchInfiniteQuery({
    queryKey: ["posts", "recommends"],
    queryFn: getPostRecommends,
    initialPageParam: 0,
  });

  await queryClient.prefetchQuery({
    queryKey: ["posts", "following"],
    queryFn: getFollowingPosts,
  });

  const dehydratedState = dehydrate(queryClient);
  return (
    <>
      <HydrationBoundary state={dehydratedState}>
        <div className={cx("tab_wrap")}>
          <div className={cx("tab_inner")}>
            <h2 className={cx("page_title")}>홈</h2>
            <Tab />
          </div>
        </div>
        <PostForm></PostForm>
        <HomePosts />
      </HydrationBoundary>
    </>
  );
}
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 2. useInfiniteQuery 적용

기존에 사용하던 useQuery도 useInfiniteQuery로 교체해줍니다.
이 때는 prefetchInfiniteQuery와 동일하게 initialPageParam가 필요하고 추가로 다음 스크롤할 아이디를 가져오는 getNextPageParam 함수도 필요로 하는데요. getNextPageParam에서는 lastPage를 props로 받고 있는 함수이기 때문에 저는 lastPage의 마지막 데이터의 postId를 다음 페이지를 불러올 param으로 지정해줬습니다.

```tsx
"use client";

import { InfiniteData, useInfiniteQuery, useQuery } from "@tanstack/react-query";

export default function PostRecommends() {
  const { data, fetchNextPage } = useInfiniteQuery<
    IPost[],
    Object,
    InfiniteData<IPost[]>,
    [_1: string, _2: string],
    number
  >({
    queryKey: ["posts", "recommends"],
    queryFn: getPostRecommends,
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage?.at(-1)?.postId, // 다음 스크롤해올 데이터의 아이디

    staleTime: 60000,
    gcTime: 100000,
  });

  return <Fragment>{data?.pages.map((page) => page.map((v) => <Post key={v.postId} post={v} />))}</Fragment>;
}
```

위와 같이 작성하면, 아래처럼 데이터를 불러오게 됩니다.

1. postId가 1,2,3,4,5인 데이터 fetch
2. 다음 스크롤 시 postId가 6,7,8,9,10인 데이터 fetch
   ... 이후 반복

하지만 이런 방식으로 작업을 하려면 백엔드코드도 수정해주어야 하는데요.

getNextPageParam의 값은 queryFn의 인자로 들어가게 되는데요.
그래서 아래처럼 getPostRecommends 함수의 props에서 pageParam으로 다음에 불러올 param을 접근할 수 있습니다.

```tsx
export async function getPostRecommends({ pageParam }: { pageParam: number }) {
  const res = await fetch(`http://localhost:9090/api/postRecommends?cursor=${pageParam}`, {
    next: {
      tags: ["posts", "recommends"],
    },
    cache: "no-cache",
  });

  return res.json();
}
```

위와 같이 api함수를 작성했다면 목업 데이터도 수정해주어야하는데요.
(저는 백엔드를 따로 두고 있지 않고 테스트를 위해 msw 목업 서버를 만들었습니다. 목업 서버 만드는 방법이 궁금하신 분들은 [이 글]() 참고해보세요.)

아래 코드를 보시면 new URL로 request의 url을 가져와 searchParams을 통해 cursor값을 가져온 것을 보실 수 있습니다.

```tsx
 http.get("/api/postRecommends", ({ request }) => {
    const url = new URL(request.url);
    const cursor = parseInt(url.searchParams.get("cursor") as string) || 0;

    return HttpResponse.json([
      {
        postId: cursor + 1,
        User: User[0],
        content: `${cursor + 1} Z.com is so marvelous. I'm gonna buy that.`,
        Images: [{ imageId: 1, link: faker.image.urlLoremFlickr() }],
        createdAt: generateDate(),
      },
      {
        postId: cursor + 2,
        User: User[0],
        content: `${cursor + 2} Z.com is so marvelous. I'm gonna buy that.`,
        Images: [
          { imageId: 1, link: faker.image.urlLoremFlickr() },
          { imageId: 2, link: faker.image.urlLoremFlickr() },
        ],
        createdAt: generateDate(),
      },
      {
        postId: cursor + 3,
        User: User[0],
        content: `${cursor + 3} Z.com is so marvelous. I'm gonna buy that.`,
        Images: [],
        createdAt: generateDate(),
      },
      {
        postId: cursor + 4,
        User: User[0],
        content: `${cursor + 4} Z.com is so marvelous. I'm gonna buy that.`,
        Images: [
          { imageId: 1, link: faker.image.urlLoremFlickr() },
          { imageId: 2, link: faker.image.urlLoremFlickr() },
          { imageId: 3, link: faker.image.urlLoremFlickr() },
          { imageId: 4, link: faker.image.urlLoremFlickr() },
        ],
        createdAt: generateDate(),
      },
      {
        postId: cursor + 5,
        User: User[0],
        content: `${cursor + 5} Z.com is so marvelous. I'm gonna buy that.`,
        Images: [
          { imageId: 1, link: faker.image.urlLoremFlickr() },
          { imageId: 2, link: faker.image.urlLoremFlickr() },
          { imageId: 3, link: faker.image.urlLoremFlickr() },
        ],
        createdAt: generateDate(),
      },
    ]);
  }),
```

여기까지 하면 무한 스크롤을 할 준비를 마친 것인데요.



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

## 3. react-intersection-observer로 무한스크롤 적용

이제 페이지 하단까지 스크롤을 했을 때 fetchNextPage를 호출하기 위해 react-intersection-observer를 사용할 차례입니다.

react-intersection-observer를 사용하면 브라우저에 특정 요소가 보이는지를 판단할 수 있는데요.
페이지 최 하단에 임의의 요소를 추가해 해당 요소가 보이게 되면 페이지 끝가지 스크롤했다는 의미로 이 때 fetchNextPage를 호출하는 방식으로 진행하려고 합니다.

```tsx
"use client";

import { getPostRecommends } from "@/app/_lib/getPostRecommends";
import { InfiniteData, useInfiniteQuery, useQuery } from "@tanstack/react-query";
import Post from "../Post";
import { IPost } from "../PostArticle";
import { Fragment, useEffect } from "react";
import { useInView } from "react-intersection-observer";

export default function PostRecommends() {
  const { ref, inView } = useInView({ threshold: 0, delay: 0 });
  const { data, fetchNextPage } = useInfiniteQuery<
    IPost[],
    Object,
    InfiniteData<IPost[]>,
    [_1: string, _2: string],
    number
  >({
    queryKey: ["posts", "recommends"],
    queryFn: getPostRecommends,
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage?.at(-1)?.postId,

    staleTime: 60000,
    gcTime: 100000,
  });

  console.log(data);

  useEffect(() => {
    if (inView) {
      fetchNextPage();
      console.log(inView);
    }
  }, [inView]);

  return (
    <Fragment>
      {data?.pages.map((page) => page.map((v) => <Post key={v.postId} post={v} />))}
      <div ref={ref} style={{ height: "50px" }}></div>
    </Fragment>
  );
}
```

`useInView` 에서는 ref, inView를 꺼낼 수 있는데요.

```tsx
const { ref, inView } = useInView({ threshold: 0, delay: 0 });
```

ref는 브라우저에 보이는지를 판단하고 싶은 요소에 넣어줍니다.

```tsx
<Fragment>
  {data?.pages.map((page) => page.map((v) => <Post key={v.postId} post={v} />))}
  <div ref={ref} style={{ height: "50px" }}></div>
</Fragment>
```



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

`inView`는 ref 요소가 브라우저에 보이는지를 판단하는 훅 변수입니다.
아래 코드가 useInView가 true가 되었을 때 fetchNextPage 함수를 호출하는 부분입니다.
useEffect는 참조하는 변수가 변경되었을 때를 캐치할 수 있는데요. 이 점을 활용해 다음 페이지를 불러오고 있습니다. useEffect에 대해서 궁금하신 분들은 [이 글]()을 참고해보세요.

```tsx
useEffect(() => {
  if (inView) {
    fetchNextPage();
  }
}, [inView]);
```

## 결과

위와 같이 작성하면 아래 영상처럼 스크롤이 끝까지 될 때마다 새로운 데이터를 불러오는 것을 보실 수 있습니다.

<img src="/assets/img/1.gif" width="500" />

tanstack react query를 사용하고 있다면 devtool을 통해서 페이지 데이터를 아래 사진처럼 더 쉽게 확인할 수 있다는 장점도 있습니다.

<img src="/assets/img/2.png" width="500" />

tanstack react-query와 react-intersection-observer 활용해서 무한스크롤 가장 쉽게 구현하는 방법