📌 HTML(HyperText Markup Language)
웹 브라우저가 이해할 수 있도록 작성된 언어로서, 다른 위치나 페이지로 이동할 수 있게 만들어진 하이퍼텍스트를 마크업 하여, 데이터를 어디에 어떻게 표현할지 구조를 만들어내는 마크업 언어.
- 웹 브라우저란, HTML 파일을 구동할 수 있는 프로그램이다. 대표적으로 크롬, 파이어폭스, 사파리, 웨일 등이 있다.
📌 CSS(Cascading Style Sheets)
사용자에게 문서를 표시하는 방법을 지정하는 언어.
- 문서란 일반적으로 HTML을 말한다.
- 위에서 정한 스타일이 아래에 있는 요소들에게도 전파된다는 의미로 Cascading(폭포)이 사용된다.
📌 JavaScript
객체(Object) 기반의 스크립트 프로그래밍 언어로, 웹페이지에 생동감을 불어넣기 위해 만들어졌다.
- 기본 개념 참고
- 페이지의 내용이 — 가만히 정적인 정보만 보여주는 것이 아니라 — 주기적으로 갱신되거나, 사용자와 상호작용이 가능하거나, 애니메이션이 적용된 2D/3D 그래픽일 경우 등에 사용된다.
- 비동기 기반으로 작동한다.
- 싱글 스레드이다.
HTML, CSS, JavaScript 관계
-
[구조] HTML : 웹 문서의 기본적인 골격을 담당.
-
[표현] CSS : 각 요소들의 레이아웃, 스타일링을 담당.
-
[동작] JavaScript : 동적인 요소(사용자와의 인터렉션)을 담당.
📌 CSS 우선 순위
!important> 인라인 > 내부 > 외부 > 웹 브라우저 기본값 순서로 우선 적용된다.
1. !important
2. 인라인 스타일
3. 내부 스타일(선택자)
- 같은 선택자일 경우, 뒤쪽에 선언된 것이 우선된다.
- 다른 선택자일 경우, 명시도*가 높은 것이 우선된다.
- id 선택자
- 속성 선택자
- class 선택자
- tag(type) 선택자
4. 외부 스타일(import)
5. 웹 브라우저 기본값
※ 명시도 : 적용 범위가 좁아서 명확하게 정해진 것.
📌 브라우저의 동작(렌더링 과정)
DOM트리 구축 → CSSOM 트리 구축 → JS 실행 → 렌더 트리 구축 → 렌더 트리의 위치 크기 계산 → 화면에 그리기
1. HTML 파싱 후, DOM 트리를 구축한다.
2. CSS 파싱 후, CSSOM 트리를 구축한다.
3. JS를 실행한다.
4. DOM 트리와 CSSOM 트리를 조합하여, 렌더 트리를 구축한다.
5. 뷰포트를 기준으로 렌더 트리의 각 노드가 가지는 정확한 위치와 크기를 계산한다.
6. 계산한 위치, 크기를 기반으로 화면에 그린다.
※ 3에서 HTML 중간에 스크립트가 있다면 HTML 파싱이 중지된다.
※ 4에서 display: none; 속성과 같이 화면에 안 보이고 공간 차지가 없는 것은 렌더 트리로 구축되지 않는다.
📌 Local Storage, Session Storage, Cookie
공통점
클라이언트 상에서 key/value 쌍을 저장할 수 있는 메커니즘으로 value는 반드시 문자열이어야 한다.
- 모두 동일 출처 정책(SOP)을 따르기 때문에 다른 도메인에서 접근할 수 없다.
※ 출처(Origin) : URL 체계(http, https), 호스트(naver.com), 포트(5000, 80) 등.
Local Storage
일정 시간 또는 영구적으로 값을 저장하고 싶은 경우 사용할 수 있는 Web Storage.
- Web Storage API이다.
- JS로 데이터 조작이 가능하다(서버에서 조작이 불가능하다).
- 네트워크 요청 시 서버로 전송되지 않는다.
- 브라우저를 재시작해도 데이터가 남아있다.
- 다른 창과 브라우저를 통해서도 접근할 수 있다.
- 모바일에서도 사용할 수 있다.
Session Storage
현재 브라우저 내에서만 유지하고 싶은 경우 사용할 수 있는 Web Storage.
- Web Storage API이다.
- 브라우저가 닫히면 데이터가 사라진다.
- 다른 창과 브라우저를 통해서 공유가 불가능하다.
Cookie
웹사이트 접속 시 그 사이트가 사용하는 서버를 통해 로컬에 저장되는 작은 데이터 파일.
- 서버에서 설정 할 수 있다.
- 설정에 따라 지속 시간(만료일)이 다르다.
- 서버와의 세션 관리 등에 사용된다(세션 쿠키).
- 서버와 통신할 때 HTTP헤더에 포함되어 전송된다.
- JS로도 조작할 수 있는데, httponly 특성을 붙여 조작을 막는다. 제 3자의 수정 또는 XSS를 막는다.
요약
| Local Storage | Session Storage | Cookie | |
|---|---|---|---|
| 생성자 | 클라이언트 | 클라이언트 | 클라이언트/서버 |
| 지속 시간(만료일) | 명시적으로 지울때까지 | 탭/윈도우 닫을 때까지 | 설정 여부에 따름 |
| 용량 | 5MB, 10MB | 5MB | 4KB |
| 서버와의 통신 | 통신하지 않음 | 통신하지 않음 | 통신함 |
| 취약점 | XSS 공격 | XSS 공격 | XSS, CSRF 공격 |
📌 가비지 컬렉션(Garbage Collection)
프로그램에서 더 이상 사용되지 않는 메모리를 자동으로 정리하는 것.
- 특정 때에 특정 방식으로 필요없는 정보들 즉, 가비지들을 쓸어 담아 버린다.
- 지워야할 것들을 100퍼센트 잡아내지는 못하기 때문에, 프로그래머가 신경쓸 필요가 있다.
- 메모리를 관리하지 않으면 메모리 누수가 발생할 수 있고, 속도저하, 예기치 못한 종료, 느린 응답 속도 등과 같은 많은 문제가 발생할 수 있다.
📌
...
참고
