프론트엔드 면접 질문 공부

HTTP methods 중 GET, POST 방식의 차이점

• GET
  동기식
  보안 이슈가 있는것은 GET으로 사용하면 안된다. 브라우저에 히스토리가 남는다.
  불필요한 요청을 다시 하지않기위해 데이터를 캐시처리 할수있음
  데이터를 Body에 담지 않고, 쿼리스트링을 통해 전송
  길이 제한이 있다.
• POST
  비동기식
  등록하는 액션, 로그인하는 액션, 페이지가 이동없이 데이터를 가져와야 하는경우 (비동기통신)
  전송하는 데이터를 HTTP 메세지의 Body에 담아 전송함(길이 제한이 없음)
  요청 헤더의 Content-Type에 데이터타입을 표시해야함

이외에도 PUT, DELETE, PETCH, OPTION 등이 있다.

자바스크립트의 this 용법

함수를 어떻게 호출했는지에 따라 this에 바인딩할 객체가 정적으로 결정된다. 

1. new 바인딩
생성자 함수로서 호출순서 :
1. 빈 객체 생성 및 this 바인딩(생성자 함수 내에서 사용되는 this는 이 빈 객체를 가리킨다)
2. this를 통한 프로퍼티 생성
3. 생성된 객체 반환

2. 암시적 바인딩
객체의 메소드로서 this는 객체를 말함

3. 명시적 바인딩
call,apply, bind

4. 기본 바인딩
브라우저에서 전역에서의 this : 비엄격모드 - window / 엄격모드 - undefined
Node.js 에서의 this : Global객체

화살표 함수에서의 this

• 상위 문맥 유지
  렉시컬 스코프와 관계없이 선언될 당시의 상위스코프를 참조함.
  어휘적 this, 렉시컬 this

실행컨텍스트

코드가 실행되는 실행환경이라고 생각하면 된다.
전역컨텍스트와 실행컨텍스트가 있다.
자바스크립트의 call stack에 전역컨텍스트가 먼저 쌓인다.
컨텍스트 생성 시 컨텍스트 안에 변수객체, scope chain, this가 생성된다.
자바스크립트 엔진은 컨텍스트 안에 변수에 찾는 변수가 없으면 스코프체인을 따라 올라가며 찾는다.
함수실행이 종료되면 함수컨텍스트가 사라진다. (클로저는 제외)
페이지가 종료되면 전역 컨텍스트가 사라진다.

스코프, 클로저

블럭레벨스코프와 함수레벨스코프가 있다.
자바스크립트는 함수레벨스코프를 사용하고있다.
함수안에서 선언된 변수는 지역변수로서 외부에서 호출이 안된다.
함수가 종료되면 해당 함수컨텍스트가 사라지기 때문에 지역변수도 소멸된다.
해당 지역변수를 비공개변수로서 계속 이용하기 위해 클로저를 이용한다. 

렉시컬 스코프

함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프(정적 스코프)는 함수를 선언할 때 결정된다.
호출할때 선언되는것이 아님

이벤트루프

자바스크립트는 단일 스레드 언어이다.(동시에 하나의 작업만 처리가능)
자바스크립트는 이벤트 루프를 이용해서 동시성을 제공한다. (비동기로 여러작업 실행)
실제로 V8과 같은 자바스크립트 엔진은 단일 호출 스택(Call Stack)을 사용하고, 동시성 처리는 Node.js나 브라우저가 한다.

이벤트 루프는 call stack이 다 비워지면 callback queue에 존재하는 함수를 하나씩 call stack으로 옮기는 역할이다. 

브라우저의 작동원리

렌더링엔진 동작과정
1. HTML문서 파싱 후 DOM트리 구축
2. CSSOM 구축 (CSS파일을 스타일시트 객체로 파싱)
3. 랜더트리 (DOM + CSSOM) 생성
4. 랜더트리 배치 (레이아웃)
5. UI백엔드가 동작하여 렌더트리의 각화면을 px값으로 나타냄

자바스크립트는 렌더링 엔진에서 처리하지않음.
-> 자바스크립트 해석기에서 처리
1. HTML파서가 <script> 태그를 만나면 자바스크립트 엔진으로 권한 넘김
2. 자바스크립트 엔진이 js를 파싱하여 실행
3. 실행완료 후 다시 Html 파서로 제어권한을 넘겨서 다시 DOM생성 재개

객체지향프로그래밍이란?

객체를 만들어서 어디서든 쓸수있게 모듈화하는것.
관계성 있는 객체들의 집합 (재활용성을 높힌다.)

프로세스와 스레드

• 프로세스
  자신만의 고유 공간과 자원을 할당받아 사용
• 스레드
  다른 스레드와 공간과 자원을 공유하면서 사용

프로미스와 콜백의 차이

• 프로미스
  자바스크립트 비동기 처리에 사용되는 객체
  return value를 이용할수 있음
  error handling이 동기식 코드와 유사하게 쓰일 수 있음
  비동기에서 온 값이 프로미스 객체에 저장되기 때문에 코드 작성이 용이함
  이행을 할때 resolve() 를 실행하여 이행상태가 되고 .then()으로 처리결과값을 받을 수 있음
  실패는 reject()로 실행하여 실패상태가 됨
  프로미스의 3가지 상태
  Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
  Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
  Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
• 콜백함수
  비동기 로직의 결과값을 처리하기 위해 callback 안에서만 처리해야 하고, 콜백 밖에서는 비동기에서 온 결과값을 알 수가 없다.

CSR과 SSR의 차이

• CSR
  Client Side Rendering의 약자
  랜더링이 클라이언트 쪽에서 일어난다.
  서버는 요청을 받으면 클라이언트에 Html 과 JS를 보내주고, 클라이언트는 랜더링을 시작한다.
  Html,css, 스크립트를 한번에 불러와서 첫 페이지 로딩시간이 비교적 느리다.
  하지만 나머지 페이지 로딩시간이 빠르다.
• SSR
  Server Side Rendering의 약자
  서버에서 랜더링 준비를 끝낸 상태로 클라이언트에 전달하는 방식이다.
  필요한 부분의 Html과 스크립트만 불러와서 첫 페이지 로딩시간이 빠르다.
  나머지 페이지를 로딩할때 첫페이지와 동일하게 필요한 부분만 받아오기 때문에 CSR방식보다 느리다.
  SSR은 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이하다. (SEO 대응)

로컬스토리지, 세션스토리지, 쿠키의 차이점

• 로컬스토리지
  데이터를 삭제하지 않는 한 무기한 저장
• 세션스토리지
  세션이 끊기면(브라우저가 닫히면) 삭제됨
• 쿠키
  만료기한이 있는 키값 저장소

MVC 패턴

MVC 패턴은 모델+뷰+컨트롤러를 합친 용어이다.
모델 : 데이터 및 데이터를 처리하는 부분
뷰 : 사용자에게 보여지는 UI 부분
컨트롤러 : 사용자의 입력을 받고 처리하는 부분

CORS란?

CORS는 도메인 혹은 포트가 다른 서버의 자원을 요청할때 생김.
(브라우저에서 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 공격을 막는 보안목적으로 차단)
해당 문제를 해결하려면 response헤더에 "Access-Control-Allow-Origin"를 추가하던가, 서버 쪽에서 처리를 해주면 된다.

고차컴포넌트 (HOC)란?

고차 컴포넌트는 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수이다. 

NPM 이란?

Node Packaged Manager의 약자
NPM은 Node.js 로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램임.
Node.js에서 사용할 수 있는 모듈들을 패키지화에서 모아둔 저장소 역할
설치, 관리를 수행할 수 있는 CLI를 제공

event.target 과 event.currentTarget의 차이점

• event.target
  부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환
• event.currentTarget
  이벤트가 부착된 부모의 위치를 반환