용어 설명 :
API =>
-
Application Programming InterFAces의 약자
-
서로 다른 시스템이 서로 소통할 수 있는 방법 또는 창구
-
일종의 메뉴판 역할 ex) 손님(client)이 키오스크를 통해서
메뉴를 주문(요청)하면 식당(server)이 주문한 메뉴를 조리해서
손님에게 가져옵니다.
localStorage =>
오로지 문자열 형식으로만 데이터가 저장됩니다.
number();
JSON.parseIn()
+;
문자열을 -> number타입으로 바꿔줌 (+는 js에서도 가능함)
객체를 저장하면 localStorage에 object object로 뜸
그래서 객체나 배열앞에 JSON.stringify를 앞에 붙여줘야 함
그러나 이렇게 저장을해도 localStorage안은 Json형태의 문자열로 저장된 방식이니 속지마라
가져올 때도 마찬가지로 JSON.parse로 가져오면 정상적으로 가져온다.
(json 공정이 거의 필수적임)
브라우저 핵심 구조
Window는 전역객체 그리고 그 밑에
DOM 과 BOM, Javascript 가 있다.
DOM => (웹페이지 컨텐츠와 관련 있음)
Document는 html 프로그래밍 하는 부분이 이 부분
BOM => (웹페이지 컨텐츠들이랑은 관련 없음)
Doucment 이외의 제어할 수 있는 것들
location은 url을 통제할 수 있음
(웹 개발에서는 DOM 다음으로 location을 많이 씀)
(location안에 뭐가 있는지 익혀보는 것도 좋긴 함)
JavaScript => (window 안에 Js 코어 객체들이 내장되어 있어 사용 가능하다.)
DOM 구조
(F12에서 Elment를 클릭하면 $0 표시가 뜨는데 그걸 console에 가면해당 클릭한 Element를 보여줌)
가지 뻗는 구조를 Tree 구조 라고한다. (뒤집었을 때)
DOM 요소를 노드라고 부르는거지 Node.js가 아니다
주요 DOM API
document.querySelector('div img');
왜 이렇게 되냐면
Selector는 css에서 불러오는 형태와 똑같다
즉 css에서 div img {} 로 스타일을 꾸밀 수 있는데
selector는 css의 문법인데 그걸 가지고와서 사용하기에
위처럼 사용가능하다. (querySelector는 최신 문법이다.)
또한
document.querySelector('img[alt="React"]') 처럼
특정 태그의 속성에도 접근이 가능하다!
querySelectAll은 여러가지들을 한꺼번에 가지고 올 때
근데 얘는 배열이 아니라 NodeList가 나온다.
NodeList는 배열이 아닌 형태의 자료구조다.
근데 map이나 filter 같은 속성을 사용할 수 없다.
NodeList는 forEach의 속성밖에 쓰지 못한다
즉 속성을 보고 싶다면 관리자 도구에서 확인이 가능하다!
요소 생성 및 조작
const newDiv = document.createElement(tagname)은 태그를
변수 newDiv에 담겨있는 거고 (html에 생성되기 전!)
const div = document.createElement("div");
div.textContent = "yes";
이건 지금 생성되지 않은 div에 textContent라는 코멘트를 넣어준 것이다.
그래서 바로 appendChild하면 바로 텍스트 추가된 상태로 변수 div를 push한다.
appendChild(child) 는
push와 마찬가지로 부모의 안에 삽입하는것인데
부모의 맨 뒤에 삽입된다.
insertBefore 요소 추가하기는
parent.insertBefore(newElement, parent.children[1]);
가 있다 parent.children[n] 은 형제끼리 index 넘버로 계산해서
배열 계산식과 똑같이 몇번 째를 지칭할 때 사용한다.
느낀점 JS에서 DOM을 컨트롤해 생성한 친구들은
JS DOM에서 개별처리 해줘야 한다.
속성 조작
속성이 html에서 부르는 속성과 , js에서 부르는 속성이 다르다
html에서는 어트리부트, js에서는 프로퍼티 라고 칭한다.
(영어에서는 좀 엄밀히 따진다.)element.classList.add
element.classList.remove
element.classList.toggle이 3개가 최신 문법이다.
toggle은 모달을 열었다 닫았다 하는데 직접 가능하다 (if문을 내장하고 있음 인식 좋음)
- 카멜 케이스 => 낙타처럼 보여서 카멜케이스
JS에선 DOM Api에 접근할 때는 카멜케이스로 접근한다.
이벤트처리
addEventlistener와
removeEvenetlistenear를 같이 쓰는 이유는
이벤트리스너는 CCTV와 같음 즉
함수는 사용되고 날라가지만 이벤트리스너는 계속 남아있음
그래서 메모리 사용량을 위해 remove를 같이 사용함.
이벤트 핸들러 어트리뷰트 방식 =>
onclick이라는 친구인데...
가급적 html와 로직코드 js를 분리하는 방식이 권장된다.
그리고 생략되있는 부분이 있는데
function (event) {
alert('button clicked!');
}몸통의 내용만 onclick="여기" 에 작성하기 때문에
근데 react에서는 저렇게 동작을 하지 않는다.
따라서 이 방식은 지향해야 하는 패턴이다.
- 우클릭은 contextmenu (이벤트명임)
이벤트 + 위임
scroll 과 wheel 있는데 scroll은 스크롤 바가 없으면 인식하지 않는다
키보드 이벤트는
웹사이트는 keyup을 많이 쓴다.
문서 이벤트는
DOMContentLoaded 가 로드되고
load가 두번째로 로드된다
이벤트 전파에서
캡쳐링보다 버블링이 훨씬 중요하다.
event.target은 이벤트가 실제로 발생한 요소고
event.currentTarget은 이벤트 리스너가 부착된 요소
즉 이벤트를 핸들링 하는 요소
이벤트 위임은
자식한테 발생한 일을 부모가 대신 처리하는게 이벤트 위임
자식에게 100개의 이벤트가 있다면 부모가 대신 전달해주는
메모리를 절약할 수 잇는 방법이다.
이벤트 위임 과제 설명
const ul = document.getElementById("itemList");
ul.addEventListener("click",()=>{
if(event.target === event.currentTarget) return;
alert(`${event.target.textContent} 클릭됨`);
});만약에 if(event.target === event.currentTarget) return;
가 없다면 부모를 클릭했을 때 이벤트가 작동된다.
함수는 실행되고 바로 종료되는 특징이 있기 때문에
if문에 return을 달아버려서 바로 종료시켜버리는 것이다.
이게 버블링 현상이다. 즉 버블링이란 특징을 이용해서
부모가 자식대신해서 일을 처리하는 방식이다.
