[1주차] 김영서 미션 제출합니다. #10

kkys00 · 2025-03-15T13:59:54Z

배포 링크

https://vanilla-todo-21th-xi.vercel.app/

느낀점

리액트 훅의 편리함을 느꼈다. 상태가 변할 때마다 호출되어야 하는 함수들을 바닐라js에서는 일일이 추가했는데, useEffect를 사용하면 더 쉽게 구현 가능한 것들이 많았다.
데이터 저장 방식은 CRUD를 고려해서 먼저 정해 놓고 개발을 시작해야 함을 느꼈다. 처음에 배열로 했다가, 삭제와 task당 id값을 위해 객체로 바꿨다가, 날짜별 데이터 표시를 위해 한 번 더 date값을 1차 key로 하고 item id를 2차 키로 하는 객체로 다시 한 번 바꿨다.
css class를 더 분해해서 이용해야겠다.

Key Questions

1. DOM은 무엇인가요?

DOM(Document Object Model, 문서 객체 모델)은 HTML, XML 문서의 각 태그, 속성, 텍스트 등을 객체로 변환해 계층 구조로 표현한 모델이다. 최상위 객체를 document로 하여 트리 구조를 가지며 자바스크립트를 통해 HTML 요소를 추가, 삭제, 수정, 스타일 변경 등의 조작이 가능하다.

2. 이벤트 흐름 제어(버블링&캡처링)이 무엇인가요?

캡처링이란 이벤트가 부모에서 자식 방향으로 전달되는 것
버블링은 이벤트가 자식에서 부모 방향으로 전파되는 것

자바스크립트의 이벤트는 기본적으로 버블링에서 실행된다.
캡처링을 원할 경우 addEventListener에서 세 번째 인수를 true로 설정하면 된다.

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

클로저 참고

함수가 선언될 때 스코프를 기억하고
나중에 호출될 때 그 스코프에 접근할 수 있는 함수.
외부 함수의 변수를 내부 함수에서 기억하고 접근할 수 있는 개념

스코프란 변수의 유효 범위를 의미한다.
(1) 전역 스코프: var, let, const, function을 어떤 함수나 블록 내부가 아닌 최상위 코드에서 선언한, 어디서든 접근 가능한 변수
(2) 지역 스코프: 함수나 {} 블록 내부에서 선언된 변수로 함수나 {} 블록 내부에서만 접근 가능한 변수

함수 스코프: 함수 내부에서 선언된 변수로 함수 내부에서만 유효
블록 스코프: for, while, switch, if 등의 {중괄호} 내부에서 선언된 변수로 블록 내에서만 유효.
let, const는 블록 스코프를 가지고
var는 함수 스코프로 블록 스코프를 무시한다.
(3) 렉시컬 스코프: 함수의 선언 위치에 따라 결정되는 스코프

BeanMouse

디자인까지 피그마로 다 직접 만드시면서 그걸 그대로 화면에 구현한게 정말 인상에 깊었습니다! 보통 개발 외적인 부분에 신경쓰기 쉽지 않은데 이러한 부분까지 노력한 부분이 느껴졌습니다. ദ്ദി(｡•̀ ,<)~✩‧₊ ( 더하여 리드미 파일까지 따로 정리 한것 역시 정말 기억에 남았습니다.) 저는... 귀찮아서 그냥 리드미도 안 적고 기본 토대만 만들고 디자인을 계속해서 수정해나가거든요 ... PR을 보며 배울점이 정말 많은 것 같습니당

디자인을 꼼꼼하게 하셨다보니 그게 실제 웹 페이지에서도 많은 노력을 한 게 느껴졌습니다
hover할때 나타나는 애니메이션(transition) 부분이라던지 box-shadow가 나타나는 부분이라던지... 저는 사실 디자인 디테일을 보는 것을 좋아해서 사실 더 유심히 본 것도 맞습니당 ㅎㅎ

그리고 좀 더 디자인 부분에서 말하자면 path d를 저도 옛날에 진짜 애써가며 넣은 적이 있는데 여기서 보게 될 줄은 몰랐네요 만들기 정말....힘드셨을 텐데 고생 많이 하셨습니다!

코드에 관한 부분은 밑에서 리뷰하겠습니다 👀
사실 제가 바닐라 JS 진짜 처음 써봐서 ...ㅠㅠ 리뷰가 모자랄 수 있는데 양해 부탁 드리겠습니당...

BeanMouse · 2025-03-16T00:52:15Z

script.js

+  }
+}
+
+input.addEventListener('keydown', (e) => {


keydown을 사용하시면 한글을 입력했을 때 뒤에 부분이 중복으로 입력되는 경우가 생깁니다! 그래서 조금 더 안정적인 keypress를 사용하는 것 을 추천 드립니당!

아영님 코드 리뷰에서 참고할 만한 자료 첨부해두었습니다!
아영님 코드 리뷰

제가 오늘 아침에 좀 찾아봣는데 keyPress는 더이상 최신 브라우저에서 지원하지 않는다네요 ㅜㅜ 주로 isComposing을 이용하고 리엑트에서는 e.preventDefault나 useEffect을 함께 사용하고 있다니 참고해보세요!

BeanMouse · 2025-03-16T00:58:24Z

script.js

+    todoListContainer.appendChild(todoItem)
+  }
+}
+


투두 아이템 기능(삭제, 추가, 체크 등...)에 관련한 부분과 Date관련 부분 그리고 svg부분 처리 등은 분리해서 관리해도 좋을 것 같다는 생각이 듭니다!
보통 스크립트가 200줄 이상 넘어가면 저는 어떻게든 분리 시키고는 하는데 개인 취향이긴합니당

BeanMouse · 2025-03-16T01:08:53Z

script.js

+
+  console.log(weekDate)
+}
+


개인적으로 이렇게 함수명이 없는 부분( 이벤트리스너 부분 등...) 간단한 주석 정도가 있으면 코드를 알아보기에 더 편할 것 같습니당

BeanMouse · 2025-03-16T01:18:35Z

script.js

+}
+
+const handleCheckToggle = (e) => {
+  const todoItem = e.target.closest('div.todoItem')


이벤트 위임 저도 이번 과제에서 사용했는데 체크박스 관리하기에 정말 편리한것 같다는 생각을 했습니당~~ (｡•̀ᴗ-)✧

BeanMouse · 2025-03-16T01:28:22Z

index.html

+          <symbol
+            id="icon-circle-dashed"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M10.1 2.182a10 10 0 0 1 3.8 0" />
+            <path d="M13.9 21.818a10 10 0 0 1-3.8 0" />
+            <path d="M17.609 3.721a10 10 0 0 1 2.69 2.7" />
+            <path d="M2.182 13.9a10 10 0 0 1 0-3.8" />
+            <path d="M20.279 17.609a10 10 0 0 1-2.7 2.69" />
+            <path d="M21.818 10.1a10 10 0 0 1 0 3.8" />
+            <path d="M3.721 6.391a10 10 0 0 1 2.7-2.69" />
+            <path d="M6.391 20.279a10 10 0 0 1-2.69-2.7" />
+          </symbol>


심볼에 관련한 부분은 svg 파일로 분리를 해서 재사용성을 높여주는 것도 좋은 방법일 것 같습니당

BeanMouse · 2025-03-16T01:37:51Z

script.js

+    if (id in todoList) delete todoList[id]
+    else delete todoListFinished[id]


V8엔진에서는 (노드가 크롬 엔진) 히든클래스를 활용하기 때문에 delete를 사용하면 최적화가 풀릴 수도 있기 때문에 filter나 map reducer를 사용해서 객체 요소를 삭제해보시는 것도 추천드립니다!

v8엔진 히든클래스 관련 블로그

BeanMouse · 2025-03-16T01:43:00Z

style.css

+  --lightest-color: #f8fafc;
+  --lighter-color: #d9eafd;
+  --darker-color: #bcccdc;
+  --darkest-color: #9aa6b2;
+  --shadow-color: #9aa6b230;
+  --point-color: #ff748b;
+
+  --light-stroke: #dedede;
+  --dark-stroke: #b6b6b6;
+
+  --text-gray: #797979;


전역으로 색깔을 정해서 관리를 더 편하게 하는 부분이 보기 좋았습니당 ヽ( ຶ▮ ຶ)ﾉ!!!

색상을 정리해서 작성하신 게 깔끔하고, 재사용성도 높아져서 좋았어요! ☺️

chaeyoungwon

피그마 디자인부터 개발까지 직접 하신 게 정말 인상적이었어요 !!
UI도 실제로 주간 투두리스트로 활용하기 좋게 잘 구성되어 있어서 사용성이 돋보였습니다 👍
특히, 해당 주의 todo를 기반으로 퍼센트 계산까지 구현하신 부분이 정말 디테일하다고 느껴졌습니다
수고하셨습니다 🥹

chaeyoungwon · 2025-03-16T12:48:29Z

script.js

+  todoItem.appendChild(stateDiv)
+  todoItem.appendChild(contentDiv)
+  todoItem.appendChild(removeBtn)


해당 부분을 todoItem.append(stateDiv, contentDiv, removeBtn) 식으로 간결하게 작성할 수 있을 거 같아요!!

chaeyoungwon · 2025-03-16T12:58:33Z

script.js

+dateInput.addEventListener('change', handleDateSelect)
+
+const handleAddTodo = () => {
+  const task = input.value


const task = input.value.trim();
공백만 입력된 경우 할 일으로 등록되지 않게 추가하는 것도 좋을 거 같아요!

chaeyoungwon · 2025-03-16T13:11:46Z

style.css

+  --lightest-color: #f8fafc;
+  --lighter-color: #d9eafd;
+  --darker-color: #bcccdc;
+  --darkest-color: #9aa6b2;
+  --shadow-color: #9aa6b230;
+  --point-color: #ff748b;
+
+  --light-stroke: #dedede;
+  --dark-stroke: #b6b6b6;
+
+  --text-gray: #797979;


색상을 정리해서 작성하신 게 깔끔하고, 재사용성도 높아져서 좋았어요! ☺️

chaeyoungwon · 2025-03-16T13:17:48Z

style.css

+body,
+main {
+  height: 100%;
+  overflow: hidden;


페이지 자체에 overflow:hidden을 적용하다보니 화면을 세로로 좁혔을 때에는 나머지 요일이나 todo가 잘리는 거 같은데, 해당 스타일을 설정하신 이유가 있을까요 ??

chaeyoungwon · 2025-03-16T13:24:42Z

style.css

+  width: 50px;
+  color: white;
+  background-color: var(--darker-color);
+  border: none;


border 코드가 중복돼서 해당 코드는 삭제하셔도 될 거 같습니다!

chaeyoungwon · 2025-03-16T13:36:01Z

script.js

+    curDateObj.setDate(curDateObj.getDate() + 1)
+  }
+
+  console.log(weekDate)


console.log는 삭제해도 좋을 거 같습니다!

kkys00 added 27 commits March 13, 2025 19:34

feat: Todo 기본 UI 구현

d450975

chore: prettier 설정

066fbf8

feat: input에 대해 엔터, 버튼 클릭 처리 구현

a562dee

feat: Todo 상단에 오늘 날짜 반영 구현

dbb736f

feat: 추가된 todo를 화면에 표시 구현

115cb9d

refactor: todo 삭제를 쉽게 하기 위해 todoList를 객체로 변경

d2cfe5d

feat: todo 삭제 기능 구현

418e7e1

feat: 완료된 todo를 위한 todoListFinished 별도 관리, 상태 토글, 삭제 구현

645efa0

feat: 체크 토글 시 아이콘 변경 기능 구현

89e14b2

feat: 완료 task 개수 / 총 task 개수 표시 기능 구현

d326f3e

style: Pretendard 폰트 적용

47eb816

feat: 날짜 선택 및 화면 표시 구현

0205071

feat: 날짜별 todo 저장 및 표시 구현

82283b6

chore: 주석 제거, console.log 제거

3f15dd0

feat: LocalStorage 저장 기능 구현

64488b6

style: 날짜에 대한 hover 스타일 추가

e9637c1

feat: Todo header에 홈 기능 추가

ced5d03

docs: README 작성

f84a445

chore: 사용하지 않는 코드 삭제 및 정리

7be6e17

style: weekly 추가를 위한 view 조정

6c941b0

feat: 주간 todo count를 화면에 표시하고 계산 구현

f4ca3d6

fix: task 통계 NaN 오류 수정

9f091fe

feat: weekly 연월 element 클릭 시 날짜 선택 기능 추가

c1d16d9

feat: weekly data 클릭 시 daily view 이동 구현

30dee3b

feat: task를 추가할 때만 객체 생성으로 로직 변경

e074068

feat: KS 기준 week 표시 구현

5e06d48

docs: README 작성 추가

ab4c712

BeanMouse reviewed Mar 16, 2025

View reviewed changes

chaeyoungwon reviewed Mar 16, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차] 김영서 미션 제출합니다. #10

[1주차] 김영서 미션 제출합니다. #10

kkys00 commented Mar 15, 2025 •

edited

Loading

BeanMouse left a comment

BeanMouse Mar 16, 2025

BeanMouse Mar 17, 2025 •

edited

Loading

BeanMouse Mar 16, 2025

BeanMouse Mar 16, 2025

BeanMouse Mar 16, 2025

BeanMouse Mar 16, 2025

BeanMouse Mar 16, 2025

BeanMouse Mar 16, 2025

chaeyoungwon Mar 16, 2025

chaeyoungwon left a comment

chaeyoungwon Mar 16, 2025

chaeyoungwon Mar 16, 2025

chaeyoungwon Mar 16, 2025

chaeyoungwon Mar 16, 2025

chaeyoungwon Mar 16, 2025

chaeyoungwon Mar 16, 2025

		if (id in todoList) delete todoList[id]
		else delete todoListFinished[id]

[1주차] 김영서 미션 제출합니다. #10

Are you sure you want to change the base?

[1주차] 김영서 미션 제출합니다. #10

Conversation

kkys00 commented Mar 15, 2025 • edited Loading

배포 링크

느낀점

Key Questions

1. DOM은 무엇인가요?

2. 이벤트 흐름 제어(버블링&캡처링)이 무엇인가요?

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

BeanMouse left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BeanMouse Mar 17, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chaeyoungwon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kkys00 commented Mar 15, 2025 •

edited

Loading

BeanMouse Mar 17, 2025 •

edited

Loading