22.07.21_TIL

📌 내가 제일 노력을 해야하는 부분인 CSS 디자인 부분에 대해서 학습을 하는 시간을 오늘 포함 이틀을 준다고 한다. 이때 더욱 실력을 향상시켜 구현만 가능한 프론트엔드 개발자가 아닌 디자인도 같이 겸비할 수 있는 개발자가 될 수 있도록 노력해야겠다.

📗 오늘 학습한 내용

브라우저

• 프론트엔드 개발자는 브라우저의 동작과정에 대해 아는 것이 중요하다.
• 작성한 코드가 브라우저의 소프트웨어 프로그램 상에서 수행되기 때문이다.

웹(Web) = 월드 와이드 웹(World Wide Web)

• 인터넷 상에서 텍스트나 그림, 소리 등과 같은 멀티미디어 정보를 하이퍼텍스트(hypertext) 방식으로 연결해 제공한다.

웹 페이지

• HTML 언어를 사용하여 작성된 문서 형태

웹 사이트

• 웹 페이지 중 서로 관련된 내용으로 작성된 웹 페이지들의 집합

브라우저의 동작 방식

• 사용자가 선택한 자원을 서버에 요청하고, 서버의 응답을 브라우저에 렌더링 하는 방식으로 동작한다.

사용자가 URL 주소를 입력

→ DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색

→ 해당 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달

→  전달받은 IP 주소는 HTTP 프로토콜을 사용해 HTTP 요청 메시지 생성 TCP 프로토콜을 사용해 인터넷을 거쳐 해당 IP 컴퓨터로 전송

→  요청 메시지를 다시 HTTP 프로토콜을 통해 웹 페이지 URL 정보로 변환

→ 웹 서버에서 응답 메세지 생성

→ TCP 프로토콜을 이용해 인터넷을 겨처 사용자의 컴퓨터로 전송된다.

브라우저의 구조

• 사용자 인터페이스(User Interface)
• 브라우저 엔진(Browser Engine)
  • 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다.
  • HTML 문서와 기타 자원의 웹 페이지를 사용자의 장치에 시각 표현으로 변환시키며, 문서 객체 모델(DOM) 자료 구조를 구현
• 렌더링 엔진(Rendering Engine)
  • 요청한 콘텐츠를 화면에 출력하는 역할
  • HTML 및 XML 문서와 이미지를 표시할 수 있다.
• 통신(Networking)
  • HTTP 요청과 같은 네트워크 호출에 사용
  • 보통 플랫폼의 독립적인 인터페이스, 각 플랫폼의 하부에서 실행
• 자바스크립트 해석기(JavaScript Interpreter)
  • 코드를 위에서 아래로 한 줄씩 읽어내려가는 방식으로 파싱하는 코드를 해석하고 실행하는 것
  • 여러 목적으로 사용이 되지만 대체적으로 웹 브라우저에서 이용이 되며, 브라우저마다 전용 엔진 탑제
• 힙 메모리(Heap Memory)
  • 힙: 동적 메모리 할당에 사용되는 자료구조
  • V8: 객체 또는 동적 데이터를 저장
  • 엔진 내부에서 가장 큰 메모리 공간을 차지하고 있다.
  • 가비지 컬렉션이 발생하는 곳
• 콜 스택(Call Stack)
  • 한 번에 한 작업만 사용할 수 있다.
  • 프로그램 상에서 우리가 어디에 있는지 기록하는 자료구조
  • 함수를 실행한다면 해당 함수는 콜 스택의 가장 상단에 위치한다.
• 스택 오버플로(Stack Overflow)
  • 콜 스택 내부의 동일한 스택 프레임이 예상치 못한 수로 쌓일 때 발생
• 스택 추적(Stack trace)
  • 브라우저의 콘솔 로그를 살펴보며 에러의 발생 이유를 추적해낼 수 있다.

자료 저장소

• 자료를 저장하는 계층
• 웹 스토리지(Web Storage) 특징
  • 쿠키의 보안상 취약과 저장소의 절대적인 허용 용량이 적어서 찾은 대안 방안
  • origin마다 단 하나씩만 존재
  • origin
    • domain과 protocol 한 싼으로 이루어진 식별자
    • 하나의 origin에 속하는 모든 웹 페이지는 같은 데이터를 저장하기 때문에 같은 데이터에 접근할 수 있다.

웹 스토리지 종류

• 로컬스토리지(localStorage)
  • 보관 기한이 없는 데이터를 저장(객체)
  • 브라우저 탭이 닫히거나, 컴퓨터를 재부팅해도 이 저장소에 저장된 데이터는 사라지지 않는다.
• 세션스토리지(sessionStorage)
  • 하나의 세션만을 위한 데이터를 저장(객체)
  • 데이터를 지속적으로 보관하지 않고 브라우징되고 있는 브라우저 컨텐긋트 내에서만 유지
  • 브라우저 탭이 닫히거나 창을 닫으면 세션 저장소에 저장된 데이터가 사라진다.

웹 스토리지를 활용한 대표적인 기능

• 복구 및 백업에 관련된 기능에 주로 사용
• 블로그 글을 작성 중 사용자가 창을 벗어난 경우 관련 작성 내용을 복구하거나 백업해주는 기능
• 사용자가 입력 form을 통해 정보를 입력하다 페이지에서 벗어난 경우 복구 및 백업해주는 기능
• 현재 읽은 글의 히스토리 저장

브라우저 렌더링 과정

1. 사용자가 브라우저를 통해 웹 사이트에 접속
2. 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹 사이트에 필요한 리소스 다운
3. 렌더링 엔진은 전달받은 HTML 문서를 파싱해 DOM 트리를 만든다.
4. 이어서 다운 받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱해 CSSOM(CSS Object Model, CSS 객체 모델) 트리를 만든다.
5. 만든 DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구축한다.
6. 레이아웃 과정을 통해 각 요소를 어디에 배치할 지 결정한다.
7. 레이아웃 과정이 끝나면 UI 백엔드 Render 트리를 화면에 그리기 시작한다.

파싱(Parsing)

• 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석을 하는 단계

DOM Tree

• HTML 문서의 요소들의 중첩 관계를 기반으로 노드들을 트리 구조로 구성한 것

CSSOM Tree

• html 파일을 DOM 트리로 파싱하던 브라우저는 link, style 태그를 만나 파싱을 멈추고 해당 리소스 파일을 서버로 요청한다. 이렇게 요청한 파일을 html 파일처럼 파싱을 하는데, 파일을 파싱해 만든 트리를 말한다.

렌더 트리(Render Tree)

• 렌더링을 목적으로 만들어지는 트리
• 사용자에게 브라우저가 보여주고자 하는 화면을 그리는 과정

레이아웃

• 렌더트리를 기반으로 HTML 요소의 레이아웃을 계산하여 브라우저 화면 어디에 배치할 지 결정하는 과정

페인팅

• 픽셀에 대한 정보들을 바탕으로 픽셀을 채워나가는 과정

반응형 웹

• 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다.
• 하나의 소스크드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론이며 디바이스 종류에 따라 웹 페이지의 크기가자동적으로 조정 된다.

반응형 웹의 특징

• 장점
  • 효율적인 유지보수
    • 하나의 콘텐츠에 오직 하나의 HTML 소스만 있기 때문에 하나의 소스를 수정하면 모든 스크린 사이즈에 맞춰 콘텐츠가 최적화되기 때문이다.
  • 검색엔진(SEO) 최적화 유리
    • 검색 결과에서 상위권에 나타나게 할 수 있다.
• 단점
  • 사이트의 속도 저하
    • 모바일 환경에서 적응하게 만들어진 반응형 웹은 모바일 전용으로 하는 사이트에 비해 무겁다.
    • 읽어들여야 할 소스가 많아 불필요하게 많은 데이터를 소비하기 때문이다.
  • 웹 브라우저 호환성 문제
    • 존재하는 웹 브라우저는 스펙 및 사양이 다르기 때문에 하나의 웹 브라우저에서는 잘 반응하던 코드가 다른 웹 브라우저에서는 디자인이 깨지는 경우가 발생할 수 있기 때문이다.

미디어 쿼리

• 반응형 웹 디자인의 핵심 부분이다.
• 브러우저 창의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다.

미디어 쿼리 적용법

• head태그 안에 link를 위치 시키는 방법
  • 미디어 속성을 사용하여 조건을 지정하여 미디어 속성 내 해당 조건을 만족할 때에만 해당 CSS 파일을 불러오게 한다.

<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">

• CSS 파일, 태그 안에서 직접 미디어 쿼리 작성하는 방법

미디어 쿼리 작성 구문

• 미디어 타입: 코드가 어떤 미디어를 위한 것인지 작성한다.
  • all: 모든 미디어 타입
  • print: 프린터
  • screen: 컴퓨터 화면
  • speech: 스크린 리더
  • and를 사용해 미디어 기능을 합칠 수 있다.
  • ,(콤마)를 사용해 or 연산이되며 조건 중 하나라도 만족할 때 스타일이 적용되도록 한다.
  • not 연산자를 사용해 미디어 쿼리의 조건을 반대로 할 수 있다.
• 조건: 지정한 창의 너비나 높이를 기준이 만족되면 스타일이 적용되도록 한다.
  • 방향성: 세로 모드와 가로 모드를 검사하는 방법으로 조건에 prientation: landscape를 작성한다.
• CSS 입력: 조건문을 통과한 후 작성된 CSS 스타일이 적용되는 부분이다.

@media 미디어 타입 (조건(너비 및 높이)){
    (CSS 입력하는 부분)
}

@media screen (max-width: 400px){
    body{
            color: red;
        }
}

@media (orientation: landscape){
    body{
            color: red;
        }
}

@media screen and (max-width: 400px) and (orientation: landscape){
    body{
            color: red;
        }
}

@media screen and (max-width: 400px), (orientation: landscape){
    body{
            color: red;
        }
}

@media not all and (orientation: landscape){
    body{
            color: red;
        }
}

반응형 웹 구현 (미디어쿼리)

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

📝 중요한 내용

• 웹 스토리지의 종류
  • localstorage
  • sessionstorage
• 반응형웹
• 미디어 쿼리 사용방법