스터디 - 모의면접 질문 정리(17주차 적용완료)

[vi2920va]

스터디에서 팀원들이 질문한 것을 한 군데 모아 정리하는 공간입니다.

FrontEnd

• UI/UX

  • 디자인 시안 받았을 때, 사용자 관점에서 고민하고 개발하는지 말해주세요.

• SPA

  • SPA에 대해 생각하는 단점은 무엇인지 말해주세요.
  • SEO란 무엇인지 설명해주세요.

• SSR/CSR

  • SSR/CSR의 진행과정에 대해 설명해주세요.

• CORS

  • CORS 어떤한 경우하는지 ?
  • CORS 장단점 대해서 설명해주세요.

• 크로스브라우징

  • 크로스플랫폼 이슈 해결방법에 대해 이야기해주세요.
  • 점유율이 낮은 브라우저에 폰트/이미지가 깨질 경우 해결할 수 있는 방안 없나요?

• Local/Session storage, Cookie

  • 각각의 차이와 사용사례에 대해 말해주세요.

• Webpack

  • 웹팩은 왜 사용하나요?
  • 웹팩과 같은 기능을 하는 것으로 어떤 것이 있을까요?
  • 직접 웹팩설정을 통해 리액트 프로젝트를 세팅해본적이 있는가요?

• Test

  • 실제로 하고 있는 테스트가 있나요?
  • IE와 E2E 테스트의 차이가 뭔지
  • Integration test와 E2E 테스트는 뭐가 다른가요?
  • Unit test, Integration test, E2E test의 차이가 뭔가요?

• ETS

  • Preload Scanner DOM 트리가 뭔지

• import, require

  • import 키워드는 모른 브라우저에서 사용 가능하지 않다고 하셨는데 그 이유가 무엇인가요?
  • 브라우저에서 require 키워드를 사용하려면 어떻게 해야되나요?

• Polyfill

  • 폴리필을 왜 사용하나요?
  • Polyfill을 지원해주는 예시를 들어주세요.
  • 폴리필에 대해 설명해주세요

---

HTML/CSS

• 웹 접근성/ 웹표준

• 웹 접근성을 지켜서 프로젝트를 진행한적이 있나요?

• 웹 접근성과 웹표준이 서로 초점을 잡는 부분은 어떤 것인가요?

• 웹 접근성을 위해 사용되는 보조기기가 있나요?

• 웹 표준을 지킴으로 얻는 이득이 있나요?

• html aria 또는 role 대해서 써보신적이 있나요?

• DOCTYPE

  • DOCTYPE을 선언하지 않았을 때 불이익이 존재하나요?
  • DOCTYPE을 생략하면 어떻게 되나요?

• z-index

  • z -index를 사용할만한 예시가 있나요?
  • z -index가 같은 레벨일 때 우선적으로 표시되는 순서는 어떻게 되나요?
  • z-index가 적용 안되는 경우가 있나요?

• box-model

  • box-sizing은 어떤 경우에서 사용하나요?
  • border-box를 적용하면 어떤 점이 이점이 있나요?

---

Network

• 주소창 google.com 치면 일어나는 일

  • https로 요청하면 어떤 점이 달라지나요?
  • DNS 요청은 어떻게 보내나요?
  • Critical rendering path에 대해서 자세한 설명해주세요.

• HTTP

  • http 4xx와 5xx 코드는 어떤 경우에 받게 되나요?

• REST API

  • REST 특징을 말해주세요.
  • RESTful API의 예시와 그렇지 않은 API를 예를 들어서 설명해주세요.

JavaScript

• Data Type

  • 자바스크립트 기본 타입과 참조 타입의 차이는 뭔가요?
  • string은 길이가 계속 늘어나는데 참조타입과의 차이는 뭔가요

• Scope

  • 자바스크립트는 Dynamic scope를 따르나요 Lexical scope를 따르나요?

• this

• bind 함수는 무엇을 반환하나요?

• Promise

  • Promise는 동기인가 비동기 인지 설명해주세요.
  • Promise.all을 사용하는 이유를 말해주세요.
  • Promise.all 과 promise.AllSetteld 차이점은 무엇인가요.
  • Promise.Race 란 무엇이고 언제 사용하나요?
  • PromiseAny와 Promise.Reae 차이점을 설명해주세요.

• async/await

  • async & awiat를 써보신적이 있나요? 써보셨다면 언제인가요?
  • async/await을 사용하면 generator를 완벽히 대체 가능한가요?
  • async/await과 promise의 차이점
  • async/await 의 단점

• 변수(var, let, const)

  • const 쓰는 이유, Object / Array 할당 시 어떻게 되는지 설명해주세요.
  • let,const에서 TDZ가 발생할 때 호이스팅이 된다고 생각하나요?

• Event

  • 이벤트 위임에 사용되는 예시를 말해주세요.

• 표현식과 문

  • 삼항연산자는 문인지 표현식인지 설명해주세요.
  • 표현식과 문 중 어떤 게 더 큰 개념인지 설명해주세요.

• 객체

  • 객체의 참조 값은 자바스크립트 엔진에서 어디에 저장되나요?

• Ajax

  • ajax란 무엇인가요 ?
  • XMLhttpRequest 프로토콜에 대해서 설명해주세요.

• require

• node.js에서는 require를 사용하고 클라이언트에서는 import를 사용하는 이유는 무엇인가요?

• 클로저

  • 자바스크립트에서 클로저는 스코프 체인에 의해 어떻게 구현되나요?

• 실행 컨텍스트

  • 렉시컬 스코프에 대해 설명해주세요.
  • 실행컨텍스트의 실행 단계에서 호이스팅의 개념이 들어가나요?
  • 자바스크립트 엔진에서 실행컨텍스트는 어떻게 동작하나요?
  • 구문 분석 시간에 대해 설명해주실 수 있나요?
  • 자바스크립트는 왜 렉시컬 스코프를 선택했을까요?

• Prototype

  • prototype은 뭔가요?

• 가비지 컬레션

• 가비지 컬렉션이란?

• 가비지 컬렉팅 대상 되는 기준이 뭔가요?

React

• React는 언제 리렌더 되는지 말해주세요.

• 리액트는 조건부 렌더링 할 때 문을 어디다 쓰는지 말해주세요.

• 바벨이 리액트에서 하는 다른 역할은 무엇인가요?

• 자바스크립트로 인한 DOM 혹은 CSS 변경시 리렌더링은 어떤 순서로 그려지나요?

• 라이브러리/프레임워크

  • 라이브러리와 비교했을 때 프레임워크의 장점은 없나요?

• 라이플 사이클

  • 클래스 컴포넌트와 함수형 컴포넌트의 라이프 사이클 차이에 대해 설명해주세요.
  • useEffect로 class component Lifecycle을 대체할 수 있는지 말해주세요.

• useEffect

  • useEffect()를 사용할 때 callback 함수에서 함수를 사용할 때 deps 배열에 어떤 영향을 미치나요?

• ref(useRef)

  • ref가 무엇인가요 ?
  • ref를 리액트 컴포넌트에 전달하려면 어떻게 할까요?
  • forwordRef가 무엇인가요?
  • ref와 state의 차이점은 무엇인가요?

• customHook

  • customHook의 장점은 무엇인가요?
  • 여러 개의 커스텀 훅이 상태 공유가 가능한가요?

• useReducer

  • useReducer와 useState는 동작방식이 어떤가요?
  • useReducer와 useState의 차이는 뭔가요?

---

Redux

• 상태 관리 도구로 리덕스를 왜 사용하나요?

TypeScript

• Basic Type
• unknown과 any의 차이점에 대해 설명해주세요.
• let, const에 대해 설명해주세요.
• 왜 모든 부분에서 최적화를 도입하는 게 적절하지 않은가요?

[ki7348]

• 라이브러리와 비교했을 때 프레임워크의 장점은?
• 점유율이 낮은 브라우저에서 폰트나, 이미지가 튈 경우 해결할 수 있는 방안은?
• SEO란 무엇인가?
• SSR과 CSR의 깊은 과정을 설명해 주세요

[vi2920va]

• 엄격 모드가 아닌 JavaScript에서 암묵적으로 변수 선언되는 방법은 있는가?
• JWT는 언제 사용하는가, JWT는 사용자 수에 비례해서 고민하면되는가?

[bamplee]

• const 쓰는 이유, Object / Array 할당 시 어떻게 되는지
• local/session storage, cookie 각각의 차이와 사용사례
• 크로스플랫폼 이슈 해결방법
• SPA 생각하는 단점

[whdudtod1273]

• class 컴포넌트,함수 컴포넌트 라이프사이클 차이

[vi2920va]

영생님 모의 면접에 질문했던 게 클래스형 컴포넌트와 함수형 컴포넌트의 라이프 사이클 차이를 물어보신거 맞나요?

[vi2920va]

• CORS 어떤한 경우하는지 ?
• CORS 장단점 대해서 설명해주세요.

[Doodream]

• box-sizing은 어떤 경우에서 사용하나요?
• border-box를 적용하면 어떤 점이 이점이 있나요?
• http 4xx와 5xx 코드는 어떤 경우에 받게 되나요?
• 모듈화는 왜 하는 것인가요?
• 웹팩과 같은 기능을 하는 것으로 어떤 것이 있을까요?

[ttumzzi]

• 이벤트 위임 예시
• REST 특징
• RESTful API의 예시와 그렇지 않은 API를 예를 들어서 설명해주세요.

[whdudtod1273]

• React가 리렌더되는 조건
• useMemo, useCallback의 단점
• class component Lifecycle 와 useEffect의 차이
• useEffect로 class component Lifecycle을 대체할 수 있는지

[ki7348]

• 브라우저에서 require 키워드를 사용하려면?
• 트리셰이킹이란?
• import 키워드를 모든 브라우저에서 사용 가능하지 않다고 하셨는데
  사용하지 못할 때는 어떤 방식으로 해결해야 하는지?
• require 키워드에 비해 import 키워드의 장점은?
• 프로미스는 동기인가 비동기인가?
• Promise.all을 사용하는 이유는?
• promiseAll과 promiseAllSetteled의 차이점은?
• promiseRace란 무엇이고 언제 사용하는가?
• promiseAny와 promiseRace의 차이점은?

[NAMU1105]

• 삼항연산자는 문인지 표현식인지
• 표현식과 문 중 더 큰 개념이 어딘지
• 리액트에서 조건부 렌더를 할 때 문을 쓸 수 있는지
• 삼항연산자는 문인지 표현식인지
• 표현식과 문 중 더 큰 개념이 어딘지
• 리액트에서 조건부 렌더를 할 때 문을 쓸 수 있는지

[ttumzzi]

• ref가 뭔가요?
• forwardRef는 뭔가요?

[ki7348]

• ref와 state의 차이점은?
• ref에 저장할만할 값들은 어떤것이 있는지
• 커스텀훅의 장점은?
• 여러 개의 커스텀 훅이 상태공유가 가능한지

[Doodream]

• ref를 리액트 컴포넌트에 전달 하려면 어떻게 할까요?
• 참조값은 자바스크립트 엔진에서 어디에 저장되나요?
• useEffect() 훅 을 사용할 때 callback 함수에서 함수를 사용할때 deps 배열에 어떤 영향을 미치나요?
• ajax 란 무엇인가요?
• XMLhttpRequest 프로토콜에 대해서 설명해주세요.

[NAMU1105]

• 바벨이 리액트에서 하는 다른 역할
• 폴리필은 어떤 기능들을 지원해주는지 예시
• 써본 상태관리 툴은 뭔지, 그 툴을 선택한 이유는?

[whdudtod1273]

• default export를 사용하면 좋은점
• node.js에서는 require를 사용하고 클라이언트에서는 import를 사용하는 이유?
• let,const에서 TDZ가 발생할 때 호이스팅이 된다고 생각하나요?

[ttumzzi]

• useReducer와 useState의 차이는 뭔가요?
• Unit test, Integration test, E2E test의 차이가 뭔가요?
• Integration test와 E2E 테스트는 뭐가 다른가요?

[whdudtod1273]

• z-index가 적용 안되는 경우가 있나요?
• DOCTYPE을 생략하면 어떻게 되나요?
• async/await을 사용하면 generator를 완벽히 대체 가능한가요?
• async/await과 promise의 차이점

[vi2920va]

송현

• async/await 단점은 무엇인지 ?

[Doodream]

두현
JavaScript - 실행컨텍스트

• 렉시컬 스코프에 대해 설명해주세요.
• 실행컨텍스트의 실행 단계에서 호이스팅의 개념이 들어가나요?
• 자바스크립트에서 클로저는 스코프 체인에 의해 어떻게 구현되나요?
• 자바스크립트 엔진에서 실행컨텍스트는 어떻게 동작하나요?

[ttumzzi]

수민
Frontend - 주소창에 google.com을 검색하면 일어나는 일

• 주소창에 google.com을 검색하면 어떤 일이 일어나나요?
• https로 요청하면 어떤 점이 달라지나요?
• DNS 요청은 어떻게 보내나요?
• Critical rendering path에 대해서 자세한 설명 부탁드립니다.

[ttumzzi]

수민

• props.children을 언제 사용하셨나요?
• 제네릭은 뭔가요?
• 제네릭을 사용한 예시

[ki7348]

동기

• 클로저란? 클로저를 사용하는 이유는?
• 클로저를 사용할 때 발생할 수 있는 문제는?
• 메모리 누수 해결방안은?
• 실제 코드를 짜면서 클로저를 사용해 본 적이 있나요?
• react에서 useState를 사용할때 메모리 누수가 발생하는가요?

[vi2920va]

송현

• 재조정이라는 단어라는 무슨 뜻인가요?
• 전역에서 중복된 key 값이 있을 때는 어떻게 되나요?
• 실제 클로저는 어느 상황에 쓰나요?

[NAMU1105]

남은
JavaScript - Event Handler

• 이벤트 핸들러가 무엇인가요?
• 이벤트 핸들러와 콜백함수가 같은 건가요?
• 이벤트 드리븐 프로그래밍이 무엇인가요?
• 이벤트 핸들러 등록법 3가지에 대해 설명해주세요.
• 이벤트 핸들러를 제거할 때 주의해야 하는 점이 있나요?
• 이벤트 핸들러를 제거해야하는 이유가 있나요? 제거해본적이 있나요?

[whdudtod1273]

영생

• 엘리먼트 타입이 다를때 함수 컴포넌트에서는 어떻게 비교가 되는지
• key값을 입력 안했을때 어떻게 되는지
• children을 두개 쓰면 어떻게 되는지

[NAMU1105]

남은

• 자바스크립트는 Dynamic scope를 따르나요 Lexical scope를 따르나요?

• 구문 분석 시간에 대해 설명해주실 수 있나요?

• 자바스크립트는 왜 렉시컬 스코프를 선택했을까요?

• 폴리필에 대해 설명해주세요

• hasOwnProperty는 언제 쓰이나요?

• hasOwnProperty는 뭔가요?

[ttumzzi]

수민

• 자바스크립트 기본 타입과 참조 타입의 차이는 뭔가요?
• string은 길이가 계속 늘어나는데 참조타입과의 차이는 뭔가요
• prototype은 뭔가요?
• 폴리필을 왜 사용하나요?

[NAMU1105]

남은

• 가비지 컬렉션이란?
• 가비지 컬렉팅 대상이 되는 기준이 뭔가요?

[NAMU1105]

남은

• unknown과 any의 차이점

• let, const 내용을 설명해주세요

• 왜 모든 부분에서 최적화를 도입하는 게 적절하지 않은가요?

[NAMU1105]

남은

• unknown vs any
• intersection observer 사용하는 이유
• intersection observer는 언제 사용하는지
• never는 언제 쓰는지
• recoil 렌더링 최적화가 어떻게 이루어지는지