Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
53 changes: 52 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,52 @@
# 리액트 투두 앱 만들기 미션 레포
# 📝 React Todo List

React를 활용하여 구현한 Todo List 애플리케이션입니다.
할 일 추가, 삭제, 완료 상태 관리와 함께 localStorage를 이용해 데이터를 유지하도록 구현했습니다.

---

## 🚀 주요 기능

- 할 일 추가
- 할 일 삭제
- 완료 상태 토글 (checkbox)
- localStorage를 활용한 데이터 유지

---

## 🛠️ 기술 스택

- **Frontend**: React (Vite)
- **State Management**: Custom Hook (`useTodo`)
- **Styling**: CSS
- **Data Persistence**: localStorage

---

## 📁 프로젝트 구조

```bash
.
├── App.jsx
├── assets
├── components
│   ├── TodoForm.jsx
│   ├── TodoItem.jsx
│   └── TodoList.jsx
├── dto
├── hooks
│   └── useTodo.js
├── index.css
└── main.jsx
```

## ⚙️ 실행 방법

```bash
npm install
npm run dev
```

## 📷 화면

![Todo App Screenshot](./src/assets/images/screenshot.png)
29 changes: 29 additions & 0 deletions eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{js,jsx}'],
extends: [
js.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
rules: {
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
},
},
])
13 changes: 13 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>react-todo-mession1</title>

Choose a reason for hiding this comment

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

medium

프로젝트 이름에 오타가 있습니다. 'mession1'을 'mission1'으로 수정하는 것이 좋습니다.

Suggested change
<title>react-todo-mession1</title>
<title>react-todo-mission1</title>

</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
11 changes: 11 additions & 0 deletions jsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// jsconfig.json

{
"compilerOptions": {
"module": "commonjs",

Choose a reason for hiding this comment

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

medium

package.json에서 "type": "module"로 ES 모듈을 사용하고 있으므로, jsconfig.jsonmodule 옵션도 esnext 또는 es2020과 같이 ES 모듈을 지원하는 값으로 설정하는 것이 일관성을 유지하고 최신 JavaScript 기능을 활용하는 데 좋습니다. commonjs는 Node.js 환경에서 주로 사용되는 모듈 시스템입니다.

Suggested change
"module": "commonjs",
"module": "esnext",

"target": "es6",

Choose a reason for hiding this comment

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

medium

최신 JavaScript 기능을 활용하기 위해 targetes6 대신 es2020 또는 esnext로 업데이트하는 것을 고려해 보세요. 이는 ESLint 설정의 ecmaVersion: 'latest'와도 더 잘 일치합니다.

Suggested change
"target": "es6",
"target": "esnext",

"jsx": "react-jsx",
"checkJs": true
},
"exclude": ["node_modules"]
}
Loading