FE 직무 면접 대비 공부

개발자 Woogie·2021년 4월 28일
0

면접

목록 보기
1/2
post-thumbnail

FE 개발 직무 면접 대비 나만의 요약


JS

  • 가벼운 인터프리터 언어
  • 프로토타입 기반 객체 생성을 지원하는 동적 스크립트 언어
  1. 싱글스레드 기반으로 동작한다.
  2. 이벤트루프를 기반으로 하는 싱글 스레드다.

프로토타입이란?

  • JS는 기존 객체를 복사하여 새로운 객체를 생성한다.
  • 고로 프로토타입 객체는 함수를 정의하면 다른 곳에 생성되는 것! 즉, 자신이 다른 객체의 원형이 되는 객체
var p1 = new Object()
var p2 = Object.create(p1) // -> p1 기반으로 p2가 생성

이벤트 루프

  • 요약: 반복해서 call stack과 queue 사이의 작업들을 확인하고 call stack이 비어있는 경우 queue에서 꺼내 call stack에 넣는다.
  • JS는 단 하나의 call stack을 사용한다.
  • 하지만 비동기로 호출되는 함수들은 call stack에 쌓이지 않고 queue에 enqueue된다. (+ Web API 함수들)
  • 핸들러(익명함수)는 event queue 영역에 들어간다. => call stack이 비면 event queue에서 하나 빼서 갖고와서 call stack에 넣어준다.
  • Promise는 microtask queue에 들어간다.
  • microtask Q > task Q
  • Task(비동기 작업이 순차적으로 일어나도록 보장), Microtask(비동기 작업이 현재 실행되는 스크립트 바로 다음에 일어나는 작업 ex. then)

npm, webpack, Babel, ES6...

  • npm(Node Package Manager): 유용한 JS 패키지들을 만들어 둬서 관리.
  • yarn: Facebook에서 만든건데 npm보다 서버가 좀 더 빠르다.
  • webpack: 많은 양의 JS파일을 하나로 묶어줌으로써 자원 관리를 쉽게한다.
    => 하나의 bundle.js로 묶어서 웹 브라우저에 올림으로써 웹 브라우저가 가지게 될 수고를 덜어준다.
  • Babel: 자바스크립트로 컴파일?해주는 transpiler. 난 Typescript를 Javascript로 컴파일 하는데 사용했다. (+ polyfill: 지원하지 않는 브라우저를 위해 처음 시작 시 지원하지 않는 기능을 추가한다. 런타임 단에서)
  • ES6
    • class 문법 제공
    • let & const => 블록 범위
    • 화살표함수(자신만의 this를 생성하지 않는 녀석)
    • Modules: Export, Import를 이용해서 변수를 다른 곳에서 사용 가능
    • Promise: call back 함수보다 가독성이 좋게 단점을 완화. (이것도 남용하면 구리다)

SCSS

  • Sass는 CSS의 전처리기, 즉 해석되어 CSS로 컴파일 되는 스크립트 언어
  • SCSS는 Sass의 3버전에서 등장한 언어, CSS와 완전히 호환되도록 했다. (+ CSS와 다르게 계층 구조를 가지고 있다.)

서버사이드 렌더링(SSR) VS 클라이언트 사이드 렌더링(CSR)

  • SSR: view를 서버에서 렌더링해서 가져온다. 그래서 초기 렌더링이 빠르다.
  • CSR: HTML을 받고 나머지 리소스도 받아서 브라우저가 렌더링한다. 그래서 초기 렌더링이 느리다. =>(SEO를 하려면 아주 복잡해진다. 왜냐하면 HTML에 내용이 없기 때문!)
  • SSR은 view 변경 시 서버에 계속 요청하기 때문에 서버의 부담이 높아진다.

CDN

  • 서버와 사용자 사이의 물리적 거리르 ㄹ줄여서 웹 페이지 콘텐츠 로드 지연을 최소화하는 촘촘히 분산된 서버로 이루어진 플랫폼
  • ex) AWS CloudFront

REST API

  • CRUD가 가능하게 HTTP 메서드로 서버-클라이언트 간 데이터를 주고받는 방법
  • 특징: stateless, cacheable, client-server 구조, 계층형 구조 등
  • 상태 코드
    • 200: 클라이언트 요청을 정상적으로 수행
    • 201: 클라이언트의 POST 요청을 정상적으로 수행(리소스를 성공적으로 생성)
    • 301: 클라이언트가 요청한 리소스에 대한 URI가 변경 되었을 때
    • 400: 클라이언트가 부적절한 요청을 보냈을 때
    • 401: 클라이언트가 인증되지 않은 상태에서 보호된 데이터를 요청할 때 (ex 로그인 하지 않았는데 개인정보를 열람하려 한다.)
    • 403: 응답하고 싶지 않은 리소스를 클라이언트가 요청할 때(웬만해선 400, 404 상태코드를 던져야한다. 왜냐하면 403 상태코드는 리소스가 있다고 힌트를 주는 것이기 때문!)
    • 404: 클라이언트가 요청한 바를 찾을 수 없다.
    • 405: 클라이언트가 요청한 리소스에서 사용 불가능한 Method 이용 시
    • 500: 서버에 문제가 있다.

URI VS URL


브라우저 동작원리

  1. HTML을 보고 DOM 트리를 빌드(무엇을 그릴지 결정)
  2. CSS를 보고 CSSOM 트리를 빌드(어떻게 그릴지 결정)
  3. DOM + CSSOM 해서 렌더링 트리 형성(화면에 그려질 것 결정)
  4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산
  5. 개별 노드를 화면에 그린다.

Hoisting

  • var로 선언된 모든 변수는 호이스트된다.
  • 함수 내에서 정의되었을 경우 함수 최상위에서 선언된것처럼, 함수 바깥인 경우 전역 컨텍스트 최상위로 옮김.

Closure

  • 외부 함수 호출이 종료되더라도 외부 함수의 지역변수 및 변수 스코프 객체의 체인 관계를 유지할 수 있는 구조.

this

  • this = 실행중인 코드가 속해있는 객체
  • 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다.
  • call back 함수 내부의 this는 전역 객체인 window를 가리킨다.
  • 화살표 함수의 this는 언제나 상위 scope(window?)의 this를 가리킨다.
  1. 화살표 함수로 메소드 정의하지 마라.
  2. 화살표 함수로 prototype 할당하지 마라.
  3. 화살표 함수로 생성자 함수 사용할 수 없다.(prototype 프로퍼리를 가지지 않기 때문!)

HTTP / HTTPS

  • Hyper Text Transfer Protocol / Secure
  • stateless 프로토콜이다.
  • HTTP는 80번 포트 / HTTPS는 433번 포트
  • HTTPS는 공개키/개인키 암호화(SSL 같은 프로토콜) 방식으로 보안.

DOM(Document Object Model)

  • 웹 페이지에 대한 프로그래밍 인터페이스
  • HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사요오딜 수 있도록 하는 화면에 나타내어지는 인터페이스
  • HTML은 화면에 보이고자 하는 모양과 구조를 문서로 만든 단순 텍스트

GET / POST

  • GET: 쿼리스트링에 데이터 담아서 전송, 매번 같은 응답
  • POST: 바디에 데이터 담아서 전송, 응답이 다를 수도 있다.

React

  • 단방향 데이터 흐름으로 데이터 변경에 관한 DOM 객체만 변경해주는 체계
  • 즉 데이터가 변경되면 모델 변경->뷰 변경 이 아니라 DOM 객체를 갱신
  1. 선언형: 컴포넌트를 얻기 위해 jsx 문법을 통해 구현하는데, jsx를 얻기 위한 알고리즘을 구현하지 않는다. 그래서 높은 생산성을 보장한다.
  2. 컴포넌트 및 재사용성: 난 아토믹 디자인으로 컴포넌트의 재사용성을 높였다.
  3. Virtual DOM(가상돔): 메모리단에서 컴포넌트에 대한 정보를 생성하고 비교하여 전체 DOM트리가 업데이트가 필요한 경우 이를 반영
  • React.createElement를 통해 엘리먼트에 대한 정보를 가지는 Object를 생성하고 이를 In-Memory에 저장한 다음 ReactDOM.render 함수를 통해 Web API(document.createElement)를 이용해서 실제 웹 브라우저에 그려주는 방식으로 동작.
  • 컴포넌트는 props와 state를 가지는 object
  • React Element를 root라는 id를 가지는 div DOM Element의 아래에 subTree 형태로 넣어준다.
  • 함수형 VS 클래스형
    • 함수형은 render될 때 props 값들을 유지한다.
    • 클래스형은 render될 때 props 값들을 유지하지 않는다.
  • 함수형에서 render 될 값을 미리 가져와서 쓰고 싶으면 ref를 사용하면 된다.

CORS

  • 추가적인 HTTP header를 사용해서 애플리케이션이 다른 origin의 리소스에 접근할 수 있도록 하는 메커니즘을 말한다. 하지만 다른 origin에서 내 리소스에 함부로 접근하지 못하게 하기 위해 사용된다.
  • origin이란 특정 페이지에 접근할 때 사용되는 URL의 Scheme(프로토콜), host(도메인), 포트를 말한다.(이 3가지 중 하나라도 다르면 cross-origin이다.)
    1. 내 origin은 무엇이고 어떤 메소드를 사용해서 요청을 할 것이고 어떤 헤더들을 포함할 것인지를 담아서 서버에 전송한다.
    2. 서버는 서버가 응답할 수 있는 origin들을 헤더에 담아서 브라우저에게 보낸다.
    3. 브라우저가 이 헤더를 보고 해당 origin에서 요청할 수 있다면 리소스 전송을 허용하고 만약 불가능하다면 에러를 발생시킨다.

Back-end의 express

  • Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크
  • Node.js와 이걸로 백엔드 서버를 개발했다.

GraphQL, Apollo Client

  • GraphQL은 SQL처럼 데이터의 집합에서 특정 데이터를 불러오는 데이터 질의 언어(data query language)다.
  • Apollo Client는 GraphQL 기반의 라이브러리로, 클라이언트 애플리케이션의 GraphQL과 데이터 교환을 돕는다.
profile
세상에 이로운 개발자가 되고 싶어여

0개의 댓글