기술 면접 예상 질문과 답변

CS

1. ⭐️   브라우저 주소창에 google.com 입력하면 어떤 일이 일어나나요?
2. DNS에 대해 설명해주세요.
3. ⭐️ GET과 POST의 차이는 무엇인가요?
4. REST API에 대해 설명해주세요.
5. ⭐️ 객체 지향 프로그래밍이란 무엇인가요?
   필요한 데이터를 추상화 시켜 상태와 행위를 가진 객체로 만들고, 객체들간의 상호작용을 통해 로직을 구성하는 프로그래밍 방식이다.
   추상화, 캡슐화, 상속, 다형성 네가지의 특징을 가지고 있다.
6. 자료구조 stack과 queue에 대해 설명해주세요.
7. ⭐️ 프로세스와 스레드에 대해 설명해주세요.
   프로세스: 컴퓨터 내에서 실행되는 프로그램
   스레드: 프로세스내 작업의 흐름. 하나의 프로세스는 여러개의 스레드를 가질 수 있다.

 

Javascript

1. ⭐️ Promise와 Callback 차이를 설명해주세요.
   1. Callback
      1. 다른 함수를 파라미터로 받아서 내부에서 호출하는 것. 어떤 동작이 완료된 직후에 콜백 함수를 호출함으로써 비동기 처리 가능.
      2. 예시: 맛집 대기자 명단에 이름을 쓰고 쇼핑, 게임하다가 식당에서 전화가 오는 것과 같음
         -> 전화를 받는 시점이 콜백함수가 호출되는 시점
   2. Promise
      1. 콜백 함수의 단점을 보완하며 비동기 처리에 사용되는 객체
      2. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용함.
      3. 대기, 이행, 실패의 상태를 가짐
   3. 차이
      Callback: 비동기 로직의 결과값을 처리하기 위해서는 콜백 안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수가 없음.
      Promise: 비동기에서 온 값이 promise 객체에 저장되기 때문에 코드 작성이 용이해짐. Callback hell의 해결방법 (코드 가독성)
   4. 큰 흐름: 자바스크립트는 비동기 처리를 위해 콜백함수를 사용한다. 하지만 콜백을 너무 남용하게 되면 콜백 지옥에 빠지게 되고, 에러 처리도 힘들 뿐더러 여러개의 비동기 처리를 한번에 하는게 어렵다. 
2. 콜백 지옥(Callback hell)을 해결하는 방법을 말씀해주세요.
   1. 콜백 지옥: 콜백 안에 콜백을 계속 무는 방식으로 코딩을 한 것
   2. 예시: 웹 서비스를 개발 할 때 서버에서 데이터 받아와 인코딩, 사용자 인증 등을 계속해서 비동기로 처리해야할 때
   3. 문제점: 가독성 떨어짐, 로직 변경 어려움
   4. 해결 방법: Promise나 Async를 사용한다. 콜백 익명 함수를 각각의 함수로 구분하고 
3. ⭐️ async, await 사용 방법을 설명해주세요.
   1. async 함수를 정의하면 await 키워드를 이용하여 비동기적으로 처리되는 작업이 완료될 때 까지 기다린 후 결괏값을 반환하는 처리를 할 수 있다. 항상 Promise 객체를 반환한다. 
   2. async: 함수 앞에 async 키워드를 추가한다.
   3. await: 함수 안에서 비동기적으로 처리되어야 하는 작업에 await를 추가한다.
   4. cf. Promise: 콜백 함수의 단점을 해결하면서 에러처리, 다수 비동기 처리를 쉽게 하는 비동기 처리 객체. 
   5. cf. 비동기 처리: 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성
      예시: 비동기 처리 없이 동기 처리만으로 웹 애플리케이션을 실행한다면 -> 서버가 언제 데이터 줄지도 모르는데 계속 기다리게 됨 -> 실행하는데 수십 분이 걸림
4. Promise를 사용한 비동기 통신과 async, await를 사용한 비동기 통신의 차이를 설명해주세요.
   1. 성공 여부를 판단하고 싶은 함수 앞에 async를 붙이면 Promise를 작성하고 변수에 담는 귀찮은 일을 생략할 수 있다.
5. ⭐️ var, let, const 차이를 설명해주세요.
   1. var
      1. const와 let이 있기 전 변수 선언 방식.
      2. 재할당 가능
      3. 선언 단계와 초기화 단계가 동시에 진행
      4. cf. 호이스팅으로 인해 변수 선언 전 호출해도 undefined가 나옴
      5. 문제점
         1. 변수 중복 선언 가능, 예기치 못한 값을 반환할 수 있다.
         2. 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
         3. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.
   2. let
      1. 변수 중복 선언 불가능
      2. 재할당 가능
   3. const
      1. 반드시 선언과 초기화를 동시에 진행해야 한다. (재선언, 재할당 불가능)
      2. 재할당의 경우 원시 값은 불가능 하지만 객체는 가능하다. (const 키워드는 불변을 의미하지 않는다.)
   4. 블록 레밸 스코프
      let, const로 선언한 변수는 모두 코드 블록을 지역 스코프로 인정하는 블록레벨 스코프를 따른다.
      let a = 1
      if (true) {
        let a = 5
      }
      console.log(a)    // output: 1
      -> 위 예시에서 const의 경우 5가 나옴
   5. 기본적으로 변수의 스코프는 최대한 좁게 만드는 것을 권장하므로, var 보다는 let과 const를 사용하며, 상수라면 let 보다는 const를 사용하는 것이 안전하다.
6. 함수 선언형과 함수 표현식의 차이에 대해 설명해주세요.
   1. 함수 선언형: 함수명이 정의되어있고, 별도의 할당 명령이 없는 것
      
      1. function sum(a, b) {
           return a+b;
         }
   2. 함수 표현식: 정의한 함수를 별도의 변수에 할당하는 것
      
      1. const sum = function(a, b) {
           return a+b;
         }
   3. 차이: 호이스팅
      함수 선언식: 함수 전체를 호이스팅한다. 선언 전에 함수를 사용할 수 있다.
      함수 표현식: 별도의 변수에 할당하는데, 변수는 선언부와 할당부를 나누어 호이스팅하게 되므로 선언부만 호이스팅되어 TypeError: '함수명' is not a function 가 발생함
   4. 함수 선언식으로 작성된 함수를 전역적으로 선언하게 되며, 중복적으로 동명의 함수를 썼을 때 예상치 못한 결과가 발생할 수 있다. 
7. ⭐️ 이벤트 버블링과 캡처링에 대해 설명해주세요.
   1. 이벤트 버블링: 이벤트가 발생했을 때 자식에서 부모로 전파되는 것. 이벤트를 처리하는 핸들러 함수를 부모요소에 포함해두면, 자식 요소의 이벤트도 모두 처리 가능
   2. 이번트 캡쳐링: 이벤트 버블링의 반대로 부모에서 자식으로 전파되는 것. capture: true 옵션으로 설정 가능함.
8. 이벤트 버블링과 이벤트 캡처링에 대한 예시를 들어주세요.
9. ⭐️ 클로져(Closure)에 대해 설명해주세요.
   참고: https://poiemaweb.com/js-closure
   1. 정의: 함수(반환된 내부함수)와 함수가 선언된 Lexical Env(내부 함수가 선언됐을 때의 스코프)의 조합
      클로저는 반환된 내부함수가 자신이 선언됐을 때의 Lexical Env인 스코프를 기억하여 그 밖에서 호출되어도 해당 스코프에 접근할 수 있는 함수를 말한다.
   2. 실행 컨텍스트의 관점에서: 내부함수가 유효한 상태에서 외부함수가 종료되어 외부함수의 실행 컨텍스트가 반환되어도, 외부함수 스코프내의 활성 객체는 내부함수에 의해 참조되는 한 유효하여 내부함수가 스코프 체인을 통해 참조할 수 있는 것을 말합니다.
   3. 쓰임
      1. 현재 상태를 기억하고 변경된 최신 상태를 유지하는 것
      2. 전역변수 사용 억제
      3. 정보의 은닉: 클래스 기반 언어의 private 키워드를 흉내낼 수 있다.
10. 렉시컬 환경(Lexical Environment)에 대해 설명해주세요.
    
    1. 코드 블록, 함수, 스크립트를 실행하기에 앞서 생성되는 특별한 객체. 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체
    2. 두가지 부분으로 이루어져 있다.
       1. Environment Record: 모든 로컬 변수들을 프로퍼티로 갖는 객체.
       2. Outer Lexical Environment: 마치 연결리스트처럼 부모 Lexical Env의 주소를 참조한다.
11. ⭐️ 실행 컨텍스트에 대해 설명해주세요.
    참고: https://kwangsunny.tistory.com/37
    
    1. 실행 컨텍스트
       현재 실행 중인 코드에 대한 세부 정보를 저장해놓은 내부 데이터 구조.
    2. 생성 단계
       1. 생성 단계
          
          1. Lexical Environment가 생성된다.
             1. 함수
                1. 함수 선언문: 함수가 메모리에 올라간다.
                2. 함수 표현식: 함수가 할당된 변수의 선언문만 호이스팅 된다.
             2. 변수
                1. var: 선언문이 호이스팅되고 undefuned로 초기화된다.
                2. let, const: 선언문이 호이스팅되고 UNINITIALized 상태가 된다.
          2. This 바인딩
             1. Global: window에 전역오브젝트가 할당되고 this엔 window가 할당된다.
             2. Function: window 할당은 없는 대신 Argument 객체가 초기화 된다.
          3. => 모든 변수가 생성 단계에서 Lexical Env에 초기화 되기 때문에 JS 엔진은 변수들의 존재를 모두 인지하게 되고, 이게 호이스팅이 발생하는 이유가 된다.
    3. 실행 단계
       생성 단계에서 결정된 Lexical Env를 가지고 있는 상태로, 코드를 한 줄 씩 실행해나간다.
       그 과정에서 변수에 값을 할당하거나 하면 Lexical Env의 값이 변경된다.
12. ⭐️ 호이스팅(hoisting)에 대해 설명해주세요.
    1. 호이스팅: 변수, 함수의 선언이 스코프 최상단으로 올려져 실행되는 것.
    2. 설명: 변수, 함수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행 됨.
       자바스크립트에서 변수 선언은 '선언->초기화' 단계를 거쳐 수행되는데, 호이스팅으로 인해 선언되지 않은 변수를 console.log(변수) // output: undefined가 된다.
       함수의 경우 output: Uncaught TypeError: 함수 is not a function
    3. Scope: 식별자(변수명, 함수명, 클래스명 등)의 유효 범위
13. 데이터 타입에 대해 설명해주세요.
14. 자바스크립트에서 일어나는 데이터 형 변환에 대해 설명해주세요.
15. 자바스크립트가 유동적인 언어인 이유는 무엇인가요?
16. ⭐️ 프로토타입에 대해 설명해주세요.
    프로토타입이란 자바스크립트가 객체를 생성하는 방법이다.
    자바스트립트의 모든 객체는 상속 개념에 따라 자신의 부모 역할을 하는 객체와 연결되어 있는데, 이런 부모 객체를 프로토타입 객체라고 한다.
    Java, C++ 와 같은 클래스 기반 객체지향 프로그래밍 언어와 달리 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어임.
    클래스 기반 객체지향 언어는 객체 생성을 위해서 클래스 정의가 선행되어야 하지만, 프로토타입 언어는 클래스 없이 객체 생성이 가능하다. 
17. 깊은 복사와 얕은 복사에 대해 설명해주세요.
18. ⭐️ 불변성을 유지하려면 어떻게 해야하나요?
    1. 불변성: 객체가 생성된 이후 그 상태를 변경할 수 없는 것
       참고: https://sustainable-dev.tistory.com/156
       1. 불변성을 유지하는 값
          1. 다른 말로 원시타입
          2. 종류: Boolean, Number, String, null, undefined, Symbol
          3. 메모리 영역 안에서 변경 불가능, 변수에 할당할 때 완전히 새로운 값이 만들어져 할당됨
       2. 불변성을 유지하지 않는 값(변경 가능한 값)
          1. 객체
          2. 객체 내부의 값을 변경하면 객체를 참조하고 있는 다른 값들도 다 같이 변경
       3. 불변성을 유지하는 방법
          자바스크립트는 객체에 불변성을 유지할 수 있도록 객체 메소드를 지원한다.
          preventExtensions() < seal() < freeze() 순으로 불변성이 강하게 유지된다.
    2. cf. const는 재선언 및 재할당이 불가능한거지 불변한게 아니다. (객체 할당 후 값 변경 가능)
    3. 불변성을 지키는 것이 중요한 이유
       cf. 변수에 값을 할당: 메모리 값의 주소를 가리키는 것 (참조)
       객체 b에 기존의 객체 a를 할당하면 객체 b는 단순히 a의 주소값만을 참조하게 된다(얕은 복사). a의 값을 코드 어딘가에서 바꾸면 b의 값도 바뀌게 되는데, 이렇게 불변성을 지키지 않으면 코드의 가독성이 떨어지고 디버깅도 어렵다.
19. this에 대해 설명해주세요.
20. requestAnimationFrame을 사용해본 적 있나요?

 

 

 

Typescript

1. Typescrip란?
   1. 정의: 일반 JS로 컴파일하는 정적 형식의 JS 슈퍼셋
      cf. 슈퍼셋: 특정한 언어의 모든 기능을 포함하면서, 다른 기능까지 포함하도록 향상 또는 확장된 것
   2. 웹 페이지에 작은 스크립팅 기능을 제공하는 목적이었던 자바스크립트는 ⓵ 대규모 어플리케이션을 구축하도록 설계되지 않았고 ⓶ 최근까지 class, module 및 interface와 같은 대규모 프로젝트를 구조화하기 위한 도구와 구조를 제공하지 않았으며 ⓷ 자바스크립트는 동적으로 타입이 정해지므로
   3. 장점
      1. 정적 타이핑: 런타임이 아닌 컴파일 타임에 타입 체킹이 가능하기 때문에 관련된 오류를 예방할 수 있다.
      2. 자바스크립트 코드도 포함할 수 있다.
   4. 단점
      1. 라이브러리 호환 문제: 라바스크립트 라이브러리를 타입스크립트에서 사용하려면 일반적으로 추가적인 작업이 요구된다.
      2. 추가적인 컴파일 시간: 컴파일 하는데 추가적인 시간이 요구된다.
2. Interface와 Class의 차이
   
   1. Interface는 클래스와 비슷한데, 클래스와 달리 정의만 할 뿐 실제로 구현되지 않는다. 어떠한 객체를 생성했을 때 가져야할 속성 또는 메소드를 정의한다
3. 제네릭은 무엇이고 언제 사용하나요?
   1. 정의: 타입을 마치 함수의 파라미터처럼 사용하는 것

 

 

 

React

1. ⭐️ Virtual DOM 작동 원리에 대해 설명해주세요.
2. ⭐️ Virtual DOM 이 무엇인지 설명해주세요.
3. ⭐️ React를 사용하는 이유에 대해 말씀해주세요.
4. 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.
5. key props를 사용하는 이유는 무엇인가요?
6. props와 state의 차이는 무엇인가요?
7. pure component에 대해 설명해주세요.
8. shouldComponentUpdate에 대해 설명해주세요.
9. ⭐️ 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해주세요.
10. ⭐️ 생명 주기 메서드에 대해 설명해주세요.
11. ⭐️ 리액트에서 JSX 문법이 어떻게 사용되나요?
12. 왜 state를 직접 바꾸지 않고 useState를 사용해야 하나요?
13. ⭐️ useMemo와 useCallback에 대해 설명해주세요.
    1. 메모리제이션된 값을 반환한다.
       이전에 계산된 값을 사용하는 것, 불필요한 계산을 막는다.
    2. 메모리제이션된 함수를 반환한다. 
       cf. 컴포넌트가 랜더링될 때 마다 내부에 선언되어있던 표현식도 매번 다시 선언된다. 
14. 리액트에서 메모이제이션을 어떤 방식으로 하나요?
15. 리액트 관련 패키지 중에 제일 좋다고 생각한 것은 무엇인가요?
16. ⭐️ 리액트의 렌더링 성능 향상을 위해 어떻게 해야 하나요?
17. React-query에 대해 들어봤나요?
18. React 18 버전 업데이트 내용에 대해 말씀해주세요.
19. useEffect와 useLayoutEffect의 차이점에 대해 말씀해주세요.
20. ⭐️ Context API에 대해 설명해주세요.

 

Redux

• ⭐️ Redux를 사용하는 이유가 무엇인가요?
• ⭐️ Redux의 장단점에 대해 설명해주세요.
• ⭐️ Context API와 Redux를 비교해주세요.
• Redux-saga에 대해 설명해주세요.
• Generator 문법에 대해 설명해주세요.
• Redux-saga, Redux-Thunk의 차이에 대해 설명해주세요.

 

Frontend

1. ⭐️ 브라우저 렌더링 과정을 설명해주세요.
   1. HTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.)
   2. CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴지 결정한다.)
   3. DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. ("화면에 그려질 것만" 결정)
   4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. ("Box-Model" 을 생성한다.)
   5. 개별 노드를 화면에 페인트한다.(or 래스터화)
2. ⭐️ 브라우저는 어떻게 동작 하나요?
3. ⭐️ Webpack, Babel, Polyfill에 대해 설명해주세요.
4. ⭐️ CSR과 SSR의 차이는 무엇인가요?
5. ⭐️ CORS는 무엇인지, 이를 처리를 해본 경험을 말씀해주세요.
   1. 타 도메인 간에 자원을 공유할 수 있게 해주는 것이다.
6. ⭐️ 웹 표준을 지키며 개발하시나요?
7. 쿠키와 세션에 대해 설명해주세요.
8. 로그인 처리를 할 때 쿠키와 세션을 어떻게 사용하시나요?
9. ⭐️ 이벤트 루프와 태스크 큐에 대해 설명해주세요.
10. bundle의 사이즈를 줄이려면 어떻게 해야 하나요?
11. ⭐️ 타입스크립트를 사용하는 이유는 무엇인가요?
12. ⭐️ 쿠키, 세션, 웹스토리지의 차이에 대해 설명해주세요.
13. 크로스 브라우징 경험이 있으신가요?
14. 웹 소켓을 사용해보셨나요?
15. ⭐️ 웹사이트 성능 최적화에는 어떤 방법이 있나요?

 

HTML, CSS

• Flexbox를 사용해보셨나요?
• ⭐️ Cascading에 관해서 설명해주세요.
• ⭐️ CSS 애니메이션과 JS 애니메이션의 차이에 대해 설명해주세요.
• postition 속성을 나열해주세요.