v1: HTML/CSS/JS

HTML/CSS/JS 기반 TodoApp 개발
기한: 02.17.2025
필수기능: HTML/CSS/JS 를 활용해 데이터 추가/삭제/조회 기능 구현
그 외 원하는 경우 추가기능 구현(통계, 수정 등)

이 링크를 눌러 직접 확인해보세요!

추가/삭제 기능만 되고 수정은 구현하지 못했다 🙀

v2: React 컴포넌트 분리

React 기반 TodoApp Component 개발
기한: 02.24.2025
필수: React 를 활용해 UI 화면의 컴포넌트를 분리하여 개발
내용: HTML/CSS/JS 로 개발한 TodoApp 의 UI 요소를 React 컴포넌트로 분리하여 개발(기능 작동 여부는 확인 안함)
옵션(선택):
TypeScript 를 사용하여 tsx 로 개발
Atomic Design Pattern 을 적용하여 컴포넌트 개발
CSS Module 을 사용하여 스타일 모듈화

• Atoms
• Small Molecules
• Molecules
• Organisms (Header, Steps, Ingredients, Sidebar)
• Template
• Pages (TBU)

v3: React 기능 완성

React 기반 TodoApp 기능 개발
기한: 03.04.2025
필수: React 를 활용해 TodoApp 기능 개발
옵션(선택):
Git 을 사용하여 과제 제출(github push 후 url 제출)
Custom Hook 을 사용하여 로직 분리

1. brower default style 초기화

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  padding: 0;
  background: rgba(184, 226, 181, 0.175);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

독창성

• 어떤 레퍼런스를 봤는지 (라이브러리)
• 어떻게 응용했는지

기술성 : 고민을 어디까지 했는지

• 확장성 (고객 사이즈, 고객 특성)
• 서버가 여러개 (로그인 서버+
• 토큰 vs 쿠키 vs 세션 vs 로컬스토리지
• 암호화 방법 256,
  => 기술 블로그