브라우저는 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는(Rendering) 방식으로 동작함
동적 메모리 할당에 사용되는 자료구조
객체 또는 동적 데이터를 저장
JavasScript는 싱글스레드 기반의 언어 (콜 스택이 하나라는 뜻 - 한번에 한 작업만 사용)
후입선출 구조
콜 스택 내부의 동일한 스택 프레임이 예상치 못한 수로 쌓일 때
같은 함수를 무한 호출하게 되면 터지게 됨
브라우저 콘솔을 살펴보고 에러의 발생과 발생 이유를 추적해 내는 것
렌더링 엔진이 분석한 Render Tree를 브라우저에 그리는 역할
자료를 저장하는 계층
영구적 저장소인 로컬스토리지와 임시적 저장소인 세션스토리지가 있음
웹 브라우저가 직접 데이터를 저장하게 도와줌
사용자측에서 더 많은 정보를 안전하게 저장할 수 있게 해줌
이 정보는 절대로 서버로 전송되지 않음 => 클라에만 존재하므로 네트워크 트래픽 비용 절감
웹스토리지는 origin마다 단 하나씩만 존재
origin: 도메인과 프로토콜 한 쌍으로 이뤄진 식별자
하나의 origin에 속하는 모든 웹페이지는 같은 데이터를 저장하므로 같은 데이터에 접근 가능
window.localStorage
: 만료 날짜가 없는 데이터 저장 시 쓰임window.sessionStorage
: 세션이 있는 데이터 저장시 //window 객체에 있는 Storage 객체를 통해 확인할 수 있습니다.
//해당 객체가 존재하지 않는 브라우저라면 undefined를 반환하고, 존재한다면 function을 반환합니다.
if (typeof(Storage) !== "undefined") {
// web storage를 위한 코드 부분
} else {
// web storage를 지원하지 않는 브라우저를 위한 안내 부분
}
-코드스테이츠 자료-
브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것 => HTML파일을 바탕으로 DOM 트리를 구축 및 CSS 파일로 CSSOM 트리를 만드는 것
브라우저 입장:
HTML 문서 받고 => DOM 트리로 파싱 => HTML 토큰 생성됨 (시작태그, 마침태그, 속성이름, 값 포함되어있음)
브라우저가 HTML문서 파싱 시 CSS 스타일 만난 경우: 1. 텍스트 만나면 - CSS 스타일링 레이아웃과 페인팅에 사용하는 데이터 구조인 CSSOM 트리로 파싱
2. 테그 만나면 - 렌더링 차단 & HTML 파싱 중단 => script 파일 다운받아 파싱 후 실행 => 다시 HTML 파싱 시작
DOM이란 - Document Object Model
HTML문서의 요소들의 중첩관계를 기반으로 노드들을 트리구조로 구성한
브라우저는 JavaScript 언어만 알아듣기 때문에 HTML 태그나 속성은 이해히자 못함 => 이해할 수 있는 형태인 객체로 바꿔준 것이 바로 DOM Tree
CSSOM - CSS Object Model
브라우저는<link>
, <style>
태그를 만나면 파싱을 멈추고 리소스 파일을 서버로 요청함
요청하여 받은 파일을 파싱하여 만든 트리가 CSSOM
CSSOM 트리 구축 후 브라우저는 다시 html 파일의 파싱을 멈췄던 부분으로 다시 돌아가서 마저 DOM 트리를 파싱함
렌더링을 목적으로 만들어지는 트리
사용자의 눈에 보이지 않는 요소들(<meta>
, display:none
)은 트리에서 제외됨
렌더트리를 기반으로 HTML요소의 레이아웃(위치, 크기 등)을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정
렌더트리에는 요소들의 크기 혹은 위치와 관련된 정보들(from CSSOM)들이 있음. 렌더링 엔진에서 렌더트리를 위에서 아래로 읽어내려가며 각 요소들의 위치와 크기를 파악함
위치에 대한 계산을 마친 후,
레이아웃에서 결정된 대로 그림을 그리기 시작
픽셀을 채워나가는 과정
브라우저 화면 크기 조절하거나 다른 사이트로 이동하는 등 화면에 요소가 추가 or 삭제 or 아예 다른 요소 불러와야하는 상황이 생기면 화면에 있던 요소들의 크기가 바뀌게 됨 => 모든 요소의 위치와 크기를 다시 계산하고 그려주어야함
리플로우: 렌더링 과정의 레이아웃을 반복해 수행하는 것
리페인트: 페인트 과정을 반복해 수행하는 것
left 속성 중 left-top, left-bottom 속성을 사용하면 위치가 변경되어 레이아웃이 발생됨
이 경우 transform 을 사용하는 것이 좋음.
좌표값을 사용해 위치를 이동하고 레이아웃은 발생시키지 않으므로
visibility/display 보다 opacity를 사용하는 것이 성능 개선에 도움이 됨
position absolute/ fixed이용하면 영향받는 주변 노드들을 줄일 수 있음
여러 장치의 다양한 특성에 대응할 수 있는 하나의 웹 문서
브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹사이트
UX를 디자인 할 때 모바일일 경우를 최우선으로 두기
하나의 URL을 기반으로 화면이 바뀜
cf) 도메인 앞에 "m"이 붙는 경우는 반응형 웹이 아님
장점 | 단점 |
---|---|
효율적 유지보수 - 하나의 HTML 소스만 있기 때문에 관리 쉬움 | 사이트의 속도저하- 모바일 전용 사이트에 비해 무거움 |
SEO 최적화 | 웹브라우저 호환성 문제 - 현존하는 웹브라우저 스펙 및 사양이 워낙 다양하므로 호환 안되는 경우 간혹 있음 |
반응형 웹 디자인의 핵심 부분
뷰포트(브라우저 창) 크기에 따라 서로다른 조판 생성 가능
<head>
태그 안에 <link>
태그 위치시킴<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">
<head>
태그 안에서 <style>
태그 열어 작성<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
/* 여기 css를 작성합니다. */
</style>
@media 미디어 타입 (조건(너비 및 높이)) {
(CSS 입력하는 부분)
}
--예제
@media screen (max-width: 400px) {
body {
color: red;
}
}
-미디어 타입
: 코드가 어떤 미디어를 위한 것인지 브라우저에 알려줌
-조건(너비 및 높이)
: 지정한 창 너비나 높이 기준이 만족되면 스타일이 적용되고 만족하지 않으면 적용되지 않음
min-width
, max-width
, width
@media screen and (width: 600px) {
body {
color : red;
}
}
// or
@media screen and (max-width: 400px) {
body {
color: blue;
}
} // 뷰포트가 400px보다 좁을 경우 파란색
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}
@media screen and (min-width: 400px) and (orientation: landscape) {
body {
color: blue;
}
} // 두 조건 모두 만족해야 텍스트 파란색으로
@media screen and (min-width: 600px), screen and (orientation: landscape) {
body {
color: blue;
}
} // 뷰포트 넓이가 600px 이상이거나 장치가 가로방향인 경우 텍스트가 파란색
@media not all and (orientation: landscape) {
body {
color: blue;
}
} // 세로인 경우에만 텍스트가 파란색