[1주차] 정윤지 과제 제출합니다. #6

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

[1주차] 정윤지 과제 제출합니다. #6

Are you sure you want to change the base?

[1주차] 정윤지 과제 제출합니다. #6

Uh oh!

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