[mini-project] To-do List (React)

📌 프로젝트 개요

리액트를 사용하여 To-do List를 만들고 GitHub Pages로 배포하는 개인 미니 프로젝트.
데이터는 로컬 스토리지 사용.

• 프로젝트 명: 리액트로 만든 To-do List
• 개발 기간: 24.08.05 ~ 24.08.21
• 목적: React를 이해하고 개인이 가볍게 사용할 목적으로 React를 사용하여 To-do List를 제작하였습니다.
• 사용 기술: HTML5, CSS3, JavaScript, React, React Hooks, VS Code, Git & GitHub, GitHub Pages

---

🧩 구현 기능

기능명	상세 설명
할 일 추가	내용을 입력 후 + 버튼을 클릭하면 할 일이 목록에 추가된다.
할 일 삭제	추가된 할 일 우측에 있는 - 버튼을 클릭하면 삭제된다.
할 일 수정	추가된 할 일을 클릭하면 내용 수정이 가능하다.
할 일 완료	추가된 할 일 좌측의 체크박스를 클릭하면 완료가 되고 할 일 완료 영역으로 이동된다.
할 일 취소	할 일 완료 영역으로 이동된 할 일의 좌측에 체크박스를 클릭하면 다시 할 일 영역으로 이동된다.
스타일	스타일 컴포넌트를 사용하여 스타일 주기
반응형	브라우저 너비 마다 조절 (데스크탑, 태블릿+모바일 두 가지로 설정)
데이터	로컬 스토리지를 통해 목록 관리

---

💜 GitHub 저장소 & 데모

🔗 GitHub Repository

🎬 데모 영상 보러가기

🚀 데모 사이트 보러가기

---

📁 디렉토리 구조

📂 src/
├── App.js                 // 할 일 메인 컴포넌트
├── App.css                // 공통 스타일(CSS)
├── components/
│   ├── TodoCompInput.js   // 할 일 완료 영역 컴포넌트
│   └── TodoListInput.js   // 할 일 기본 영역 컴포넌트

---

🧱 설계 구조 설명

• App.js
  • 전체적인 틀 구조와 할 일을 추가하는 것과 로컬스토리지에 데이터(할 일)를 추가하는 코드가 있다.
  • 상단에는 스타일 컴포넌트 라이브러리를 사용하여 기본적인 스타일을 정의하였다. (form fieldset, input, button 등) 
  • App.js 블럭 본문은
    • 로컬스토리지에 json형태로 파싱하여 할 일을 저장할 수 있는 코드가 있다. 그리고 check 유무에 따라서 할 일 목록과 할 일 완료 목록에 각각 할 일을 .push()하도록 하고, 오름차순으로 정렬하였다.
    • form을 사용하였기 때문에 제출 이벤트를 막기 위해 e.preventDefault()를 사용하였다.
    • 할 일 추가 함수(addList)는 form의 제출 이벤트를 막는 코드를 작성하여 리로드가 되는 것을 막고, newListItem 객체를 생성한다. (id, text, nowdate, keyword, checked 키를 가진) 그리고 할 일 목록에 아이템을(할 일) 로컬 스토리지에 JSON형태로 저장한다.
    • 할 일 목록 영역과 할 일 완료 영역에 있는 아이템을 각각 삭제하는 함수를 delList, compDelList로 구분하였고, 삭제 버튼을 클릭하면 할 일 아이템을 삭제한다. 로컬 스토리지에 저장된 해당 할 일 아이템을 제거.
    • 체크 유무 관련된 checkedList와 unCheckedList 함수는 체크박스에 체크가 되었는지 유무를 확인한 다음 check키의 값을 checked, unchecked로 분류한다.
    • 수정 관련된 editInputText 함수는 할 일 목록에 있는 할 일 아이템을 id로 구분하여 내용을 수정하고 로컬 스토리지에 수정된 내용을 저장한다.
• App.css
  • 공통으로 적용되어야 하는 스타일을 정의함.
  • checkbox 스타일을 주고 @media screen and ()를 사용하여 1023px을 기준으로 PC와 태블릿+모바일의 스타일을 정의하였다. (반응형)
• TodoCompInput.jsx
  • 할 일 완료 영역의 코드이다. 
  • 상단에는 스타일 컴포넌트 라이브러리를 사용하여 할 일 <input> 태그와 <button> 태그 스타일을 정의하였다.
  • TodoCompInput 블럭 본문은
    • 체크박스를 클릭하면 체크가 되어있는지 확인을 한 후 unChecked 하는 함수가 있다. (할 일 완료 -> 할 일 취소)
    • 삭제 버튼을 클릭하면 할 일이 삭제하는 함수가 있다.
    • return으로 체크박스-입력칸(input, 할 일)-삭제버튼 순으로 작성되어 있다.
• TodoListInput.jsx
  • 할 일이 목록 형태로 이루어져있는 코드이다. (할 일 완료 전)
  • 상단에는 스타일 컴포넌트 라이브러리를 사용하여 <input>, <textarea>, <button> 등 각 태그의 스타일을 정의하였다.
  • TodoListInput 블럭 본문은
    • 텍스트 영역을 자동으로 리사이즈 해주는 함수가 있다.
    • 체크박스를 클릭하면 체크가 되었는지 boolean 값으로 확인 후, true면 check영역으로 보낸다.
    • 목록에 추가 된 할 일은 수정이 가능해야하기 때문에 useCallback()을 사용하여 text를 수정하고 저장을 각각 함수로 정의하였다.
    • 삭제 버튼을 클릭하면 할 일이 삭제되는 함수가 있다.
    • 모바일에서 사용하는 것을 고려하여 할 일 내용을 수정시 엔터를 누르면 input태그가 blur()가 되는 코드가 있다.
    • return에는 체크박스-입력칸(input, 할 일)-삭제버튼 순으로 작성되어 있다.

---

🔢 개발 순서

순서	내용	상세 설명
1	할 일 추가 영역	- input 요소에 글자를 입력 후 ‘ + ‘ 버튼 클릭하면 목록 추가되게 만들기 - to-do list가 추가되면 input 요소 안에 빈 내용으로 만들기.
2	할 일 목록 영역	- 추가된 to-do list는 checkbox타입의 input 요소 와 text타입의 input 요소, 그리고 삭제 버튼 으로 구성하기. - checkbox타입의 input 요소의 기본값은 uncheked 상태이며 클릭하여 check가 되면 ‘완료된 목록’영역에 추가하고 ‘할 일 목록’영역에서 없애기. - text타입의 input 요소를 클릭하여 내용을 수정할 수 있게 만들기. - ‘ - ‘ 버튼을 클릭하면 해당 목록이 삭제되게 만들기.
3	완료된 목록 영역	- 완료된 to-do list는 checkbox타입의 input 요소와 text타입의 input 요소, 그리고 삭제 버튼으로 구성하기. - checkbox타입의 input 요소의 기본값은 checked가 된 상태로 만들기. (완료되었다는 표시) - checkbox를 한번 더 클릭하면 unchecked 상태가 되며 ‘할 일 목록’영역에 추가하고 ‘완료된 목록’영역에서 없애기. - text타입의 input 요소의 기본값을 disabled상태로 만들고 글자에 취소선과 회색으로 스타일 주기. - ‘ - ‘ 버튼을 클릭하면 해당 목록이 삭제되게 만들기.
4	수정 작업	- 할 일 아이템을 로컬스토리지로 관리하기 위해 추가함. - 할 일 아이템과 할 일 완료 아이템의 겹침 문제 해결.(id 중복 현상, check 유무 추가) - 할 일 아이템 내용 수정 시 Enter키 누르면 삭제되는 문제 해결. - 할 일 아이템 내용 수정 시 글자 입력할 때마다 렌더링 되는 현상 해결.

---

🐞 문제 해결 & 트러블슈팅

✅ 이슈 1 - 웹브라우저 새로고침 또는 종료 후 실행 시 추가한 목록 사라짐

• 문제: 할 일을 추가하고 웹브라우저를 새로고침, 또는 재실행하면 목록이 사라진다.
• 원인: 데이터를 저장을 한 것이 아니라 임시로 저장한 것이기 때문.
• 해결: 로컬스토리지에 저장.

---

✅ 이슈 2 - 로컬 스토리지에 저장된 데이터가 object로 표시됨

• 문제: 로컬 스토리지에 데이터를 저장하면 키와, 값이 나오지 않고 object라고만 나옴.
• 원인: JSON 문자열로 변환을 안 해줌.
• 해결: JSON,stringify를 사용하여 JSON 문자열로 변환시킴

---

✅ 이슈 3 - 로컬 스토리지에 저장한 데이터를 가져올 때 에러가 발생

• 문제: 로컬 스토리지에 저장한 데이터를 가져와야하는데 에러가 발생했다.
• 원인: 파싱을 해줘야했다.
• 해결: JSON.parse를 사용하여 문자열을 객체나 배열 형태로 변환시켜줌

---

✅ 이슈 4 - 웹브라우저 재실행시 할 일 목록과 할 일 완료 목록의 영역 구분이 안됨

• 문제: 웹브라우저를 재실행하면 할 일 목록에 할 일 완료 목록에 있는 아이템들이 뒤 섞임.
• 원인: 아이템을 추가할 때 체크 유무를 확인 안했다.
• 해결: 아이템을 추가할 때마다 체크 유무를 추가하여, 로컬스토리지에서 아이템을 가져올 때 check 상태 여부에 따라서 할 일 영역과 할 일 완료 영역을 구분하여 출력해주었다.

---

✅ 이슈 5 - 할 일 아이템의 내용을 수정 후 Enter 키를 누르면 삭제 됨

• 문제: 할 일 아이템의 내용을 수정하고 마우스를 다른 곳에 누르면 삭제가 안되는데 Enter 키를 누르면 삭제 됨.
• 원인: 포커싱이 되어서 Enter키를 누르면 삭제 버튼이 실행됨.
• 해결: KeyboardEvent 핸들러 함수 중 onKeyDown 이벤트 핸드러를 사용하여 사용자가 할 일 아이템의 내용을 수정하고 Enter를 눌렀을 때 해당 할 일 아이템의 상태를 blur() 메서드를 사용하여 focus out 시키는 효과처럼 만들었다.

---

✅ 이슈 6 - 할 일 아이템 내용 수정 시 글자가 계속 렌더링 되는 현상

• 문제: 할 일 아이템 내용을 수정하는데 글자를 입력할 때마다 렌더링이 됨.
• 원인: useEffect를 사용해서 계속 렌더링이 되는 거였음.
• 해결: useCallback을 사용하여 작성 도중에는 함수가 계속 호출되지 않도록 방지했다.

---

✅ 이슈 7 - 할 일 아이템과 할 일 완료 아이템의 id 충돌

• 문제: 할 일 아이템과 할 일 완료 아이템의 id가 중복되어 충돌이 일어남.
• 원인: 새로운 할 일 추가시, 할 일 목록 영역을 기준으로 id를 추가하다보니 할 일 완료 목록 영역의 아이템들과 id가 겹침.
• 해결: 전체 할 일 아이템을 담는 상태변수를 만들어 이를 기준으로 id값을 부여함.

---

✍ 느낀 점 / 회고

• React Hooks에 대한 이해도가 부족하다는 것을 느꼈다. 왜냐하면 나는 주로 useEffect를 사용하는데 작업을 하던 도중 추가된 할 일 목록의 내용을 수정할 수 있는 기능을 만드는데 내용을 수정할 때마다 재 렌더링 되는 현상이 일어났고 이를 해결하기 위해 useCallback을 사용했는데 정확히 어떻게 사용해야 하는지를 이해하고 사용한 것은 아니었다. (사용 예시를 보고 따라서 하기만 함) 그래서 React Hooks 기능들을 살펴보고 어떤 상황에서 사용해야 좋을지에 대하여 공부해야할 거 같다고 느꼈다.
• React로 To-do List를 만들면서 구현해야 할 기능들을 React 문서와 JavaScript 문서를 보며 내가 원하는 기능들을 찾아서 구현을 시도하고 성공시키면서 뿌듯함을 느꼈다. 그리고 내가 원하는 기능을 찾는 방법과 능력이 향상된 것 같다.
• 기획을 나름 잘 작성했다고 생각하고 작업을 했는데 중간에 부족한 부분이 많았다. 그래서 이번 프로젝트에서 2차 작업을 하면서 조금 더 꼼꼼히 살펴보고 내가 구현할 기능들의 자료들을 잘 정리하여 작업을 하였는데 이러한 과정을 겪으면서 기획에 더 신경을 써야겠다고 느꼈다.

---