[1주차] 한서정 미션 제출합니다. #9

xseojungx · 2025-03-15T13:56:45Z

배포 링크

1주차 과제

느낀점

디자이너의 소중함🥹 DOM 조작보다 css 만들고 디자인한 시간이 더 걸린 것 깉아요...
리액트 같은 프레임워크의 소중함🥹 랜더링 기능을 수동으로 처리하니 랜더링코드, 기능 담당 함수들이 섞이며 가독성이 너무 떨어진다.
미션을 잘 읽자... 기능별로 커밋 메세지를 작성해야 하는걸 못 봐서 한번에 커밋해버렸습니다... 다음부터 꼼꼼하게 체크하겠습니다.

Key Questions

1. DOM은 무엇인가요?

DOM(Document Object Model)은 웹 브라우저가 HTML 문서를 이해하고 조작할 수 있도록 트리 구조의 객체로 변환한 것이다.
쉽게 말하면, HTML 문서를 자바스크립트에서 다룰 수 있도록 구조화한 것이다.
DOM을 통해 HTML 요소를 가져오고, 수정하고, 새로운 요소를 추가하는 것이 가능하다.

내 코드에서 DOM을 활용한 예시

document.getElementById("add-tag")를 사용해서 <select id="add-tag"></select> 요소를 가져옴.

const dropDown = document.getElementById("add-tag");

이런 방식으로 DOM을 활용하면 HTML 요소를 자바스크립트에서 동적으로 조작할 수 있다.

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

이벤트 흐름(Event Flow)*이란 이벤트가 발생할 때, 브라우저가 이벤트를 처리하는 방식을 의미한다.
이벤트 흐름에는 버블링(Bubbling)과 캡처링(Capturing) 두 가지 방식이 있ㅇ ㅁ

버블링(Bubbling)

이벤트가 가장 안쪽 요소에서 시작하여 바깥쪽 요소로 전파되는 방식이다.
예를 들어, <button>을 클릭하면 button → div → body 순서로 이벤트가 전달된다.

document.getElementById("add-todo").addEventListener("click", addTodo);

위 코드에서 #add-todo 버튼을 클릭하면 addTodo() 함수가 실행된다.
만약 부모 요소인 #todo-list-container에도 click 이벤트가 등록되어 있다면, 버튼을 클릭한 후에도 이벤트가 부모 요소까지 전달될 수 있다.

캡처링(Capturing)

이벤트가 가장 바깥쪽 요소에서 시작하여 안쪽 요소로 전달되는 방식이다.
addEventListener의 useCapture 옵션을 true로 설정하면 캡처링이 활성화된다.

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

스코프(Scope)

변수가 접근할 수 있는 범위를 의미한다.
자바스크립트에서 변수는 함수 스코프(함수 내부에서만 접근 가능) 또는 **블록 스코프(중괄호 {} 내부에서만 접근 가능)**를 가짐

function addTodo() {
    const text = document.getElementById("todo-input-text").value.trim();
    if (text === "") return alert("할 일을 입력해주세요.");
}
console.log(text); // ❌ Error: text is not defined (함수 스코프)

위 코드에서 text 변수는 addTodo() 함수 내부에서 선언되었기 때문에 함수 외부에서는 접근할 수 없음
함수 내부에서 선언된 변수는 외부에서 접근할 수 없음

클로저(Closure)

클로저는 함수가 선언될 때의 스코프를 기억하고, 해당 스코프에 접근할 수 있는 기능을 말함
쉽게 말하면, 외부 함수의 실행이 끝난 후에도 내부 함수가 외부 함수의 변수에 접근할 수 있도록 하는 것이다.

createTagManager() 함수가 실행될 때 tagCount 변수가 생성되지만, 내부 함수(addTag())가 계속 접근할 수 있다.
즉, 클로저를 활용하면 어떤 값을 기억하고 유지하는 것이 가능하다.

정리

📌 정리

개념	설명	코드 예시
DOM	HTML을 객체화한 구조로, JS에서 HTML을 조작할 수 있도록 함	document.getElementById("add-tag")
버블링	이벤트가 안쪽 → 바깥쪽으로 전파됨	button → div → body 순서로 이벤트 발생
캡처링	이벤트가 바깥쪽 → 안쪽으로 전파됨	addEventListener("click", handler, true)
스코프	변수가 접근할 수 있는 범위	함수 내부 변수는 외부에서 접근 불가
클로저	외부 함수의 변수를 내부 함수가 기억하여 계속 접근 가능

그 외

id vs class 차이점
- id: 고유한 스타일, 특정 요소에서 사용한다.
  - 한 문서에서 유일해야 함
  - 한개의 요소에만 적용 가능
  - getElementById() 를 사용해서 선택
- class: 여러 요소에 동일한 스타일 적용.
  - 여러 요소에 같은 스타일을 적용할 때 좋다.
  - 재사용이 가능
  - JavaScript에서 getElementsByClassName() 또는 querySelectorAll()로 선택 가능

only1Ksy

코드가 정말 깔끔하게 작성되어 있고 주석이 세세한 부분까지 잘 달려 있어 코드를 이해하기 정말 편했습니다!! 함수 분리도 그렇고 전반적으로 코드가 구조화가 잘 되어 있고, 디자인적인 면도 많이 신경쓰신 게 느껴졌습니다. 코드리뷰하면서 많이 배워갑니다! 과제하시느라 수고 많으셨어요.😸👍

only1Ksy · 2025-03-16T04:50:10Z

data.js

@@ -0,0 +1,138 @@
+/* 투두 모양 json 설계
+


데이터를 모듈화해서 사용하시는 방식이 깔끔하고 가독성이 좋아서 인상적이에요!! 코드 작성할 때 모듈화에 대해서는 생각해 보지 못했는데 저 또한 참고해서 고민해 봐야 할 것 같습니다. 😊👍

only1Ksy · 2025-03-16T04:53:14Z

index.html

+      <div id="header-div"></div>
+    </header>
+    <div class="app-container">
+      <section class="todo-input-section">


저는 한 번도 section 태그는 활용해 본 적이 없었는데 확실하게 구분되어 가독성이 올라가니 편한 것 같아요!

script.js

only1Ksy · 2025-03-16T05:58:24Z

styles.css

+  word-break: break-word; /* 긴 단어가 있으면 줄바꿈 */
+  overflow-wrap: break-word; /* 박스 안에서 줄바꿈 */


혹시 줄바꿈 속성을 두 개 설정하신 이유가 있을까요??

seoyeon5117

처음에 배포 링크 들어가보고 너무 잘 만드셔서 놀랐어요! css 파일에까지 주석이 달려있어서 이해하기 너무 편했고 함수명도 잘 지어주셔서 가독성이 좋았습니다,,
다만 요일별 todo 개수가 필수요건에 포함되어있어서 저도 급하게 추가했었는데 요일별 todo 개수도 확인할 수 있으면 좋았을 것 같습니다!
과제 하시느라 수고하셨습니다~!

seoyeon5117 · 2025-03-16T05:35:29Z

script.js

+    // 삭제 버튼
+    const deleteSpan = document.createElement("span");
+    deleteSpan.textContent = "삭제";
+    deleteSpan.classList.add("delete-btn");
+    deleteSpan.addEventListener("click", deleteTodo);


버튼은 태그를 사용하여 cursor: pointer와 같은 기본 css도 챙기고 접근성도 높이면 좋을 것 같습니다!

앗 넵 감사합니다! 수정해놓았습니다:)

seoyeon5117 · 2025-03-16T05:39:24Z

styles.css

+  padding: 10px;
+  gap: 4px;
+  border-radius: 8px;
+  font-size: 1rem;


font-size로 px와 rem을 섞어 사용하시는 이유가 궁금합니다!

seoyeon5117 · 2025-03-16T05:45:16Z

styles.css

+
+.app-container {
+  width: 100%;
+  padding: 80px 0 24px;


여기에 padding bottom이 들어가서 아래와 같이 하단에 여백이 생기는 것 같습니다!

seoyeon5117 · 2025-03-16T05:53:47Z

script.js

+    console.log(existingTag);
+    if (existingTag) {
+      // 기존 태그에 할 일이 있는 경우 → 해당 태그의 todos 배열에 추가
+      existingTag.todos.push(newTodo);
+    } else return alert("에러");


태그가 기본적으로 선택되어 있지 않아서 그냥 등록하려고 하면 에러가 발생합니다. existingTag를 '기본'으로 설정해두고 alert 메시지도 좀 더 자세히 적어두시면 좋을 것 같아요!

그리고 alert 창은 확인 버튼을 누르기 전까지 사용자의 동작을 막아 UX를 저해하기 때문에 별로 좋지 않다고 알고 있습니다. 대신 modal, toast 등을 사용하는 걸 추천드립니다!

불필요한 console.log는 삭제하면 더 좋을 것 같습니다!

이런 에러가 있었군요.. 감사합니다 수정했서요!

seoyeon5117 · 2025-03-16T05:56:41Z

script.js

+    } else return alert("에러");
+
+    //세션에 저장
+    sessionStorage.setItem("todos", JSON.stringify(todos));


localStorage 대신 페이지 세션이 끝날 때 데이터가 제거되는 sessionStorage를 사용하신 이유가 따로 있으신가요??

seoyeon5117 · 2025-03-16T05:59:39Z

data.js

+const color = [
+  "#E3EAF5",
+  "#C6D3EE",
+  "#BCC8E6",
+  "#E5DFF5",
+  "#D7E3F3",
+  "#CFE0F1",
+  "#D9D0F2",
+  "#E1E7F8",
+  "#D0D7F1",
+  "#E8E3FA",


태그별로 색상 다르게 하신거 너무 예쁜 것 같습니다💕

seoyeon5117 · 2025-03-16T06:01:56Z

script.js

+  const tagList = document.getElementById("todo-list-container");
+
+  // 태그 컨테이너 생성 공통 함수
+  // 처음에 innerHtml 사용했는데 찾아보니 보안상 위험하다고 해서 다시 만듬


헉 저는 그냥 innerHtml 사용했는데 꼼꼼하시군요,,

seoyeon5117 · 2025-03-16T06:04:02Z

script.js

+    todoText.classList.add("todo-text");
+
+    //아랫줄
+    const dateDiv = document.createElement("div");


<div> 말고 <date> 태그 사용하면 더 좋을 것 같습니다!

seoyeon5117 · 2025-03-16T06:05:20Z

index.html

+      <footer>
+        <p>© 한서정 세오스 1주차 과제</p>
+      </footer>


섬세함이 돋보이는 과제 같습니다,, 👍

xseojungx added 7 commits March 15, 2025 21:44

1주차

124be7c

mock 데이터 추가

26981af

fix. style 수정

9e66ea7

fix. script 파일 수정

6480810

fix. todo list json 업데이트 에러 픽스

466aeb4

chore. 미사용 css 삭제, 주석 수정

a840a5f

refactor. 중복 코드 줄이기 위한 script 랜더링 공통 함수

41164be

only1Ksy reviewed Mar 16, 2025

View reviewed changes

seoyeon5117 reviewed Mar 16, 2025

View reviewed changes

xseojungx added 5 commits March 16, 2025 17:05

feat. 엔터키로 투두, 태그 등록하기

6bd93d2

feat. 오늘 할 일 count 추가, 투두 추가, 삭제할 때 증감

54a1d31

fix. alert 에러 메세지 구체화(태그), 입력 필드 초기화 시 태그는 ''이 아닌 '기본'으로 설정되도록 수정

b5bab0c

fix. delete 버튼 cursor: pointer

bda7c7c

fix. 오늘 할 일 갯수

ed24fc7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[1주차] 한서정 미션 제출합니다. #9

[1주차] 한서정 미션 제출합니다. #9

xseojungx commented Mar 15, 2025 •

edited

Loading

only1Ksy left a comment •

edited

Loading

only1Ksy Mar 16, 2025

only1Ksy Mar 16, 2025

only1Ksy Mar 16, 2025

seoyeon5117 left a comment

seoyeon5117 Mar 16, 2025

xseojungx Mar 16, 2025

seoyeon5117 Mar 16, 2025

seoyeon5117 Mar 16, 2025

seoyeon5117 Mar 16, 2025

xseojungx Mar 16, 2025

seoyeon5117 Mar 16, 2025

seoyeon5117 Mar 16, 2025

seoyeon5117 Mar 16, 2025

seoyeon5117 Mar 16, 2025

seoyeon5117 Mar 16, 2025

		word-break: break-word; /* 긴 단어가 있으면 줄바꿈 */
		overflow-wrap: break-word; /* 박스 안에서 줄바꿈 */

[1주차] 한서정 미션 제출합니다. #9

Are you sure you want to change the base?

[1주차] 한서정 미션 제출합니다. #9

Conversation

xseojungx commented Mar 15, 2025 • edited Loading

배포 링크

느낀점

Key Questions

1. DOM은 무엇인가요?

내 코드에서 DOM을 활용한 예시

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

버블링(Bubbling)

캡처링(Capturing)

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

스코프(Scope)

클로저(Closure)

정리

📌 정리

그 외

only1Ksy 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

seoyeon5117 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

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

xseojungx commented Mar 15, 2025 •

edited

Loading

only1Ksy left a comment •

edited

Loading