2021.01.11

HTML, CSS, Javascript

contents -> style -> action 순으로 발전

• ML : 마크업 랭귀지

  • < / > 정의
  • MD : markdown <> markup
  • 마크업 -> 컨텐츠를 정의하는 것

• HTML = contents

• HTML 태그들은 각자 의미가 있기때문에 기본적으로 가지고 있는 동작 Sementic 이 있다.

  • 웹표준과 접근성
  • 웹표준 : 모든 브라우저에서 동일 경험을 제공한다. 시멘틱한 태그를 사용한다.
  • 모든 브라우저에서 동일 경험을 제공
    • HTML은 css가 생기기전에 나온 것이므로 기본 형태를 제공함 = user agent style (브라우저의 html 기본 스타일 - 모든 브라우저마다 미세하게 차이가 있음) -> 헤더에 포함되는 user-agent와 다른 것이니 구분해야한다.
    • 브라우저마다 CSS 처리 엔진도 다름. (동일한 css를 해석하는 role이 다름) -> prefix 를 사용해서 명시하기도 한다.
  • sementic
    • 의미가 있는 형태로 컨텐츠가 만들어져야한다.
    • 의미있다 = 의미있는 태그를 사용해서 컨텐츠를 만들어야함
    • ex. 중요한 title은 div가 아닌 h1 과 같은 태그를 사용해야한다.
    • 봇이 컨텐츠를 분류할 때 더 빠르고 정확하게 할 수 있다.
  • 접근성 이슈
    • 장애가 없는 사람과 있는 사람이 동일한 서비스를 사용하는데에 있어서 차별이 있어선 안됨.
    • 인터넷을 사용하는게 힘든 사람들 (ex. 시각장애인, 색약/색맹 등) 도 동일한 서비스를 사용할 수 있게 제공해야한다.
    • 필요한 네비게이션, 메뉴를 제공해야함.
    • a, button -> 포커싱 들어감 / span, div -> 포커싱 들어가지 않아서 (시각장애인용) 리더기가 읽을 수 없음.

• CSS

  • style
  • 캐스캐이팅 스타일 시트
  • 상속구조로 내려옴
  • Sass, Scss (동일하다고 보면 됨) -> pre compiler
  • less -> 원도우에서 썼었는데 잘 안쓴다.
  • css in js (요즘 대세임) - 일종의 트렌드. -> styled component, emotion
  • css = rule base
    • 어떤 요소에 : 이 값을 적용해라 (key:value 느낌)
    • 유니크 할 수록 점수가 높음 (구체적인 태그 선정)
  • scss
    • css는 nesting 안됨 -> scss는 편의성 제공
    • 컴파일이 돌아서 결국 css가 됨
    • 무조건 빌드 타임이 있어야함
    • 연산을 돌릴 수 있음. -> import, function 제공 할 수 있음
    • 변수 만들 수 있음 (보통 color)
  • css in js
    • scss 빌드가 느림
    • 굳이 css를 파일로 관리해야해??
    • 종류 다양함
    • function처럼 library 이용해 스타일이 정해진 컴포넌트를 만들듯이 css를 정의함.

• Javascript

  • action 담당
  • event
  • DOM -> contents(html), web api를 이용해 통신

화면을그리는 방법

Nodes, DOM의 차이

• inline style은 DOM을 생성할 때 attribute이므로 바로 붙어버린다. (CSSOM 에 업데이트하고 바로 DOM에 바로 붙음)
• 항상 화면을 싹 다 읽고 나서 화면을 그림.
  • HTML을 다 읽었다?
  • css 중 화면에 보여지지 않는 애들은 랜더 트리에서 빠져야됨
  • 레이아웃 단계에서 cpu 단계가 가장 많다. -> 따라서 재랜더링 하지 않는 방향을 추구
  • 3D 레이어 단계 : gpu에게 위임 (계산이 빠름)
• FOUC : css를 async 하게 로딩하려고 시도했을 때
• domContentLoaded
  • document.addEventListener('domContentLoaded', ()=>{});모든 돔 컨텐츠가 생성되면 js 함수를 실행해라
  • 항상 돔 컨첸트가 생성되지 않았을 수 있음을 인지해야함.

핵심

HTML은 완전해야한다.
HTML이 완전히 로드가 되어야 완벽하게 다른 것들이 로드 될 수 있다. DOM + CSSOM -> lendering tree -> layout, painting
DOM이 완전히 그려져야지 js가 정상 실행되는 것이 보장된다.

• FOUC 방지 : css는 상단(head tag)

  • head tag에는 실제 컨텐츠가 아닌 애들이 들어감 (meta tag 등)
  • head는 화면에 노출안되고, 가장먼저 스타일을 로딩하려고 그럼
  • 무조건 헤더에 넣고 비동기처리는 하지 않는다.

• js가 head에 있는 것은 anti 패턴임 (레거시)

• js는 npm package로 제공하는 것이 좋음

  • npm 번들안에 어떤 것들이 어떤 순서로 로딩될 지 정의가 되어있으므로 실행 순서를 관리할 수 있다.
  • body 태그의 제일 마지막에 넣는게 보편적임

리액트가 빌드된걸 보면.. index.html.. 위와같은 규칙으로 적용되어 있을 것이다.

도메인 샤딩

• 하나의 도메인에 대해 http가 열 수 있는 소켓이 제한이 있음 (브라우저마다 다름) -> js, css의 개수, 서빙 위치에 따라서 해당 도메인으로 요청.. 소켓 제한 때문에 로딩 시간이 길어질 수 있음 (양이 많은게 아니고.. 개수가 많아서 소켓 열고 닫는데 걸리는 시간이 길다.)
• 도메인 샤딩을 한다고 무한정 늘어나는 것은 아님
• 같은 도메인으로 열 수 있는 커넥션 개수 고정 but 커넥션 전체도 소켓 제한 있음!!! (무한정으로 만들 수 없음)
• 최대한 많이 열어보자
  • 이미지 등은 cdn에서 주게한다... 이 때 cdn 도메인을 두 개로 분리(js/css)
  • aws에서 보면, cloud front라는 도메인이 있는데 이 앞에 route53을 이용, 추가적인 도메인 붙일 수 있음 -> 같은 cdn인데 도메인을 다르게 팔 수도 있음
• 도메인별 캐싱.. 회피할 수 있음