hongppa324/next-todolist

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

next-todolist

next-todolist's Issues

[Next.js] 개인과제 피드백 - 김병연 튜터

안녕하세요, 승찬님.

이번 과제를 정말 잘 수행해주셨습니다. Next.js를 사용해 보니 어떤가요? 과제를 하고나서 개인적으로 어떤 점들이 좋았는지, 불편했는지 또는 어려운 점은 없었는지 튜터님들과 경험담을 나누면 좋을 것 같아요.

적은 시간에도 불구하고 요구 사항도 모두 구현을 하셨고, 코드도 잘 작성하셔서 이번 피드백은 크게 드릴 게 없을 것 같아요. 결국 제가 해드릴 건 디테일한 부분들을 콕 집어드리는 것 밖에 없더라구요.

사용자 경험(UX) 개선

next-todolist/src/app/todos-csr/page.tsx

Lines 22 to 44 in a4de015

	if (isPending) {
	return <p>로딩 중입니다...!</p>;
	}
	if (isError) {
	return <p>오류가 발생했습니다.</p>;
	}
	if (!data) {
	return null;
	}
	const doingList: Todo[] = data.filter((todoItem: Todo) => !todoItem.isDone);
	const doneList: Todo[] = data.filter((todoItem: Todo) => todoItem.isDone);
	const moveToStatistics = () => route.push("/report");
	return (
	<>
	<TodoForm />
	<h2>할일 목록</h2>
	<TodoList todos={doingList} />
	<h2>완료한 목록</h2>
	<TodoList todos={doneList} />
	<button onClick={moveToStatistics}>통계 바로가기</button>
	</>
	);

저는 todos의 pending 상태 처리를 todo 목록에서 하는 것이 어떨까? 싶었어요. 데이터를 불러오는 화면에서만 로딩 UI를 표시하고, 나머지는 바로 표시가 되도록 말이죠..!

import React from "react";

next-todolist/src/app/todos-csr/page.tsx

Line 2 in a4de015

import React from "react";

곳곳에 해당 코드가 보이네요. 아마 컴포넌트를 만들 때 코드 스니펫으로 만드신 것 같아요. 이제는 트랜스파일러가 자동으로 변환을 해주기 때문에, 해당 코드는 작성하지 않아도 됩니다!

물론, 성능에는 별 차이가 없을 거에요. 하지만! 작성하지 않아도 된다면 최대한 코드를 줄이고, 혼란을 줄만한 요소를 없애는 게 좋다고 생각해요. 👍

scripts 추가

본인 또는 프로젝트를 실행하는 누군가의 편의를 위해 json-server도 실행하는 scripts를 추가 해주면 좋을 것 같아요.

• package.json

...
"scripts": {
    ...
    "server": "json-server --watch db.json --port 4000"
},