[코딩 부트캠프 7주차] 익숙함이 두렵다
TIL
지난주 상담을 마치고 9월에 접어드니 마치 내가 이머시브 코스에 합격한 사람인 것 같은 기분이 들어 공부를 매우 쉬쉬하게 됐다. 그리고 2주 정도 끙끙거리던 트위터 만들기 과제를 대략 마치고 나니 앓던 이를 뺀 자유 감에 젖어들기 시작했다. 이번 주까지 2주에 걸쳐 HTML, CSS, DOM 등 자료 학습에 대부분 시간을 들였고 실제 개발에 든 시간은 사흘 정도였는데도... 나는 마치 2주 내내 개발을 한 것 마냥 쉬고 싶어 했다.
7주 차 학습 계획표
그리고 내가 만든 트위틀러 최종본트위틀러 사진을 붙여놓고 보니 처음 멘붕에 빠진 그때보다 지금은 훨씬 자신감이 붙은 것 같다. 머릿속으로 다시 과정을 그려보고 어떤 식으로 작동시키려고 했는지를 떠올려 본다.
처음 과제를 시작했을 때 구조를 짜는 게 매우 중요하다는 말을 들었는데 왜 그런 건지 이제는 알겠다. 처음 구조를 잘 짜둬야 css도, js 파일도 작업이 수월해지니 말이다. 다음번 프런트엔드 작업은 목업(mock-up)에 더 심혈을 기울여야겠다는 깊은 깨달음을 얻었다.
어쩌면 이번 주 내 태도는 어느덧 7주나 지나고 나니 엄청 빡센 나날이 마치 일상이 된 듯한 느낌의 나태함에서 온 것 같다. 힘들 때 나를 다그치는 게 보통 내 방법인데 이번 주엔 색다르게 하루 쉬어가기를 선택했다. 개발 공부한다고 여름휴가 하루 없이 달려왔으니 하루 정도는 쉬어주자 이거다. 태풍 덕분에 토요일 오프 세션도 취소되었고, 그냥 주말은 푹 쉬기로 했다.
그리고 아마도 이 나태함은 다음번 언더바(Underbar: lodash/underscore의 method를 함수로 구현하는 과제)를 클로닝 하고 나면 뜨악하고 없어지고 곧바로 정신 차리게 될 거라 생각한다.
7주차 TIL
DOM
[DOM]
HTML 엘리먼트도 JS의 객체 형식으로 표현이 가능하다는 콘셉트
Document Object Model? HTML 문서의 구조와 관계를 객체(object)로 표현한 모델
HTML은 트리 구조를 가지고 있음, 이 트리 구조를 이용해서 JS의 객체로 얼마든지 표현 가능하다.
→ how? document라는 전역 변수로 접근 가능
DOM은 JS의 기능이 아님, HTML인 DOM을 JS로 접근할 수 있다는 이야기!
DOM의 자식 엘리먼트의 경우는 2개 이상일 수 있으므로 항상 배열로 표현됨
HTML에서 엘리먼트를 선택하게 되면 선택한 엘리먼트는 $0라는 변수에 담기게 되고, 이를 이용해서 JS의 콘솔 창으로 엘리먼트를 확인할 수 있음
- ex) console.log($0); // 클릭한 엘리먼트가 출력
- ex) console.dir($0); // 객체 형태로 해당 엘리먼트가 가지고 있는 속성들이 출력
엘리먼트 객체에 담긴 주요 속성
출처: 코드스테이츠*class목록 : classList는 배열로 여러 개가 담겨 있는 형태
1. 엘리먼트에 담긴 내용: innerHTML, innerTEXT, textContent
- 공통점: 안에 들어 있는 내용을 가져옴
1) innerHTML: 안쪽에 있는 HTML 자체가 문자열로 출력
2) innerText: 렌더링 된 글자만 출력
3) textContent: 렌더링 되기 전(공백이나 띄어쓰기 등 포함) 내용이 출력
- 주로 innerHTML에는 HTML 태그를 포함한 내용을 추가할 수 있음
ex) $0.innerHTML = ‘<ul><li>리스트</li></ul>’
- textContent는 HTML이 입력해도 태그로 읽히지 않고 텍스트로 인식됨
2. Form 입력값 : value
- 새 값을 입력할 때 어떻게 그 값을 읽어갈 것인가?
- 어떤 데이터를 입력했을 때 그 값은 해당 엘리먼트의 value가 됨
- value를 이용해서 새로운 값을 넣어줄 수도 있음
- 대부분의 input 태그는 value 값을 지원함
3. 자식 엘리먼트와 노드(element vs node)
- children(자식 엘리먼트): 하위 엘리먼트만 보여줌
- childNodes(자식 노드): text 노드이기 때문에 element 사이 띄엄띄엄 있는 텍스트를 얻으려고 할 때 사용
- 노드: 텍스트가 들어 있음, element는 아님 cf) element는 노드에 속함
4. data-* 속성에 담긴 값: data set
- HTML의 data-로 시작하는 속성들은 JS에서 $0.dataset. 속성으로 접근 가능
- 데이터 속성 확인하기
ex) HTML 부분
<div data-user = 'a' data-role='guest' data-user-id='1'>
JS 부분
$0.dataset.user // 'a'
$0.dataset.role// 'guest'
$0.datatset.data-user-id //'1'
5. 이벤트
- ex) 클릭 이벤트
HTML 부분 <button>Click</button>
JS 부분 구현 ①
$0.onclick = function() {
console.log('clicked');
}
JS 부분 구현 ②
$0.addEventListner('click', function() {
console.log('clicked');
});
- JS ① 작성 방식: $0.onclick = 함수 실행
- JS ② 작성 방식: $0.addEventListener(‘click’, 함수 실행())
- 이벤트 종류: 클릭, 타이핑, 모바일 앱이라면 위치가 바뀌는 등 다양
- 이벤트는 어떠한 사용자 입력, 또는 다른 트리거에 의해 발생하는 메시지
이에 대한 핸들러(리스터)를 추가할 수 있음
출처: 코드스테이츠6. 엘리먼트 선택
- $0로만 DOM을 다룰 수는 없기 때문에 JS를 이용해서 특정 엘리먼트를 선택하고 가져와야 함
- id 이용: getElementByTagName(‘태그 이름’)
- class 이용: getElementsByClassName(‘클래스 이름’)
- selector 이용: querySelector, querySelectorAll(‘#혹은 . 이름’)
- getElementsByClassName나 querySelectorAll로 나온 값은 해당하는 모든 노드 리스트가 배열에 담김
새로운 엘리먼트 만들기
1. innerHTML 속성 이용: 안쪽에 새로운 속성 추가 가능
2. method 이용: innerHTML보다 좋은 방법
순서 1) let newSpan = document.createElement(‘span’);
순서 2) newSpan.innerHTML = ‘comment’;
순서 3) target.appendchild(newSpan);
3. <template> 태그 이용: HTML5 스펙에서 사용 가능한 방법
- 실제로 스크립트를 이용해 어딘가 붙여 넣기 전까지는 화면에 보이지 않는 HTML 조각을 생성
- template 태그를 사용하면 마크업(HTML)과 구현(JS) 사이 구분이 더 철저
→ 디자이너에게 코드를 줘도 JS 코드를 안 건드리고 디자인 변경에 용이해짐
기존 엘리먼트 삭제하기
1. innerHTML = ‘’ // 빈칸으로 덮어 씌우기
2. method 이용
순서 1) let target = document.qureySelector('#target');
순서 2) target.remove();
