Web 기본 지식들을 키워드 기반으로 정리해보았다.
HTML, CSS, JS
- HTML : 페이지의 틀
- JS : HTML element 간의 동적인 동작
- CSS : 색깔, element 배치 등 디자인 요소
Web API
HTML5는 2004년에 등장했고 2014년에 W3C에서 표준안을 확정했으며, 다양한 Web APIs를 제공한다.
HTML Geolocation API
사용자(브라우저)의 현재 위치를 받아올 수 있다. 지도 현 위치 표시 기능에 사용한다. 단, 브라우저 차원에서 보안 문젤 https에서만 사용 가능하도록 제한이 걸린 상태이다.
HTML Drag and Drop API
웹 페이지에서 JS를 이용해서 element의 드래그, 드롭, 이동, 삭제를 간편히 구현 가능하게 지원한다.
HTML Web Storage API
브라우저에서 session, local storage를 제공한다. 브라우저 프로세스가 종료되기 전까지 데이터를 저장 가능하다. 쿠키보다 더 큰 양의 데이터 저장 가능하다.
HTML Web Workers API
원래 싱글스레드인 JS를 멀티스레드처럼 사용할 수 있게 해준다. 웹 앱의 백그라운드에서 병렬 작업 처리가 가능하다.
HTML SSE(Server-Sent Events) API
chatGPT에 사용된다. 서버에서 클라이언트로 단방향 메세지 보낼 수 있다. HTTP 통신으로 서버에서 실시간 업데이트 받을 수 있고, 실시간 데이터 스트리밍이나 푸시 알림 구현 시 사용한다.
HTML(HyperText Markup Language) 기본구조
XML 문법에서 출발하여, 태그 기반으로 이루어진다.)
<html></html>: 문서의 루트 요소를 정의하고, 전체 문서 범위를 알려준다.- head : 눈에 보이지 않는 요소 / SEO에 필요한 요소 / 웹 페이지의 주요 정보를 담고 있다.
<meta>, <link>, <script>, <title>등
- body : 일반적으로 페이지에 보이는 element들이 들어가는 위치
- Sementic tag : HTML5에서
<section>, <header>, <nav>, <footer>등 기능은 없지만 추가적인 의미를 쉽고 빠르게 알려줄 수 있는 시멘틱 태그가 추가되었다.
metadata
- charset=”UTF-8” : 문서 인코딩 속성
- name=”viewport” : PC/mobild 기기에 따른 너비 및 초기 화면 비율
- name=”keywords” : 키워드
- name=”description” : 페이지 설명 (검색엔진에 간략히 띄워지는 부분)
- name=”author” : 작가
- name=”robots” : 구글 등의 검색엔진 봇에 자세한 행동양식을 지정할 수 있다.
HTML Box-model : margin, border, padding, content가 포함된 element model
- box의 width, height를 border size까지 포함시키고 싶다면 box-sizing : borer-box 속성을 주어야 한다.
- margin collapsing
- 인접한 형제 요소들의 margin-top과 margin-bottom이 합쳐진다.
- 상위 요소의 margin-top과 첫 번째 자식 요소의 margin-top이 합쳐진다.
display : CSS의 속성 중 하나로 element의 표시 방법 지정한다.
- block : element가 새로운 줄에서 시작하고, 가능한 최대 width를 가진다.
- inline : element가 새로운 줄에서 시작하지 않고, content의 일부로 간주된다.
- inline-block : inline과 block의 특성을 모두 갖고 있고, element가 새로운 줄에서 시작하지 않으면서도 width를 지정할 수 있다.
SEO (Search Engine Optimizer)
- SEO를 잘 고려할수록 검색엔진의 크롤러 봇이 웹페이지 내용을 자세히 긁어가서 더 많은 사람들에게 노출시킬 수 있다.
SPA (single page application)
- 여러 페이지를 이동하더라도 최초에 전송받은 하나의 HTML 안에서 컴포넌트만 교체된다.
CSR (Client-Side Rendering)
- React는 기본적으로 CSR 방식을 따르며, SSR로 작동시키려면 추가 구현이 필요하다.
- CSR은 사용자가 브라우저에 페이지를 띄우면, HTML (header는 받아오지만, body는
이렇게만 띄워진 상태에서 javascript 엔진에 의해 js 파일들이 실행되어 컴포넌트가 만들어지고, 렌더링된다.
- 미리 모든 페이지에서 필요한 js 파일들 받아두고, 다른 페이지 이동 시 해당 페이지에 필요한 js를 실행해 새로운 컴포넌트를 렌더링하고 화면 업데이트 한다.
- CSR에서는 프론트 서버가 먼저 브라우저에 HTML 틀과 JS 파일들을 전송하고, 브라우저가 백 서버와 통신하면서 데이터를 받아서 브라우저 화면에 뿌려준다.
<장점>
- short TTI(Time To Interact) : SSR보다 빠른 interaction
- Lazy loading : 필요한 시점에 데이터를 로딩한다.
ex) 스크롤을 내리기 전까지 페이지에 보이지 않는 부분은 로딩하지 않는다.
<단점>
- SEO에 약하다. : 요청이 전달되기 전까지 body가 비어있다.
- long TTV(Time To View) : 초기 로딩이 오래 걸린다
SSR (Server-Side Rendering)
- Next.js에 SSR 기능이 포함되어 있다.
- 각 페이지 URL에 따라 보여줄 내용(HTML body 부분)이 결정되어 있다.
- 서버(프론트 서버)는 URL을 기준으로 HTML을 만들어서 브라우저에 전송하며, 추가 js 파일 등의 리소스도 포함 가능하다.
- SSR에서는 프론트 서버가 백 서버의 데이터를 다 모은 다음에 HTML로 어느 정도 생성한 후에 브라우저에 뿌려준다.
<장점>
- short TTV(Time To View) : 초기 페이지 로딩이 빠르다.
- SEO에 좋다.
<단점>
- long TTI(Time To Interact)
- 프론트 서버 연산량이 늘어나 서버 과부화 발생 가능성
- 페이지 이동 시 새로 rendering 하게 된다.
참고 글
https://yozm.wishket.com/magazine/detail/2330/
https://www.youtube.com/watch?v=iZ9csAfU5Os
https://www.youtube.com/watch?v=YuqB8D6eCKE
https://80000coding.oopy.io/fde38c6f-e65d-4c1a-af45-176abee40389
https://evan-moon.github.io/2018/09/25/universal-ssr/
script
- script 태그를 head에 두는 경우 : html 문서는 위에서 아래로 파싱된다. script가 다운로드되고, 로딩 및 실행되는 동안 파싱이 중단되므로 사용자 입장에서는 웹이 느리게 띄워지는 것처럼 보이거나, JS에서 DOM element를 찾지 못하는 경우가 발생한다!!
- script 태그를 body 하단에 두는 경우 : HTML이 모두 파싱되고 script가 다운로드 되나, 관리의 어려움과 속도 느린 문제점.
- DOM을 따라 순서대로 실행되어야 할 때.
defer
<script defer src="index.js"></script>
- DOM이나 다른 스크립트에 의존성이 있고, script 간의 실행 순서가 중요한 경우.
defer 속성을 추가하면 HTML 파싱과 동시에 script 다운로드가 백그라운드에서 이루어지며, HTML 파싱이 끝난 후에 script가 실행되도록 보장된다.
여러 개의 script에 defer 속성이 걸려있다면, 위에서부터 순서대로 실행 되는 것이 보장된다.
async
<script async src="index.js"></script>
- DOM이나 다른 스크립트에 의존성이 없고, script 간의 실행 순서가 중요하지 않은 경우.
async 속성을 추가하면 script가 HTML 파싱과 동시에 비동기적으로 백그라운드에서 다운로드된다.
단, script 실행은 script 다운로드가 먼저 끝나는 순서대로 실행되며, script 실행 중에는 HTML 파싱이 중단된다. 따라서 script 실행 순서를 보장할 수 없다.
참고
https://velog.io/@ank0425/JavaScript-실행되면-html-파싱-중단되는-이유에-대해
웹사이트 제작 시 고려사항
- 웹 표준 : 웹사이트 작성 시 따르면 좋은 공식 표준, 기술 규격 (World Wide Web Consortium)
- 웹 접근성 : 장애 여부와 상관없이 웹사이트를 이용 가능하도록 하는 방식. 스크린 리더기를 사용할 때 인식 가능하도록
태그의 alt 속성 넣는다.
- 웹 콘텐츠 접근성 규칙 (WCAG 3, W3C Accessibility Guidelines)
- 크로스 브라우징 : 모든 브라우저, 기기에서 사이트가 제대로 접근하도록 개발하는 것.
- caniuse.com
- Vender Prefix (벤더 프리픽스) : 특정 브라우저 제조사의 접두사를 css 속성 앞에 추가하는 것. 특정 브라우저에서만 제공하는 속성을 사용할 때 필요하다. (ex. chrome의 -webkit-, IE의 -ms- 등)
- Prefix Free 라이브러리도 있어서, 자동으로 벤더 프리픽스 적용해주는 기능도 존재한다.
'대외활동 > [2024.1학기] KUIT 3기' 카테고리의 다른 글
| [KUIT 3기 Web] 2주차(5 - 完) - 당근마켓 화면(CSS) 클론 하기 및 트러블 슈팅 (3) | 2024.03.30 |
|---|---|
| [KUIT 3기 Web] 2주차(4) - CSS 우선순위, CSS 작명법 BEM(Block Element Modifier), svg 작명법, 추가 내용 (0) | 2024.03.30 |
| [KUIT 3기 Web] 2주차(3) - CSS positioning, 원하는 위치에 요소 배치하기 (2) | 2024.03.30 |
| [KUIT 3기 Web] 2주차(2) - CSS grid, grid parent, grid children (0) | 2024.03.29 |
| [KUIT 3기 Web] 2주차(1) - CSS flex box, flex container, flex items (0) | 2024.03.27 |