[1주차] 권오진 과제 제출합니다.

[KOJ50]

느낌점:
교양 수업 중 HTML/CSS/JS에 대해 설명하는 수업을 들었던 점이 이번 To-Do list을 만드는데 큰 도움이 되었습니다. 배운 내용을 토대로 전체 구조를 작성하고 CSS로의 디자인과 JS을 이용하여 기능을 구현하였습니다. 이번 과제에서 가장 어려웠던 부분은 To-Do을 작성하고 등록하는 과정을 코드 작성하기 가장 어려웠습니다. To-Do을 입력하면 화면에 해당 입력값을 나타내야 하고 등록했을 때 To-Do 갯수를 나타내는 등 부가적인 요소들도 동시에 연결하는 과정이 가장 어려웠었습니다.

---

배포링크

---

Review Questions

1. DOM은 무엇인가요?
   DOM(Document Object) :

• HTML등으로 구성된 웹 페이지를 스크립트 등 프로그래밍 언어와 연결시켜주는 역할
• HTML 문서 구조를 객체로 표현한 것
• DOM의 계층은 트리 자료 구조로 최상위 노드에서 자식 노드로 뻗어나감

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

• 이벤트 흐름 제어 : HTML 문서는 계층적 구조로 이루어져 있어 한 요소에서 이벤트가 발생할 경우 연쇄적으로 이벤트 흐름이 발생할 수 있음

• 버블링(Bubbling) : 자식 요소에서 발생한 이벤트가 부모 요소로 전파 (Default)
  // 버블링 동작 (false 생략 해도됨)
element.addEventListener('click', (e) => { ... }, false);
• 캡쳐링(Capturing) : 이벤트가 부모요소부터 시작하여 자식 요소까지 전파
  // 캡처링 동작
element.addEventListener('click', (e) => { ... }, true);
element.addEventListener('click', (e) => { ... }, {capture: true});
• 캡처링 단계 -> 타깃 단계 -> 버블링 단계
  (캡처링 단계 : 이벤트가 최상위 조상부터 아래로 전파 / 타깃 단계 : 이벤트가 타깃 요소에 도착 / 버블링 단계 : 다시 상위로 이벤트 전파)

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

• 함수가 선언될 당시의 스코프를 기억하는 함수
• 내부 함수가 외부 함수의 변수에 접근하도록 함
• 클로저는 주로 데이터 은닉, 상태 유지 등의 용도로 활용
  스코프 :
• 변수의 유효 범위를 정의
• 전역 스코프 : 코드의 어디에서나 접근 가능
• 지역 스코프 : 특정 함수 내에서만 접근

---

참고:
DOM
이벤트 흐름 제어
클로저&스코프

[ryu-won]

1주차 과제 하시느라 고생많으셨습니다! 👍👍 시간 부족하셨을텐데, 다크모드까지 구현하셨네요! 선택요건인 로컬스토리지 저장도 구현해주셨구요! keyquestion도 꼼꼼하게 작성하신 모습이 굿굿입니다

[ryu-won]

요 css가 적용되는 html요소가 없네용!

[ryu-won]

해당 css도 사용되지 않네용!

[ryu-won]

todoList.appendChild(listItem)이 forEach 안에서 반복 호출되고 있는데,
todoList는 이미 실제 DOM에 붙어있는 요소라 호출할 때마다 리플로우가 발생해요!

Suggested change

	todoList.appendChild(listItem);
	const fragment = document.createDocumentFragment();
	todoArray.forEach(function (todo, index) {
	// 로직 그대로.....
	fragment.appendChild(listItem);
	});
	todoList.appendChild(fragment); // DOM 변경 1번만!`

DocumentFragment는 메모리 안에만 존재하는 가상의 임시 컨테이너입니다. 실제 DOM에 붙어있지 않아서 아무리 조작해도 리플로우가 발생하지 않고, 다 조립된 후 마지막에 한 번만 DOM에 추가하기 때문에 성능이 좋아져요!

[ryu-won]

중복으로 todo가 추가되는 문제가 있는데 한글이 조합문자라서 그런 것 같아요. keydown 이벤트가 아니라 keyup으로 하시거나 keydown 이벤트에서 isComposing(조합중)인지 아닌지 확인해서 조합중이 아닐때 addTodo 할 수도 있어요 아래 링크 참고부탁드립니당

keydown 한글 중복 문제

[ryu-won]

비슷한 구조의 함수가 반복되는 것 같아서 하나의 함수에 인자만 다르게 전달하는 방법도 있을 것 같아요!

Suggested change

	function minusWeek() {
	const currentDate = new Date(todoDate.value);
	currentDate.setDate(currentDate.getDate() - 7);
	formatChangeDate(currentDate);
	}
	function plusWeek() {
	const currentDate = new Date(todoDate.value);
	currentDate.setDate(currentDate.getDate() + 7);
	formatChangeDate(currentDate);
	}
	// 3) 이전 날짜 / 다음 날짜
	function minusDay() {
	const currentDate = new Date(todoDate.value);
	currentDate.setDate(currentDate.getDate() - 1);
	formatChangeDate(currentDate);
	}
	function plusDay() {
	const currentDate = new Date(todoDate.value);
	currentDate.setDate(currentDate.getDate() + 1);
	formatChangeDate(currentDate);
	}
	`function changeDate(days) {
	const currentDate = new Date(todoDate.value);
	currentDate.setDate(currentDate.getDate() + days);
	formatChangeDate(currentDate); }
	prev7.addEventListener("click", () => changeDate(-7));
	next7.addEventListener("click", () => changeDate(+7));
	prev1.addEventListener("click", () => changeDate(-1));
	next1.addEventListener("click", () => changeDate(+1));`