프론트엔드 예상 질문 1

기술면접 준비

---

1. REST ful API

REST ful API 는 HTTP 프로토콜 기반의 웹서비스 아키텍처 이다.

REST API 를 제공하는 웹서비스고, HTTP 메소드(CRUD) 를 제공해 준다.

클라이언드 - 서버 간의 통신을 가능 하게 하며, 일관적인 컨벤션을 통해 호환성을 높이기 위해 사용한다.

1. HTTP 메서드

GET : 서버에서 데이터를 요청하는 메소드이다.

POST : 서버에 데이터를 전송하는 메소드이다.

PUT : 서버에 데이터를 업데이트 하는 메소드 이다.

DELETE : 서버에 있는 데이터를 삭제하는 메소드 이다.

1. async / await

비동기를 처리 할 수 있는 문법이다.

async는 함수를 정의 할때 사용 하며, async로 정의 한 함수 내부에 await 키워드를 이용해 작업을 제어한다.

await 가 붙어 있는 작업은 해당 작업이 처리 될때 까지, 스코프 안에 그 밑의 내용들은 실행 되지 않는다.

async 함수는 Promise 객체를 반환하고, await 키워드를 이용해 비동기의 처리 결과를 기다린다.

1. 브라우저 렌더링의 원리

HTML , CSS, JavaScript 등의 웹 페이지 자원을 브라우저가 화면에 그리는 과정을 말한다.

브라우저 렌더링의 순서

• 브라우저에서 HTML 문서를 파싱에 DOM 트리를 생성.
• CSSOM 트리를 생성 CSS 속성을 노드로 변환 하고 노드간 계층 관계를 형성.
• DOM 트리와 CSSOM 을 결합하여 렌더 트리를 생성.

이때 각 요소의 크기와 위치를 계산하고,화면에 요소를 그리는 페인팅 과정을 거치게 된다.

1. == (동등연산자) 와 === (일치연산자) 의 차이

동등 연산자는 두 값을 비교할 때, 자동으로 형변환을 해 값 만을 비교 한다.

일치 연산자는 타입까지 같이 비교를 한다.

1. 클로저란 무엇일까요?

함수가 선언 될 때의 환경을 기억해서, 함수가 나중에 호출되더라도 그 환경에 접근 할 수 있도록 해주는 것을 클로저라 한다.

변수가 함수가 선언된 스코프를 벗어나더라도 사라지지 않고 유지 될 수 있다.

function outerFunction() {
    let outerVariable = 'I am outside!';

    function innerFunction() {
        console.log(outerVariable); // 'outerVariable'을 기억하고 사용함
    }

    return innerFunction;
}

const closure = outerFunction();
closure(); // 'I am outside!' 출력

1. 이벤트 버블링 / 캡쳐링

• 이벤트 버블링이란 HTML 에서 이벤트가 발생했을 때, 해당 요소에서 이벤트가 처리된 후, 상위 요소로 이벤트가 전파되는 현상을 말한다. 이벤트가 전파되는 동안 부모 요소에서도 이벤트를 감지 할 수 있다.
• 이벤트 캡쳐링 이란 이벤트가 하위 요소로 계속 전파되는 것을 말한다.

1. Flex 와 Grid 의 차이

Flex 는 일자 형태의 단일 방향의 레이아웃을 구성 하는데 주로 사용 한다.

Grid 는 2차원 형태의 구조에 레이아웃을 구성하는데 주로 사용 한다.

1. 비동기 함수란

함수의 실행 결과가 즉시 반환 되지 않고, 특정 조건이 충족될 때 까지 혹은 작업이 완료 될때까지 병렬로 작업을 하며 완료 되었을 경우 결과를 호출 해준다.

비동기는 콜백 함수는 Promises 객체로 반환 한다.

1. Payload 와 Header 의 차이

Payload 는 전송할 실제 데이터이고, Header는 Payload 의 정보를 담고 있는 보충 데이터 입니다.

Header는 데이터 블록의 맨 앞에 위치하고, 부가적인 정보를 담고 있다.

1. JWT 와 Session 의 차이

Session은 서버의 메모리를 사용하여 데이터를 저장하고, 로컬에는 쿠키에 저장하여 이를 서버로 보내는 데이터를 받아오는 방식으로, 매번 유저가 요청할 때마다 전체 데이터를 보내주어 서버에 과부하가 생길 위험이 크다.

JWT 방식은 필요한 정보를 암호화된 토큰으로 만들어 클라이언트로 보내게 된다. 반대로 서버는 클라이언트로 받은 JWT 토큰을 검증한다.

1. HTTP 와 HTTPS의 차이

클라이언트와 서버 통신 프로토콜

HTTPS는 ssl이 결합 된 통신 방식으로 보안적인 약점을 보완하고자 나왔다.

인증 및 개인정보 보호 데이터 무결성이 가능해짐

1. localStorate, sessionStorage, cookie 차이

• 로컬 스토리지

반 영구적으로 스토리지에 저장함 브라우저가 종료해도 데이터가 남아있다.

필요한 데이터들을 클라이언트에 저장한다.

• 세션 스토리지

탭이나 윈도우를 닫으면 소실 된다. 스토리지의 기능은 로컬과 동일

• 쿠키

서버가 클라이언트에 전송하는 작은 데이터 파일.

만료기간을 가져 일정 시간이 지나면만료되어 데이터를 삭제 한다.

1. CSR 과 SSR의 차이점

SSR은 사용자가 웹페이지에 접근할 때, 서버에서 각 페이지에 대해 요청하고 서버에서 HTML , JS 등을 모두 다운로드 하여 화면에 렌더링 하는 방식이다.

CSR 이란 클라이언트 측에서 HTML을 반환한 후 JS가 동작하면서, 렌더링은 클라이언트에서 이루어 지는 방식이다.

1. DOM과 가상 DOM 이란?

Document Object Model 의 약자로, HTML, XML 문서의 프로그래밍 인터페이스를 의미한다.

HTML은 브라우저에서 실행될 수 있게끔 DOM Tree로 파싱되고, 이를 바탕으로 렌더링 된다.

가상DOM은 추상화된 DOM을 뜻한다. DOM형태를 객체로 만들어 저장하고 그것을 바탕으로 렌더링한다. 변경점이 있을 시 돔 메모리상에 새로운 버전을 생성해 기존 것과 비교해 변경 된 부분만 렌더링하는 방식을 사용한다.