Next.js로 TodoApp 만들기

오늘은 ChatGPT와 함께 Next.js로 TodoApp 만들기를 한번 해보겠습니다. 참고로 Next.js 공식가이드도 첨부 합니다. 모르는 부분이나 TodoApp 외 궁금한 부분들은 공식 문서를 참고 하시기 바랍니다.

먼저 ChatGPT에게 아래와 같이 Next.js로 TodoApp을 만들어달라고 요청 합니다.

ChatGPT프롬프트
I’m trying to build a simple todo webapp, give me step by step instruction with code example
1) design & css: modern style design
2) teck stack: nextjs 
3) features: list, add, update, delete

아래와 같이 ChatGPT가 답변을 해줍니다. 참고로 답변은 프롬프트 지니를 통해 번역된 결과 입니다.

먼저 Next.js로 TodoApp 작성 하는 코드를 잘 설명해주고 있습니다. Next.js로 TodoApp만들기 답변 그리고 위에서 요청한 modern style 의 css 까지 작성을 해주고 있습니다. Next.js로 TodoApp만들기 css예시

그럼 ChatGPT가 알려준 것 처럼 Next.js로 목록, 추가, 업데이트 및 삭제를 포함한 기능을 가진 현대적인 스타일의 디자인으로 TodoApp을 만드는게 가능한지 직접 만들어 보겠습니다.

1. 새 Next.js 프로젝트 만들기

npx create-next-app 명령을 사용하여 새 Next.js 프로젝트를 만듭니다. 이름을 지정하거나 기본 이름을 사용할 수 있습니다.

npx create-next-app todoapp-webapp

2. 의존성 설치

이 부분은 참고로 프로젝트 생성 하면서 자동으로 설치가 되어 있습니다. 만약 설치가 안되어 있거나 추가적인 의존석 설치가 필요 할경우 아래와 같이 설치를 해줍니다.

yarn install react react-dom

3. 새 페이지 만들기:

src/pages 디렉터리에서 index.js에 새 파일을 만듭니다. 그리고 아래와 같이 작성 해줍니다.

src/pages/index.js
import { useState } from "react";
import styles from "../styles/Home.module.css";

export default function Home() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState("");

  const handleAddTodo = (event) => {
    event.preventDefault();
    if (newTodo.trim() === "") return;
    setTodos([...todos, newTodo.trim()]);
    setNewTodo("");
  };

  const handleUpdateTodo = (event, index) => {
    event.preventDefault();
    const updatedTodo = event.target.value.trim();
    if (updatedTodo === "") return;
    const newTodos = [...todos];
    newTodos[index] = updatedTodo;
    setTodos(newTodos);
  };

  const handleDeleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div className={styles.container}>
      <h1 className={styles.title}>My Todo List</h1>
      <form className={styles.form} onSubmit={handleAddTodo}>
        <input
          className={styles.input}
          type="text"
          placeholder="Add a new todo..."
          value={newTodo}
          onChange={(event) => setNewTodo(event.target.value)}
        />
        <button className={styles.button} type="submit">
          Add
        </button>
      </form>
      <ul className={styles.list}>
        {todos.map((todo, index) => (
          <li key={index} className={styles.listItem}>
            <input
              className={styles.checkbox}
              type="checkbox"
              id={`todo-${index}`}
            />
            <label className={styles.label} htmlFor={`todo-${index}`}>
              <input
                className={styles.editInput}
                type="text"
                value={todo}
                onChange={(event) => handleUpdateTodo(event, index)}
              />
              <span>{todo}</span>
            </label>
            <button
              className={styles.deleteButton}
              onClick={() => handleDeleteTodo(index)}
            >
              X
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

4. 앱 스타일 지정

CSS 또는 Tailwind CSS와 같은 스타일 라이브러리를 사용하여 앱 스타일을 지정합니다. 여기서는 Home.module.css라는 모듈 CSS 파일을 사용하고 있습니다.

styles/Home.module.css
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  background-color: #f6f6f6;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.title {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 40px;
}

.form {
  display: flex;
  margin-bottom: 20px;
}

.input {
  flex-grow: 1;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 1.2rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.button {
  background-color: #2ecc71;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  margin-left: 10px;
  font-size: 1.2rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.listItem {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.checkbox {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  cursor: pointer;
}

.checkbox:checked + .label span {
  text-decoration: line-through;
  opacity: 0.5;
}

.label {
  flex-grow: 1;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #ccc;
  padding: 10px;
}

.editInput {
  display: none;
  border: none;
  border-radius: 5px;
  padding: 5px;
  font-size: 1.2rem;
  margin-right: 10px;
}

.listItem:hover .deleteButton {
  opacity: 1;
}

.deleteButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  margin-left: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

5. 앱 배포

다른 사람이 액세스할 수 있도록 Vercel 또는 Netlify와 같은 호스팅 서비스에 앱을 배포합니다.

배포 관련 내용은 간단히 설명이 되어 있는데 배포 관련 내용은 따로 정리해볼 예정이니 참고 부탁 드리겠습니다.

6. 실행 및 확인

위에서 만들어본 웹사이트를 실행해보고 확인해보겠습니다.

yarn dev

위의 순서로 따라서 만들어보니 아래와 같은 TodoApp 페이지가 만들어졌습니다. TodoApp 웹사이트 화면

간단한 디자인 및 CSS파일 까지 간단한 TodoApp 페이지 이기는 하지만 코드 작성을 잘해주고 돌아가는 수준 까지 작성 해주어서 개인적으로는 ChatGPT가 작성 해준 수준에 많이 놀랐습니다.

7. 마치며

이렇게 간단한 TodoApp 웹사이트를 만들어보면서 Next.js를 사용해보고 배워보았는데 도움이 되셨나요? TodoApp 웹사이트를 만들어서 성공 하셨다면 이제 시작입니다. 지금 만든 웹사이트가 어떻게 동작 하는지 이해 하기 위해 Next.js와 html/css에 대해 더 깊게 공부해 볼수 있습니다. 또한 디자인을 더 좋게 만들 수도 있고 기능을 추가 해볼 수도 있습니다. 아니면 조금더 복잡한 새로운 웹사이트를 만들어보는 것도 좋은 방법이 될 수 있습니다. 어떠한 개선 방향이든지 좋습니다. 간단한 TodoApp 웹사이트에서 시작 해서 새롭게 시도해보고 싶은 방향을 찾아 시도해보시면서 개발 경험과 개발 역량을 키워가시길 응원하겠습니다.

참고로 완성된 소스 코드는 GitHub 링크에서 확인 하실수 있습니다.

https://github.com/DeveloperFastlane/study-examples/tree/main/todoapp-webapp

Next.js로 TodoApp 만들기

1. 새 Next.js 프로젝트 만들기​

2. 의존성 설치​

3. 새 페이지 만들기:​

4. 앱 스타일 지정​

5. 앱 배포​

6. 실행 및 확인​

7. 마치며​