5주차 WIL( DOM / )

 

DOM : 은 원본 HTML문서의 객체 기반 표현 방식
html 문서의 내용과 구조가 - 객체모델로 변환되어 여러 프로그램에서 사용이 가능해진다.

DOM 의 개체 구조는 "노드 트리"로 표현됨
하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 각 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조이다.
이 케이스의 경우 루트 요소인 html은 부모 줄기, 내포된 여러 태그들은 자식 나뭇가지
그 요소안의 컨텐츠는 잎


DOM은 HTML 문서에 대한 인터페이스입니다. 첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,
둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됩니다.
DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있습니다.

• 항상 유효한 HTML 형식입니다.
• 자바스크립트에 수정될 수 있는 동적 모델이어야 합니다.
• 가상 요소를 포함하지 않습니다. (Ex. ::after)
• 보이지 않는 요소를 포함합니다. (Ex. display: none)

어떻게 하다 보니 또 한 주가 지나갔다.

하나에 빠져서 찾아보다 보면 금방 수요일, 목요일이된다.

금요일은 대부분 한 주를 정리하고 꽤 지친 모습들이 보이며 쉬엄쉬엄하는 분위기이다.

나 조차도 그러고 있었으며, 다시 한 번 인지하고 더 몰두하는 자세를 가져야겠다고 생각한다.

중요한 과정에 들어온 상태인데 안일하게 보내서는 안되겠다.

 

React 기본 개념 정리 위주의 강의를 듣고 간단한 기능 구현의 과제를 진행하였다.

기존 배열 안에 boolean 값으로 나뉘는 key를 부여하고

그 key의 상태에 따라 클릭 해당 id의 전체 div를 다른 div에 옮겨서 저장 후 다시 렌더링 해주는 로직을 짜내는 부분에서

꽤 오래 걸렸었다. 헤매이는 시간이 꽤 길었는데,

무엇 때문에 막혔는지 알고 있어서 굉장한 발전이라고 느껴지는 대목이였다.

 

나아가서 이를 localStorage에 저장해서 수정까지 하고 싶었다.

저장하고 불러오는건 쉽게 구현이 되는데, 수정하려고 적용하다 보니 또 부딪히게 되었다.

toggle 기능으로 조건부 ? 완료 : 취소 형태로 구현해놨는데 완료일 때 한 번 취소일 때 한 번씩 저장되게끔

toggle의 기능을 나눠서 선언해줘야하나 싶은 상태이다.

내일은 숙련차 주가 시작되며, 발제 및 후발대 교육도 오전에 몰려있다.

더 말끔한 정신으로 몰두해야겠다.