2022.07.21(Thurs)
[TIL] Day60
[SEB FE] Day61
: 웹 서버에서 양방향으로 통신하며 다양한 컨텐츠를 열람할 수 있도록 해주는 GUI 기반의 SW 프로그램
HTTP
를 통해 송수신: World Wide Web
(= Web Browser
, Web 탐색기
)
인터넷 상에서 멀티미디어 정보를 HyperText
방식으로 연결하여 제공
📌 Web Browser 종류
Mosaic
: 최초 웹 브라우저로 1993년 ‘마크 안드레센’ & ‘에릭 비나’가 개발Netscape
Chrome
✨ 각 브라우저의 공통점 → 동작 방식 !
Resource
)을 서버에 요청(Request
) Response
)을 브라우저에 띄움(Rendering
)✋ 자원 주소 - URL
(Uniform Resource Identifier)로 구성
➰ Web Page
: HTML 언어를 사용하여 작성된 문서 형태로 제공
➰ Web Site
: 서로 관련된 내용으로 작성된 웹 페이지들의 집합
📌 Web 동작 원리
User Interface (UI)
: User와 가장 밀접하게 맞닿아 있는 부분 (GUI 부분 통칭)
Browser Engine
(= Layout Engine
): UI와 렌더링 엔진 사이 동작을 제어하며, DOM 구현
게코(Gecko) | 모질라 재단에서 만든 브라우저 엔진 | FireFox |
---|---|---|
웹킷(Webkit) | KHTML에서 파생된 브라우저 엔진 | Safari |
블링크(Blink) | Webkit에서 파생된 브라우저 엔진 | Chrome, Opera |
트라이던트(Trident) | 마이크로소프트의 브라우저 엔진 | Explorer, Outlook Express … |
EdgeHTML | Trident에서 파생된 브라우저 엔진 | … |
Rendering Engine
: 요청한 콘텐츠를 화면에 출력하는 역할
Networking
(통신): HTTP 요청과 같은 네트워크 호출에 사용
JavaScript Interpreter
(해석기) (= JS Engine
): 대체로 웹 브라우저에서 이용
Rhino | - 모질라 재단이 운영하는 오픈소스 엔진 - Java로 개발 |
---|---|
SpiderMonkey | - 최초 JS엔진으로 넷스케이프 내비게이터 지원 - 현재는 파이어폭스 지원 |
V8 | - 구글이 개발한 오픈 소스 엔진 - 구글 크롬의 JS엔진 |
JavascriptCore | - 애플에서 개발 -현재 Safari & React-Native App 지원 |
Chakra | - 마이크로소프트가 개발한 엔진 - Edge 브라우저 지원 |
Heap Memory
: 동적 메모리 할당에 사용되는 자료구조 → 객체 / 동적 데이터 저장
Call Stack
: 프로그램 상에서 우리가 어디에 있는지 기록하는 자료구조
✨ Stack Frame
(호출 스택의 각 단계)
Stack Push
(쌓임)Stack Pop
(제거): return되는 순서대로 후입선출!✋ 콜 스택 동작 방식에서, 함수 실행 동안 return문으로 함수 호출 외의 특정한 값이 없으면
특정 값을 얻을 때까지 콜 스택 내부에 함수 스택 프레임이 쌓이게 됨
✋ Call Stack은 크기 제한이 있음 ⇒ 한정된 메모리 공간을 넘어버리면 Stack Overflow
Error 발생
✨ Stack Overflow
: Call Stack 내부의 동일한 Stack Frame이 예상치 못한 수로 쌓일 때 발생
✨ Stack trace
(추적)
: 브라우저 Console.log
로 에러 발생 원인을 추적할 수 있음
UI Back-end
: 렌더링 엔진이 분석한 Render Tree
를 브라우저에 그리는 역할
Command Line Interface
(CLI
): 명령어 라인 인터페이스Batch Interface
: 일괄 처리 인터페이스Graphic User Interface
(GUI
): 마우스, 키보드, 모니터 등으로 직관적인 입력이 가능한 인터페이스자료 저장소
(Web Storage
): 자료를 저장하는 계층
LocalStorage
: 보관 기한 없는 데이터 저장
window.localStorage:
만료 날짜가 없는 데이터 저장시 사용localStorage
컬렉션을 통해 저장 & 조회 가능localStorage
생성 ⇒ 같은 도메인이면 전역으로 데이터 공유 가능SessionStorage
: 하나의 세션만을 위한 데이터 저장
window.sessionStorage:
세션이 있는 데이터 저장시 사용 (브라우저 탭 닫으면 손실되는 것을 의도한 데이터 저장시 사용)sessionStorage
는 각 별개의 영역으로 인지 → 서로 데이터 공유 불가능 ❌✋ Browsing
: 브라우저 프로그램을 실행해서 필요한 정보를 찾는 행위
✋ 브라우저 컨텍스트
: 브라우저가 문서를 표시하는 환경 (특정 출처, 표시했던 모든 문서의 방문기록 …)
✨ Rendering
: 개발자가 작성한 문서가 브라우저에서 출력되는 과정
DOM Tree
생성CSSOM(CSS Object Model, CSS 객체 모델) Tree
생성DOM Tree
& CSSOM Tree
를 결합하여 Render Tree
구축Render Tree
를 화면에 그림 👈 Paint
: 프로그래밍 언어로 작성된 파일을 실행시키기 위한 구문 분석 단계
✨ Parser
: 인터프리터 / 컴파일러 구성 요소 중 하나
HTML
파일 코드
→ Token
(문법적 의미를 갖는 최소 단위)으로 1번 분해
→ 문법적 의미&구조에 따라 Node
요소로 바꿈
→ 상하 관계에 따라 하나의 Tree
형성 👉 Parse Tree
/ Syntax Tree
✋ 위에서 생성된 HTML Token
에는 시작태그, 마침태그, 속성 이름&값이 포함됨
✨ Document Parsing
: 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것
🌵 DOM Tree
✨ DOM
(Document Object Model): HTML 문서 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성
브라우저는 JS 언어만 알아듣기 때문에 HTML 태그/속성 이해 X → 이해할 수 있는 형태인 객체로 변환해야 함 👉 DOM Tree
🌵 CSSOM Tree
: 브라우저가 HTML 파일 → DOM Tree로 파싱하다가 <link>
, <style>
태그를 만나면 파싱을 잠시 멈추고, 해당 리소스 파일을 서버로 요청 → 요청한 파일을 파싱하여 만든 트리 👉 CSSOM Tree
→ 트리 구축 후, 다시 HTML 파일 파싱 중단 부분으로 돌아가 마저 DOM Tree 파싱 go!
✋ CSS는 부모 속성을 자식이 상속 받음!
🌵 Render Tree
: 렌더링 목적으로 만들어진 트리로, DOM Tree & CSSOM Tree를 합쳐줌
✋ 렌더링은 사용자에게 보여주고자 하는 화면을 그리는 과정이므로 보이지 않을 요소들은 렌더 트리에 포함 ❌
✨ Layout
: 렌더트리 기반으로 HTML 요소의 레이아웃을 계산하여 브라우저 화면 어디에 배치할지 결정하는 과정
- 모든 값은 절대적인 단위인 px
값으로 변환
🎨 Painting
: 계산된 pixel
정보를 바탕으로 pixel
을 채워나가는 과정
➰ Reflow
: 어떠한 웹 인터렉션을 통해 렌더링 과정의 레이아웃을 반복해 수행하는 것
➰ Repaint
: 페인트 과정을 반복해 수행하는 것
✋ DOM이 변경되면 렌더 트리를 다시 구축하기 때문에, 변경될 때 마다 리플로우 & 리페인트를 다시 해야 함!
✨ Frame Drop
: 초당 60프레임으로 유지시키던 프레임 수가 브라우저 과부하로 인해 줄어드는 현상
👉 화면 멈춤 / 버벅임 현상 발생 → 최적화 고민 🤔
left
속성은 레이아웃 발생 → 위치 변경 → 프레임 유지 보장 어려움opacity
속성 사용시 visibility
/ display
보다 성능 개선에 도움!position
을 absolute
/ fixed
사용 → 주변 노드 줄여줄 수 있음: 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 / 사이트로써,
브라우저 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트
👉 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론
(디바이스 종류에 따라 웹페이지 크기 자동으로 재조정)
✨ Mobile First
: 사용자 경험(UX)을 디자인할 때 모바일일 경우에 최우선으로 초점을 맞춰 디자인하는 것
✨ 사용 방법
<!-- 1. HTML 파일의 <head> 내에 <link> 태그로 작성 -->
<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">
<!-- 2. HTML 파일의 <head> 내에 <style> 태그로 작성 -->
<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
<!-- 여기에 css 작성 -->
</style>
/* 3. 미디어 쿼리 구문 */
@media 미디어 타입 (조건-너비/높이) {
(CSS 입력 부분)
}
/* example */
@media screen (max-width: 400px) {
body {
color: red;
}
}
all
: 모든 미디어 타입print
: 프린터screen
: 컴퓨터 화면speech
: 스크린 리더max-width,
min-width
orientation
속성✨ 복잡 미디어 쿼리
and
): and
로 미디어 기능 합치기! 모든 조건을 만족해야 스타일 적용!or
): 콤마(,
)로 분리하여 해당 조건 중 하나만 만족해서 스타일 적용!not
): not
으로 반대로 적용미디어 쿼리로 반응형 웹 구현해보기 🙌
✨ 페어님과 나누어서 작업을 진행한 후, 합치는 방향으로 진행했다. 나는 Main 부분을 구현했고, 페어님은 Nav 바를 구현하셨다!
✨ 창 크기가 줄어들면 영어 글자크기가 줄어들고, 버튼 크기와 위치도 변경되며, 오른쪽 년도 숫자도 2줄에서 1줄로 변하도록 구현!!
✨ 어떤 사이트를 모티브로 구현할까 찾아보다가 반응형을 잘 보여줄 수 있는 사이트로 페어님이 선정하신 사이트를 참고하여 구현 진행!
• https://kiac.kr/main 사이트 참고
// Main Component
import styled from "styled-components";
import Button from "./Button";
const BREAK_POINT_TABLET = 768;
const BREAK_POINT_PC = 1200;
const MainArea = styled.div`
flex-direction: column;
max-height: 864px;
height: 100vh;
width: 100vw;
overflow: hidden;
padding: 128px 0px 0 0px;
box-sizing: border-box;
overflow: auto;
div.text {
margin: 0 2rem;
display: flex;
flex-direction: column;
strong {
width: 100%;
height: auto;
color: black;
font-weight: 900;
font-size: 100px;
line-height: 1.3;
}
h3 {
line-height: 1;
text-align: right;
}
span {
text-align: right;
letter-spacing: 20px;
font-size: 60px;
}
.buttonContainer {
text-align: right;
}
}
// Mobile : 0px ~ 768px 이상
@media only screen and (max-width: ${BREAK_POINT_TABLET}px) {
div.text {
strong {
font-size: 32px;
}
span {
font-size: 25px;
}
span::after {
content: "22";
}
.buttonContainer {
text-align: center;
}
}
div.text h3:first-child {
display: none;
}
}
// 태블릿 : 768px ~ 1200px
@media only screen and (min-width: ${BREAK_POINT_TABLET}px) and (max-width: ${BREAK_POINT_PC}px) {
div.text {
strong {
font-size: 70px;
}
span {
font-size: 40px;
}
div.text h3:first-child { // 20 22 이 두줄로 나오는데 이 중에 22 안 보이도록!
display: none;
}
span::after { // 위의 코드로 22 안 보이도록 처리한 후, 20 뒤에 22를 붙여 한 줄에 2022 보이도록 설정
content: "22";
}
.buttonContainer {
text-align: center;
}
}
}
`;
const Render = () => {
return (
<>
<MainArea>
<div className="text">
<div>
<h3>
<span>22</span>
</h3>
<h3>
<span>20</span>
</h3>
</div>
<div>
<h1>
<strong>KOREA</strong>
</h1>
<h1>
<strong>INTERNATIONAL</strong>
</h1>
<h1>
<strong>AQUASCAPING</strong>
</h1>
<h1>
<strong>CONTEST</strong>
</h1>
<div className="buttonContainer">
<Button text="Application" />
</div>
</div>
</div>
</MainArea>
</>
);
};
export default Render;
// Button Component
import React from "react";
import styled from "styled-components";
const BREAK_POINT_TABLET = 768;
const BREAK_POINT_PC = 1200;
const ButtonStyle = styled.button`
font-size: 25px;
padding-left: 44px;
padding-right: 44px;
padding-top: 25px;
padding-bottom: 25px;
letter-spacing: 0px;
background-color: #b71327;
color: #ffffff;
opacity: 1;
transition-duration: 0.7s;
visibility: visible;
border: none;
&:hover {
background-color: #0054ff;
}
// Mobile : 0px ~ 768px 이상
@media only screen and (max-width: ${BREAK_POINT_TABLET}px) {
font-size: 18px;
padding-left: 30px;
padding-right: 30px;
padding-top: 15px;
padding-bottom: 15px;
letter-spacing: 0px;
}
// Tablet : 768px ~ 1200px
@media only screen and (min-width: ${BREAK_POINT_TABLET}px) and (max-width: ${BREAK_POINT_PC}px) {
font-size: 18px;
padding-left: 30px;
padding-right: 30px;
padding-top: 15px;
padding-bottom: 15px;
letter-spacing: 0px;
}
`;
const Button = (props) => {
return <ButtonStyle>{props.text}</ButtonStyle>;
};
export default Button;