[1주차] 정윤지 과제 제출합니다. by jungyungee · Pull Request #6 · CEOS-Developers/vanilla-todo-22nd

jungyungee · 2025-09-13T06:28:30Z

[1주차 과제] 투두 리스트 - Vanilla JS

배포 링크(Vercel): https://jungyungee-ceos-week1-vanilla-todo.vercel.app/
구현 화면:

구현 기능

날짜 별 투두 추가, 완료, 삭제 기능
남은 투두 개수 보여주기
로컬 스토리지에 날짜별 투두 요소들 저장
간단한 CSS 입히기

리팩토링 및 추가하고 싶은 사항

사이드 바 추가
라이트 모드/다크 모드 추가
투두 수정 기능
디자인 적으로 코드리뷰 받은 내용 토대로 수정
이런 사항들 추가하고 수정하려고 합니다..!

Review Questions

DOM은 무엇인가요?
-> 문서 객체 모델(The Document Object Model)은 웹 페이지를 구조화하여 각 요소를 객체로 표현한 모델.
프로그래밍 언어(자바스크립트 등)가 DOM 구조에 접근하여 웹 페이지를 동적으로 조작할 수 있도록 함.
DOM은 트리 구조로 이루어져 있으며, 각 요소를 노드(Node)라고 부름.

자바스크립트 등을 이용하여 DOM 접근 가능. 예) document.getElementById(): id 속성을 사용하여 요소 찾기
이 외에도 노드 생성, 추가, 삭제 등이 가능함

이벤트 흐름 제어(버블링 & 캡처링)이 무엇인가요?
-> HTML 문서의 각 요소들은 태그 안의 태그가 위치하는 식으로 중첩된 형태로 구성되어 있음.
계층적 구조 특징 때문에 HTML 요소에 이벤트가 발생할 경우 연쇄적 이벤트 흐름이 발생! -> 이벤트 전파
전파 방향에 따라 버블링과 캡처링으로 구분됨.

버블링(Bubbling) : 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파 (기본)
캡쳐링(Capturing) : 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달

=> 캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임을 구현할 수 있음 (비슷한 방식으로 여러 요소를 다뤄야 할 때 사용) -> 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에

자바스크립트 addEventLisnter( ) 함수로 요소의 이벤트를 등록하면 기본적으로 버블링 전파 방식으로 이벤트가 흐름.

클로저와 스코프가 무엇인가요?

스코프: 변수의 유효 범위를 정의
-> 전역 스코프는 코드의 어디에서나 접근 가능, 지역 스코프는 특정 함수 내에서만 접근 가능
(자바스크립트에서의 함수는 선언되는 동시에 lexical scope 를 가짐)
클로저: 외부 함수의 변수에 접근할 수 있는 내부 함수.
-> 클로저 함수에서는 지역변수, 내가 포함된 외부 함수의 변수, 그리고 전역 변수에 모두 접근 가능(데이터 은닉, 상태 유지 등의 용도로 사용)

-> count는 외부에서 직접 접근할 수 없지만, 클로저로 은닉, 상태 유지가 가능

과제 추가 정리 사항: https://handsome-lighter-6f3.notion.site/1-JS-26a833cd665c8055b82bc9eaaf75b023

Wannys26

핑크빛 todo list 테마가 제 취향인 걸 알았습니다 ㅎㅎ
개인적으로 입력창에 있는 addBtn이 호버할때 마다 커졌다 작아지는게 귀여웠습니다!
리뷰 잘 읽어주시고 이해가 안되는 부분이 있다면 말씀해주세요!

Wannys26 · 2025-09-15T05:13:58Z

todo-app/style.css

+  padding: 0;
+}
+
+.todo-list li {


만들어진 todo list에 hover할때마다 삭제 아이콘이 옆에 생기면서, 리스트가 아래로 내려갔다 올라갔다 하는거 같습니다!

여기에 min-height: 30px; 정도 추가하시거나, img 사이즈를 15x15 정도로 줄이시는게 좋을 거 같습니다!

Wannys26 · 2025-09-15T05:18:11Z

todo-app/index.html

+      </main>
+
+      <footer class="todo-input">
+        <button id="add-btn">


todo list 추가 버튼이 왼쪽에 있고 + 모양이면, 처음 사용하는 입장에서 파일 추가 버튼이라고 생각할 수 도 있을 거 같습니다!
개인적으로 오른쪽에 배치하셨으면 더 좋겠다라는 맘이 듭니다...!

Wannys26 · 2025-09-15T05:25:34Z

todo-app/script.js

+}
+
+// 투두 개수 보여주기 - 날짜 key에 해당하는 todo의 개수 중 completed 아닌 것만 골라서 개수
+function Counter() {


일관성 있게 lowerCamelCase로 함수명을 counter로 하시거나, updateCounter가 더 적절할 거 같습니다!

Wannys26 · 2025-09-15T05:29:08Z

todo-app/script.js

+  const key = formatDate(currentDate);
+  const todos = todosForEachDay[key] || [];
+  const todoCount = todos.filter((todo) => !todo.completed).length;
+  const countTodos = document.getElementById("counter"); // 여기서 가져오기


const countTodos = document.getElementById("counter");
요거는 맨 위에 dom 요소 접근 변수 정의해둔 곳에 같이 적어두는게 더 낫지 않을까 제안드립니다!

Wannys26 · 2025-09-15T05:33:40Z

todo-app/style.css

+  bottom: 10px;
+  padding-top: 4px;
+  height: 40px;
+  width: calc(90vw - 100px);


width: calc(90vw - 100px);
모니터 전체화면으로 보면 너무 긴거 같아서, 2주차 리팩토링 하실 때, 모니터 사이즈랑 모바일 사이즈 정도로 나눠서 반응형으로 하시는게 좋을 거 같습니다! 모바일 사이즈에서 가로 길이는 괜찮은 거 같아요!
그리고 입력창이 너무 하단에 붙어 있는 거 같아서 좀 더 위로 올려주셔도 괜찮을거 같습니다!

sungahChooo · 2025-09-15T07:05:34Z

todo-app/script.js

+  showTodos();
+});
+
+//로컬스토리지 저장 및 불러오기


코드가 기능별로 정리되어있고 주석까지 잘 달려있어서 한눈에 보기 좋은 것 같아요!

lemoncurdyogurt

수고하셨습니다! 오늘 코드리뷰를 기반으로 리팩토링 했을 때, ux적으로나 기능적으로 기대됩니다!

lemoncurdyogurt · 2025-09-15T07:05:53Z

todo-app/style.css

+#todo-input {
+  background-color: transparent;
+  height: 32px;
+  font-size: 15px;
+  border: 0;
+  outline: none;
+}


지금 type="text"로 지정되어있어서 텍스트의 입력값이 placeholder만큼만 지정되어있습니다. `flex: 1; min-width:0;`를 추가해주시면, 텍스트 입력창이 넓어질 거에요!

lemoncurdyogurt · 2025-09-15T07:08:02Z

todo-app/style.css

+.todo-input {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background-color: #fffef1;
+  position: fixed;
+  bottom: 10px;
+  padding-top: 4px;
+  height: 40px;
+  width: calc(90vw - 100px);
+  border-radius: 30px;
+}


이렇게 속성 추가하면, 오른쪽 끝에 붙는게 있어서 padding 속성을 좌우로 줘도 좋을 듯 보여요

lemoncurdyogurt · 2025-09-15T07:13:12Z

todo-app/asset/addButton.png

png보다는 svg를 사용하면, 벡터로 아이콘이 바뀌면서 색상을 수정할 수도 있고, 크기도 변화를 줄 수도 있습니다. 그외도 화질저하가 없다거나 다양한 장점이 있어서 아이콘 같은 asset파일에는 svg파일로 사용합니다!
-> 피그마에서 asset export해올 때 svg로 변경해서 다운 받으면 좋아요!

lemoncurdyogurt · 2025-09-15T07:20:49Z

todo-app/script.js

+function addTodo() {
+  const text = todoInput.value.trim(); //입력받은 텍스트 공백 제거 후 text에 저장
+  if (text === "") return;
+
+  // 오늘 날짜에 해당하는 키에 투두 추가
+  const key = formatDate(currentDate);
+  if (!todosForEachDay[key]) todosForEachDay[key] = [];
+
+  // 삭제를 위한 id, 완료 여부 저장을 위한 completed 추가
+  const todo = { id: Date.now(), text, completed: false };
+  todosForEachDay[key].push(todo);
+
+  saveTodos();
+  showTodos();
+  todoInput.value = "";
+  Counter();
+}


https://developer.mozilla.org/ko/docs/Web/API/KeyboardEvent/key
addeventListner를 사용하여 enter키를 keydown한 경우 addTodo가 작동되도록 코드를 추가하면 UX 적으로 더 좋을 듯 합니다!

lemoncurdyogurt · 2025-09-15T07:46:58Z

todo-app/style.css

+.todo-list li .complete-btn {
+  order: -1;
+  border: none;
+  width: 20px;
+  height: 20px;
+  background-color: #f0f0f0;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  position: relative;
+}


`<img width="1451" height="124" alt="스크린샷 2025-09-15 오후 4 09 44" src="https://github.com/user-attachments/assets/00aafd7d-05af-4a50-83da-74e0dfa6939e" />`

텍스트가 길어지면 다음과 같이 complete-btn도 길어지는데, flex: 0 0 20px; 다음 속성을 추가하면 20px로 고정시킬 수 있습니다

jungyungee added 8 commits September 11, 2025 16:11

[feat] 초기 환경 세팅 및 HTML 문서 작성

78bfb7e

[feat] todo 요소 추가 기능 구현

b8298bd

[feat] todo 각 요소별 완료 및 삭제 구현, CSS 입히기 시작

5186cf1

[feat] 날짜별 투두 저장을 위한 배열 사용 및 리팩토링

cfee746

[feat] 투두 브라우저 저장을 위한 local storage 사용 및 CSS 일부 수정

58f26c8

[feat] 투두 개수 counter 추가

88ee5c7

[design] 디자인 수정

2659692

[chore] 필요없는 파일 제거

4acf022

Wannys26 reviewed Sep 15, 2025

View reviewed changes

sungahChooo reviewed Sep 15, 2025

View reviewed changes

lemoncurdyogurt reviewed Sep 15, 2025

View reviewed changes

Comments

Conversation

jungyungee commented Sep 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

[1주차 과제] 투두 리스트 - Vanilla JS

Uh oh!

Wannys26 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sungahChooo Sep 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lemoncurdyogurt left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jungyungee commented Sep 13, 2025 •

edited

Loading

sungahChooo Sep 15, 2025 •

edited

Loading