[1주차] 김철흥 미션 제출합니다. #8

DefineXX · 2025-03-15T09:20:16Z

🔗 배포 링크

To Do List

🫥 느낀 점

이번 1주차 미션을 진행하면서 느낀 점(어려움)은 크게 2가지였던 것 같습니다.

React와 같은 프레임워크를 사용한 개발 방식과 비교했을 때 인터랙션과 관련된 UI를 구현하는데 있어서의 번거로움
정적 프로젝트를 Vercel에 배포할 때의 루트 디렉토리가 정상적으로 탐색되지 않음으로써 생겼던 배포의 어려움

여전히 public에 있는 정적 파일이 로드되지 않는 에러가 발생하는데, 이 부분도 해결하면서 정적 프로젝트의 배포까지의 과정에 대한 이해를 할 수 있을 것 같습니다.

이번 미션을 진행하면서 피그마로 직접 디자인을 하면서 미션을 수행했는데 이 부분도 굉장히 재밌었습니다!

Key Question

1. DOM이란?

DOM(Document Object Model, 문서 객체 모델)은 웹 문서(HTML, XML)를 구조화하여 프로그램이 문서의 구조, 스타일, 내용 등을 동적으로 변경할 수 있도록 하는 인터페이스

웹 브라우저가 HTML 문서를 로드할 때, 이를 계층적인 트리 구조로 변환
➡️ 이 트리가 DOM!

DOM 구조 (트리)

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

웹에서 이벤트가 발생하면 브라우저는 캡처링 → 타겟 → 버블링 순서로 이벤트 전파를 진행함

캡처링(Capturing) 단계

이벤트가 최상위 요소(document)에서부터 시작하여 이벤트가 발생한 요소(target)까지 내려오는 과정
즉, 부모 → 자식 방향으로 이벤트가 전달됨

타겟(Target) 단계

이벤트가 실제로 발생한 요소에서 실행됨

버블링(Bubbling) 단계

이벤트가 이벤트가 발생한 요소에서부터 상위 요소로 전파되는 과정

즉, 자식 → 부모 방향으로 이벤트가 전달됨

3. 스코프(Scope)와 클로저(Closure)

스코프(Scope)란?

스코프는 변수에 접근할 수 있는 범위를 의미

a. 전역 스코프(Global Scope)

어디서든 접근할 수 있는 변수의 범위
var, let, const를 사용하여 window 객체에 등록되지 않는다면 전역 변수가 됨

b-1. 지역 스코프(Local Scope)

함수 또는 블록 내부에서 선언된 변수는 해당 범위(스코프)에서만 접근 가능

b-2. 블록 스코프(Block Scope)와 함수 스코프(Function Scope)

var는 함수 스코프만 따르며, 함수 내부에서만 유효함
let, const는 블록 스코프를 가지며, {} 내부에서만 유효함


if (true) {
    var a = 10; // 함수 스코프 (if문 바깥에서도 접근 가능)
    let b = 20; // 블록 스코프 (if문 바깥에서는 접근 불가)
}

console.log(a); // 10 (접근 가능)
console.log(b); // ❌ 에러 발생 (b is not defined)

클로저(Closure)란?

클로저는 외부 함수의 변수를 내부 함수에서 참조할 수 있는 개념

즉, 외부 함수가 실행된 후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 현상을 클로저라고 함

ex.)

function outerFunction(outerVar) {
    return function innerFunction(innerVar) {
        console.log(`Outer: ${outerVar}, Inner: ${innerVar}`);
    };
}

const closureExample = outerFunction("Hello");
closureExample("World"); 
// Outer: Hello, Inner: World

위 코드에서 innerFunction은 outerFunction 내부에서 선언되었지만, outerVar를 기억하고 유지함
➡️함수가 생성될 당시의 외부 변수 환경을 기억하는 것이 클로저의 핵심!

gustn99 · 2025-03-16T08:21:36Z

app.js

+    const taskItem = document.createElement('div');
+    taskItem.classList.add('task-item', 'to-do-item');
+
+    const checkboxContainer = document.createElement('label');
+    checkboxContainer.classList.add('checkbox-container');
+
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.classList.add('task-checkbox');
+
+    checkboxContainer.appendChild(checkbox);
+
+    const taskText = document.createElement('span');
+    taskText.classList.add('task-text');
+    taskText.textContent = taskValue;


label 태그를 input과 함께 사용하면 for로 지정된 요소 또는 함께 label로 묶인 요소의 click 이벤트로 label의 click 이벤트를 제어할 수 있습니다. 그래서 checkbox와 같은 경우 텍스트를 클릭해도 checkbox를 클릭할 수 있도록 하기 위해 label 태그를 많이 사용합니다. 만약 그런 의도로 label 태그를 사용하셨다면, span 태그 또한 label의 자식 요소로 추가하거나, label의 for 속성을 사용해서 span의 id와 엮어줘야 할 것 같습니다!

gustn99 · 2025-03-16T08:34:49Z

app.js

+  const formatSelectedDate = (selectedDate) => {
+    const year = selectedDate.getFullYear();
+    const month = String(selectedDate.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작하므로 +1
+    const day = String(selectedDate.getDate()).padStart(2, '0');
+
+    const weekdays = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
+    const weekday = weekdays[selectedDate.getDay()];
+
+    return `${year}.${month}.${day} (${weekday})`;
+  };
+
+  // 초기 날짜 설정 (현재 날짜)
+  const today = new Date();
+
+  document.querySelector('.today-date').textContent = formatSelectedDate(today);


날짜를 포매팅한 후 항상 document.querySelector('.today-date').textContent을 포매팅된 날짜로 설정한다면, 그 로직을 formatSelectedDate 함수 내부에 작성해도 될 것 같습니다. 그러면 handleDateSelect 내부에서도 document.querySelector('.today-date').textContent = formatSelectedDate(dateObject);라고 작성하는 대신 formatSelectedDate(dateObject)만 호출하면 되니까요!

gustn99 · 2025-03-16T08:36:04Z

app.js

+  datePicker.addEventListener('change', () => {
+    handleDateSelect();
+  });


함수에 별도의 인자를 넘겨주지 않는 경우에는 아래와 같이 두 번째 인자로 함수만 넘겨줄 수도 있습니다!

datePicker.addEventListener('change', handleDateSelect)

gustn99

리액트에서 기능에 따라 컴포넌트를 분리하듯 바닐라에서도 역할에 따라 함수를 분리하고 파일을 분리하면 가독성 측면으로도, 유지보수 측면으로도 더 개선된 코드를 작성할 수 있을 것 같습니다. 코멘트를 남기는 중에도 계속해서 리팩토링이 이루어지고 있는데요 ㅎㅎ 꾸준히 과제를 디벨롭하는 모습 멋있습니다. . . 고생 많으셨어요!

추가로 개별 코멘트로 과도한 알림을 보낸 점 사과드립니다. . .
헉. 코멘트를 보낸다는 걸 request changes를 눌러버렸어요 request changes는 무시해 주셔도 괜찮습니다!!! 💦💦💦

gustn99 · 2025-03-16T08:44:15Z

styles.css

+
+  background: transparent;
+
+  overflow-x: scroll;


task-item과 아래 task-text에 설정한 overflow-x 때문에 화면에 스크롤바가 나타나고 있습니닷. 줄바꿈이 되고 있는 것 같은데 가로 스크롤을 설정하신 이유가 있으실까요?
image.png

gustn99 · 2025-03-16T08:57:22Z

app.js

+  const addTaskForm = document.getElementById('add-task-form');
+  const addTaskInput = document.querySelector('.add-task-input');
+  const toDoList = document.getElementById('to-do-list');
+  const doneList = document.getElementById('done-list');
+  const noTasksToDo = document.getElementById('no-tasks-to-do');
+  const noTasksDone = document.getElementById('no-tasks-done');


저는 리액트에서 전체 코드 순서를 변수 -> 함수 -> useEffect -> 렌더링과 같이 작성해 왔는데요, 바닐라에서도 마찬가지로 변수 -> 함수 순서로 작성하게 되더라고요. 그런 점에서 변수 -> 함수 -> 변수 -> 함수 같은 흐름은 관심사를 분리할 때라는 좋은 신호인 것 같습니다.

이 위로는 date 관련 코드이니 date.js에, 아래는 task와 관련된 코드이니 task.js로 분리해서, app.js에서는 그 함수들을 import하여 document에 이벤트 리스너를 등록하는 형식은 어떨까요?

저도 코드를 작성하면서 모듈화의 필요성을 느꼈는데, 이 부분 반영해서 리팩토링해보겠습니다 :)

2025314242

좋은 코드라고 생각합니다! 특히 UI 같은 경우 저도 굉장히 난항을 겪었는데, 피그마로 디자인 후 svg 파일 추가 등 해서 진행하신 게 너무 좋았습니다! 저도 다음 번에 기회가 되면 해당 방식으로 시도해보고자 합니다.

2025314242 · 2025-03-17T05:28:29Z

app.js

+      text: taskValue,
+      completed: false,
+      date: selectedDateStr,
+    };


이렇게 task 객체 unique ID로 관리하게 되면 장점이 많다고 생각합니다. 다만 Date.now()로 값을 할당하게 되면 date와 겹치는 부분이 있다고 생각해 hash 등을 사용해 암호화하는 방식은 어떨까요?

현재 시간을 고유한 ID로 사용한 후에, 날짜 선택 기능을 추가하면서 id의 값이 중복된 의미의 필드가 된 것 같네요!
고유 ID로 사용할 수 있는 더 좋은 방식을 채택해서 리팩토링해보겠습니다 :)

2025314242 · 2025-03-17T05:33:00Z

app.js

+
+    const filteredTasks = tasks.filter((task) => task.date === selectedDateStr);
+    filteredTasks.forEach((task) => renderTask(task));
+  };


해당 과제에서 그럴 일은 없겠지만, date 값을 객체 속성으로 두면 O(N)이 걸릴 것 같습니다. {id, date, text, completed} -> date: {id, text, completed} 이렇게 2차원으로 만드시는 건 어떠실까요? (보통 N >> k 이기 때문에0

위에서 date 필드와 id 필드를 리팩토링할 소요가 있었는데, date 필드 안에 task 객체 배열을 두는 방식으로 리팩토링하면 코드가 더 깔끔해질 것 같네요!

좋은 피드백 감사합니다 :)

DefineXX added 30 commits March 15, 2025 12:22

Vanilla JS Setup

2d113f2

style: 스타일 가이드 및 스타일링 환경 세팅

92794b7

feat: To Do List 추가 기능 및 Task List UI 구현

b347e1f

feat: 글자 수에 따른 컨테이너 초과 UX 보완

4867e4f

style: To Do 와 Done Section 레이아웃 세팅

b3c07d5

feat: Task에 대한 Check 기능 구현

4f2a7d6

fix: Check Icon 언마운트 로직 추가

667f8b3

feat: 현재 날짜 추가

3d752cb

feat: Task 삭제 버튼 UI 추가

e28b796

feat: Task 삭제 로직 및 삭제 버튼 애니메이션 추가

dd2b65c

feat: Task Input 내 autofocus 추가 및 mobile phone 내 스크롤바 제거

aee61f2

feat: Task Count 구현

5effcda

fix: Vercel 정적 배포를 위해 디렉토리 구조 변경

82cde2b

fix: script 및 stylesheet 경로 변경

fd5045c

docs: Update README.md

37c7760

chore: public 디렉토리로 index.html 이동

60c2e62

fix: script 및 stylesheet 경로 변경

b5d9d4d

chore: public 디렉토리 내 모든 소스 파일 위치

f796480

chore: 디렉토리 구조 변경

e20ca56

chore: src 디렉토리로 소스 파일 이동

9f1b512

chore: 루트 디렉토리로 소스 파일 이동

3856ed4

chore: 빌드 시 소스 파일 포함 위해 vercel.json 설정

1aca14c

chore: vercel.json 수정

0968126

fix: svg 아이콘 경로 수정

fcb9b56

fix: Completed Task에 대한 클래스명 변경 누락 수정

610beb3

feat: 모바일 화면에 대한 반응형 추가

ad0cece

feat: background에 대한 반응형 추가

f83052b

fix: 반응형 로직 수정

6f05b05

fix: backgroud 반응형 수정

ba21f13

feat: 캘린더 기능 추가 및 UI 스타일링 수정

521d0af

fix: Task 추가 form 태그로 변경 및 submit 핸들러로 변경

3cef316

gustn99 reviewed Mar 16, 2025

View reviewed changes

refactor: Task CRUD 로직 refactor

ea45e49

gustn99 suggested changes Mar 16, 2025

View reviewed changes

DefineXX added 4 commits March 16, 2025 18:45

feat: 선택된 날짜에 대한 Task 렌더링 로직 추가

2724f5e

fix: 새로고침시 발생하는 Task List 분류 버그 수정

113763e

fix: 모바일 기기 내 date input 렌더링 테스트

10535b8

fix: 모바일 환경 대응 ver.1

2b31ee7

2025314242 reviewed Mar 17, 2025

View reviewed changes

fix: 불필요한 이벤트 리스너 삭제

de5b2f3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차] 김철흥 미션 제출합니다. #8

[1주차] 김철흥 미션 제출합니다. #8

DefineXX commented Mar 15, 2025 •

edited

Loading

gustn99 Mar 16, 2025

gustn99 Mar 16, 2025

gustn99 Mar 16, 2025

gustn99 left a comment •

edited

Loading

gustn99 Mar 16, 2025

gustn99 Mar 16, 2025

DefineXX Mar 17, 2025

2025314242 left a comment

2025314242 Mar 17, 2025

DefineXX Mar 17, 2025

2025314242 Mar 17, 2025

DefineXX Mar 17, 2025

[1주차] 김철흥 미션 제출합니다. #8

Are you sure you want to change the base?

[1주차] 김철흥 미션 제출합니다. #8

Conversation

DefineXX commented Mar 15, 2025 • edited Loading

🔗 배포 링크

🫥 느낀 점

Key Question

1. DOM이란?

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

3. 스코프(Scope)와 클로저(Closure)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

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

2025314242 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

DefineXX commented Mar 15, 2025 •

edited

Loading

gustn99 left a comment •

edited

Loading