[1주차] 정성훈 과제 제출합니다. #9
Conversation
| addButton.addEventListener('click', () => { | ||
| const text = todoInput.value.trim(); | ||
| if (text === '') return; | ||
|
|
||
| const date = formatDate(currentDate); | ||
| if (!todos[date]) { | ||
| todos[date] = []; | ||
| } | ||
| todos[date].push(text); | ||
|
|
||
| localStorage.setItem('todos', JSON.stringify(todos)); | ||
| todoInput.value = ''; | ||
| renderTodos(); | ||
| }); | ||
|
|
||
| // 전날 버튼 클릭 | ||
| prevButton.addEventListener('click', () => { | ||
| currentDate.setDate(currentDate.getDate() - 1); | ||
| updateDate(); | ||
| renderTodos(); | ||
| }); | ||
|
|
||
| // 다음날 버튼 클릭 | ||
| nextButton.addEventListener('click', () => { | ||
| currentDate.setDate(currentDate.getDate() + 1); | ||
| updateDate(); | ||
| renderTodos(); | ||
| }); |
There was a problem hiding this comment.
버튼마다 addEventListener로 세분화되어 겹치는 코드들이 있습니다
하나의 addEventListener로 합치면 중복 코드들이 다소 줄어들 것 같습니다
| @@ -0,0 +1,36 @@ | |||
| @font-face { | |||
| font-family: 'Pretendard'; | |||
| src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff'); | |||
There was a problem hiding this comment.
pretendard 웹 폰트 적용하신 거 좋은 거 같아요. 다만 woff2 format이라는 개선 버전이 출시되었으니 해당 형식 사용하시면 더 좋을 거 같아요.
더불어서 지금은 이렇게 font-weight 100만 사용하셨는데, 추후 pretendard variable 파일 다운받아서 사용하시면 import 한 번으로 100-900 weight 다 사용하실 수 있답니다
| font-display: swap; | ||
| } | ||
| body { | ||
| font-family: 'Pretendard'; |
There was a problem hiding this comment.
이렇게 Pretendard 적용하신 건 좋은 거 같아요. 다만 웹 페이지 랜더링이 느리거나 오류가 날 경우를 대비하여 font-family: 'Pretendard', sans-serif; 이런 식으로 예비 시스템 폰트도 추가해놓으시면 더 좋은 코드가 될 것 같아요
| } | ||
| #todo_input{ | ||
| padding: 5px; | ||
| } No newline at end of file |
There was a problem hiding this comment.
class 대신 id 기반으로 코딩하신 거 좋은 거 같아요
| #main_contents{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; |
| <section> | ||
| <div id="date_container"> | ||
| <button id="date_prev"><</button> | ||
| |
There was a problem hiding this comment.
이렇게 nbsp 사용하시는 것도 좋지만, 추후 과제에서는 display flex 같은 요소를 사용하시면 좀 더 안정적인 코드가 될 거 같아요
| <div id="list_container"> | ||
| <ul id="todo_list"> | ||
| </ul> | ||
| </div> |
There was a problem hiding this comment.
해당 날짜에 todo가 없으면 빈 상자 대신 '할 일을 추가하세요' 같은 UI 요소를 추가하면 더 좋을 거 같아요
| li.appendChild(deleteButton); | ||
| todoList.appendChild(li); | ||
| }); | ||
| } |
There was a problem hiding this comment.
리팩토링 하실 때 display: flex; justify-content: between; 사용하시면 좀 더 심미안적으로 좋은 UI가 될 거 같아요
3 participants
배포 링크 : https://vanilla-todo-22nd-seonghunjung.vercel.app/
Review Question
1.DOM은 무엇인가요?
Document Object Model의 약자입니다. DOM은 웹 페이지 내의 객체에 프로그래밍 언어가 접근할 수 있게 도와주고, 이를 조작할 수 있게 해줍니다. 주로 자바스크립트로 웹페이지의 요소를 선택해 수정, 삭제, 추가 등을 하는 데 사용합니다.
2.이벤트 흐름 제어(버블링 & 캡처링)이 무엇인가요?
HTML은 태그로 감싸져 있기 때문에, 계층적 구조를 가집니다. 그래서 자식요소나 부모요소가 서로에게 영향을 미치는 경우가 생깁니다. 이때 부모요소가 자식요소에게 영향을 미치면 캡쳐링, 자식요소가 부모요소에게 영향을 미치면 버블링이라고 합니다. 보통 브라우저는 버블링을 기본값으로 채택합니다.
3.클로저와 스코프가 무엇인가요?
어떤 함수 내에 선언된 변수 x가 있다고 합시다. 만약 그 함수밖에서도 x를 선언했을 때, x는 두번 선언되게 됩니다. 이 경우 우리가 어떤 변수 x를 사용할지 그 범위가 각각의 프로그래밍 언어마다 정의되어 있는데 , 이걸 스코프라고 합니다. 클로저는 함수와 이 함수가 선언된 스코프를 기억해, 외부 함수가 기억된 함수 속 변수에 접근할 수 있게 해주는 기능입니다.