8/16 면접 스터디 내용 정리

오늘도 삽질중·2022년 8월 15일
0

면접내용정리-프론트엔드

목록 보기
1/1

프론트 엔드 전반

✅ CSR, SSR

참고
https://www.youtube.com/watch?v=YuqB8D6eCKE&t=541s

✅ 브라우저 렌더링 과정

  1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. (브라우저 핵심 기능이라 언급하면 좋을것 같다.)
  2. 서버로부터 응답된 HTML을 파싱하여 DOM을 생성다가, 스타일 태그를 만나면 CSS를 파싱하여 CSSOM을 생성한다. 스크립트 태그를 만나면 자바스크립트 엔진에 권한을 넘겨 (javascript) 코드를 파싱해 AST를 생성후 실행한다.
  3. DOM과 CSSOM을 결합하여 렌더트리를 생성한다.
  4. (브라우저 엔진은) 렌더 트리를 기반으로 HTML의 요소의 위치와 크기를 계산해 표시하는 레이아웃 단계를 거쳐 화면에 페인팅한다.

추상구문트리: 소스코드를 컴퓨터가 이해할 수 있는 구조로 변경시키는 트리

> 참고 (파싱과정)
html파싱하다가 css style태그를 만나면 css파싱해 cssom트리를 만든다. 그리고는 아까 하던 html에 돌아가 파싱을 계속해서 진행한다. 그러다가 script 태그를 만나면 다시 중지하고 자바스크립트 엔진에 권한을 넘겨 자바스크립트를 파싱해 AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행한다. 그리고는 다시 html에 돌아가 계속해서 파싱을 진행한다. 

> 참고
자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더트리로 결합된다.

참고 자료
https://www.youtube.com/watch?v=FQHNg9gCWpg

HTML

✅ DOCTYPE

  • HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹 브라우저가 올바르게 내용을 표시할 수 있도록 해주는 것이다.

✅ 표준모드와 호환모드 (? 이거 잘 모르겠다)

  • 과거의 웹 페이지는 웹 표준이 없었다. 그러나 W3C 가 웹 표준을 만들면서 브라우저가 웹 사이트를 제대로 표현할 수 없게 되자 렌더링을 할 때 표준모드(Standard mode)와 호환모드(Quirks mode)로 렌더링할 수 있게 옵션을 제공하였다.
    브라우저는 HTML 문서가 DOCTYPE을 가지고 있지 않으면 호환 모드,
    가지고 있다면 주어진 DOCTYPE에 맞게 표준 모드로 렌더링 한다.

    CSS

    ✅ 박스 모델(Box Model)

    생략

    ✅ box-sizing

    box-sizing 속성을 사용하면, width 와 height 이 컨텐츠 영역 기준인지, 테두리 영역 기준인지 정할 수 있다.

box-sizing: content-box : 기본값이며 컨텐츠 영역 기준이다. 즉, 안쪽여백 영역부터 포함하지 않는다.
box-sizing: border-box : 테두리 영역 기준이며 바깥여백 영역부터 포함하지 않는다.

✅ float

t을 해제하는 방법들
float란


float: 블록요소를 강제로 좌우배치할때 쓰인다.
묶음 태그(block element)만 적용할 수 있다.
float를 사용하면 브라우저가 높이를 인지하지 못하기 때문에 clear하는 과정이 필요하다.

    묶음태그: <div></div><ol><p><ul><table><img>


위에있는 float를 right, left상관없이 모두 무시하겠다 clear: both

  • flot의 속성
none (기본값) : 정렬하지 않는다.
left : 왼쪽으로 정렬한다.
right: 오른쪽으로 정렬한다.

예제

<ul>
    <li>float Item 1</li>
    <li>float Item 2</li>
    <li>float Item 3</li>
</ul>
ul{
  padding:15px 20px;
  height:45px;
  background:#e5e5e5;
}
ul > li{
  float:left;
  margin:5px;
  padding:5px 10px;
  background:pink;
  list-style:none;
}

  1. 부모 엘리먼트에 float 값을 준다.

  • 자식엘리먼트에만 float가 있으면 부모는 자식의 크기를 인지하지 못한다.

  • 자식을 포함할 만큼만 너비로 줄어듦

  • 부모가 겹겹이 있을 경우 계속해서 float 시켜야 함

  1. 부모에 overflow 속성 적용한다.

  • overflow:auto;

  • overflow: hidden;
    위의 사진에서 스크롤 없어짐

  1. 부모에 display: inline-block를 적용

  • 약간의 여백이 생김

  • 자식의 너비를 포함할 만큼으로 줄어듦

  1. 가상요소로 clear속성 사용

참고

Javascript

✅ AJAX

  • 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술을 의미한다.
    ajax를 요청할 수 있는 방법은
    1. xmlhttpRequest(옛방법)
    2. fetch
    3. 외부라이브러리 방식(axios)

장점

  • 페이지를 전환하지 않고 빠르게 화면 일부분 업데이트를 할 수 있다.
  • 서버처리를 기다리지 않고 비동기 요청이 가능하다.
  • 수신하는 데이터 양을 줄일 수 있고 클라이언트에게 처리를 맡길 수 있다.
    단점
  • 지원하지 않는 브라우저가 있다.
  • 페이지 전환없이 서버와 통신을 하기 때문에 보안상에 문제가 있을 수 있다.
  • 무분별하게 사용하면 역으로 서버의 부하가 늘어날 수 있다.
  • 동일 출처 정책 문제가 발생할 수 있다.

✅ 이벤트 위임

이벤트 위임 이란 하위 엘리먼트들이 여러개 있을 때, 하위 엘리먼트들에 각각 이벤트 핸들러를 달지 않고 상위 엘리먼트에 이벤트 핸들러를 달아 하위 엘리먼트들을 제어하는 방식이다. 이 패턴으로 얻는 이점들은 다음과 같다.

  • 동적으로 엘리먼트를 추가할 때마다 핸들러를 고려할 필요가 없다.
  • 상위 엘리먼트에 하나의 이벤트 핸들러만 추가하면 되기 때문에 코드가 훨씬 깔끔해진다.
  • 메모리에 있게되는 이벤트 핸들러가 적어지기 때문에 퍼포먼스 측면에서 이점이 있다.

네트워크

✅ TCP와 UDP

TCP(연결지향적): 신뢰성이 있는 데이터 통신을 가능하게 해주는 프로토콜이다.
연결지향으로 2개의 호스트가 통신을 하기 전 연결이 이루어져야한다.(3 way-handshake)
높은 신뢰성을 가지고 데이터의 순서를 보장하지 않는다. 속도가 UDP보다 느리다.

UDP(비연결형): TCP보다 신뢰성이 떨어지지만 속도가 빠른 프로토콜이다.
비연결성으로 연결을 설정하고 해제하는 과정이 없다.
데이터의 순서를 보장하지 않는다.
데이터의 신뢰성을 보장하지 않는 프로토콜이므로 민감하지 않는 데이터를 전송할때 사용된다. TCP에 비해서는 처리할 작업들이 굉장히 적기 때문에 속도가 빠르다. 비디오/오디오 스트리밍 등에 사용된다.

참고자료
https://www.youtube.com/watch?v=ikDVGYp5dhg&t=577s

✅ http

  • 클라이언트-서버 모델을 따르는 프로토콜로 TCP/IP위에 동작하고 80번 포트를 사용하여 통신한다.
  1. http의 특징으로는 클라이언트와 서버가 한 번 연결을 맺은 후, 끊어버리는 비- 연결성이 있고,
  2. 비 연결적인 특징으로 인해, 서버는 클라이언트의 상태를 유지하지 못하는 무 상태성인 특징이 있다.
  • (비연결성 장점)
    왜 http 프로토콜은 한 번 맺은 연결을 끊어 버리는 걸까?
    http는 인터넷 상에서 불특정 다수의 통신 환경을 기반으로 설계되어있다. 만약 서버에서 다수의 클라이언트와 연결을 계속 유지해야 한다면, 이에 따른 리소스가 발생하게 된다. 따라서 연결을 유지하기 위한 리소스를 줄이면 더 많은 연결을 할 수 있기 때문에 비연결적인 특징을 갖는다.

(비연결성 단점)
서버는 클라이언트를 기억하고 있지 않으므로 동일한 클라이언트의 모든 요청에 대해, 매번 새로운 연결을 시도/해제의 과정을 거쳐야하므로 연결/해제에 대한 오버헤드가 발생 하는 단점이 있다. (해결책 → keep-alive속성)

profile
오늘도 삽질중
의미없는 삽질은 없다1

0개의 댓글