React 연습 프로젝트

React를 연습하기 위한 웹 페이지입니다! 🚀

프로젝트 소개

• 목적: React 학습 및 연습
• 기능: To-Do 리스트, 게시판, 로그인, 어드민 등 다양한 화면 구현
• 특징: 프론트엔드 화면만 구현 (백엔드 연동 X)

기술 스택

• React 19 - UI 라이브러리
• Vite 8 - 빠른 개발 서버와 빌드 도구
• SCSS - 스타일링
• react-router-dom - URL 기반 라우팅
• TipTap - 리치 텍스트 에디터

접속 주소

• 개발 서버: http://localhost:5173

개발 환경

• Node.js v20.20.2
• npm 10.8.2

시작하기

# 설치
npm install

# 개발 서버 실행
npm run dev

# 빌드
npm run build

VS Code 단축키 메모

단축키	기능
Ctrl+Shift+V	마크다운 미리보기 (새 탭)
Ctrl+K V	마크다운 미리보기 (옆에서 열기)

구현 기능

To-Do 리스트

1. 할 일 추가 / 삭제
2. 완료 토글
3. 수정 모달
4. 탭 필터링 및 정렬
5. 통계 표시
6. localStorage 연동
7. 시작일 / 마감일 설정
8. 컬러 라벨 및 상세 페이지

게시판

1. 게시글 CRUD
2. TipTap 리치 텍스트 에디터
3. 페이지네이션
4. 댓글 기능

공통 / 기타

1. 로그인 기능
2. 어드민 유저 관리 페이지
3. 다크 / 라이트 모드 전환