브라우저의 동작과 DOM
DOM이란
- Document Object Model - 문서 객체 모델
- 문서를 구조적으로 표현하는 방식을 제공하는 것
브라우저 단계 레이어
-
1) 사용자 인터페이스(UI) 레이어
- 라우저에서 볼 수 있는 거의 모든 것으로, 요청한 페이지를 보여주는 창 외의 모든 UI를 의미
- 주소창, 뒤로가기, 앞으로 가기, 새로고침, 북마크, 환경설정과 같은 UI
-
2) 브라우저 엔진
- 사용자 인터페이스와 렌더링 엔진 사이에서 중재자 역할
- 만약 여러분들이 사용자 인터페이스 레이어에 있는 새로고침 버튼을 눌렀다면, 브라우저 엔진은 이를 이해하고 새로고침 명령을 수행
-
3) 렌더링 엔진
- HTML과 CSS, JavaScript를 파싱하고 그 결과물을 바탕으로 페이지를 그려내는 역할
- 각 브라우저는 다양한 엔진을 사용하는데, Chrome과 Opera, Edge는 Blink를, Firefox는 Gecko를, Internet Explorer는 Trident를, Safari는 WebKit을 사용
-
4) 네트워크 레이어
- HTTP나 HTTPS 같은 프로토콜을 이용해 외부의 리소스를 얻어오고, 서버에 요청을 보낼 때 사용되는 레이어
-
5) JavaScript 인터프리터
- JavaScript를 해석하고 실행하는 역할
- 가장 유명한 엔진 : Chrome에 탑재된 구글의 V8
-
6) UI 백엔드
- 브라우저가 동작하고 있는 운영체제의 인터페이스를 따르는 UI들을 처리
- 얼럿(alert)이나 셀렉트 박스(select)가 운영체제 별로 다르게 동작
-
7) 자료 저장소
- 브라우저 자체에서 하드디스크와 같이 데이터를 로컬에 저장하기 위한 레이어
- 쿠키나 로컬 스토리지, 세션 스토리지, indexedDB, 웹 SQL, 파일시스템 등에 접근하고 데이터를 저장하는데 사용
브라우저 동작순서
1) 사용자가 웹페이지를 방문하면 웹브라우저를 시작
2) 브라우저가 웹문서를 읽기 시작
3) DOM 생성
4) DOM이 생성되면 ready메소드가 실행
5) 이미지를 포함한 요소들이 로드되기 시작
6) 모든 요소들이 로드가 완료되면 load메소드가 실행됨
7) 페이지 로딩 완료
렌더링 엔진의 기본적인 동작 과정
참고) https://d2.naver.com/helloworld/59361
CSS 레이아웃: Floats, Position, Display, Box Model, Grid, Flex
Floats
- 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정
Position
- 문서 상에 요소를 배치하는 방법을 지정
- top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정
- position 요소
- static : 기본값, 부모 요소를 기준으로 한 위치
- relative : 자기 자신의 위치를 기준으로한 상대적인 위치
- absolute : 부모 요소의 위치를 기준으호 한 상대 위치
- fixed : 브라우저 창을 기준으로 위치
Display
- 요소를 어떻게 보여줄지를 결정
- 4가지 속성값
- none : 보이지 않음
- block : 블록 박스
- inline : 인라인 박스
- inline-block : block과 inline의 중간 형태
Box Model
- tag를 감싸는 Box형 부분들(padding, border, margin, width 등)에 효과를 줌으로써 디자인
- width : 텍스트의 너비
- display : 글자의 부피 지정, block(그 줄 전체), inline(텍스트만큼의 부피), none(사라짐), grid,
Grid
- 가로/세로 2차원 레이아웃을 나누기 위해 사용
- div(block), span(inline) 태그를 이용해 Grid에 담길 부분 지정
Flex
- UI 레이아웃 디자인에 최적화된 CSS 모듈
- display 속성의 값을 flex 로 지정하게 되면, 기존에 사용되던 float 등의 방식보다 손쉽게 문서의 레이아웃을 작성할 수 있게 됨
참고) https://velog.io/@misun9283/CSS-%EC%9C%84%EC%B9%98-%EC%A7%80%EC%A0%95%ED%95%98%EA%B8%B0position-float-inline-block
https://tutorialpost.apptilus.com/code/posts/css/css-layout/
https://hayjo.tistory.com/19
Webpack / Babel
Webpack(웹팩)
- 웹팩 : 사용자가 접근하는 것이 아닌 개발자가 접근할 때 사용되는 것
- 개발자가 자바스크립트 파일을 만들어 바로 렌더링을 할 경우 바벨에서 에러 발생 가능
- 웹팩에서 바벨이라는 라이브러리를 이용해서 ES5포맷을 갖는 하나의 파일로 만듬 (빌드를 하는 큰 프레임워크)
Babel(바벨)
- 바벨 : Javascript ES6의 syntax들을 ES5의 형태로 파일을 만들어주는 역할
- ES5의 간편화되고 좋은 문법들을 사용하면서 현존하는 브라우저에 에러없이 렌더링을 하기 위해 ES5 형태로 자바스크립트 파일을 변환할 때 피요한 것
참고) https://juneyr.dev/2019-02-20/webpack-babel
React / Vue / Angular 기술별 차이점과 장단점
React(리액트)
- 막강한 커뮤니티와 자료들
- 다른 설계들에 잘 녹아들기 때문에 유연함을 요하는 서비스들에 권장
Vue(뷰)
- Evan You
- 코드가 깔끔하고 배우기 쉬움
- 늦게 나왔지만 빠른 속도로 성장 중
Angular(앵귤러)
- 비교적 무겁고, 배우기 어려움
- Typscript라는 JS를 보완한 언어로 매우 안정적이고 탄탄한 프론트앱을 만들 수 있음
참고) https://www.youtube.com/watch?v=iE29lbjbow0&list=LL&index=4
Leyn(레인)