🔗강의 링크↓
[무료] 프론트엔드 날개달기: Vuejs, React 배우기 전에 꼭 알아야하는 지식 - 인프런 | 강의
이 강의를 통해 Webpack, NPM 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다., 백그라운드 지식을 확실히 알아야,진짜 프론트엔드 개발자가 될 수 있어요 😁 프론
www.inflearn.com
인프런의 프론트엔드 날개달기라는 무료강좌를 보고 공부한 내용
SECTION 0
<DOM이란?>
html파일을 js로 어떻게 제어?
-> 브라우저 안에는 웹문서를 해석할 수 있는 렌더링 엔진이 있음. 브라우저로 html 열게 되면 렌더링 엔진이 문서 한 줄 한 줄 해석, 해석 끝나면 문서를 객체화하여 js로 접근할 수 있게 함.
문서 객체 모델 -> Document Object Model -> DOM
한마디로 DOM이란, script 언어로 html 요소를 제어할 수 있도록 웹문서를 객체화한 것을 말함
DOM은 트리(tree) 구조를 갖고 있음. 트리 구조의 각각의 요소는 노드(node)라고 부름
1. 제어한다 2.접근한다
브라우저 자체를 제어할 수 있도록 모델링한 것 -> BOM (Browser Object Model)
웹문서 영역 제어할 수 있게 제공하는 객체 => document
document는 웹페이지 자체를 의미하며, DOM tree의 최상위 노드.
document로 노드 찾아가기:
document.getRootNode() -> 최상위 노드 반환
document.childNodes -> 하위 노드 반환
ㄴdocument.childNodes[1].childNodes[2].childNodes -> 이런 식으로 연속적으로 노드를 찾아갈 수 있음.
번거로우니 querySelector 등 사용
<BOM이란?>
BOM (Browser Object Model, 브라우저 객체 모델) -> 웹브라우저를 객체화한 것, 브라우저를 제어하기 위한 인터페이스
browser 객체
- window : 모든 객체가 소속된 객체이며, 브라우저 창을 의미 ex) window.open('링크입력') -> 해당 링크 열림 window.close() -> 창 닫힘 *앞에 window는 생략가능 - document : 현재 문서에 대한 정보를 갖고 있는 객체 ex) 텍스트 바꾸기 : document.querySelector('가져올요소').textContent = '바꿀 텍스트' - history : 현재의 브라우저가 접근했던 URL history를 제어할 수 있음 ex) history.back() : 뒤로가기 // history.forward() : 앞으로 가기 - location : 문서의 주소와 관련된 객체로 window객체의 프로퍼티인 동시에 document의 프로퍼티(window.location도 되고 document.location도 된다는 뜻). 윈도우 문서의 URL을 변경할 수 있고, 문서 위치와 관련해서 다양한 정보 얻을 수 있음. ex) location.host : 홈페이지 호스트 가져옴(네이버메인에서 하면 네이버 주소 가져옴) location.href = "바꿀 주소" : 주소 바꾸기 - screen : 사용자 디스플레이 화면에 대한 다양한 정보를 갖고 있는 객체 ex)  console.dir(screen) 하면 사용자 screen에 관련된 정보 출력됨. - navigator : 실행 중인 애플리케이션(브라우저)에 대한 정보를 알 수 있음. 크로스크라우징 이슈 해결할 때 사용 가능 (ex: chrome -> addEventListener, IE -> attachEvent) navigator.geolocation.getCurrentPosition() - 현재 애플리케이션에 대한 위치 정보 (🔗MDN) navigator.appName - 앱(브라우저) 이름을 반환 navigator.appVersion - 앱(브라우저)에 대한 버전 정보를 반환한다. navigator.userAggent - 서버에 요청할 때 앱(브라우저)에 대한 정보이다. |
'기타 > 코딩일기' 카테고리의 다른 글
| 프론트엔드 날개달기(SECTION 1 : API란 무엇인가?/동기와 비동기란?) (0) | 2023.09.27 |
|---|---|
| 프론트엔드 날개달기(SECTION 0: script 태그 defer, async/this란 무엇인가?) (1) | 2023.09.27 |
| swiper 복습 (0) | 2023.09.09 |
| slick 복습 (0) | 2023.09.08 |
| 코딩일기: 데이터 과학을 위한 파이썬 Numpy 5일차 (1) | 2023.07.05 |