About Frontend

📌 CSR and SSR

• SPA (Single Page Application)
  하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션
  랜더링 방식 : CSR

• MPA (Multiple page Application)
  사용자가 페이지를 요청할때마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션
  랜더링 방식 : SSR

• CSR (Client Side Rendering) 브라우저가 서버에 HTML과 JS 파일을 요청한 후 로드되면 사용자의 상호작용에 따라 JS를 이용해서 동적으로 렌더링 시킴

👍

• 첫 로딩만 기다리면 동적으로 빠르게 랜더링 되기 때문에 사용자 경험이(UX) 좋음
• 서버에게 요청하는 횟수가 훨씬 적기 때문에 서버의 부담이 덜함

👎

• 모든 스크립트 파일이 로드될 때까지 기다려야 함
• 검색 엔진의 검색봇이 크롤링을 하는데 어려움을 겪기 때문에 검색엔진 최적화 문제가있음

• SSR (Server Side Rendering)
  브라우저가 페이지를 요청할때마다해당 페이지에 관련된 HTML, CSS, JS 파일 및 데이터를 받아와서 렌더링 시킴

👍

• 초기 로딩 속도가 빠르기 때문에 사용자가 컨텐츠를 빠르게 볼 수 있음
• JS를 이용한 렌더링이 아니기 때문에 검색엔진 최적화가 가능함

👎

• 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 경험이 SPA에 비해서 좋지 않음
• 서버에 매번 요청을 하기 때문에 서버의 부하가 커짐

📌 브라우저의 렌더링 원리

렌더링 엔진이 HTML, CSS, JavaScript로 렌더링할때 CRP(Critical Rendering Path) 라는 프로세스를 사용하며 다음 단계들로 이루어짐

1. HTML 파싱 후, DOM(Document Object Model)트리 구축
2. CSS 파싱 후, CSSOM(CSS Object Model)트리 구축
3. Javascript 실행
4. DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축
5. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout/Reflow) 단계
6. 계산한 위치,크기를 기반으로 화면에 그림

📌 BOM vs DOM

• BOM (Browser Object Model)
  브라우저 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델
  브라우저의 새 창을 열거나 다른 문서로 이동하는 등의 기능을 실행시킬 수 있음

• DOM (Document Object Model)
  웹페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체모델, 문서의 구조를 나타냄
  ex : Element, Document, HTMLDocument, Text, HTMLBodyElement …

  렌더 트리는 시각적 구조를 나타낸다!! ‘display : none’일 경우 DOM에는 있지만 렌더트리에는 할당되지 않음!

📌 모듈(moudle)이란?

여러 기능들에 관한 코드가 모여있는 하나의 파일

• 유지보수성 : 기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있음
• 네임스페이스화 : 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아질수록 겹치는 네임스페이스가 많아질 수 있음. 그러나 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결됨
• 재사용성 : 똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있음

모듈 번들러

• 수많은 모듈들의 순서를 어떻게 처리할 것인가? (의존성 처리)
• 모듈이 많아질수록 HTTP 요청이 많아질텐데 이로 인한 오버헤드는 어떻게 해결할 것인가?
• ES6+ 스펙의 코드를 어떻게 처리할 것인가?
  위 문제들을 해결하기 위해 등장한 것이 모듈 번들러(Module Bundler). 각각의 모듈 의존성을 해결하여 하나의 자바스크립트 파일로 만드는 도구

트렌스파일러

트랜스파일링(Transpiling)이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 행위 를 말하며 이를 해주는 것이 트랜스파일러(Transpiler)임

📌 CI and CD

• CI (Continuous Integration, 지속적 통합)
  빌드와 테스트를 자동화해서 공유 저장소에 병합시키는 프로세스
  git과 같은 버전관리 시스템을 이용하면 여러명의 개발자가 하나의 공유 저장소를 사용하는 경우가 많아짐. 이렇게되면 새로운 코드의 변경 사항이 저장소에 통합되지 않을 경우 서로 충돌할 수 있음. 따라서 빌드/테스트 자동화부터 코드의 일관성을 제공하기 때문에 지속적으로 통합한다는 용어 사용

• CD (Continuous Delivery/Deploy, 지속적 전달/배포)

  • 지속적 전달 : 프로덕션 배포를 위한 상태가 되고 배포 자체는 수동으로 실행
  • 지속적 배포 : 프로덕션까지 자동으로 배포

📌 CSS 애니메이션 vs JS 애니메이션

• CSS 애니메이션
  transition / animation 속성 사용
  마우스를 올렸을 때, 메뉴 버튼의 전환과 같은 간단하게 처리하는 애니메이션의 경우 CSS 사용
  간단한 애니메이션을 JS로 구현하면 렌더링 과정에서 reflow 단계를 발생 시키기 때문에 애니메이션이 끊기는 느낌을 줄 수 있음
  • 반응형으로 애니메이션을 구현하기에 유용한데, 미디어 쿼리로 애니메이션을 적용하면 됨
  • 외부 라이브러리를 필요로 하지 않음
  • CSS 자체가 선언형(declarative)이기 때문에 어떤 요소가 애니메이션을 가져야 한다는 직관적인 표현이 가능
  • 메인 쓰레드가 아닌 별도의 컴포지터 쓰레드(Compositor Thread)에서 그려지기 때문에 메인 쓰레드에서 작업하는 JS보다 효율적
• JS 애니메이션
  CSS로 처리하기는 복잡하고 무거운 애니메이션 작업들을 효율적이고, 세밀하게 다루기 위해 사용
• 요소의 스타일이 변하는 순간마다 제어할 수 있기 때문에 애니메이션의 세밀한 구성이 가능해짐
• GPU를 통한 하드웨어 가속을 제어할 수 있음. 이는 CSS의 특정 속성으로 인한 가속을 막아주는데, 하드웨어 가속이 모바일에서 성능저하를 발생시킬 수 있기 때문에 이런 면에선 좋음
• 브라우저 호환성 측면에서 transition / animation 속성보다 뛰어남

📌 DOCTYPE

Document Type의 약자로, HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹브라우저가 내용을 올바로 표시할 수 있도록 해주는 것
<!DOCTYPE> 으로 선언하는데 이걸 해주지 않으면 호환 모드(quirks mode) 로 동작함. 호환 모드의 경우 각 브라우저마다 문서를 나타내는 방식이 다르기 때문에 크로스 브라우징 이슈가 훨씬 심해지게 됨

• DTD(Document Type Definition)
  DTD(Document Type Definition)란 문서 형식을 정의해놓은 것으로 DOCTYPE을 명시할 때 사용. 즉, HTML 문서가 어떤 문서 형식을 따르는지 DOCTYPE에서 DTD를 지정하는 것

• 표준모드 호환모드
  브라우저는 HTML 문서가 DOCTYPE을 가지고 있지 않으면 호환모드로 렌더링을 하고, 가지고 있다면 주어진 DOCTYPE에 맞게 표준모드로 렌더링함
  호환모드로 렌더링을 하게 되면 오래된 웹페이지들을 최신버전의 프라우저에서도 깨지지 않게 하기 때문에 각 브라우저마다 다르게 보일 수 있음

📌 local storage vs session storage vs cookie

	cookie	local storage	session storage
생성자	클라이언트/서버	클라이언트	클라이언트
지속시간	설정 여부에 따름	명시적으로 지울때까지	탭 / 윈도우 닫을 때까지
용량	5KB	5MB / 10MB	5MB
서버와의 통신	O	X	X
취약점	XSS / CSRF 공격	XSS 공격	XSS 공격

📌 script, script async, script defer

• <script> : HTML 파싱이 중단되고 즉시 스크립트가 로드되며 로드된 스크립트가 실행되고 파싱이 재개됨
• <script async> : HTML 파싱과 병렬적으로 로드가 되는데, 스크립트를 실행할 때는 파싱이 중단됨. 구글 애널리틱스와 같이 다른 스크립트가 의존하지 않는 독자적인 스크립트를 로드할 때 적합
• <script defer> : HTML 파싱과 병렬적으로 로드가 되는데, 파싱이 끝나고 스크립트를 로드함. 보통 <body> 태그 직전에

📌 시멘틱 마크업

➜ 의미를 잘 전달하도록 문서를 작성하는 것
시맨틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용해야함

• 헤더/푸터에 <header> 와 <footer> 사용
• 메인 컨텐츠에 <main> 과 <section> 사용
• 독립적인 컨텐츠에 <article> 사용
• 최상위 제목으로 <h1> 사용
• 순서가 없는 목록으로 <ul> 과 <li> 사용
• 내비게이션에 <nav> 사용

이런 식으로 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류임. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않음

예를 들어, 동일한 효과를 부여하는 <strong> 과 <b> 태그가 있다. 둘은 동일하게 글자색을 진하게 하지만 <b> 태그의 경우는 그 자체가 “bold” 의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다. 하지만 <strong> 의 경우는 “그 안의 내용이 다른 내용보다 더 강조되어야 한다” 라는 의미를 가지기 때문에 시맨틱 마크업에 더 적합하다.

👍

• 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리함
• 웹 접근성 측면에서, 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있음
• 단순한 div , span 으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 더 좋음