[JavaScript-Study Planner] D-Day, 정렬 기능 구현

JavaScript 기본 문법과 조작을 복습하기 위해 간단한 Study Planner를 제작하였다.

TODO 리스트를 진행하며 배운 할 일을 등록하고 완료 상태를 관리하는 구조에서

마감일 설정과 D-Day계산, 마감일 기준 정렬 기능을 추가하여 구현하였다.

 

🔗 GitHub: https://github.com/sdesign416/Mini-Projects/tree/main/02_StudyPlanner

🔗 Demo:  https://sdesign416.github.io/Mini-Projects/02_StudyPlanner/

 

주요 기능

• 학습 계획 등록하기(과목, 상세내용, 날짜)
• D-Day 계산
• 계획 완료 상태 변경
• 계획 삭제
• D-Day 기준 정렬

---

1. 데이터 저장 구조

입력받은 계획을 배열 안에 객체 형태로 저장하여 관리할 수 있도록 구현하였다.

const plans = []

plans.push({
   subject,
   content,
   date,
   done: false
})

객체 형태로 저장하는 이유는 하나의 계획이 가지고 있는 여러 데이터를 함께 관리하고 완료 처리나 정렬 기능에서 접근할 수 있도록 하기 위해 저장하였다. 

 

객체 형태로 저장된 여러 데이터 목록

• subject : 과목명
• content : 상세 내용
• date : 마감일
• done : 완료 여부

---

✅ 계획 등록 기능

입력한 값을 가져온 뒤 객체 형태로 배열에 추가한다.

입력값은 trim()을 사용해 앞뒤 공백을 제거하고, 빈 값이 입력되는것을 방지하는 조건문을 추가하여 구현하였다.

function addPlan() {
   const subject = subjectInput.value.trim()
   const content = contentInput.value.trim()
   const date = dateInput.value

   if (!subject) return
   if (!content) return
   if (!date) return

   plans.push({
      subject,
      content,
      date,
      done: false
   })

   render()
}

---

✅ 화면 출력 기능 (render)

등록된 계획은 JavaScript에서 동적으로 생성될 수 있도록 구현하였다.

createElement()를 사용해 내용을 등록하고 appendChind()를 통해 화면에 노출될 수 있도록 설정해주었다.

function render(){
   SPList.innerHTML = ""

   plans.forEach((plan) => {
      const li = document.createElement("li")

      const subject = document.createElement("p")
      subject.textContent = plan.subject

      li.appendChild(subject)
      SPList.appendChild(li)
   })
}

---

✅ D-Day 계산 기능

계획 완료일까지 남은 기간을 계산하여 노출하기 위해 JavaScript의 Date 객체를 사용해주었다.

날짜끼리 계산을 하면 밀리초(ms)단위 차이가 발생하여 일(day)단위로 변환 후 날짜 계산을 진행해주었다.

 

• 마감 전 : D-날짜
• 마감 당일 : D-Day
• 마감 이후 : D+날짜

function getDday(date){
   // 사용자가 입력한 날짜와 현재 날짜를 Date객체로 각각 생성
   const today = new Date()          // 현재 날짜
   const targetDate = new Date(date) // 입력 날짜

   const remainTime = targetDate - today
   const remainDay = Math.ceil(
      remainTime / (1000 * 60 * 60 * 24) // 일(day)단위로 변환
   )

   // 문자열로 화면에 출력
   return `D-${remainDay}`
}

 

---

✅ 완료 상태 변경 기능

완료한 계획은 체크박스를 체크하여 계획을 완료상태로 변경할 수 있고

체크가 될 경우 객체의 done값을 변경하여 화면에 완료 스타일이 적용될 수 있도록 구현하였다.

※ 기본값은 done=false, 체크박스를 누르면 done=true가 되도록 설정한것이다.

checkbox.addEventListener("change", () => {
   plan.done = checkbox.checked
   render()
})

---

✅ 계획 삭제 기능

HTML에서 만든 삭제 버튼을 클릭하면 splice()를 사용하여 해당 계획을 삭제할 수 있도록 하였으며

삭제된 후 변경된 배열에 대해 render()를 다시 호출하여 삭제된 화면이 반영되어 나타날 수 있도록 구현하였다.

※ render()를 재호출하지 않으면 배열 데이터만 삭제되고 사용자 화면에는 삭제된 것 처럼 보이지 않는다.

delBtn.addEventListener("click", () => {
   plans.splice(index, 1)
   render()
})

---

✅ 마감일 기준 정렬 기능

마감일이 가까운 순서대로 위에서부터 나타나도록 정렬 기능을 추가하였다.

sort() 를 사용하여 배열 순서를 변경해주었으며, 날짜를 비교하여 정렬하기 위해 문자열 형태로 되어있는 날짜 데이터를 JavaScript에서 기본으로 제공하는 내장 객체인 Date객체로 변환하여 계산해주었다.

plans.sort((a, b) => {
   return new Date(a.date) - new Date(b.date)
})