피드백 - 박가현 튜터

Typescript 개인 과제

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

목표 : Next.js의 라우팅과 렌더링의 핵심 개념을 이해할 수 있는 TodoList를 만듭니다.

(1) 애플리케이션 전역에서 사용할 내비게이션 만들기

(2) react-query 세팅

(3) json-server 세팅

(4) 백엔드를 구축합니다.

(5) 각 페이지를 구축합니다.

about 페이지 : companyInfo 정보를 불러와서 회사에 대한 소개를 구현하는 페이지 (SSG)
report 페이지 : todos의 통계 정보를 구현하는 페이지, 매 10초마다 결과가 갱신 (ISR,revalidate,useRouter로 페이지 이동)
todos CSR 페이지 : react query를 이용해 todoList의 목록을 만드는 페이지 (CSR, CRUD)
todos SSR 페이지 : todoList의 목록을 나타내는 페이지 (SSR, Link 태그로 페이지 이동)
할일정보통계보러가기 버튼 생성 : CSR, SSR 페이지에만 존재, 버튼 클릭 시 report 페이지로 이동

export type Company = {
  name: string;
  description: string;
  image: string;
};

export type Todo = {
  id: string;
  title: string;
  contents: string;
  isDone: boolean;
};

export type NewTodo = Pick<Todo, "title" | "contents">;
export type EditTodo = Pick<Todo, "id" | "isDone">;

	{item.isDone ? (
	<button className="btn btn-primary">Done</button>
	) : (
	<button className="btn btn-primary">Not done</button>
	)}