Skip to content

[AIBE3/1팀/김지윤] TODO APP 만들기 완료#31

Open
jiyoon-00 wants to merge 3 commits intosik2:mainfrom
jiyoon-00:main
Open

[AIBE3/1팀/김지윤] TODO APP 만들기 완료#31
jiyoon-00 wants to merge 3 commits intosik2:mainfrom
jiyoon-00:main

Conversation

@jiyoon-00
Copy link

No description provided.

@jiyoon-00
Copy link
Author

리액트 투두 앱 만들기 미션 레포

React-Vite Todo App

간단한 React + Vite 기반 Todo 리스트 애플리케이션입니다.
로컬스토리지에 할 일 데이터를 저장하여 페이지 새로고침 후에도 유지됩니다.


개발 기간

📅 2025.07.08 – 2025.07.09


주요 기능

  • ✅ 할 일 추가
    • 인풋에 텍스트 입력 후 Enter 또는 “등록” 버튼 클릭
  • ☑️ 완료 체크
    • 체크박스를 클릭하면 완료 상태로 토글
    • 완료된 항목은 취소선 스타일 적용
  • 🗑️ 삭제
    • “삭제” 버튼 클릭으로 해당 할 일 즉시 제거
  • 💾 localStorage 연동
    • 상태 변경 시 자동 저장 → 새로고침해도 데이터 유지 \
  • 📆 날짜/시간 표시
    • 페이지 상단에 실시간으로 현재 날짜와 시간을 보여줍니다.

기술 스택

  • 프레임워크: React (v18) + Vite
  • 스타일: Tailwind CSS
  • 상태 관리: React Hooks (useState, useEffect, useRef)
  • 데이터 지속성: localStorage (커스텀 유틸 getStorage/setStorage)

실행 이미지

image

Copy link

@kku1403 kku1403 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드 잘 봤습니다. 수고하셨어요 👍

// src/utils/storage.js

export const getStorage = (key) =>
JSON.parse(localStorage.getItem(key) || "null");
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

null 값일 때의 처리 로직이 깔끔하고 좋네요!

처음에는 왜 null이 아니라 "null"이지? 했는데 JSON.parse() 때문이었군요 최곱니다 👍

다만 getStorage에 2번째 인자로 초기값을 넣어주면 useTodos에서 로컬 스토리지에 저장된 데이터를 불러올 때 null처리를 따로 안해줘도 될 것 같아요. 참고하시면 좋을 것 같습니다

];
});
useEffect(() => {
localStorage.setItem("todos", JSON.stringify(todos));
Copy link

@kku1403 kku1403 Jul 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

storage.js에서 정의한 setStorage가 아니라 localStorage의 내장 함수를 사용하고 계신데 특별한 이유가 있나요?

@SWWWin
Copy link

SWWWin commented Jul 11, 2025

수고하셨습니다! 코드 잘 봤습니다.

@@ -0,0 +1,43 @@
import { useRef, useState, useEffect } from "react";
import { getStorage, setStorage } from "../utils/storage";

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기 setStorage import는 하셨는데 어디서 사용하신건가요??

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants