[과제 #1] 바닐라 자바스크립트로 To Do App 만들기

웹 크기 조절 시 박스가 원하는 모양으로 커지지 않아서 padding, margin값 조절하면서 계속 헤맸는데, 처음 설정할 때 input 부분 width를 80%로 해서 양쪽에 남게 나오는 것이었다. width: 100%로 변경 후 남는 부분 없이 꽉 차게 수정.
document.querySelector(“` “); 통해 document에서 매치되는 첫번째 요소 가져오기
vercel 배포 방법 새로 알게 되었다. 처음 배포한 후 설정에 들어가서 브랜치를 수정해도 계속 메인 브랜치 화면이 떴는데,
코드에 수정사항이 생긴 후 다시 push하면 내 브랜치로 잘 뜬다.
추가 버튼에 커서를 올렸을 때 색이 변하게 하고 싶어서 button:hover background-color랑 color값 따로 설정.
display:flex를 사용하고, 콘솔창 띄워 설정값 변경해가면서 원하는 스타일 찾으니까 배치하기 더 수월했다.
DOM 개념 및 조작 방법 구글링해가면서 코드 작성하긴 했는데 아직 이해가 잘 안가는 부분이 많으니 더 익숙해지자.
const 설정하는 것 더 익숙해지자.
VS Code에서 commit, push하는 방법
함수명, 변수명은 lowerCamelCase로!
변수명 지을 때 약어는 최대한 지양하자.

Document Object Model, 즉 문서 객체 모델은 객체 지향 모델로, 구조화된 문서를 표현하는 인터페이스이다. 넓게는 웹 브라우저가 HTML을 인식하는 방식을 말하고, 좁게는 document 객체와 관련된 객체들의 집합이다.
DOM은 tree 형식으로 구성되어 있다. ParentNode로부터 ChildNode들이 뻗어 나온다. 우선 DOM 객체에 접근한 후 조작을 통해 원하는 node에 접근하는 것이 목적이다.
document.createElement(): 새로운 엘리먼트 “생성”
appendChild(): childnode로 “추가” (DOM에 추가)
addEventListener(): 특정 요소의 이벤트 등록. 특정 이벤트 발생 시 함수 실행하도록 설정.

prettier와 같은 코드 포맷터는 코드를 저장할 때마다 자동으로 모양을 정렬해준다. 보기도 좋고 코드 이해하기도 더 쉽다. 협업 시 다른 사람이 봤을 때도 이해하기 쉽게 도와준다.

Joong