Next.js를 이용하여 Todolist 구현해보기

오늘의 미션

통계정보, 주기적인 업데이트 페이지, 일반 리스트 페이지가 들어간 렌더링 종합세트 TodoList 만들기

전역에서 사용할 네비게이션 만들기

• about,report,todos-csr,todos-ssr
• RootLayout에 삽입하여 모든 페이지에서 접근이 가능케하기

npm install next@latest react@latest react-dom@latest

일단 next로 install진행한 후,

가장 최상단에 있는 layout.tsx에 4개의 네브바에 해당되는 컴포넌트도 만들어줘야한다

정상적으로 파일, 폴더를 생성해줬고,

현재 이런 문제가 발생하고 있다.

물론 네브바로 클릭하면 정상적으로 잘 페이지 이동은 되고 있는 상황.

실수로 body 안에 네브태그를 넣어주지 않았었다 하하.. 휴먼 에러;;

react-query 세팅

• QueryProvider를 이용하여 react-query를 세팅합니다
  
  일단 설치해주고,
  
  provider.tsx파일에 쿼리 관련 세팅을 해준다
  분석을 해보자면

일단 query 관련 코드를 사용하기 위해 "use client"로 클라이언트 컴포넌트로 사용

const queryclient = new QueryClient();

새로운 QueryClient 인스턴스를 생성함으로써, 서버 상태 관리가 가능하게 함
그리고 이 클라이언트는 각 요청의 캐시, 자동 재요청, 상태 관리를 처리 할 수 있음. 재사용하지 않으면 매번 새로운 인스턴스가 생성되어 캐시의 이점이 사라질 수 있음

QueryClientProvider는 react-query의 context를 제공하여 하위 컴포넌트도 사용할 수 있게 만들어주는 용도
client 속성으로 생성한 queryclient를 전달하여 react-query가 사용할 클라이언트를 지정하는거임

React.PropsWithChildren은 typescript에서 있는 컴포넌트에 자식 컴포넌트를 포함할 수 있도록 하는 타입

QueryProvider컴포넌트는 최상위 레벨에서 QueryClientProvider를 설정하였기 때문에 react-query기능을 사용할 수 있게 만들어 줌.

이렇게 provider.tsx에서 세팅한 이유는,

• 중앙 집중식 관리
• 캐시 사용 최적화
  : 동일한 QueryClient 인스턴스를 재사용함으로써, react-query의 캐싱 매커니즘을 최적화하고, 불필요한 데이텨 요청을 줄일 수 있음
• 유지 보수 용이성

그 다음에 최상단 layout에서 children을 QueryProvider로 감싸면 됨!!

json-server 세팅

db를 따로 배우질 않아서 json-server를 db로 가정하고 구현하기로 함

일단 설치해주고,

db.json파일을 생성 후, 더미 데이터 만들기

package.json 스크립트에 직접 json-server 실행 명령어 추가한 모습어 추가한 모습

export async function GET(request: Request) {
  const response = await fetch("http:localhost:3000/companyInfo");
  const companyInfo = await response.json();

  if (!companyInfo) {
    return new Response("companyInfo is not found", { status: 404 });
  }

  return Response.json({ companyInfo: [...companyInfo, { test: "test" }] });
}

export async function POST(request: Request) {
  const { id, name, description } = await request.json();

  const response = await fetch("http:localhost:3000/companyInfo", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ id, name, description, isDone: false }),
  });

  const companyInfo = await response.json();

  return Response.json({ companyInfo });
}

export async function PATCH(request: Request) {
  const { id, name, description, isDone } = await request.json();

  const response = await fetch(`http://localhost:3000/companyInfo/${id}`, {
    method: "PATCH",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name, description, isDone }),
  });

  if (!response.ok) {
    return new Response("Failed to update company info", {
      status: response.status,
    });
  }

  const updatedCompanyInfo = await response.json();

  return Response.json({ updatedCompanyInfo });
}

export async function DELETE(request: Request) {
  const { id } = await request.json();

  const response = await fetch(`http://localhost:3000/companyInfo/${id}`, {
    method: "DELETE",
  });

  if (!response.ok) {
    return new Response("Failed to delete company info", {
      status: response.status,
    });
  }

  return new Response("Company info deleted successfully", { status: 200 });
}

GET, POST, PATCH, DELETE 하나씩 로직 구성했는데 잘 될지는 추후 체크해볼 예정,

각각 컴포넌트 폴더에 렌더링에 관련된 파일 로직을 짠 후,

• about 페이지는 SSG / companyinfo 정보(회사소개)
• report 페이지는 ISR / todos의 통계 정보 / 10초마다 정보 갱신
• todos CSR 페이지는 todoList의 목록 / react query이용 CRUD 가능 / useQuery, useMutation, invalidateQueries 개념 모두 활용, 할일정보통계보러가기 버튼 - useRouter -> report 페이지로 이동
• todos SSR 페이지는 todoList의 목록 / cud처리 x / 할일정보통계보러가기 -> Link태그로 report 페이지로 이동
  을 만들어 볼건데.... 듣기만 해도 복잡하다잉 배우자마자 바로 적용해서 구현해보는게 아니여서 ㅠㅠ

SSG

이 단계에서 엄청나게 많은 오류를 범했는데,

일단
1. restfulAPI로 만든 route.ts파일을 참고한 GET요청 같은걸 thunder client에서 하려는데 자꾸 connect 오류가 뜬점
2. 실제로 json-server는 잘 실행되는데 SSG컴포넌트로 렌더링한 데이터 값이 about페이지에 표현이 안되는점

1번같은 경우는

export async function GET(request: Request) {
  const response = await fetch("http://localhost:4000/companyInfo");
  const companyInfo = await response.json();

  if (!companyInfo) {
    return new Response("companyInfo is not found", { status: 404 });
  }

  return Response.json({ companyInfo: [...companyInfo, { test: "test" }] });
}

export async function POST(request: Request) {
  const { id, name, description } = await request.json();

  const response = await fetch("http//:localhost:4000/companyInfo", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ id, name, description, isDone: false }),
  });

  const companyInfo = await response.json();

  return Response.json({ companyInfo });
}

api/company/route.ts 에서 이런식으로 GET요청 함수를 만들었고,

thunder client에서 http://localhost:3000/companyInfo로 GET요청을 하여도 서버연결이 되지 않았다

그래서 http://localhost:4000/companyInfo으로도 바꿔보고

route.ts가 로직이 잘못되었는지 체크해봐도 안되서 공식문서를 찾아보니

route.ts를 사용하기 위해선 즉 route handler를 사용하기 위해선 app>api>route.ts파일이 존재했어야 했고,

해당 경로로 API호출을 했더니 정상적으로 실행되는 것을 확인할 수 있었다.

이제 실제 fetch를 통해 about페이지에 데이터 렌더링만 문제없이 하면 되는데,
현재는 json-server에서 데이터 불러오는건 전혀 문제가 없고 그걸 구현하는 로직만 문제라고 생각된다(console에 아무것도 안뜸)

근데?? SSG.tsx안의 내용도 localhost:4000에서 localhost:3000/companyInfo로 바꾸니 정상적으로 렌더링이 성공적으로 되었다.

결국 about페이지는 성공!!(SSG)

ISR 페이지

10초마다 revalidate만 시키는 SSR렌더링 기법이라 보면 된다

단 기존 SSG렌더링 페이지와 동일한 문제점이 다시 나왔는데
about페이지 데이터 렌더링을 성공한 줄 알았으나, json-server를 4000포트로 서버를 열었음에도, fetch를 3000으로 하였을 시에만 json더미 데이터가 표현되는 것이였다.

그 원인은, 두 컴포넌트 다 마찬가지로

  const todosData: Todo = todos[0];

뒤에 있는 [0]을 넣어주지 않아서 발생한 문제인데

지금와서 생각해도 말이 안되는 해결책이였고,

엄청난 경우의 수를 다 구현해본 결과, 기존에 남아있던 캐시때문에

말도 안되는 곳에 있는 url주소를 불러왔어도 더미 데이터가 가져와졌다고 판단한다.

앞으로 조심하기!

===============
그리고 원인 확실히 찾아 냈다

캐시에 문제가 있다 생각하여 .next를 삭제하고 시크릿모드로 들어가 yarn dev를 다시 해보니 localhost:3000포트에서는 fetch가 안되는걸로 확인이 되었다... 이거 하나 확인하자고 하루를 버렸다 하하.... 빨리 취업해서 더 빠른 성장을 하고싶다 쟁쟁한 선배들 옆에서 ㅠㅠ 그래야 이런 불필요한 시간을 줄일텐데..

그리고 CSR/SSR도 렌더링까지만 구현하였고, 추후 CRUD도 다뤄볼 예정