[면접준비] 프론트엔드 개발자 취업 면접 질문 및 답변 정리(64문) (tistory.com) 퍼옴.

[면접준비] 프론트엔드 개발자 취업 면접 질문 및 답변 정리(64문) (tistory.com)

[면접준비] 프론트엔드 개발자 취업 면접 질문 및 답변 정리(64문)

 
👻리액트 상태관리에서 라이브러리 Mobx and Redux가 있는거다. 

10. React의 상태관리 방법에 대해서 설명하시오

   - 리액트의 상태관리에는 context API를 통한 방법 및 MobX, Redux 등의 라이브러리를 사용한 방법이 있다. 그 중 가장 많이 사용하는 Redux는 전역 상태를 생성하고 관리하며, 상태관리 라이브러리 중 가장 압도적으로 많이 사용된다. 리덕스는 컴포넌트에서 액션 크리에이터를 통해 액션을 만들고, 그 액션을 디스패치 함수로 실행시킨다. 그러면 store에서 해당 리듀서로 매칭되는 액션이 있는지 확인하고 스토어에 저장된 상태를 변경해주는 원리로 작동한다. 리덕스는 context api와 다르게 전역 상태 관리 외에도 redux-saga, reduc-thunk 등 추가 라이브러리를 통해 비동기 작업을 쉽게 해줄 수 있는 장점이 있지만, 코드가 많고 복잡하기 때문에 이런 부가기능이 필요하지 않은 소규모 프로젝트에는 context api를 쓰는 것이 나을 수도 있다.

 

 

5. 브라우저 저장소에 대한 차이점을 설명해주세요
  - key-value형태의 만료기한이있는 쿠키의 단점을 보완해 웹스토리지(로컬과 세션)가 만들어졌다. 로컬 스토리지는 클라이언트의 정보를 영구적으로(자동로그인) 저장하는 반면 세션 스토리지는(비로그인 장바구니) 브라우저를 닫을 경우 정보가 삭제된다. 쿠키는 로컬&세션에 비해 용량이 매우작고, 치명적인 단점에는 암호화가 없어 정보 도난 위험이있다.  
 
8. CSR과 SSR의 차이점은 무엇인가요?
 - SSR은 사용자가 웹 페이지에 접근 할때, 서버에 각각 페이지에 대해 요청하고 서버에서 HTML, JS 파일 등을 모두 다운로드하여 화면에 렌더링 하는 방식이다. CSR은 클라이언트측에서 HTML, JS, 리소스 파일들을 받은 이후에 브라우저에서 렌더링을 진행하는 것으로, JS가 동작하면서 데이터만을 주고 받는다.
초기로딩속도 측면에서, SSR은 필요한 부분의 HTML과 스크립트만 서버에서 렌더링 하여 가져오기 때문에 속도가 빠른 반면, CSR은 HTML, JS 파일을 다운 받고 브라우저에서 렌더링 하기 때문에 초기에 오래걸린다.
서버 부담측면에서, SSR은 서버와 잦은 응답(View가 바뀔 때마다 서버에 요청)을 하기 때문에 서버에 부담이 되고 UX측면이 떨어진다(새로고침 많음), CSR은 데이터 요청이 있을때만 서버에 요청하기 때문에 서버에 부담이 적다.
SEO 측면에서, SSR은 HTML에 대한 정보가 처음에 포함되어 있어(SEO에 사용되는 meta 태그들이 미리 정의되어있음) 데이터를 수집할 수 있어 SEO에 유리하지만, CSR은 맨 처음 HTML 파일이 비어있어 구글을 제외한 크롤러가 데이터를 수집할 수 없다.
 
SEO는 Search Engine Optimization의 약어로, 검색 엔진 최적화를 의미합니다. 웹사이트나 웹 페이지가 검색 엔진 결과 페이지(SERP)에서 상위에 나타나도록 최적화하는 프로세스를 나타냅니다. 즉, 검색 엔진에서 높은 순위를 얻기 위한 다양한 전략과 기술을 포함합니다.
 
 
MobX: 상태관리 라이브러리 
출처: Web: MobX의 장점과 기본 원칙. 전역 상태 관리 라이브러리 MobX의 기본적인 동작 원칙과… | by Heechan | HcleeDev | Medium

정적사이트 vs SPA

RFP (제안요청서, Request for Proposal) : 발주자가 특정 과제의 수행에 필요한 요구사항을 체계적으로 정리하여 제시해 도움을 주기 위한 문서. (영업)

RFI (사전정보요청, request for information) : 제품, 서비스, 시장 동향, 경쟁사 정보 등을 제공받아 진행하고자 하는 업무에 대한 정보를 미리 수집하고 비교분석하는 문서로 프로젝트에 대한 개요, 목적, 기간 정도 까지만 요약하고 대부분의 RFI에는 많은 요구사항을 담지 않는다.

참고 : 제안 PM은 기술영업을 하고, 수행 PM은 개발 프로젝트 구현을 이끈다.

...args는 spread 연산자로, 함수에 전달된 인자들을 배열로 만들어줍니다. 이를 통해 함수 내에서 args는 전달된 모든 인자들을 배열로 받을 수 있게 됩니다. 자바스크립트에서 배열은 객체니까

기술 질문을 많이 받았다. 페이지가 어떤과정을 거쳐 보여지는지 node가 어떻게 작동되는지 등등의 질문을 받았고 준비 했던 질문이 아니어서 대답을 정말 못했다 고 생각했다.

node가 어떻게 작동하는가?



호이스팅이 무엇인가요?

함수 안에 존재하는 모든 선언들을 해당 스코프의 최상단으로 끌어올리는 것

이 예시 중요

기술 예제

JS는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당합니다. 덕분에 함수를 호출하는 코드를 함수 선언보다 앞서 배치할 수 있습니다. 즉 함수를 선언하기 전에 먼저 호출했을 때,

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

/*
결과: "제 고양이의 이름은 클로이입니다"
*/
함수 호출이 함수 자체보다 앞서 존재하지만, 그럼에도 불구하고 이 코드 역시 동작합니다. 이것이 JS에서 실행 맥락(execution context)이 동작하는 방식입니다.


호이스팅은 크게 함수 선언 호이스팅과 변수 선언 호이스팅으로 나뉜다.

var 키워드 변수는 위로 올려진다.

호이스팅은 무엇일까요?

더 이상 고민하지 않고 예를 살펴보겠습니다. 선언되지 않은 변수에 액세스하려고 하면 어떻게 될까요?
console.log(a);
// ReferenceError: a is not defined
브라우저에 레퍼런스 에러로 a 는 아직 정의되지 않았다는 메시지가 표시됩니다. 하지만 만약에
console.log(a); // undefined
var a;
어떻게 이런 일이 일어날 수 있을까요? 논리적으로 말해서 코드는 한 줄씩 실행되기 때문에 위와 같이 레퍼런스 에러가 발생해야 합니다. undefined가 출력되는 이유는 무엇일까요?

이것은 자바스크립트의 호이스팅, state lifting 때문입니다. state lifting은 var a 라인이 맨 위로 "들어 올려진다"는 의미입니다. 따라서 JS 엔진(V8)이 이 코드를 구문 분석할 때에는 실제로 다음과 같이 동작하게 됩니다.


var로 선언된 변수는 선언된 함수에서 전역적으로 사용할 수 있습니다.
그냥 전역은 아니고 선언한 함수 내 전역적

var로 선언된 변수는 함수 스코프를 가지며, 해당 함수 내에서 선언되었을 경우 함수 전체에서 접근 가능하며 전역으로 사용할 수도 있습니다. 하지만 ES6부터는 let과 const를 사용하여 블록 스코프를 가지는 변수를 선언하는 것이 권장되며, 전역 변수를 최소화하는 것이 좋습니다.

왜냐 의도치않은 결과 나올 수 있어서


타입스크립트의 장점과 단점에 대해 서술하
보세요.

단점은 아예 모름

초반 세팅이 불편하다
TypeScript는 독자적인 언어가 아니기 때문에, 기존에 존재하는 자바스크립트 엔진에서 실행됩니다.
이를 위해 기본적으로 설치해야 하는 모듈들이 있으며, 컴파일을 하기 위한 옵션들도 설정해야 합니다.
모듈들을 사용할 때에도, 프레임워크를 사용할 때에도 초기 설정이 까다로운 편입니다.

타입때문에 귀찮기도 합니다.
자동으로 타입이 지정되기도 하지만, 필요한 부분은 넣어주기도 합니다.
이로 인해, 생산성이 낮아지며 TypeError로 인한 빨간 줄을 많이 보기도 합니다.

interface나 class 등의 이름 때문에 오류가 생길 때도 있습니다.
같은 내용을 담고 있다고 하더라도 이름이 다른 경우 문제가 생길 수 있습니다.
또한 다른 내용이나 목적이 비슷하여 이름을 짓는 경우 문제가 생길 수 있습니다.
JavaScript에서는 따로 해주지 않아도 되는 것들에 대한 이름이 문제를 야기할 수 있습니다.

가독성이 상대적으로 떨어집니다
같은 코드를 입력한다고 하더라도, JavaScript와 TypeScript의 가독성은 현저히 차이가 납니다.
코드의 길이가 어쩔 수 없이 길어지게 되며
선언되는 타입들에 대한 이름을 만들어주면서 목적성을 잃기도 합니다.

결국, TypeScript는 JavaScript에서 생기는 오류를 피할 수는 없습니다.
많은 노력을 기울여 TypeError를 해결했음에도,
JavaScript의 고질적인 에러는 계속 발생할 수 있다는 뜻입니다.


렉시컬 스코프가 무엇인가요?

https://velog.io/@kangdev/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91JS-dynamic-scope%EB%8F%99%EC%A0%81-%EC%8A%A4%EC%BD%94%ED%94%84-lexical-scope%EB%A0%89%EC%8B%9C%EC%BB%AC-%EC%8A%A4%EC%BD%94%ED%94%84

[기술면접/JS] dynamic scope(동적 스코프), lexical scope(렉시컬 스코프)

lexical scope는 함수가 정의된 위치에 따라서 함수의 상위 scope를 결정합니다. 그래서 이 방식을 static scope(정적 스코프)라고도 부릅니다. 반면, dynamic scope는 함수가 실행되는 위치에 따라서 함수의 상위 스코프를 결정합니다.

Dom과 가상Dom은 어떻게 다른건데?

 

24. DOM 과 가상 DOM이란? 

- Document Object Model 의 약자로, HTML, XML 문서의 프로그래밍 인터페이스를 의미한다. HTML은 브라우저에서 실행될 수 있게끔 DOM Tree로 파싱되고, 이를 바탕으로 렌더링이 된다. 가상돔은 추상화된 DOM을 뜻한다. 기존 DOM을 조작하고 렌더링하는 부분에서 오는 시간을 줄인다. DOM과 유사한 객체를 메모리에 올려놓고, 변경 사항이 생기면 가상돔을 바꾸고, 실제 돔에서는 변경 사항만 변경하여 더 반응성 빠른 웹을 구현할 수 있다. 리액트도 가상돔을 이용하여 구현되어있다. 

 

DOM과 가상 DOM의 차이점에 대해 더 자세히 설명해드리겠습니다.

DOM (Document Object Model)

• 정의: DOM은 HTML, XML 문서의 프로그래밍 인터페이스로, 문서를 구조화된 트리 형태로 표현합니다. 브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성하고, 이 트리를 통해 문서의 내용 및 구조를 접근하고 조작할 수 있습니다.
• 특징:
  • 실제 문서의 표현: DOM 트리는 실제 HTML 문서의 구조와 내용을 반영합니다.
  • 직접 조작: JavaScript를 사용해 DOM을 직접 조작할 수 있으며, 이는 브라우저가 즉각적으로 렌더링을 업데이트하게 만듭니다.
  • 속도 문제: DOM 조작은 비용이 많이 듭니다. 특히, 복잡한 문서를 자주 업데이트해야 하는 경우 성능 문제가 발생할 수 있습니다.

가상 DOM (Virtual DOM)

• 정의: 가상 DOM은 DOM을 추상화한 개념으로, 실제 DOM과 유사한 구조를 메모리에 올려 관리합니다. 주로 React 같은 라이브러리에서 사용됩니다.
• 특징:
• 메모리 상의 표현: 가상 DOM은 실제 DOM의 복제본을 메모리에 유지합니다.
• 변경 감지: 상태나 데이터가 변경되면 가상 DOM을 업데이트하고, 이와 실제 DOM의 차이(difference)를 계산하여 필요한 부분만 실제 DOM에 반영합니다. 이를 "diffing" 알고리즘이라고 합니다.
• 효율성: 가상 DOM을 사용하면 실제 DOM 조작 빈도를 줄여서 성능을 최적화할 수 있습니다. 변경 사항만 적용하므로, 전체 DOM을 다시 렌더링하는 비용을 피할 수 있습니다.
• 리액트와의 관계: React는 가상 DOM을 사용하여 컴포넌트의 상태 변경에 따른 UI 업데이트를 효율적으로 처리합니다.

비교

• 목적:
  • DOM은 웹 문서의 구조를 프로그래밍적으로 표현하고 조작하는데 사용됩니다.
  • 가상 DOM은 이러한 조작의 성능을 향상시키기 위해 만들어진 추상화된 계층입니다.
• 성능:
  • DOM 조작은 직접적이고 즉각적이지만, 빈번한 업데이트 시 성능 저하를 초래할 수 있습니다.
  • 가상 DOM은 변경 사항을 최소화하여 실제 DOM 업데이트를 최적화합니다.
• 사용 사례:
  • DOM은 모든 웹 페이지에서 기본적으로 사용됩니다.
  • 가상 DOM은 주로 React 같은 프레임워크에서 사용되며, 대규모 애플리케이션에서 효율적인 업데이트를 위해 사용됩니다.

이러한 차이점 덕분에 가상 DOM을 사용하면 복잡한 UI의 성능을 크게 향상시킬 수 있으며, 특히 사용자 인터페이스가 자주 변하는 애플리케이션에서 그 효과가 두드러집니다.

 

18. useMemo vs useCallback

  - 둘다 메모이제이션 훅으로 연산 된 값을 자료구조에 저장 후 재사용시 계산을 반복하지않고 꺼내서 사용가능하게 해준다. 메모이제이션 훅은 리액트의 불필요한 랜더링(예: 자식 컴포넌트의 상태가 변경되지않아도 랜더링 해버리는 경우)을 방지하여 퍼포먼스 최적화에 사용된다. 둘의 차이점은 useCallback은 전달된 함수 그 자체를 캐싱하지만, useMemo는 전달된 함수가 실행되고 반환된 결과를 캐싱한다는 것이다.(=useMemo는 메모이제이션 된 값을 반환하고 useCallback은 메모이제이션 된 콜백을 반환한다.)

 

캐싱이란?

 

캐싱(Caching)은 데이터를 임시 저장소에 저장하여, 나중에 동일한 데이터를 다시 사용할 때 저장된 데이터를 활용함으로써 연산 시간을 절약하고 성능을 향상시키는 기술입니다. 리액트의 useMemo와 useCallback 훅에서 캐싱이 어떻게 이루어지는지 더 자세히 설명해 드리겠습니다.

 

캐싱의 개념

캐싱의 기본 개념은 자주 사용하는 데이터를 빠르게 접근할 수 있도록 임시로 저장해두는 것입니다. 캐싱을 통해 같은 데이터를 여러 번 계산하거나 불러오는 작업을 피할 수 있습니다. 예를 들어, 복잡한 계산을 수행하거나, 데이터베이스에서 정보를 가져오는 작업이 있을 때, 캐싱된 결과를 사용하면 시간을 절약할 수 있습니다.