frontweb_tk.log

[React.js] 우당탕탕 카운트업 기능 개발하기

Mon, 13 May 2024 13:27:16 GMT

기능구현 목표

다음과 같이 스크롤을 내리면 나타나는 카운트업 기능을 만들고자 한다.
부분적으로 보기

📝첫번째 구현

여러 레퍼런스들을 참고하여 아래와 같이 코드를 작성하였다.

useCountUp.jsx

import { useEffect, useState } from "react";

/* eslint-disable no-unused-vars */ const useCountUp = (end, start = 0, duration = 2000) => { const [count, setCount] = useState(start); useEffect(() => {

let currentNum = start;
const delay = duration / end;
const countUp = setInterval(() => {
  currentNum++;
  setCount(currentNum);
  if (currentNum === end) {
    clearInterval(countUp);
  }
}, delay);

}, [end, start, duration]); return count.toFixed(0); }; export default useCountUp;

- Counting.jsx
```js

import styled from "styled-components";
import useCountUp from "../Hooks/useCountUp";

const CountingWrapper = styled.div`
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  width: 100%;
`;
const Count = styled.div`
  font-size: ${(props) => props.theme.fontSize.title_2};
  font-weight: bold;
  color: ${(props) => props.theme.color.darkGreen};
`;
const Name = styled.div`
  font-size: ${(props) => props.theme.fontSize.content_14};
  font-weight: bold;

  color: ${(props) => props.theme.color.orange};
`;

export default function Counting({ ...props }) {
  console.log(props.number);
  console.log(Number(props.number));

  return (
    
      {useCountUp(Number(props.number), 0, 2000)}
      {props.name}
    
  );
}

참고로 Counting에서 전달받는 props.number은 문자이다. 그래서 Number함수로 처리했을때 처음엔 다음과 같은 오류가 발생했었다. uncaught typeerror: number is not a function 검색해보니 내가 스타일을 위해 Number를 선언해 사용하고 있어서 그런 것이었다.(예약어) 그래서 중복되는 이름이 없도록 number라고 사용한 것을 모두 제거하고 Count로 스타일 이름을 바꾸니 오류가 사라지게 되었다.

그러자 다음과 같이 작동하였다.

💻첫번째 구현 작동화면

참고: 맨처음 숫자인 800k+는 우선 800을 먼저 넣어보았다.

문제점

구분	원본	내가 만든 것
렌더링 시기	화면에서는 보이지 않지만 원본은 스크롤해서 해당 구역이 비춰질때부터 카운팅 시작함.	처음 전체 화면 렌더링 되자마자 시작됨.
카운팅 방식	원본은 3초 정도의 시간안에 동시에 끝남.	내가 만든건 숫자가 높을수록 늦게까지 혼자 카운팅 되고있음.
화면 효과	자연스럽게 숫자가 나타나는 페이드인? 이 있음

카운팅 방식을 먼저 수정해보자.

📝두번째 구현

모두 같은 시간에 종료 되도록 먼저 만들자.

Q. 처음 작성한 코드에서 const delay = duration / end;에 의해 이론적으로 end 숫자가 커질수록 delay 속도가 빨라지게 하여 모두 동시에 끝나는게 맞지만 왜 그렇게 동작하지 않을까?

A. mdn공식문서를 확인해보니 최소 4ms까지만 가능 ⇒ 그럼 최소 4ms로 맞추고 나머지는 숫자를 띄엄띄엄 세는 식으로 가야겠따.

지연 제한

간격(interval)은 중첩될 수 있습니다. 즉, setInterval()에 대한 콜백이 setInterval()을 호출하여 첫 번째 간격이 계속 진행 중일지라도 다른 간격의 실행을 시작할 수 있습니다. 이것이 성능에 미칠 수 있는 잠재적인 영향을 완화하기 위해 간격이 5개 수준 이상으로 중첩되면 브라우저는 자동으로 간격에 대해 4 ms 최소 값을 적용합니다. 중첩 호출이 심화된 setInterval()의 호출에서 4 ms 미만의 값을 지정하면 4 ms로 고정됩니다.

각 숫자에 대해서 다음 표와 같이 실험(?)을 진행했다.

목표숫자	800k+	89	12	250
지속시간(가정)	2000ms	2000ms	2000ms	2000ms
시작숫자	0	0	0	0
예상 지연시간	0.0025ms	22.5ms	166ms	8ms
4ms이상?	X	O	O	O
예상 순위	4	1	1	1
실제 순위	4	1	1	3

⇒ 250을 200으로 고쳤을때도 진짜 아주 살짝 늦게 끝나고(10ms) 150으로 고쳐보니 동일하게 끝나는 것을 확인했다. (13ms) 그래서 안전하게 20ms 로 맞추기로 한다. (100번 나누기 이하일 경우)

작성코드

// useCountUp.jsx
import { useEffect, useState } from "react";

/* eslint-disable no-unused-vars */
const useCountUp = (end, start = 0, duration = 2000) => {
  const [count, setCount] = useState(start);
  useEffect(() => {
    let currentNum = start;
    if (Math.abs(end) > 99) {
      const delay = 20;
      const countUp = setInterval(() => {
        currentNum = currentNum + end / (duration / delay);
        setCount(currentNum);
        if (currentNum === end) {
          clearInterval(countUp);
        }
      }, delay);
    } else {
      const delay = Math.abs(Math.floor(duration / end));
      const countUp = setInterval(() => {
        currentNum++;
        setCount(currentNum);
        if (currentNum === end) {
          clearInterval(countUp);
        }
      }, delay);
    }
  }, [end, start, duration]);
  return count.toFixed(0);
};
export default useCountUp;

💻두번째 구현 작동화면

맨처음 숫자를 8000으로 바꾸었을 때 화면이다.

문제점
- 8000에서는1의자리 숫자가 전혀 변하지 않는다.
- 또한 8000이라는 숫자까지는 도달하지만 실제로는 원본과 같이 숫자와 문자가 조합된 800k+라는 숫자를 써야 한다.

📝세번째 구현

800k+ 가 800000(팔십만) 으로 읽을 수 있도록 변환시켜주자.

레퍼런스를 참고하여 다음 단위변환 커스텀 훅을 작성하였다.

//useConvert.jsx
const useConvert = (num, digits) => {
const si = [
  { value: 1, symbol: "" },
  { value: 1e3, symbol: "k" },
  { value: 1e6, symbol: "M" },
  { value: 1e9, symbol: "G" },
  { value: 1e12, symbol: "T" },
  { value: 1e15, symbol: "P" },
  { value: 1e18, symbol: "E" },
];
const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
let i;
for (i = si.length - 1; i > 0; i--) {
  if (num >= si[i].value) {
    break;
  }
}
return (num / si[i].value).toFixed(digits).replace(rx, "$1") + si[i].symbol;
};

export default useConvert;


- 그리고 이 훅을 useCounting.jsx에 다음 코드와 같이 적용시켰는데 에러가 발생하였다.
```js
//useCounting.jsx
//생략
  if (count>1000){
    const convertedNum = useConvert(count,0) // 이 부분 에러
  }
  return count.toFixed(0);
};
export default useCountUp;

React Hook "useConvert" is called conditionally. React Hooks must be called in the exact same order in every component render.

⇒ 리액트 훅은 조건식 안에 사용될 수 없다고 한다. 간과한 리액트 훅의 규칙은 다음과 같다.

최상위(at the Top Level)에서만 Hook을 호출해야 합니다

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 마세요. 대신 early return이 실행되기 전에 항상 React 함수의 최상위(at the top level)에서 Hook을 호출해야 합니다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다. 이러한 점은 React가 useState 와 useEffect 가 여러 번 호출되는 중에도 Hook의 상태를 올바르게 유지할 수 있도록 해줍니다. 이 점에 대해서 궁금하다면 아래에서 자세히 설명해 드리겠습니다.

오직 React 함수 내에서 Hook을 호출해야 합니다

Hook을 일반적인 JavaScript 함수에서 호출하지 마세요. 대신 아래와 같이 호출할 수 있습니다.

✅ React 함수 컴포넌트에서 Hook을 호출하세요.
✅ Custom Hook에서 Hook을 호출하세요. (다음 페이지에서 이 부분을 살펴볼 예정입니다) 이 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있습니다.

수정코드 ⇒ 리액트 훅을 조건문 밖으로 빼냈다.

//useCounting.jsx
//생략
const convertedNum = useConvert(count, 0); // 조건문 밖으로 뺌

if (count > 1000) {
  return convertedNum;
} else {
  return count.toFixed(0);
}
};
export default useCountUp

💻세번째 구현 작동화면

문제점 에러 발생은 사라졌으나 숫자 카운팅이 다음과 같이 일어났다. → 1000단위 위부터는 xk로 세기 시작한다.

📝네번째 구현

최종 숫자만 단위변환에 적용되도록 한다.

import { useEffect, useState } from "react";
import useConvert from "./useConvert";

/* eslint-disable no-unused-vars */
const useCountUp = (end, start = 0, duration = 5000) => {
  const [count, setCount] = useState(start);

  useEffect(() => {
        // 아래는 1000 이상인 경우에 대해 새로 작성한 코드
    let currentNum = start;
    if (Math.abs(end) > 1000) {
      const delay = 20;
      const countUp = setInterval(() => {
        currentNum = currentNum + 950 / (duration / delay);
        setCount(currentNum);
        if (currentNum === 950) {
          clearInterval(countUp);
        }
      }, delay);

    } else if (Math.abs(end) > 99) {
      // (중략)

  const convertedNum = useConvert(end, 0);
  if (count > 949) {
    return convertedNum;
  }

  return count.toFixed(0);
};
export default useCountUp;

💻네번째 구현 작동화면(최종)

참고: 페이드인 스타일 적용함

📝구현 완료된 기능

숫자 카운트 업
숫자 크기와 상관없이 1의 자리 숫자 변화가 눈에 보이도록 함
숫자 크기와 상관없이 같은 시각에 종료되도록 함
1000단위 이상의 숫자를 문자로 변환하여 표기
페이드 인 (fade-in) 애니메이션

📝번외 : 추가 구현해야할 기능

스크롤이벤트를 이용하여 해당 컴포넌트 도달시 카운트업이 수행되도록 한다. (useScrollCount 구현)

📝마치며

기능을 구현하면서 setInterval을 사용하여 카운트 업 기능을 구현할 때는 지연간격의 제한이 있기 때문에 숫자가 얼만큼 크냐에 따라 조건별로 나눠 적용시켜줘야 한다는 것을 알게되었다.
기능을 구현하기 전엔 단순히 숫자가 카운트업 되기만 하면 되어 굉장히 쉬울 것이라고 예상했지만 의외로 한 단계의 과정을 거치면 또 손봐줘야 할 다음 단계가 있었고, 그것을 풀어나가는 과정이 흥미로웠다.
스크롤이벤트를 기능을 추가할때 추가 포스팅을 할 예정이다.

참고 레퍼런스 출처

[Next.js 마스터리] Next.js페이지 렌더링 -ISR

Mon, 22 Jan 2024 12:06:40 GMT

ISR

(Incremental Static Regeneration, 증분 정적 재생성)

일정시간을 주기로 정적페이지를 다시 생성하는 기술
기존 SSG 방식 동작
ISR: 기존 SSG 방식 동작 + SSR 방식의 업데이트
- 이미 만들어져 있는 페이지를 반환하여 매우 빠른 속도로 렌더링 된다. (SSG의 장점)
- 세팅된 시간 마다 주기적으로 업데이트 되어 최신 데이터를 반영할 수 있다 (SSR의 장점)

(다이나믹페이지)[code].js에만 적용가능

import { fetchCountry } from "@/api";
import SubLayout from "@/components/SubLayout";
import { useRouter } from "next/router";

export default function Country({ country }) { const router = useRouter(); const { code } = router.query;

if (router.isFallback) { return

Laoding...

; }

if (!country) { return

존재하지 않는 국가입니다.

; } return (

{country.commonName} {country.officialName}

); }

Country.Layout = SubLayout;

export const getStaticPaths = async () => { return { paths: [ { params: { code: "ABW" } }, { params: { code: "KOR" } }, ], fallback: true, }; };

export const getStaticProps = async (context) => { const { code } = context.params; console.log(${code}페이지 생성!); // 👈🏻

let country = null; if (code) { country = await fetchCountry(code); } return { props: { country }, revalidate: 3, // 👈🏻 기존SSG페이지에서 이 부분만 추가해주면 된다. }; };


![](https://velog.velcdn.com/images/forntweb_tk/post/a5f33d32-4aa4-4e03-824a-687353f952ca/image.png)

위 페이지에서 설정한 시간(3초)이 지난 후 마다 새로고침을 하는 경우 아래와 같이 서버에서 페이지가 새로 생성되는 것을 알 수 있다.
![](https://velog.velcdn.com/images/forntweb_tk/post/6a64aba6-bfe9-4f5f-95c7-ce2df59a5f7a/image.png)

> 렌더링 전략 (각각페이지마다 다르게 설정 가능)
- 반드시 실시간 데이터만 보장되어야 할 때 → SSR 혹은 클라이언트에서 fetch
- 빠른 사용자 응답이 필요한 경우 → SSG 
- SSG + 최신데이터 반영 → ISR

[Next.js 마스터리] Next.js페이지 렌더링 -SSG

Thu, 18 Jan 2024 13:32:00 GMT

SSG

(Static Site Generation, 정적 사이트 생성)

서버측에서 페이지를 빌드 타임에 한번만 렌더링 하는 것 ... 이후의 hydration과정은 SSR과 같음

정리

빠른 페이지 응답을 보장할 수 있지만
최신 데이터를 반영하기는 어렵기 때문에
페이지 내부 데이터가 변경되지 않는 페이지에 적절한 렌더링 전략

실습

SSR에서 SSG로 바꾸기

pages/index.js

이전에 사용했던 getServerSideProps에서 getStaticProps로만 바꾸면 된다.
```
import { fetchCountries } from "@/api";
```

export default function Home({ countries }) { return (

{countries.map((country) => { return

{country.commonName}

; })}

); }

export const getStaticProps = async () => { //👈🏻 console.log("countires 데이터 불러옴"); // 👈🏻참고 const countries = await fetchCountries(); return { props: { countries, }, }; };

> **참고: `getStaticProps` 내부에 있는 `console.log` 찍힘**
- 빌드 전 npm run dev에서 작동시킬때는 새로고침을 할때마다 서버측에 내용이 나타나지만, 
- 빌드 이후 npm run start로 작동시키면 서버에 나타나지 않는다.






### pages/country/[code].js
- 동적경로는 이 페이지는 위와 같이 단순하게 `getStaticProps`를 사용해서 만들 수 없다.
- 존재하는 경로를 찾아내는 함수가 필요하다.
![](https://velog.velcdn.com/images/forntweb_tk/post/c0a138f9-a274-4429-a6a6-ffb467b3733e/image.png)
![](https://velog.velcdn.com/images/forntweb_tk/post/2a27dc8a-ae3a-4cbe-9d79-8495f6b6a2ee/image.png)

```js
import { fetchCountry } from "@/api";
import SubLayout from "@/components/SubLayout";
import { useRouter } from "next/router";

export default function Country({ country }) {
  // 클라이언트에서 사용
  const router = useRouter();
  const { code } = router.query;

  if (!country) {
    return 존재하지 않는 국가입니다.;
  }
  return (
    
      {country.commonName}
      {country.officialName}
    
  );
}

Country.Layout = SubLayout;

export const getStaticPaths = async () => {
  return {
    paths: [
      //어떤경로가 필요한지 명시
      { params: { code: "ABW" } },
      { params: { code: "KOR" } },
    ],
    fallback: true, // 👈🏻paths에 없는 경로 요청이 오는 경우 처리 옵션 (하단설명참고)
  };
};

export const getStaticProps = async (context) => {
  // 서버측에서 불러옴
  const { code } = context.params;
  let country = null;
  if (code) {
    country = await fetchCountry(code);
  }
  return {
    props: { country },
  };
};

존재하지 않는 경로를 요청하는 경우
1. fallback: false; : 404페이지
2. fallback: "blocking"; : 빌드타임에 생성하지 않은 페이지도 실시간으로 생성해서 제공할 수 있다.
- 존재하지 않는 경로를 요청하면 서버에서 해당 페이지를 생성해서 반환 및 저장해둔다.
- 그 이후 같은 페이지를 요청하면 저장해 둔 페이지를 곧바로 제공한다.
  - 특징: (짧은) 로딩 시간이 생김
1. fallback: true; : 사용자에게 데이터 없는 상태의 페이지를 먼저 보여준 후 데이터를 보냄
- 지정값 외에 경로 요청시 빈 페이지 (존재하지 않는 국가입니다.)를 먼저 내보냈음을 확인할 수 있다.
- 그 이후 데이터 값을 보내주었다.
  - 특징: blocking 방식에 비해 페이지 자체는 빠르게 렌더링되어 사용자 입장에서는 쾌적한 환경이라고 느낄 수 있다.
참고: router객체를 이용해 현재 페이지가 fallback상태인지 구분 가능
- 컴포넌트 내에 다음 코드 추가
```
export default function Country({ country }) {
  const router = useRouter();
  const { code } = router.query;
  if (router.isFallback) {    // 👈🏻
    return Laoding...;
  }
  // ...후략...
}
```

pages/search/index.js

pages/country/[code].js처럼 동적경로를 갖는다고 생각하고 getStaticPaths를 사용할 수 없음 → 이유1. url parameter 활용하는 페이지에서만 getStaticPaths사용 가능 → 이유2. getStaticProps함수 내부에서는 url parameter에 접근가능하지만, qeury string에는 접근 불가 (query stirng 값은 너무 랜덤하다. url parameter는 경우의 수가 한정되어 있다.)

※ 클라이언트 사이드에서 직접 불러오기 fetchSearchResults의 값(검색결과)이 굳이 서버측에서 불러올 필요가 없다면 컴포넌트 내부에서 useRouter훅을 통해 query stirng만 가져오고, 컴포넌트가 페이지에 마운트 되었을 때 쿼리값을 가지고 컴포넌트 내부에서 api를 호출하여 state에 보관하는 방법이 있다.

import { fetchSearchResults } from "@/api";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

export default function Search() {
  const router = useRouter();
  const { q } = router.query;
  const [countries, setCountries] = useState([]);

  const setData = async () => {
    const data = await fetchSearchResults(q); // 👈🏻검색결과 불러오기
    setCountries(data);
  };

  useEffect(() => {
    if (q) {
      setData();
    }
  }, [q]);

  return (
    
      {countries.map((country) => {
        return {country.commonName};
      })}
    
  );
}

[Next.js 마스터리] Next.js페이지 렌더링 -SSR

Thu, 18 Jan 2024 10:31:07 GMT

SSR

(Server Side Rendering, 서버사이드렌더링)

서버 측에서 페이지를 렌더링 하는 것

브라우저에서 /mypage 페이지 요청
서버에서 페이지에 필요한 데이터를 불러와 완성된 mypage.html 생성
서버에서 클라이언트로 mypage.html 반환
클라이언트는 ㉠렌더링이 완료된 페이지를 화면에 ㉡렌더링 시킴

㉠렌더링 : 리액트 컴포넌트와 같이 자바스크립트로 작성되어 있는 페이지를 실제 HTML코드로 변환하는 과정을 말함 ㉡렌더링 : HTML을 화면(브라우저)에 실제로 그려내는 것을 말함
4번 이후 화면 상태는 모든 컨텐츠가 다 그려진 상태이지만 인터렉션은 불가능함 (아직 JS파일을 못 받았음)
서버가 JavaScript Bundle을 보내줌
클라이언트가 JavaScript코드와 HTML요소들을 서로 연결함 (Hydration, 수화)
완성된 웹페이지가 화면에 렌더링

전체과정

SSR의 특징

요청시 서버가 즉각적으로 페이지를 생성해 반환하는 렌더링 전략이다.
CRS에 비해 SEO 측면에서 월등하다.
첫 페이지 로딩속도가 평균적으로 CRS보다 빠르다.

getServerSideProps

Next앱에서 특정 페이지를 SSR방식으로 작동시키는 함수 이름
SSR을 위해 서버측에서 페이지 컴포넌트에게 전달할 데이터를 설정하는 함수
반드시 객체를 반환해야함
이 객체는 반드시 props: {}를 포함해야 함
오직 서버에서만 실행됨
이 함수 내에서는 window.location 과 같이 window객체에 접근 불가 (존재하지 않는 값)
```
export default function Home({ name }) {
return (
  { name }
);
}
```

export const getServerSideProps = async () => { // 👈🏻SSR 함수 return { props: { name: "KOREA", }, }; };



- 출력화면
![](https://velog.velcdn.com/images/forntweb_tk/post/debb9d06-86d7-4dc8-8ced-b4e58d703a9d/image.png)


- 개발자도구 Components 확인
![](https://velog.velcdn.com/images/forntweb_tk/post/b0de48ff-4ae1-4311-be69-31a8759e226a/image.png)


- 서버측에서 미리 렌더링 되었음을 확인하는 방법
  1. (브라우저 화면)우 클릭 - 페이지소스보기
![](https://velog.velcdn.com/images/forntweb_tk/post/8ae324ef-8c98-4e08-9fad-1c59c7e19653/image.png)
  2. 개발자도구 - Network - localhost클릭 (요청시 처음 반환한 html파일)
  ![](https://velog.velcdn.com/images/forntweb_tk/post/357d4afa-90f6-4d60-a58e-91ca2d583b4a/image.png)








### 서버측 출력 / 클라이언트측 출력
```js
export default function Page() {
  console.log("2");   
  useEffect(() => {   // 브라우저에서만 출력 (컴포넌트 마운트는 서버측에서 발생하지 않음 )
    console.log("3"); 
  }, []);
  return ...;
}

export const getServerSideProps = async () => {
  console.log("1");   // 서버에서만 출력 (새로고침할때마다)
  return {
    props: {},
  };
};

서버측 콘솔에서 출력되는 콘솔 메세지 : 1, 2
클라이언트측 콘솔에서 출력되는 콘솔 메세지 : 2, 3

2번의 경우 : 서버에서 렌더링하기 위해 한번 실행되고, 그 후 브라우저에서 Hydration과정 끝난 후 한번더 마운트 되어 실행되기 때문에 양쪽에서 출력 된다. (서버 → 브라우저)

Query String 동적 경로

~/search?q={검색어}

export default function Search() {
return ...;
}

export const getServerSideProps = async (context) => { const { q } = context.query; // 👈🏻Query String으로 전달된 값 q에 접근 return { props: {}, }; };



## 실습
![](https://velog.velcdn.com/images/forntweb_tk/post/68dd7664-cb2c-4b41-b3e3-3bb9356ffcb2/image.png)








### api.js (기존 사용 코드)
```js
import axios from "axios";  // ※ axios 라이브러리 설치하기

// 전체 국가 데이터
export async function fetchCountries() {
  try {
    const response = await axios.get("https://naras-api.vercel.app/all");
    return response.data;
  } catch (e) {
    return [];
  }
}

// 검색 결과 데이터
export async function fetchSearchResults(q) {
  try {
    const response = await axios.get(`
  https://naras-api.vercel.app/search?q=${q}
  `);

    return response.data;
  } catch (e) {
    return [];
  }
}

// 특정 국가 데이터
export async function fetchCountry(code) {
  try {
    const response = await axios.get(
      `https://naras-api.vercel.app/code/${code}`
    );
    return response.data;
  } catch (e) {
    return null;
  }
}

pages/index.js

import { fetchCountries } from "@/api";

export default function Home({ countries }) {
  return (
    
      {countries.map((country) => {
        return {country.commonName};
      })}
    
  );
}

export const getServerSideProps = async () => {
  // API호출 코드가 필요함
  const countries = await fetchCountries();
  return {
    props: {
      countries,
    },
  };
};

출력 화면
컴포넌트 확인
네트워크 확인
클라이언트측 네트워크 확인 : 아무것도 없음

pages/search/index.js (동적경로 사용)

import { fetchSearchResults } from "@/api";
import SubLayout from "@/components/SubLayout";

export default function Search({ countries }) {
  return (
    
      {countries.map((country) => {
        return {country.commonName};
      })}
    
  );
}

Search.Layout = SubLayout;

export const getServerSideProps = async (context) => { // 👈🏻 매개변수 이용
  //1.검색결과 api호출
  //2.props리턴
  const { q } = context.query; // 쿼리스트링 꺼내오기
  let countries = [];
  if (q) {
    countries = await fetchSearchResults(q);
  }
  return {
    props: { countries },
  };
};

컴포넌트 확인
네트워크 확인

pages/country/[code].js

import { fetchCountry } from "@/api";
import SubLayout from "@/components/SubLayout";
import { useRouter } from "next/router";

export default function Country({ country }) {
  // 클라이언트에서 사용
  const router = useRouter();
  const { code } = router.query;
  return (
    
      {country.commonName}
      {country.officialName}
    
  );
}

Country.Layout = SubLayout;

export const getServerSideProps = async (context) => {
  // 서버측에서 불러옴
  const { code } = context.params; //url parameter
  let country = null;
  if (code) {
    country = await fetchCountry(code);
  }
  return {
    props: { country },
  };
};

출력 화면

URL parameter 불러오는 방식 차이 이해하기

클라이언트측에서 이용하는 경우 : 컴포넌트 내부에서 불러옴 (브라우저에서 hydration과정이 일어난 뒤에 동작)
```
const router = useRouter(); // 리액트훅을 사용
const { code } = router.query;
```
서버측에서 이용하는 경우 : context객체에서 불러옴
```
const { code } = context.params;
```

[Next.js 마스터리] Next.js페이지 라우터

Thu, 18 Jan 2024 09:17:03 GMT

요청 : / 👉 폴더: pages/index.js
요청 : /search 👉 폴더: pages/search.js
- 라우트별로 폴더 분리가능
요청 : 동적인 경로1 /country/{code} 👉 폴더: pages/country/[code].js
요청 : 동적인 경로2 /country/{code}/{year} 👉 폴더: pages/country/[...code].js (Catch-All)
요청 : 동적인 경로3 /country/{code?}(url파라미터가 없는 경우) 👉 폴더: pages/country/[[...code]].js (Optional Catch-All)

Next.js의 페이지 라우터 특징

페이지 라우터는 pages 폴더의 구조를 기반으로 페이지 라우팅을 제공한다.
페이지 라우터는 동적 경로 또한 쉽게 대응이 가능하다.
페이지 라우터를 이용하면 pages폴더의 구조 배치 이외에 별다른 라우팅 코드를 작성하지 않아도 된다.
페이지 라우터는 Next13버전(App 라우터)에서도 기본적으로 제공된다.

동적경로 생성 방법

"~/post/{포스트 아이디}" → /pages/post/[post_id].js

-[post_id].js페이지

import { useRouter } from "next/router";

export function PostDetail() {
  const router = useRouter();

  const { code } = router.query; // 👈🏻URL Parameter로 전달된 post_id에 접근

  return ;
}

CSR 방식 페이지 이동

(※ href ※)

//index.js
import Link from "next/link";

export default function Home() {
  const code = "KOR";
  return (
    
      Home Page
      
        Search Page 이동 // 👈🏻 일반문자 형태
      
      
        
          {code}페이지로 이동
        
      
    
  );
}

※ react router와 헷갈리지 않기

버튼 클릭 페이지 이동

export function PageA() {
  const router = useRouter();
  const onClick = () => {
    router.push("/") // 👈🏻 push 함수사용
  };
  return (
    
  );
}

참고

router.replace() : 뒤로가기 방지하면서 페이지 이동
router.back() : 뒤로가기
router.reload() : 새로고침

페이지 별 레이아웃 적용하기

./pages/_app.js

export default function App({ Component, pageProps }) {
const EmptyLayout = ({ children }) => <>{children};
const Layout = Component.Layout || EmptyLayout;

return (
  
    
  
);
}

./pages/post.js

export function Post() {
return ...;
}
Post.Layout = ({ children }) => {children}
; // 👈🏻

./pages/about.js
```
export function About() {
return ...;
}
```
- /post페이지는
  태그로 감싸져 렌더링된다.
- /about페이지는 그대로 렌더링 된다.
- App컴포넌트의 Layout변수에는 /post페이지일 경우
  태그로 페이지를 감싸는 레이아웃이 적용되고 /about페이지일 경우 아무런 레이아웃도 적용되지 않는다.

[Next.js마스터리] Next.js 소개

Wed, 17 Jan 2024 09:55:21 GMT

Next.js

Vercel이 개발한 오픈소스 자바스크립트 프레임워크
React.js에 다양한 기능을 제공하는 확장판

프레임워크 vs 라이브러리

	프레임워크	라이브러리
기능 구현의 주도권	프레임워크가 주도권을 가짐	프로그래머가 주도권을 가짐
ex)페이지 라우팅을 구현해야한다면...	프레임워크가 정해놓은 기능을 이용해 정해놓은 방법대로 구현해야 함	프로그래머가 원하는대로 구현하면 됨, 무슨 도구를 어떻게 쓰던 자유롭다
자유도	낮음	높음
기능	많은 기능이 제공 됨	대다수의 기능 제공 안됨
비유	자동차, 비행기(제품)	톱, 망치 (도구)

서버사이드렌더링

CSR방식으로 동장하는 리액트 앱의 단점

CSR은 검색 엔진 최적화(SEO)에 불리함 : 검색엔진이 사이트에서 정보를 수집할 때 가장 먼저 받는 html파일을 저장해둠 → 리액트로 개발한 서비스에서는 빈껍데기 html파일을 받음

검색 엔진 최적화(SEO) (Search Engine Optimization) 구글, 네이버, 다음 등의 검색 포털 서비스의 검색 결과에 더 잘 노출되게 하는 것

SSR과 CRS를 동시에 제공하는 NEXT.js

[Next.js마스터리] React 소개

Tue, 09 Jan 2024 12:22:03 GMT

React.js

Meta에서 만든 오픈소스 자바스크립트 라이브러리

1. 컴포넌트 기반의 UI 표현

페이지에 공통적으로 사용되는 (자주 중복되는) UI요소들은 컴포넌트 단위로 모듈화를 시킨다.

2. 빠르고 편리한 업데이트 구현

웹에서의 업데이트는 곧 상호작용(interaction)을 의미함 → 사용자의 행동(버튼클릭, 메세지 입력 등)에 웹이 실시간으로 반응하는 것

한 페이지 내에서도 여러 정보를 얻을 수 있게 됨

Virtual DOM

웹 브라우저의 렌더링 과정

(Critical Rendering Path)

계층화

브라우저가 오른쪽과 같이 해석하기 편한 형태로 계층화 시킨다.

Render Tree
Layout
Painting

웹 브라우저가 화면을 업데이트 하는 과정

JavaScript의 DOM 수정
업데이트 시 주의사항 : Reflow, Repaint 최소화 필수
- 나쁜코드
- 좋은코드
따라서 동시에 일어나는 업데이트를 최대한 모아서 시켜줘야하는데, 이것은 서비스 규모가 커질수록 점점 어려워진다. → 해결방안: Virtual DOM

Vite로 react 시작하기

react를 사용하기 위해서는 다음과 같은 단계를 거쳐야한다.

Node.js 패키지 생성하기 : npm init
리액트 설치하기 : npm install react
기타 도구들 설치하고 설정하기 (입문자에게 권장하기 어려움)

따라서 위의 복잡한 단계들을 한번에 처리해주는 도구 Vite를 사용한다. vite: 세팅된 react앱을 자동으로 생성해준다.

vite 명령어
```
npm create vite@latest
```
프로젝트 이름 설정
프레임워크 설정
언어 설정

package.json 살펴보기

dependencies : 패키지 안에 어떤 라이브러리들이 설치되어 있는가 ※ npm install로 라이브러리 설치
devDependencies : dependencies와 같이 어떤 라이브러리들이 필요한지 명시하지만, 실제로 프로젝트를 build해서 서버에 올릴 필요가 없는 않은 개발용 라이브러리

node_modules 살펴보기

react앱을 만들기 위해 많은 라이브러리들이 필요함.

public폴더 살펴보기

이미지, 폰트, 동영상 등 코드가 아닌 정적인 파일 보관

src폴더 살펴보기

src
ㄴ assets
   ㄴ react.svg
ㄴ App.css
ㄴ App.jsx
ㄴ index.css
ㄴ main.jsx

assets폴더 : 소스코드에서 직접 접근해서 사용하는 이미지나 폰트를 보관하는 폴더

그 외

.eslintrc.cjs : eslint도구의 옵션 설정 (개발자들간의 코드스타일 통일)
.gitignore : github에 올리지 않을 내용
index.html : react파일의 틀 역할 (여기에 직접 코드를 입력하지 않음, id="root"의 div아래 추가)
vite.config.js : vite도구의 옵션 설정

vite 실행

npm run dev

리액트 앱 동작원리

리액트 앱 실행시 나오는 localhost 주소는 어떻게 생성된걸까?

도메인 : 고유한 주소 (ex) https://naver.com)

`https://localhost:5173`

localhost : 우리의 컴퓨터를 지칭하는 주소
5173 : 포트번호
여러개의 서버 동작 예시

※ 내 컴퓨터가 아닌 다른 컴퓨터에서는 접속하지 못함

리액트가 화면 요소를 렌더링 하는 방법

웹 서버에서 특정 포트번호(5173)에 요청
html파일을 브라우저에 보내줌

하지만 태그 안에는 특별한 요소가 없음
사실 태그 안의