Moon-GD/fe-web-todo-Moon

현대 부트캠프 2주차 - FE web Todo List

(mock server 연동으로 배포 링크 닫아둔 상태입니다.)

🌟 제공 기능 🌟

1️⃣ Column

• column 생성
  
  
  
• column 수정
  
  
  
• column 자동 스크롤
  
  
  
• column 삭제
  
  
  

2️⃣ Card

• card 생성
  
  
  
• card 수정
  
  
  
• card 이동
  
  
  
• card 삭제
  
  
  

3️⃣ Menu

• 사용자 액션 기록
  
  
  

🔥 도전했던 기능 🔥

1️⃣ Search

• Card 제목을 기준으로 검색
  
  
  
• 검색어 추천
  운영체제의 페이지 교체 기법 중 LFU를 반대로 활용하여 검색어를 추천하도록 설계
  
  
  

2️⃣ Dev Utils

• Custom querySelector 구현 및 활용
  사용자 query를 파싱하여 돔 트리 탐색 (BFS) 구현 부분
• pipeline 함수를 통한 가독성 향상
  3중 함수 구조 (내부적으로 reduce 함수를 통해 함수 배열 반복 수행) 구현 부분

3️⃣ Dark Mode

• 전구 icon을 통한 toggle
  
  
  

☁ server data ☁

• mock server로 json-server 활용
• 예시 데이터

    ```json
  {
    "statusList": [
      {
        "id": 1,
        "statusIndex": 1,
        "statusName": "해야할 일",
        "order": [
          "-1"
        ]
      },
      {
        "id": 2,
        "statusIndex": 2,
        "statusName": "하고 있는 일",
        "order": [
          "-2"
        ]
      },
      {
        "id": 3,
        "statusIndex": 3,
        "statusName": "완료한 일",
        "order": [
          "-3"
        ]
      }
    ],
    "cardList": [
      {
        "title": "3주차 보충학습",
        "content": "this를 설명해보자!",
        "author": "author by web",
        "status": 1,
        "date": "2023-01-21T12:51:17.916Z",
        "id": "-1"
      },
      {
        "title": "Github",
        "content": "README 정리",
        "author": "author by web",
        "status": 2,
        "date": "2023-01-21T12:51:20.835Z",
        "id": "-2"
      },
      {
        "title": "설날",
        "content": "가족들과 시간 보내기",
        "author": "author by web",
        "status": 3,
        "date": "2023-01-21T12:51:23.083Z",
        "id": "-3"
      }
    ],
    "menuList": [
      {
        "action": "CREATE",
        "actionTime": "1월 22일 16시 39분",
        "id": 410,
        "columnName": "하고 있는 일",
        "cardTitle": "노래 듣기"
      },
      {
        "action": "DELETE",
        "actionTime": "1월 22일 16시 39분",
        "id": 918,
        "columnName": "하고 있는 일",
        "cardTitle": "노래 듣기"
      }
    ]
  }
  ```
  
  </details>
  

📑 요구 사항 📑

2주차

1. Todo 삭제, 편집 ✅
2. Drag & Drop ✅
3. prototype 활용한 객체 1개 이상 ✅
4. ES classes 활용 객체 1개 이상 ✅
5. querySelector 구현 ✅

3주차 요구사항

1. Mock 서버 or 실제 서버 활용 ✅
2. fetch api에 then, async/await 활용 ✅
3. Store, View 관계 느슨하게
4. Promise 객체 만들기
5. 사이드바 시간 반영 ✅

🪛 리팩토링 가이드 🪛

1. html tag 작성 요령
   • header & main > section > h3 & article > div


2. css 작성 요령
   • 큰 요소 > 작은 요소 순서
   • 배치 관련 우선 작성 > 글자 크기, 색깔 등의 스타일링은 후에 작성
   • 요소 크기는 vw, vh, % 활용 (px 지양)
   • 글자는 최상단 font size에 비례하도록 rem 활용