[220718] Daily Study Note

Today's Plan

Studying JavaScript knowledge ✅

~~(1) 파트1. 클래스 ~ 모듈 복습~~

~~(2) 파트2.[브라우저: 문서, 이벤트, 인터페이스] 시작하기 : 문서~~

Coding JavaScript

~~(1) JavascriptRGB Color Game /~~ 6~8시 🔛

(2) 깃허브에 업로드하고 내용 정리

~~Git 강의 정리+실전 예제 풀며 복습+암기 / 8 ~ 10시~~ 🔛

Training Coding Test with Python / 2시간 ❌

(1) Lv1 2문제

(2) Lv2 2문제

1.

https://ko.javascript.info/

모던 JavaScript 튜토리얼

ko.javascript.info

(2) 파트2.[브라우저: 문서, 이벤트, 인터페이스] 시작하기 : 문서

1.1 브라우저 환경과 다양한 명세서

- 브라우저 환경에 대한 간단한 이해

- DOM(Document Object Model)에 대한 간단한 소개

- BOM(Browser Object Model)에 대한 간단한 소개

- DOM 명세서 https://dom.spec.whatwg.org/

- CSSOM 명세서 https://www.w3.org/TR/cssom-1/

- HTML 명세서 https://html.spec.whatwg.org/

: DOM Tree와 CSSOM Tree와 Browser가 이걸 어떻게 렌더링하는지까지 연초에 정리해서 학습한 적이 있어서 간단한 개념 복습이 반가웠습니다.

: 가끔 MDN의 설명이 안 와닿을 때는 Google에 다른 분들의 질문이나 게시글을 찾아 읽는데 이 글들에 대한 신뢰성의 확신이 안 들 때도 있었습니다. 이럴 때 다른 공신력 있는 자료인 "명세서를 확인하는 것이 좋다"는 것을 '이제야' 알았습니다.

명세서의 존재에 대해 알게 된 게 2주도 안 된 것 같습니다. 내용도 방대하고 읽기에 친절한 느낌이지는 않다고 하지만 그 방식에 익숙해지면 더 많은 지식들을 탄탄하게 깊숙하게 접할 수 있을 것 같은 기대감이 듭니다. 각 사이트에 들어가 확인해보았습니다. 자주 구경해봅시다.

1.2 DOM Tree

- DOM 구조 이해

- 브라우저의 DOM 관련 특징: 자동 교정

- DOM Tree 노드 타입

- DOM 구조 직접 보는 방법

: 새로 알게 된 것

1. DOM 생성 과정에서 이상한 html태그 자동 교정해준다.

ex. 대응되는 노드가 빠진 경우 짝 지어주거나, 최상위에 <html>태그 빠져있으면 넣어주거나. html파일에 텍스트만 있을 때, <html><body>등으로 감싸주는 기본 셋팅을 해주거나, 테이블에 꼭 있어야한다고 명세서가 명시한 <tbody>등을 자동으로 넣어줘 오류 없게 한다던지

2. 주석도 노드가 된다. 이건 왜?가 포인트였다. : HTML에 뭔가 있다면 DOM Tree에 추가되어야한다는 '규칙'을 따르기 때문에 주석이 화면에 출력물이 없어도 DOM노드가 되는 것이다.

3. DOM Node Type이 12가지가 된다는 것. 타입의 종류를 달달 외울 필요는 없지만 전체 구조 이해에 도움을 줬다.

const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5; // legacy
const unsigned short ENTITY_NODE = 6; // legacy
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12; // legacy

그리고 실무에서 자주 쓰이는 것 정리.

1. DOM의 진입점이 될 문서 노드(DOCUMENT_NODE)

2. HTML 태그에서 만들어지며, DOM Tree구성하는 블록인 요소 노드(ELEMENT_NODE)
3. 텍스트를 포함하는 텍스트 노드(TEXT_NODE)

4. 화면에 보여지지는 않지만, 자바스크립트를 사용해 해당 정보를 DOM으로부터 읽게 하는 주석 노드(COMMENT_NODE)

1.3 DOM 탐색하기

- 트리상단의 document element와 body

- childNodes, firstChild, lastChild로 자식 노드 탐색하기

- DOM 컬렉션

- 형제와 부모 노드

- 요소 간 이동

- 테이블 탐색하기

알던 것: 트리구조, 형제와 부모 노드 관계, 관계 있는 요소 탐색

새로 배운 것:

1. <html>의 요소를 변환한 JavaScript 객체 이름 값

ex. <html> -> document.document.Element

+ 알지만, 다시 복기 : <body> -> document.body, <head> -> document.head

2. DOM에서의 null값: '존재하지 않음', ;해당하는 노드가 없음'을 나타낸다.

+ 그래서 script를 읽는 도중에 존재하지 않는 요소는 스크립트가 읽을 수 없는데 이 때는 null을 반환한다.

3. childNodes는 자식 요소들을 담은 '컬렉션'을 반환한다.

 <script>
    for (let i = 0; i < document.body.childNodes.length; i++) {
      alert( document.body.childNodes[i] ); // Text, DIV, Text, UL, ... , SCRIPT
    }
  </script>

예시 중 이게 참 특이했는데, childNodes는 SCRIPT 까지 읽어온다.

4. firstChild, lastChild로 접근하면 childNodes에서 읽는것보다 빠르다.

elem.childNodes[0] === elem.firstChild
elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

5.childNodes는 위에서 강조한 것처럼 배열이 아니라 '이터러블한' '유사배열객체'인 '컬렉션'이다.

5-1.그래서 컬렉션에 쓰이는 for.. of 를 써줘야지 for..in을 쓰면 보통 원치 않는 숨겨진 것까지 보게 된다.

5-2. 배열의 메서드 그냥은 사용 못 한다. filter등을 쓰려면 Array.from으로 배열로 바꿔준 뒤 사용할 수 있다.

* 이터러블, 유사배열객체, 컬렉션, 배열 등에 관련된 내용은 두 어번 봤는데도 딱 윤곽이 깔끔하게 안 잡힌다. 설명을 읽으면 그 때 이해가 가지만 계속 차이가 뚜렷하게 잘 정리되어 인식하지 못 한 것 같다. 이번 주 안에 각 잡고 총 정리를 해야겠다. 쓰임과 활용 메서드까지 더불어서.

6. DOM컬렉션은 읽기 전용이다. (쓰기 가능하지만 기본적으로는 불가능)

그래서 childNodes[i] = ... 로 직접 변경은 안 된다.

7. DOM컬렉션은 DOM의 현재 상태를 반영한다. 이건 개인적으로 와우 포인트였습니다.

예를 들어 elem.childNodes를 참조하고 있는 도중에 새 요소가 추가되거나 삭제되면 컬렉션에 자동 반영된다고 합니다.

8. 형제와 부모 노드 접근 프로퍼티

다음 형제 노드 정보 : nextSibling

이전 형제 노드 정보: previousSibling

부모 노드 정보: parentSibling

9. parentNode와 parentElement의 다른 동작 사례

아.. 내가 두 프로퍼티를 확실히 구분 못 잡고 사용했구나를 알았습니다.

특히 parentElement는 html 기준으로 그 전까지 상위로 거슬러 올라가고 싶을 때 사용하면 유용합니다.

10. 테이블 탐색하기 파트는 직접 실제로 응용해봐야할 것 같습니다. 많은 프로퍼티들 이해는 했는데 몸에, 머리에 착 붙이고 활용하려면 사용해야할 것 같습니다.

1.4 getElement*, querySelector*로 요소 검색하기

알지만 다시 되짚을 것:

1. document.getElementById에서 id에 '-' 포함한 경우에는 '.'이 아니라 대괄호로 접근하기

2. matches 메서드. elem.matches(CSS선택자) : elem이 CSS선택자와 일치하는 지를 체크. 요소가 담겨있는 배열 순회하며 원하는 요소만 걸러낼 때 사용할 수 있다.

3. getElementsBy로 시작하는 모든 메서드 역시 살아있는 컬렉션을 반환한다.

반면, querySelector, querySelectorAll, getElementsById는 정적인 메서드를 리턴한다.

4.elemA.contains(elemB): elemB가 elemA에 속하거나 elemA==elemB일 때 true를 리턴한다.

5. getElementBy 로 시작하는 메서드는 이제 거의 사용하지 않는 편. 오래된 도큐먼트에 많다.

몰랐는데 알게 된 것:

1. elem.querySelectorAll(CSS선택자)는 CSS선택자뿐만 아니라 가상 클래스에도 사용할 수 있다.(:hover 나 :active같은)

그러면 :hover나 :active상태인 요소들을 담은 컬렉션을 반환한다.

2. closet 메서드. elem.closet(CSS선택자): 자기 자신을 포함하여 CSS선택자와 일치하는 가장 가까운 조상을 찾는다. 끝내 없으면 null리턴

1.5 주요 노드 프로퍼티

- DOM 노드 클래스

-'nodeType' 프로퍼티

- nodeName과 tagName으로 이름 알아내기

- innerHTML로 내용 조작하기

- outerHTML로 요소의 전체 HTML보기

- nodeValue / data로 텍스트 노드 내용 조작하기

- textContent로 순수한 텍스트만

- hidden 프로퍼티

- 기타 프로퍼티

이번 장이 진짜 다 아는 것들과 다 아는 건데 이런 내용이 있구나를 정리하는 파트였습니다.

모든 접근 프로퍼티들을 다 사용해본 적이 있는데 각 프로퍼티 사용의 주의사항이나 프로퍼티별 세밀한 정리를 해 본 적이 없어 학습하며 오호라!모먼트가 많았습니다.

!. 헷갈리던 것 & 새롭게 알게 된 것 정리

- DOM 노드 클래스

: EventTarget과 Node클래스는 추상 클래스여서 객체 자체가 만들어지지 않는다.

: 노드가 클래스라는 점을 이용해 constructor를 node클래스 이름 알아내는 데 사용한다.

ex) document.body.cunstructor.name //HTMLBodyElement

: 노드 간 상속여부는 instanceof로 확인한다.

: console.dir과 console.log의 차이 ! 밑에도 나오는데, console.dir로 사용 가능한 프로퍼티 목록 확인 가능도 하다.

-'nodeType' 프로퍼티

: 처음 본 느낌이다 왠지. 말그대로 노드 타입을 알아내는데 결괏값으로 상수를 가진다.

: 결과 상수값: 1:요소 노드, 3:텍스트 노드, 9:문서 객체

: 노드타입은 읽는 것만 되고 쓰는 건 안 된다.

- nodeName과 tagName으로 이름 알아내기

: 둘의 기능은 동일하다. 결과도 같을 수 있다.

: 차이점은 nodeName은 모든 노드에 있고 tagName은 요소 노드에만 가능하다.

: 그래서 nodeName으로 요소 노드에 적용하면 tagName과 같은 결과를 내는 것이다.

: nodeName이 주석 노드나 텍스트 노드와 붙으면 문자열 반환한다.

: tagName으로 요소 노드가 아닌 노드에 실행하면 undefined를 보낸다.

- innerHTML로 내용 조작하기

: 요소 안의 내용을 HTML형태로 받아올 수 있다.

: 쓸 때도 HTML형식으로 들어간다.(HTML기본동작처럼 빠진 태그 짝 지어주거하는 기능도 갖는다.)
: 다만, 쓸 때 <script>요소로써 작성해도 해당 script파일을 실행해주지는 않는다.

: innerHTML += '새 값'; 할 때, 동작 방식에 관심 가질 필요가 분명히 있었다.

: innerHTML은 1) 기존의 값 삭제 2) 기존의 값과 현재 들어온 값 더해서 새로 배치

: 위의 특징은 부작용을 막기 위함이었다.

- outerHTML로 요소의 전체 HTML보기

- nodeValue / data로 텍스트 노드 내용 조작하기

- textContent로 순수한 텍스트만

: 이게 분야가 쓰기 메서드로서는 굉장히 유용하다. innerHTML은 HTML을 삽입하기에 예상치 못한 신규 유저가 파일에 너무 쉽게 번든 못하도록 할 수 있다.

- hidden 프로퍼티

: style.display:none과 같은 존재

: div.hiddden ==

- 기타 프로퍼티

value, href, id 등의값

1.6 속성과 프로퍼티

속성: HTML 안에 쓰인다. 문자열로 받는다. 대소문자 구별 안 한다.

프로퍼티: DOM 객체 안에 쓰인다. 모든 타입 다 받는다. 대소문자 구별 한다.

- 속성과 함께 쓰이는 메서드

elem.hasAttribute(name): 속성 존재 여부 확인

elem.getAttribute(name): 속성값을 가져옴.

elem.setAttribute(name, value): 속성값을 변경함. 설정함.

elem.removeAttribute(name): 속성값을 지움.

elem.attributes: 속성의 컬렉션을 반환함.

- 거의 모든 상황에서 속성보다 프로퍼티 사용하는 게 낫지만, 속성값이 필요한 다음의 경우가 있다.

: 비표준 속성이 필요한 경우. 비표준 속성은 'data-'로 시작. dataset프로퍼티로 접근할 수 있다.

: HTML에 적힌 값 그대로 읽고 싶은 경우

2.

https://mikkegoes.com/javascript-projects-for-beginners/

22 JavaScript Projects for Beginners For 2022 (With Source Code)

Use these JavaScript projects to perfect your front-end skills, achieve your coding goals faster, and find project ideas for your portfolio.

mikkegoes.com

(1) Vanilla JavaScript RGB ColorGame 만들기

딱 오늘 학습한 DOM 노드를 조작하는 프로젝트였습니다. CSS요소를 조절하는 문제로, 타이밍 좋게 해결하게 된 것 같습니다.

시작 버튼을 누르거나 난이도를 바꾸면 새로운 랜덤 넘버를 만들어 정답 값과 나머지 박스 색을 바꾸는 작업 중이었습니다.

...
let colorBox = document.querySelectorAll(".colorBox");
...
function initGame(){
    // 랜덤 색 7개 뽑기
    let boxNum = 7
    let randomColors = makeRandomRGB(boxNum);
    // 그 중 첫 번째가 정답 색 , rgbQuestion 글자 넣어주기
    let answer = randomColors[0];
    rgbQuestion.textContent = answer;
    //for (let i = 0; i < randomColors.length; i++){
    //    colorBox[i].style.backgroundColor = randomColors[i];
    //}
    // 그 중 마지막 색으로 헤더 색 변경
    let initHeaderColor = randomColors[randomColors.length-1];
    cssRoot.style.setProperty('--color-now',initHeaderColor);
}

문제가 생긴 것이 주석처리한 for문입니다.

Uncaught TypeError: Cannot read properties of undefined (reading 'style')

각 box의 style을 바꿔주는 작업에서 노드에 정상적인 접근을 하지 못 한 것 같습니다.

박스의 색을 바뀌지만 위와 같은 에러가 떠 cssRoot의 style은 변경 실패합니다.

계획한 2시간이 초과되어 일단 마무리합니다. CSS 작업이나 JavaScript 구조 잡는게 아직 미숙해서 초기에 시간이 많이 걸린 것 같습니다. 그래도 JavaSctipt부분의 함수 분리, 슈도코드로 전반적인 수행 구조를 잡아두어 개념적인 것에 익숙하지 않아 생긴 위와 같은 문제점을 고치면 오늘 밤에 잘 마무리할 수 있지 않을까 기대됩니다. 연습하고 싶던 문제점들을 많이 마주할 수 있는 적절한 프로젝트인 것 같습니다.

3.

Git 강의 정리+실전 예제 풀며 복습+암기

🚩 Init . 학습 시작 전, 얼마나 모르는 지 기록. 학습 목표 잡고, 개선 후 비교하고자 함.

아는 것

git, github 의미+차이와 쓰임

git stage 개념

기본 명령어 사용( add, commit, push, pull)

status, hist 사용

commit message 기본적인 구성

ㅡ

안 익숙한 것

diff, log, tag 명령어 사용

branch개념

branch 나누고 merge하는 것 : merge는 왜 개념을 알아도 조작이 안 될까요. 당연히 제대로 모르기 때문이겠죠.

branch간 이동

hist에서 head이동하는 것. : 특히 이번에 head, local, host를 제대로 이해해서 마음대로 설정할 수 없어서 분했다.

취소와 다시 되돌리기 (reset, revert)

취소 커밋 처리하기 , 커밋 삭제하기: 어제 엄청 애 먹음.

깃허브 push, pull, 왔다갔다 자유롭게.

다른 사람들 프로젝트 가져오기

남의 프로젝트에 pr하는 것.

ㅡ

: 사실 버전 컨트롤 시스템이라는 말이 무색하게 한 번도 뭔가를 컨트롤한 느낌이 없다.

거의 뭐 이번 공부 스스로 뭐라도 했다고 위안 주기 위해 기록만 남기는 식이라서 git멍청이라고 생각한다. 냅다 커밋만..

매 번 봐도 이해만 하고 활용을 못 하는 내 자신이 답답해서 이번에는 진짜 제대로 정리하고 싶다. 연습도 확실히 하고 가려 한다.

: 안 익숙하고 모르는 것들 싹 다 정리하고 다 직접 몰입해서, 반복해서 해보기

4.

'Intro > Daily Study Note' 카테고리의 다른 글

[220720] Daily Study Note (0)	2022.07.20
[220719] Daily Study Note (0)	2022.07.19
[220717] Daily Study Note (0)	2022.07.17
[220715] Daily Study Note (0)	2022.07.15
[ 모던 JavaScript 튜토리얼 ] 학습 진도 파트1. 코어 자바스크립트 (0)	2022.07.06

SW공부메모장

[220718] Daily Study Note

Today's Plan

1.

2.

3.

4.

'Intro > Daily Study Note' 카테고리의 다른 글

티스토리툴바

[220718] Daily Study Note

Today's Plan

1.

2.

3.

4.

'Intro > Daily Study Note' 카테고리의 다른 글

'Intro/Daily Study Note' Related Articles

티스토리툴바