[1주차] 신용섭 과제 제출합니다 by dragunshin · Pull Request #3 · CEOS-Developers/vanilla-todo-22nd

dragunshin · 2025-09-12T19:08:33Z

배포 링크

https://ceos-week1-vanilla-todo-22nd.vercel.app/

과제를 진행하며 느낀점

우선 html css js에 낯설었던 부분이 하나의 문제였습니다.
또한, 단순 하루에 대한 task의 코드와 요일 별 task의 코드가 매우 달라서 당황했습니다.
요일 별 task를 구현하는 과정에서 단순 하루로 가정하고 만들었던 부분들을 갈아엎어야 했던 점이 힘들었습니다.

Review Question

DOM은 무엇인가요?

문서 객체 모델 ( Document Object Model)은 문서의 구조화된 표현을 제공한다.

웹페이지는 일종의 document다. 웹 페이지의 객체지향표현이며 Javascript와 같은 스크립팅 언어로 DOM을 수정한다

DOM 접근

document.getElementById() 
# id 속성으로 요소 찾기

document.querySelector() 
document.querySelectorAll()
#CSS 선택자를 사용하여 요소 찾기

document.getElementByClassName() 
document.getElementsByTagName()
# 클래스명이나 태그명으로 요소 찾기

DOM 조작

elem = document.createElement()
elem.textContent = "new content"
document.body.appendChild()
# 노드 생성, 추가

old = document.getElementById()
old.remove()
# 노드 삭제

이벤트 핸들링

const button = document.querySelector('button');
button.addEventListener('click',function() {
alert(버튼이 클릭되었습니다)});

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

HTML 문서는 계층적 구조를 가짐. 이 구조로 인해 이벤트 발생 시 연쇄 이벤트 흐름 발생.

버블링: 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파 (Default)

EventTarget.addEventListener('eventType',functionName,[, useCapture])

캡쳐링: 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안 쪽 자식 요소까지 도달

useCapture 가 True

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

Scope : 변수의 유효 범위. global scope, local scope가 있다.

Closer : 함수가 선언될 당시의 scope를 기억하는 함수

dragunshin · 2025-09-14T16:23:09Z

아! 코드 리뷰전에 생각난 것이
폰트를 제 맘대로 san-serif 하고 변경을 까먹었습니다 그 부분 양해해주시면 감사하겠습니다!

KWONDU

1주차 과제 고생하셨습니다 -!

+) 다음 과제부터는 prettier도 적용해보시면 좋을 거 같아요 !

KWONDU · 2025-09-15T02:20:49Z

index.html

+        <meta charset="UTF-8">
+        <title>Vanilla Todo</title>
+        <link rel="stylesheet" href="style.css">
+        <script src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>        


fontawesome 라이브러리를 사용하지 않으신 거 같은데 (주석 처리), 이 경우 최적화를 위해서 지워주셔도 될 거 같아요.

추가적으로 해당 라이브러리 공식 사이트 보시면 v7.0.1까지 출시된 거로 보여지는데 해당 부분도 참고하시면 좋을 거 같아요.

KWONDU · 2025-09-15T02:31:42Z

index.html

+        <div class="taskList">
+            <ul id="taskList"></ul>
+        </div>
+        <script src="script.js"></script>


script tag를 어디 위치에 사용하는지에 따라 달라지는 부분이 있습니다. defer나 async 같이 다양한 속성이 있으니 기회 되실 때 찾아보셔도 좋을 거 같아요 (많이 쓰지는 않겠지만)

KWONDU · 2025-09-15T02:32:53Z

vercel.json

이 파일을 작성하신 이유가 있을까요? 1주차 과제처럼 단일 페이지에서는 굳이 사용하지 않으셔도 될 것 같습니다.

vercel.json이 빠지면 배포가 되지 않아 추가했었습니다

vercel 프로젝트 > Settings > Build and Deployment > Root Directory 설정 확인해 보시는 것도 괜찮을 거 같아요 왜 배포가 안될까요 ,,

KWONDU · 2025-09-15T02:38:17Z

style.css

+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}


이렇게 css reset property 적용하신 게 좋은 거 같아요.

https://meyerweb.com/eric/tools/css/reset/ 다양한 reset.css 코드가 있는데요, 이런 거 참고하시면 더 좋을 거 같아요.

KWONDU · 2025-09-15T02:38:42Z

style.css

+body {
+    background-color: #f4f4f4;
+    display: grid;
+    justify-content: center;


body에만 grid display를 적용하셨는데요 (나머지는 flex) 관련하여 이유가 있을까요 ?

뼈대를 잡기 위해 사용했었습니다. 그러나, justify-content: center;를 쓰기 때문에 flex로 일관성 있게 하는 것이 더 나을 것 같습니다

KWONDU · 2025-09-15T02:40:27Z

style.css

+}
+button:hover {
+    background-color: darkred;
+}


이렇게 hover 인터렉션 효과 추가하신 거 좋은 거 같아요

KWONDU · 2025-09-15T02:45:15Z

script.js

+    if (taskText === '') {
+        alert('Please enter a task.');
+        return;
+    }


이렇게 alert 사용하신 거 좋은 거 같아요

KWONDU · 2025-09-15T02:50:36Z

script.js

+const addTaskButton = document.getElementById('addTaskButton');
+const taskList = document.getElementById('taskList');
+const currentTask = document.getElementById('currentTask');
+const userDate = document.getElementById('userDate');


(1)처음 랜더링되었을 때 > (2) 날짜 선택 X > (3)그럼에도 불구하고 Todo 추가 됨

오류가 발생하고 있어요.

document.getElementById('userDate').valueAsDate = new Date();

이렇게 input date 초기 값 설정해주시면 좋을 거 같아요

dragunshin added 5 commits September 13, 2025 03:58

기본 UI 구현

68f94cd

할일 등록 및 삭제

b4c3553

할일 완료 표시

98ccfcd

요일 별 todo개수 적용

beda6bd

vercel

8e03077

KWONDU reviewed Sep 15, 2025

View reviewed changes

dragunshin added 2 commits September 15, 2025 12:43

update code

8be3c05

re-add vercel.json

046edce

Comments

Conversation

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

Uh oh!

배포 링크

과제를 진행하며 느낀점

Review Question

Uh oh!

dragunshin commented Sep 14, 2025

Uh oh!

KWONDU left a comment • 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!

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!

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!

2 participants

dragunshin commented Sep 12, 2025 •

edited

Loading

KWONDU left a comment •

edited

Loading