[1주차] 구민교 과제 제출합니다.#8
Conversation
Wannys26
left a comment
Wannys26
left a comment
There was a problem hiding this comment.
과제 구현하시느라 고생많으셨습니다!!
디테일하게 잘 해주셔서 감사드립니당~!!
There was a problem hiding this comment.
과제 필수 요건은 아니였지만
react로 구현하실 때는 localStorage 사용해서 todo 리스트를 저장해보셨으면 좋겠습니당!
There was a problem hiding this comment.
:root 활용 리뷰
홍엽님 리뷰 단 내역이랑 비슷한 내용입니다!
:root를 활용하셔서 색상, shadow 값을 변수로 정의하시면 좋을거 같습니다!
| } else { | ||
| todoInput.disabled = true; | ||
| todoInput.placeholder = "주간 보기에서는 추가할 수 없어요."; | ||
| } |
There was a problem hiding this comment.
주간 보기에서 addButton도 같이 disabled 처리를 해주시는게 좋을거 같습니당!
css에서는 정의 되어있는 걸로 보이는데, react 과제에서는 같이 처리해주세용~!!
| <section class="dateSection" aria-label="날짜 또는 주차 선택 영역"> | ||
| <button | ||
| type="button" | ||
| class="dateButton prevDateButton" | ||
| aria-label="이전 날짜 또는 이전 주" | ||
| > | ||
| ◀ | ||
| </button> | ||
|
|
||
| <p class="selectedDate" id="selectedDate">2026년 3월 14일</p> | ||
|
|
||
| <button | ||
| type="button" | ||
| class="dateButton nextDateButton" | ||
| aria-label="다음 날짜 또는 다음 주" | ||
| > | ||
| ▶ | ||
| </button> | ||
| </section> |
There was a problem hiding this comment.
2026-03-15.004252.mp4
날짜가 변경됨에 따라서, 좌우 화살표가 왔다갔다 하는 현상이 있습니다!
.dateSection 에 고정 width를 지정해주시거나
selectedDate에 min-width를 지정해주시면 해결될거 같습니당~~
| menuButton.addEventListener("click", () => { | ||
| viewMenu.classList.toggle("hidden"); | ||
| }); |
There was a problem hiding this comment.
menuButton을 재클릭시에만 menu가 닫히는 거 같아용!
좀 더 개선하고 싶으시다면, menu 외부를 클릭했을때도 닫히도록 해두시는게 좋을거 같습니다!
react로 구현할때 참고할만한 글도 첨부해드릴게용
| function deleteTodo(id) { | ||
| const todos = getCurrentTodos(); | ||
| const updated = todos.filter(todo => todo.id !== id); | ||
|
|
||
| const key = formatDateKey(currentDate); | ||
| todoData[key] = updated; | ||
|
|
||
| renderApp(); | ||
| } |
There was a problem hiding this comment.
- 3월 16일에 todo 하나 추가
- 3월 18일로 날짜 이동 -> 주간 보기 전환
- 주간 보기에서 월요일의 3월 16일자 삭제 버튼 클릭시 삭제가 안됩니다!
todoData[key] 에서 key값이 currentDate로 되면서,
일간/주간 보기의 key값이 달라지는 게 원인인거 같습니당~
영상
2026-03-15.005512.mp4
| if (text === "") return; | ||
|
|
||
| addTodo(text); | ||
| todoInput.value = ""; |
There was a problem hiding this comment.
todoInput 값을 초기화한 뒤에, 포커스를 줘서 입력창 클릭 안 하고 바로 입력 이어갈 수 있도록 할 수도 있더라고요!
todoInput.focus();| function getCurrentTodos() { | ||
| const dateKey = formatDateKey(currentDate); | ||
| if (!todoData[dateKey]) { | ||
| todoData[dateKey] = []; | ||
| } | ||
| return todoData[dateKey]; | ||
| } |
There was a problem hiding this comment.
현재 getCurrentTodos() 함수가 deleteTodo() 함수에서 사용되고 있어요. 그리고 이 함수를 보면 currentDate 하루에 해당하는 Todo 데이터만 반환하고 있고요.
그래서 주간 보기에서 Todo 데이터 렌더링은 정상적으로 동작하지만, 삭제는 '일간 보기 -> 주간 보기'로 넘어가는 날짜의 데이터만 진행되고 있어요.
다시 말해, 3월 16일에서 Weekly로 넘어가면 3월 16일 외 날짜의 Todo는 삭제가 되지 않고 있어요.
이 문제를 해결하려면, 삭제 로직이 currentDate 기준의 일간 데이터만 참조하지 않도록 수정할 필요가 있어 보여요.
deleteTodo() 함수의 매개변수로 todo.id만 전달하는 대신, dateKey도 함께 전달해서 todoData[dateKey]에서 삭제하도록 변경하면 주간 보기에서도 각 날짜의 Todo를 정상적으로 삭제할 수 있을 것 같아요.
해당 부분에 리뷰 남겨놓겠습니다!
| function deleteTodo(id) { | ||
| const todos = getCurrentTodos(); | ||
| const updated = todos.filter(todo => todo.id !== id); | ||
|
|
||
| const key = formatDateKey(currentDate); | ||
| todoData[key] = updated; | ||
|
|
||
| renderApp(); | ||
| } |
There was a problem hiding this comment.
이런 식으로 수정하면 해결 가능할 것 같아요!
function deleteTodo(id, dateKey) {
const todos = todoData[dateKey] || [];
todoData[dateKey] = todos.filter(todo => todo.id !== id);
renderApp();
}
There was a problem hiding this comment.
가독성과 유지 보수를 위해 기능 함수와 렌더링 함수를 나눠서 파일을 따로 만드시는 것도 좋을 것 같습니다!
4 participants
이번 미션을 진행하면서 HTML, CSS, JavaScript가 함께 동작하는 구조를 실제로 이해할 수 있었습니다. 단순히 각각의 기술을 따로 학습하는 것이 아니라 하나의 기능을 구현하기 위해 세 가지가 어떻게 연결되는지 체감할 수 있었던 것 같습니다.
가장 많은 시간을 투자했던 부분은 DAILY / WEEKLY 뷰 기능입니다. 처음에는 단순히 화면만 전환하면 될 것이라고 생각하여 시작하였지만, 실제로 구현 해보니 날짜를 기준으로 데이터를 분리하고, 현재 날짜 상태를 관리하며, 버튼을 눌렀을 때 주 단위로 이동하도록 하는 로직을 작성해야 해서 JavaScript 코드가 생각보다 훨씬 복잡해졌습니다. 구현 과정에서 로직이 점점 길어지면서 중간에 이 기능을 빼버릴까 고민하기도 했지만, 끝까지 구현해보자는 생각으로 기능을 완성했습니다. 이 과정을 통해 단순해 보이는 기능도 실제로 구현할 때는 상태 관리와 로직 구조를 잘 설계하는 것이 중요하다는 것을 느꼈습니다.
또한 UI를 조금 더 보기 좋게 만들기 위해 색상 조합, hover 효과 등을 여러 번 수정하면서 디자인을 개선하는 과정에도 많은 시간을 투자했습니다. 이번 미션을 통해 단순히 기능을 구현하는 것에서 끝나는 것이 아니라, 기능을 확장하거나 새로운 뷰를 추가할 때 코드 구조가 얼마나 중요해지는지를 배울 수 있었던 것 같습니다.
https://vanilla-todo-23rd-hazel.vercel.app/
Q1. DOM은 무엇인가요?
DOM은 브라우저가 HTML 문서를 트리 구조의 객체로 변환해 표현한 모델입니다. 이 구조를 통해 JavaScript는 특정 요소를 선택하거나 내용·속성·스타일을 변경하는 등 웹페이지의 내용을 동적으로 조작할 수 있습니다.
Q2. 이벤트 흐름 제어(버블링 & 캡처링)이 무엇인가요?
이벤트 흐름은 클릭과 같은 이벤트가 DOM 구조를 따라 전달되는 과정을 의미합니다. 이벤트는 먼저 부모에서 자식 방향으로 내려오는 캡처링 단계를 거친 뒤, 실제 이벤트가 발생한 요소에서 다시 부모 방향으로 전달되는 버블링 단계로 전파됩니다.
Q3. 클로저와 스코프가 무엇인가요?
스코프는 변수나 함수에 접근할 수 있는 유효 범위를 의미하며, 전역 스코프와 함수 스코프 등으로 구분됩니다. 클로저는 함수가 실행된 이후에도 자신이 선언된 외부 스코프의 변수를 계속 참조하고 사용할 수 있는 JavaScript의 특징입니다.