프론트엔드 면접 준비 1주차

HTML

• cookie, sessionStorage, localStorage 의 차이점은 무엇인가요?

HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다.

그리고 영구저장소(LocalStorage:브라우저가 종료되지 않는한 데이터 영구 저장한다.)

임시저장소(SessionStorage:브라우저 종료시 데이터 사라짐)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다.

 

Web Storage와 cookie 차이점

 

쿠키는 매번 서버로 전송된다.

 

웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다. 이는 네트워크 트래픽 비용을 줄여 준다.

 

단순 문자열을 넘어(스크립트) 객체정보를 저장할 수 있다(개발 편의성을 제공)

 

쿠키는 개수와 용량에 있어 제한이 있지만 Web Storage는 용량에 제한이 없다.

 

영구 데이터 저장이 가능하다(쿠키는 만료일이 있다)

 

 

• <script>, <script async>, <script defer> 의 차이점에 대해 설명해주세요.

async는 문서를 읽다가 script를 만나면 script을 다운>파싱>실행 될때 까지 문서 읽던걸 멈추고 끝나면 다시 문서를 읽는다.

 

async와 defer은 기본과 다르게 문서를 읽다가 스크립트를 만나도 문서 읽던걸 멈추지 않고 문서파싱과 스크립트 다운을 동시에 한다.

 

async는 스크립트 다운이 되는 즉시 스크립트를 실행한다.

 

defer은 문서(HTML)을 완전히 다 읽은 후에 실행한다.

 

 

• CSR과 SSR이 뭔지 설명해주세요.
  • CSR과 SSR의 장점과 단점에 대해서 각각 설명해주세요.

SSR: Server Side Rendering 약자로 처음 클라이언트가 접속했을때 브라우저에서 자바스크립트 코드를 다운로드 받아 해석 할 때까지 기다리지 않고 서버에서 보여질 HTML을 미리 준비해 클라이언트한테 응답해주는 방식을 서버 사이드 랜더링이라고 한다.

 

CSR: Client Side Rendering 약자로 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한후 클라이언트가 해석하고 렌더링을 하는 방식입니다.

 

CSR은 페이지를 읽어들이는 시간, 자바스크립트를 읽어들이는 시간, 자바스크립트가 화면을 그리는 시간까지 모두 마쳐야 콘텐츠가 사용자에게 보여진다. SSR 보다 초기 구동속도가 느리다.

 

SSR은 매번 페이지를 요청할 때마다 새로고침 되기 때문에 사용자 UX가 다소 떨어진다.

서버에 매번 요청을 하기 때문에 트래픽, 서버 부하가 커진다.

 

SSR은 초기랜더시 HTML에 대한 정보가 포함되어 있어 SEO에 유리하다.

CSS

• display 속성이란? 

display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정합니다.

• inline 과 inline-block 의 차이점은 무엇인가요?

공통점 : display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다.

차이점: inline은 width/height 적용 불가, margin/padding-top/bottom 적용 불가

• Flex와 Grid 가 언제,어떻게 쓰이는지 설명해주세요

flex: 1차원으로 수평, 수직 영역중 하나의 방향으로만 레이아웃을 나눌수 있다.

grid: 2차원으로 수평, 수직 영역을 동시에 레이아웃을 나눌수 있다.

 

• { box-sizing: border-box; }를 적용시 어떤 효과가 나타날까요?

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다.

border-box는 테두리를 기준으로 측정한다 element 뿐만이 아닌 padding+border 까지

 

• px em/rem 을 어떤 상황에 따라 구분해서 쓰는지 설명해주세요

px 값은 브라우저에선 절댓값으로 인식해서, 말 그대로 1px은 항상 정확히 1px로 표시됩니다.

em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것을 말합니다.

rem은 root em의 약자입니다. 즉 위와 같은 공식을 가장 최상단(root) 기준으로 맞추겠다는 소리인데요. 최상위 태그 html에 정의된 사이즈를 기준으로 배수하겠다는 것을 의미합니다.

JavaScript

• 화살표 함수와 일반함수의 차이점에 대해서 아시는대로 설명해주세요

일반 함수로서 호출한 this는 전역객체다. 화살표 함수는 별도의 binding을 하지 않고 한 단계 위 콘텍스트의 this를 사용한다.

화살표 함수는 익명 함수이다.

 

• 호이스팅(Hoisting)에 대해서 설명해주세요

호이스팅(Hoisting)은 모든 선언(var, let, const, function 등)을 가장 위로 끌어올린다.

변수의 범위가 전역 범위인지 함수 범위인지에 따라서 다르게 동작될 수 있다.

전역 범위: 스크립트 단위에서 최상단으로 끌어 올려진다.

함수 범위: 함수내 최상단으로 끌어 올려진다.

최상단으로 끌어 올려지는 건 변수의 선언과 할당 내용 모두를 끌어 올리는 것이 아닌
선언만 끌어 올려지게 된다.

 

• This
  • 자바스크립트의 This에 대해 설명해주세요
  • Call, Apply, Bind 함수에 대해 설명해주세요

this는 작성 시점이 아닌 런타임 시점에 바인딩 되며 함수 호출 당시 상황에 따라 콘텍스트가 결정된다.

어떤 함수를 호출하면 실행 콘텍스트가 만들어진다. 여기엔 함수가 호출된 콜스택과 호출방법, 전달된 인자등의 정보가 담겨져 있는데 this 는 그중 하나로, 함수가 실행되는 동안 이용할 수 있다.

 

예기치 않게 this가 바뀌게 되는걸 막아주기 위해 this를 고정하는 방법이 있는데 그걸 명시적 바인딩이라 한다.

this에 바인딩 할 객체를 첫째 인자로 받아 함수 호출 시 이 객체를 this로 세팅한다.

call( ): 두 번째 이후 인자들은 호출된 함수에 차례로 전달된다. foo.call(obj, '인자1', '인자2' ...)

apply( ): 두 번째 이후 인자들이 배열 형태로 전달된다. foo.apply(obj, ['인자1', '인자2', ...])

 

bind( )는 어떤 종류든 자체 this 바인딩을 무시하고 주어진 바인딩을 적용하여 하드코딩된 새 래퍼 함수를 생성한다.

 

• 함수형 프로그래밍(Function Programming)
  • 함수형 프로그래밍에 대해 설명해주세요.
  • 함수형 프로그래밍에 개념에서 순수함수란 무엇일까요?
  • OOP와 함수형 프로그래밍의 가장 큰 차이점은 무엇일까요?

Function - 함수를 이용해서
No Side-Effect - 사이드 이펙트 없도록
Declarative Programming - 선언형 프로그래밍을 이용하는 것이다

 

순수 함수 = 부수효과가 없는 함수 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수(No side-Effect) 외부의 영향 받지않음.

 

객체지향 프로그래밍과 함수형의 차이는 데이터(상태)를 다루는 개념과, ‘간결한 코드 작성’에 대한 관점 차이가 있다.

• 객체지향 프로그래밍의 경우, 클래스 디자인과 객체들의 관계를 중심으로 코드 작성이 이루어진다. 따러서 상태, 멤버변수, 메서드 등이 긴밀한 관계를 가지고 있다. 특히 멤버변수가 어떤 상태를 가지고있는가에 따라 결과가 달라진다.
• 함수형 프로그래밍의 경우, 값의 연산 및 결과 도출 중심으로 코드작성이 이루어진다. 함수 내부에서 인자로 받은 값을 별도로 저장하거나 하지 않고, 간결한 과정으로 처리하고 매핑하는데에 주 목적을 둔다.