면접,CS/면접(정리)

[면접] 프론트엔드 기술면접

Cafe Mocha 2023. 2. 16. 18:49

프론트엔드 기술면접을 위해 여러 자료를 공부하고 정리하면서 업데이트 중입니다.

 

중요도 ★★★★★

브라우저 렌더링 과정

  1. HTML 파싱 후, DOM(Document Object Model) 트리 구축
  2. CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축
  3. Javascript 실행
    • 주의! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다.
  4. DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축
    • 주의! display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다.
  5. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout/Reflow 단계)
  6. 계산한 위치/크기를 기반으로 화면에 그림 (Paint 단계)
  • 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진 을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path) 라는 프로세스를 사용하며 다음 단계들로 이루어진다.

www.naver.com을 입력했을때 과정

  • 대기열, 캐싱, DNS, 라우팅, ARP, 초기연결을 거쳐 컨텐츠를 다운받게 되고 이 후 브라우저렌더링 과정을 거쳐 네이버 화면이 나타나게 됩니다. 또한, 이러한 과정이 캡슐화, 비캡슐화 과정을 거쳐서 이뤄지게 됩니다. 
    1. 웹 브라우저에 URL을 입력
    2. 대기열, 캐싱
      • 브라우저 캐시, 공유 프록시 캐시
    3. DNS 조회
    4. 라우팅
    5. ARP
    6. 초기연결
    7. 콘텐츠 다운로드
    8. 브라우저 렌더링
    https://mocha-blog.tistory.com/205

호이스팅(hoisting)이란?

  • 모범답안 : 실행 컨텍스트 생성 시 렉시컬 스코프 내의 선언이 끌어올려 지는 게 호이스팅입니다.
  • 호이스팅이란 “끌어올린다”라는 뜻으로 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 현상을 말합니다. 여기서 “선언(Declaration)”은 끌어올려지고 “할당(Assignment)”은 끌어올려지지 않습니다.
  • 할당 구문은 런타임 과정에서 이뤄진다.
    • 함수와 변수 선언문 중에서는 함수 선언문이 먼저다!
    func();
var func = function(){ console.log('변수 호이스팅') }
function func() {
  console.log('함수 호이스팅');
}

// 함수 호이스팅

TDZ란?

  • 일시적 사각지대로, 선언단계와 할당,초기화 단계 사이를 TDZ(Temporal Dead Zone)이라고 한다.

let,const와 var의 차이는?

let,const는 블록 레벨 스코프로 선언된 변수는 코드 블록 내에서만 유효합니다.

var의 경우는 함수 레벨 스코프로 선언된 변수는 함수 내에서 유효합니다. 따라서, var의 경우에는 전역 변수로 선언되어 값이 변동 될 가능성이 있습니다.

 

또한, 호이스팅에서 차이가 있습니다.

var의 경우에는 선언과 초기화가 동시에 일어나 TDZ 구간에서 undefined가 표시됩니다.

let,const의 경우에는 선언만 호이스팅되고 TDZ구간에서 에러를 반환합니다.

클로져(closure)?

  • 상위 스코프의 식별자를 참조하고 있고, 본인의 외부 함수보다 더 오래 살아있다면 클로져라고 한다.
    • 특정 함수의 접근을 막기위해 은닉하거나, 특정 함수에게만 state 변경을 허용하기 위해 사용한다.
    • 하지만 메모리 관리에서의 약점이 있다.

REST API ?

참조 : https://memostack.tistory.com/180

REST API는 웹에서 데이터를 전송 및 처리하는 방법을 정의한 인터페이스를 말한다. 모든 데이터 구조와 처리방식은 REST에서 URL을 통해 정의되며, 직관적으로 이해할 수 있다.

일반적으로 API를 설계할때, URL로는 자원(resource)을 명시하고, HTTP Method로는 행위를 명시합니다.

 

REST 구성

  • 자원(resource): URI
  • 행위(verb): HTTP Method
    • HTTP Method를 통해 해당 자원에 대한 CRUD Operation을 적용하여 아래와 같이 사용한다.
      • Create: 데이터 생성 (POST)
      • Read: 데이터 조회 (GET)
      • Update: 데이터 수정 (PUT)
      • Delete: 데이터 삭제 (DELETE)정답일반적으로 API를 설계할때, URL로는 자원(resource)을 명시하고, HTTP Method로는 행위를 명시합니다

 

GET Method

GET은 보통 조회를 할 때 사용한다.

  • DB로 생각했을때는 SELECT에 해당

예를들어, 회원가입한 사용자의 정보를 알고 싶다면, 아래처럼 사용한다.

GET <http://localhost:8080/rest/api/v1/user/1>

POST Method

POST는 보통 데이터를 추가할 때 사용한다.

  • DB로 생각했을때는 INSERT에 해당

회원 가입을 하는 경우, POST 방식으로 사용자의 정보를 함께 전송한다.

POST <http://localhost:8080/rest/api/v1/user>

{
    "username": "아무개",
    "password": "1234",
    "email": "test@google.com",
    ...
 }

보통 생성 과정이 성공적으로 끝나면, 응답값으로 201 CREATED를 보낸다.

PUT Method

PUT은 데이터를 수정 할 때 사용한다.

  • DB로 생각했을때는 UPDATE에 해당

사용자의 정보를 수정하고 싶은 경우, 수정하고 싶은 사용자 정보와 함께 PUT 방식으로 요청한다.

  • 위 POST와 동일한 URL로 요청하지만, HTTP 메소드가 다르기 때문에 다르게 동작한다.

PUT이 해당 자원의 전체를 교체하는 의미를 지니는 대신, PATCH는 일부를 변경한다는 의미

PUT <http://localhost:8080/rest/api/v1/user/{user_id}>

PUT <http://localhost:8080/rest/api/v1/user/1>

{
    "password": "4321"
 }

DELETE Method

DELETE는 데이터를 삭제할 때 사용한다.

  • DB로 생각했을때는 DELETE에 해당

사용자의 정보를 지우고 싶은 경우(탈퇴 처리) , DELETE 방식으로 사용자의 ID의 값과 함께 요청한다.

DELETE <http://localhost:8080/rest/api/v1/user/{user_id}>

예시: DELETE <http://localhost:8080/rest/api/v1/user/1>

응답코드

  • 200 : 클라이언트 요청 정상수행 (응답에 대한 메시지가 포함)
  • 201 : 리소스 생성 요청에 대한 정상처리
  • 202 : 리소스 생성 요청이 비동기적으로 처리될 때 사용
  • 204 : 클라이언트 요청 정상수행 (응답에 대한 메시지 미포함, 보통 삭제요청에 사용)
  • 400 : 클라이언트 요청이 부적절할 때 사용 (부적절한 이유를 응답 Body에 넣어줘야 함)
  • 401 : 클라이언트가 인증되지 않은 상태에서 보호된 리소스를 요청할 때 사용
  • 403 : 클라이언트가 인증상태와 무관하게 응답하고 싶지 않은 리소스를 요청할 때 사용 (400 사용을 권장)
  • 404 : 클라이언트가 요청한 리소스가 존재하지 않을 때 사용
  • 405 : 클라이언트가 불가능한 메소드를 사용했을 때

this에 대해서 설명해주세요

  • 정답함수의 상위 스코프를 결정하는 렉시컬 스코프 와는 다르다.
  • 자바스크립트의 경우 함수 호출 방식에 따라 this 에 바인딩할 어떤 객체가 동적으로 결정된다.

this 바인딩?

  • 단독 호출(In Browser)
    • 비엄격모드 → window
    • 엄격모드 → undefined
  • 단독 호출(In Node)
    • 전역코드 → exports(빈객체{} === module.exports)
    • 함수코드 → global
  • 객체 메서드 호출(암시적 바인딩)
    • Object.Function() → this===Object
  • 명시적 바인드
    • bind(),call().apply()
    • call()과 apply()함수는 실행할 함수 인자를 넘기는 방식만 다르다.
  • new 바인딩
    • new로 반환된 obj 객체를 this 컨택스트와 바인딩 되는 규칙
  • 우선순위

new 바인딩 > 명시적 바인딩 > 암시적 바인딩 > 기본 바인딩

스코프란?

  • 스코프는 참조 대상 식별자(변수,함수 이름과 같이 다른 대상과 구별하는 것)를 찾아내기 위한 규칙이다.

스코프 체인?

  • 식별자를 결정할 때 활용하는 스코프들의 연결리스트

스코프 레벨?

  • 블록 레벨 스코프
    • 대부분 프로그래밍 언어가 선택하고 있으며, javascript에서는 let,const등이 적용된다.
    • 모든 코드블록(함수,if문,for문, while문, try/catch문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.
    • 즉, 코드블록 내부에서 선언한 변수는 지역변수이다.
  • 함수 레벨 스코프
    • javascript var
    • 함수 내에서 선언된 변수는 함수 내에서만 유효하며, 함수 외부에서는 참조할 수 없다.
    • 즉, 함수 내부에서 선언한 변수는 지역 변수이며, 함수 외부에서 선언한 변수는 모두 전역 변수이다.

스코프의 구분?

  • 정적스코프
    • 함수가 정의되는 시점에 결정
    • 렉시컬 스코프! (Javascript)
  • 동적스코프
    • 함수가 호출되는 시점에 결정

 

Reflow와 Repaint가 실행되는 시점

  • Reflow
    • DOM 엘리먼트 추가,제거 또는 변경
    • CSS 스타일 추가, 제거 또는 변경
    • CSS 스타일을 직접 변경하거나, 클래스를 추가함으로써 레이아웃이 변경될 수 있다.
    • CSS3 애니메이션과 트랜지션, 애니메이션의 모든 프레임에서 리플로우 발생
    • offsetWidth와 offsetHeight 의 사용
    • 유저 행동, 인터랙션으로 발생하는 hover 효과, 필드에 텍스트 입력 등
  • Reflow는 렌더 트리를 재생성하는 과정이다.(레이아웃 변경)

 

  • Repaint
    • 가시성이 변경되는 순간 (opacity, background-color, visibility, outline 등)
    • Reflow가 실행된 순간 뒤에 실행
  • Reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리는 과정

자바스크립트 엔진이 코드를 실행시키는 과정

  • 내용
  • 자바스크립트를 실행하기 위해선 자바스크립트 엔진이 필요하고 웹 브라우저는 자바스크립트 엔진을 내장하고 있다. 브라우저마다 엔진의 종류가 다르지만 코드를 실행하는 방식은 비슷하기 때문에 보통 어떻게 실행하는지 알아두는 것이 좋다. (V8, SpiderMonkey, Javascript core 등의 구현이 각각 다르다)
  • 과정
    • 소스코드를 만나면 파싱하여 AST(Abstract Syntax Tree)(추상구문트리) 로 변환한다.
    • 인터프리터(Interpreter) 는 AST를 기반으로 바이트코드(Bytecode)를 생성 한다.
    • 인터프리터가 바이트코드를 실행할 때, 자주 사용되는 함수 및 타입 정보 등이 있는 프로파일링 데이터(Profiling data) 와 같이 최적화 컴파일러(Optimizing compiler) 에게 보낸다.
    • 최적화 컴파일러는 프로파일링 데이터를 기반으로 최적화된 코드(Optimized code)를 생성 한다.
    • 하지만, 프로파일링 데이터 중에 잘못된 부분이 있다면 최적화 해제(Deoptimize) 를 하고 다시 바이트코드를 실행해서 이전 동작을 반복한다.

 

  • 바이트코드 (Bytecode, portable code, p-code)는 특정 하드웨어가 아닌 가상 컴퓨터에서 돌아가는 실행 프로그램을 위한 이진 표현법이다. 하드웨어가 아닌 소프트웨어에 의해 처리되기 때문에, 보통 기계어보다 더 추상적이다.

CSS에서 position이란?

  • position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.
    • static : 요소를 일반적인 문서 흐름에 따라 배치합니다.
    • relative : static + 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.
    • absolute : 요소를 일반적인 문서 흐름에서 제거하고, 가장 가까운 위치 지정 부모 요소에 대해 상대적으로 배치합니다.
    • fixed : 요소를 일반적인 문서 흐름에서 제거하고, 뷰포트의 초기 컨테이닝 블록을 기준으로 배치합니다.
    • sticky : static + fixed 특징을 동시에 가집니다.

중요도 ★★★★

 

브라우저 저장소에 대해 설명?

  • LocalStorage
    • 로컬스토리지는 저장한 데이터를 지우지 않는 이상 영구적 보관이 가능합니다.(도메인마다 로컬 스토리지가 생성)
    • 최대 크기 : 5MB 권장
    • 사용 예시 : 자동 로그인
  • SessionStorage
    • 세션 종료 시 클라이언트에 대한 정보가 삭제됩니다.
    • 최대 크기 : 5MB
    • 사용 예시 : 장바구니, 입력 폼 정보
  • cookie
    • 웹 사이트에서 쿠키를 설정하면, 모든 웹 요청에는 쿠키 정보가 포함된다. → 서버 부담 증가
    • 최대 크기 : 4MB
    • 사용 예시 : 팝업 창, JWT 토큰

Javascript는 어떤 언어일까?

  • javascript
    • 싱글 스레드 논 블록킹 언어이다.
      • 싱글스레드 : 스레드가 하나밖에 존재하지 않아 한번에 하나의 작업만 할 수 있다.
      • 스레드 : 어떤 프로그램 내에서, 특히 프로세스 내에서 실행되는 흐름의 단위
      • 비동기 처리 : 특정 로직의 실행이 끝날때까지 기다리지 않고 나머지 코드를 먼저 실행하는 것이다.
    • 프로토타입 기반 객체지향 프로그래밍 언어이다.
      • array의 concat, sort 등이 예시로 좋다.
      • 유전자 라고도 생각할 수 있음.

자바스크립트 동적원리 (Event Loop)

  • Event Loop

    • 일반적인 작업은 콜스택에서 이뤄진다.
    • 시간이 소요되는 작업들(setTimeout, 이벤트, http요청)은 web API에서 대기하다가 콜백 큐로 보내진다.
    • 콜스택이 비워져 있을때만 콜백 큐에저장되어 있던 작업들을 Call Stack으로 보낸다.
  • 마이크로 태스크 큐
    • 태스크 큐보다 우선순위가 높다!
    • process.nextTick, Promise, Object.observe, MutationObserver
    • 우선순위 큐로 “제일 오래된 태스크”를 우선으로 꺼낸다.
  • 태스크큐
    • 마이크로 태스크 큐보다 우선순위가 낮다!
    • setTimeout, setInterval, requestAnimationFrame 등
    • 우선순위 큐로 “제일 오래된 태스크”를 우선으로 꺼낸다.

이벤트 전파

  • 이벤트 버블링
    • 이벤트가 하위 요소에서 상위 요소 방향으로 전파되는 현상
  • 이벤트 캡처링
    • 이벤트가 상위 요소에서 하위 요소 방향으로 전파되는 현상
  • 이벤트 위임
    • 공통 조상에서 event.target을 이용해 이벤트를 핸들링 할 수 있다.
    • 이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용됩니다.

실행 컨텍스트

  • 실행컨텍스트
    • 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
    자바스크립트는 실행 컨텍스트가 활성화되는 시점에 다음과 같은 현상이 발생한다.
    • 호이스팅 발생
    • 외부 환경 정보를 구성
    • this 값을 설정

Typescript에 대해서 설명해라

  • Typescript
  • 타입을 명시하지 않는 자바스크립트와 달리, 타입스크립트를 통해 정적 타입을 명시해 사용할 수 있다.
  • 장점
    • 코드에 목적을 명시하고, 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거할 수 있습니다. 프로젝트가 크고, 복잡할수록 장점이 커진다.
  • 런타임 vs 컴파일
    • 타입스크립트는 컴파일 단계에서 잡아주는 역할을 한다.
    • 런타임에서는 확인할 방법이 없기 때문에 타입가드를 사용합니다.
      • type Guard는 필드를 하나씩 체크하는 것매우 효과적이지만, 비효율적이다!
      • ts-auto-gaurd를 사용하면 불편을 덜 수 있긴 하다.
function ArgsGuard(target: Args): boolean {
    if (target == undefined) return false;
    if (target.n == undefined) return false;
    if (target.s == undefined) return false;
    if (new Object(target.n).constructor != Number) return false;
    if (new Object(target.s).constructor != String) return false;
    return true;
}
  • 성능
    • 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있습니다.

제너레이터란?

  • 제너레이터 함수는 이터러블을 생성하는 함수이다.
  • 중간에 원하는 부분에서 멈췄다가 그부분부터 다시 실행할 수 있는 함수이다.
  • 제너레이터 함수는 화살표 함수를 사용할 수 없다!!!
  • function* ~~~ 으로 선언할 수 있음
  • 일반함수는 return문을 반환하지만, 제너레이터 함수는 제너레이터를 반환한다.
  • 제너레이터는 next 메소드를 소유하며 호출하면 value,done 프로퍼티를 갖는 객체를 반환한다.

yield란?

  • 제너레이터 함수를 멈추거나 다시 시작하게 하는데 사용되는 키워드이다.

Promise

  • Pending (대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
  • Fulfilled (이행) : 비동기 처리가 완료되어 프로미스가 값을 반환한 상태
  • Rejected (실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

.then을 사용해 promise에 접근하고, .catch를 사용해 에러 처리를 한다.

  • 자바스크립트 비동기 처리에 사용되는 객체이다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다.

Async/Await

  • async: 해당 함수는 항상 promise를 반환합니다.
  • await: promise가 처리될 때까지 대기합니다.

SPA(Single Page Application) & CSR

  • 정의
    • 하나의 HTML을 기반으로 JS를 사용해 동적(CSR)으로 컨텐츠를 변경하는 방식
  • 장점
    • 첫번째 로딩만 기다리면 화면 깜빡임 없이 좋은 UX를 제공할 수 있다.
    • 서버에 요청하는 횟수가 적기 때문에 부담이 덜하다.
  • 단점
    • 모든 스크립트 파일이 로드될 때까지 기다려야한다.
    • 첫 로딩화면이 오래걸린다.
    • 검색엔진 봇이 크롤링하기 어려워 SEO가 좋지 않다.(구글봇은 JS지원)
  • 왜?
    • SPA과 CSR은 같을까?
      • SPA은 하나의 Page를 사용하는 것이고, 컨텐츠를 변경하기 위해 CSR방식을 사용하는 것! CSR은 렌더링을 하기 위한 방법이다.
    • 왜 SEO가 안좋아?
      • React를 생각해보면 쉽다. 검색엔진 봇이 보는 HTML 파일은 id:app인 하나의 div만 바라볼 수 있다. 크롬 도구에서 javascript를 끄는 기능을 활성화해서 확인하거나, 페이지 소스보기를 통해 확인할 수 있다.
    • SPA은 왜 쓰는 거야?
      • 초기 로딩이 오래걸린다는 단점과 SEO최적화가 어렵다는 단점을 제외하면 컨텐츠 변경을 화면깜빡임 없이 빠르게 변경할 수 있고, 서버의 부하를 낮춰 좋은 UX를 제공하는 방식이다. 전체 페이지를 렌더링하는 것이 아니라, 필요한 부분만 변경할 수 있는 장점이 있다.
  • 경험
    • React를 활용한 SPA&CSR 구현 경험

MPA (Multiple Page Application) & SSR

  • 정의
    • 페이지 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.
    • 여러개의 Page로 구성된 어플리케이션. 사용자가 요청할 때마다, 서버에서 렌더링된 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다.
  • 장점
    • SEO에 유리하다
    • 첫 로딩이 매우 짧다.(단, JS 스크립트를 모두 다운받기 전까지는 작동하지 않는다.)
  • 단점
    • 페이지 이동 시 전체 페이지가 다시 렌더링되며, 화면 깜빡임이 있다.
    • 페이지 이동 시 불필요한 부분도 렌더링된다.
    • 서버의 부하가 심하다.
  • 왜?
    • MPA은 SSR으로만 만들어야 하나? Next.js를 활용해 적절하게 SSR과 CSR을 활용할 수 있다.
  • 경험
    • Next.js를 활용한 SEO 개선 경험
      • Next의 GetServerSideProps를 활용한 SSR 구현
      • IP주소 → knoticle.app 도메인 변경
      • SSL인증서를 통한 https 배포
      • <Head>에 title,meta 태그 추가
      • sitemap 작성
    • Knoticle은 SEO가 중요한 서비스로 하기와 같은 방법으로 Lighthouse기준 97점까지 개선했습니다.
    • CSR과 SSR을 적절히 사용한 경험
      • 초기 화면 → Next.js를 사용해 SSG방식으로 GNB등을 먼저 보여줄 수 있도록 구현
      • 페이지 이동, 모달 등 → Link를 활용해 CSR방식으로 페이지 이동 등을 구현
      • 책리스트 등 필요한 정보 → useEffect를 활용해 CSR 방식으로 구현
      • 책,메인 컨텐츠 화면 → Next.js의 GetServerSideProps를 활용해 SSR 구현
    • Next.js를 활용해 CSR과 SSR을 적절히 사용한 경험이 있습니다.

중요도 ★★★

 

require와 import의 차이점은?

  • require는 CommonJS를 사용하는 node.js문이지만 import는 ES6에서만 사용된다.
  • require는 파일에 저장된 위치에 남아 있으며 import는 항상 맨 위로 이동한다.
  • require는 프로그램의 어느 지점에서나 호출할 수 있지만, import는 파일 시작 부분에서만 실행할 수 있다.
  • 일반적으로 import가 사용자가 필요한 모듈 부분만 선택하고 로드 할 수 있기 때문에 더 선호된다. 성능이 우수하고 메모리를 절약할 수 있다.

Styled Component의 장점?

장점

  • Scss라이브러리 설치 없이 Scss 문법을 사용할 수 있다.
  • 자유로운 CSS 커스텀 컴포넌트를 만들 수 있다.
  • 컴포넌트의 props를 참조할 수 있으며, props의 값에 따라 스타일을 다르게 코딩 할 수 있다.

단점 : 빠른 페이지 로드에 분리하다.

  • 페이지에서 렌더링되는 요소에 맞춰 자동으로 해당 스타일만 삽입합니다. 그때그때 필요한 스타일만 로드한다.
  • 스타일에 대한 고유 클래스명을 생성합니다. 중복이나 오타 걱정 없음
  • 더이상 사용되지 않는 CSS를 쉽게 삭제할 수 있습니다. 모든 스타일은 특정 요소와 연결되어 있기 때문에 해당 요소가 삭제되면 스타일도 삭제된다
  • 동적 스타일링이 편해진다. 이 props가 있다면 A, 없다면 B와 같이 직관적으로 개별 스타일링이 가능하다.

sass(scss)의 장점?

장점

CSS보다 심플한 표기법, CSS를 구조화하여 표현 Nesting, Mixin, selector등의 기능을 활용하여 CSS유지보수 편의성을 향상시킨다.

단점

전처리기를 위한 도구가 필요하다. 다시 컴파일 하는데 시간이 걸린다. class명을 일일히 정해주어야 된다.

  • 변수 사용가능 ($변수명:속성값)
  • 수학 연산자 사용가능
  • Nesting 기능 - 중첩해서 선언하기 가능
  • import와 extend
  • Mixin - 공통적으로 쓰이는 css 속성을 묶어서 재사용이 가능하게 한다.
  • 커스텀 함수 사용
  • 흐름제어 - @if,@for,@while 등

Javascript 성능 최적화를 위해 어떤 방법이 있나요?

  1. DOM 접근 최소화 DOM을 접근할 때에는 가능하면 지역 변수로 할당하여 사용하는 것이 좋다. DOM도 하나의 Object이기 때문에 프로토 타입 체인에 의해 내가 원하는 위치를 찾는데 시간이 발생하기 떄문이다.
  2. Repaint,Reflow 최소화
  3. 빌드시 사용 크기 줄이기
  4. import 부분적으로 호출하기
  5. nginx를 사용한다면 gzip 사용하기

Vue vs React

  • 차이점
    • 프레임워크 vs UI 라이브러리
    • 코드 형태의 차이
      • React는 JSX 형태로 코드를 작성하여 JavaScript 문법을 응용한다.
      • Vue는 HTML,JS,CSS 코드영역을 분리해서 작성한다. ”.vue”파일을 만들 때에도 패턴이 존재한다. <template>에 HTML 작성 <script>에 JS 작성 <style>에 CSS 작성
    • 컴포넌트 분리와 재사용
      • 리액트의 가장 큰 장점은 컴포넌트의 생성 및 재사용이다. 파일별로 컴포넌트를 분리할 수 있고, 재사용성이 높다.
      • vue는 새로운 컴포넌트를 만들어 분리하기 위해서 새로운 파일을 하나 더 만들고, 그에 따라 해당하는 template,script,style을 모두 작성해야한다. 또한, props를 전달하는 과정에서도 해당 컴포넌트를 사용하는 모든 파일을 오가며 작성해야한다.
    • 진입장벽
      • 자유도가 높은 React가 진입장벽이 더 높다.
      • 상태관리도 vue는 vueX로 거의 사용하지만 React는 선택지가 많다.
    • Typescript
      • 리액트를 사용할 때 편리할 뿐 아니라 함수형 프로그래밍을 적극적으로 활용하기 쉽다. 리액트는 모든 코드를 ts로 구현하는 게 뷰 보다 쉽다.
      • 뷰 또한 ts를 지원하지만, ts를 사용하기 위해서 많은 부분에서 ts용 모듈을 사용하고, 코드 변경이 필요하다.

ES6에서 Arrow Function를 언제, 왜 사용할까?

  • 화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다.
  • 콜백 함수로 사용할 수 있다. 이 경우 일반적인 함수 표현식보다 표현이 간결하다.
  • function 키워드로 생성한 일반 함수와 화살표 함수의 가장 큰 차이점은 this이다.
    • 자바스크립트의 경우 함수 호출 방식에 따라서 this가 동적 바인딩된다.
    • 화살표 함수는 언제나 상위 스코프의 this를 가리킨다 → 렉시컬 스코프

CORS를 대처하는 방법과 우회방법

  • CORS란?
    • 출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념
    • 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식
    • cross-origin이란 프로토콜,도메인,포트번호 중 하나라도 다른 경우

우회방법

  1. 개발자가 테스트 혹은 개발단계에서 쉽게 요청하기: 웹 브라우저 실행 옵션이나 플러그인을 통한 동일 출처 정책 회피
  2. CORS구현이 안되어 있는 서버로 ajax요청을 해야하지만 서버 쪽 컨트롤이 불가능할 경우: jsonp방식으로 요청
  3. Ajax요청을 해야 하는 다른 도메인의 서버를 클라이언트와 같이 개발하거나 서버 개발 쪽 수정 요청이 가능한 경우: 서버에서 CORS 요청이 허용되도록 구현

 

1. 단순요청(Simple Request)

  • GET, HEAD, POST 요청만 가능합니다
  • Accept, Accept-Language, Contet-Language, Content-Type과 같은 CORS 안전 리스트 헤더 혹은 User-Agent 헤더
  • Contet-Type 헤더는 application/x-www-form-urlencoded, multipart/form-data and text/plain만 가능
  • ReadableStream 객체가 사용되지 않습니다.
  • XMLHttpRequest 객체를 사용하여 요청하면, 요청에서 사용된 XMLHttpRequest.upload에 의해 반환되는 객체에 어떠한 이벤트 리스너도 등록되지 않습니다.

2. 프리 플라이트(Preflight Request)

프리 플라이트는 OPTIONS 메서드로 HTTP 요청을 미리 보내 실제 요청이 전송하기에 안전한지 확인합니다. 다른 출처 요청이 유저 데이터에 영향을 줄 수 있기 때문에  미리 전송한다는 의미입니다.

요청 헤더에는 다음 값이 포함됩니다.

origin : 어디서 요청을 했는지 서버에 알려주는 주소

access-control-request-method : 실제 요청이 보낼 HTTP 메서드

access-control-request-headers : 실제 요청에 포함된 header

응답 헤더에는 다음 값이 포함됩니다.

access-control-allow-origin : 서버가 허용하는 출처access-control-allow-methods : 서버가 허용하는 HTTP 메서드 리스트access-control-allow-headers : 서버가 허용하는 header 리스트access-control-max-age : 프리 플라이트 요청의 응답을 캐시에 저장하는 시간

3. 신용 요청(Credentialed Request)

신용 요청은 쿠키, 인증 헤더, TLS 클라이언트 인증서 등의 신용정보와 함께 요청합니다. 기본적으로, CORS 정책은 다른 출처 요청에 인증정보 포함을 허용하지 않습니다. 요청에 인증을 포함하는 플래그가 있거나 access-control-allow-credentials가 true로 설정 한다면 요청할 수 있습니다.

 

 

 

 

Reference

 

👨🏻‍💻 Tech Interview

최종 수정 : 12/17/2022, 7:23:59 AM

gyoogle.dev

 

 

GitHub - JaeYeopHan/Interview_Question_for_Beginner: Technical-Interview guidelines written for those who started studying progr

:boy: :girl: Technical-Interview guidelines written for those who started studying programming. I wish you all the best. :space_invader: - GitHub - JaeYeopHan/Interview_Question_for_Beginner: Techn...

github.com

 

 

 

GitHub - baeharam/Must-Know-About-Frontend: 취준생이라면 알면 좋을 프론트엔드 관련 지식들

:mortar_board: 취준생이라면 알면 좋을 프론트엔드 관련 지식들. Contribute to baeharam/Must-Know-About-Frontend development by creating an account on GitHub.

github.com

 

 

GitHub - Esoolgnah/Frontend-Interview-Questions: 프론트엔드 중요도별 면접질문 + 용어 설명 ⭐️

프론트엔드 중요도별 면접질문 + 용어 설명 ⭐️. Contribute to Esoolgnah/Frontend-Interview-Questions development by creating an account on GitHub.

github.com

 

 

프론트엔드 개발자 기술면접 인터뷰 질문 모음(업데이트)

프론트엔드 기술면접 실제현업 질문 모음 최근 1년 간 프론트엔드 면접을 7번 정도 본 것 같다. 국내 IT 대기업 N사만 여러번, K사, 온라인쇼핑몰 C사 등등 여러군데를 면접을 진행했으며 비록 떨

realmojo.tistory.com