후.. 로컬호스트 주소가 연결 거부 당한 순간부터 리액트 전격 포기 선언하고 혼공스 공부를 하였다.
강사님께 왜 로컬호스트 주소가 연결이 거부되었는지 여쭤보고 싶었지만, 그러기엔 지금까지 너무 많은 걸 알려주셨는데 또 못 따라하나 싶기도 해서 그냥 개인 공부했다. 노드 때부터 에러만 나면 머리가 아파서 금방 포기했는데 리액트에서도 이럴 줄 이야ㅠㅠ
여튼 그때 공부한 내용.. 좀 뒤늦게 정리!!!
★ [혼공JS] 7단원 - 문서 객체 모델
-
문서 객체 모델(DOM) : 문서 객체를 조합해서 만든 전체적인 형태
-
DOMContentLoaded 이벤트
: 문서 객체를 조작할 때 사용함
: 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트 -
querySelector( ) 메소드
: 문서 객체를 선택할 때 사용하는 메소드
: 요소를 하나만 추출document.querySelector(선택자)
-
querySelectorAll( ) 메소드
: 문서 객체 여러 개를 배열로 읽어들이는 함수
-> 내부의 요소에 접근하고 활용하려면 반복을 돌려야 함 / forEach( ) 메소드를 사용하여 반복을 돌림document.querySelectorAll(선택자)
-
글자 조작하기
- 문서 객체.textContent : 입력된 문자열을 그대로 넣음
- 문서 객체.innerHTML : 입력된 문자열을 HTML 형식으로 넣음
-
속성 조작하기
- 문서 객체.setAttribute(속성 이름, 값) : 특정 속성에 값을 지정함
- 문서 객체.getAttribute(속성 이름) : 특정 속성을 추출함
-
스타일 조작하는 방법 예시
- h1.style.backgroundColor -> 가장 많이 사용함
- h1.style['backgroundColor']
- h1.style['background-color']
-
문서 객체 생성하기
- document.createElement(문서 객체 이름)
: 문서 객체 트리(tree)에는 부모(parent)와 자식(child)이 있음 - 부모 객체.appendChild(자식 객체)
- document.createElement(문서 객체 이름)
-
문서 객체 제거하기
부모 객체.removeChild(자식 객체)
-> appendChild( ) 메소드 등으로 부모 객체와 이미 연결이 완료된 문서 객체의 경우 parentNode 속성으로 부모 객체에 접근할 수 있음 / 문서 객체.parentNode.removeChild(문서 객체) -
이벤트 설정하기
문서 객체.addEventListener(이벤트 이름, 콜백 함수)
- 이벤트 리스너/ 이벤트 핸들러 : 이벤트가 발생할 때 실행할 함수
-
이벤트 제거하기
문서 객체.removeEventListener(이벤트 이름, 이벤트 리스너)
- 이벤트를 제거하려면 이벤트 리스너를 변수 또는 상수로 가지고 있어야 함
-
이벤트 모델 : 이벤트를 연결하는 방법
- 표준 이벤트 모델 : document.body.addEventListener('keyup', ( ) => { })
- 고전 이벤트 모델 : document.body.onkeyup = (event) => { } // 문서 객체가 갖고 있는 onOO으로 시작하는 속성을 함수에 할당함
- 인라인 이벤트 모델 : < body onkeyup = "listener(event)" > // HTML 요소의 onOO속성에 JS 코드를 넣음
-
키보드 이벤트
- keydown : 키가 눌릴 때 실행됨 / 키보드를 누르고 있을 때, 입력될 때도 실행됨
- keypress : 키가 입력되었을 때 실행됨 / 아시아권 문자를 제대로 처리하지 못함
- keyup : 키가 떨어질 때 실행됨 => 일반적으로 사용됨
-
코드의 규모가 커지면 이벤트 리스너를 외부로 분리하는 경우가 많아지며, 그러한 경우 아래와 같은 방법으로 해결 가능함
- event.currentTarget 속성을 사용함
( ) => { } 와 function( ) { } 형태 모두 사용가능함
- this 키워드를 사용함
화살표 함수가 아닌 function( ) 형태로 함수를 선언한 경우에 사용함
★ 입력 양식을 기반으로 단위를 변환하는 프로그램
- 소스 코드
드롭다운 목록은 select 태그로 구현함
- select 태그에 multipe 속성을 부여하면 Ctrl키 또는 Shift키를 누르고 여러 항목을 선택할 수 있는 상자가 나옴
- 결과값
★ 체크 박스 활용하기
체크 상태를 확인할 때는 입력 양식의 checked 속성을 사용함
- 기본 이벤트 : 어떤 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것
event.preventDefault( ) : 컨텍스트 메뉴를 출력하는 기본 이벤트를 막음
★ 할 일 목록 만들기
- 소스코드
- 예시
-
focus 이벤트와 blur 이벤트를 사용하여, 입력 양식에 초점을 맞춘 경우(활성화 상태)와 초점을 해제한 경우(비활성화 상태)를 표현할 수 있음.
-
localStorage 객체 : 웹 브라우저가 기본적으로 제공하는 객체
- 메소드 종류
- localStorage.getItem(키) : 저장된 값 추출
- localStorage.setItem(키, 값) : 값을 저장
- localStorage.removeItem(키) : 특정 키의 값을 제거
- localStorage.clear() : 저정된 모든 값을 제거
★ 긍정의 한줄
이 세상에 열정없이 이루어진 위대한 것은 없다. - 게오르크 빌헬름 -
