참고하면 좋을 사이트
https://frontend-interview-question.vercel.app/
https://github.com/Esoolgnah/Frontend-Interview-Questions
DOM(Document Object Model)
Q. DOM의 개념을 설명해 주세요.
DOM은 마크업언어로 된 문서를 자바스크립트같은 프로그래밍언어로 조작할수 있도록 만드는 인터페이스입니다.DOM이 없으면 자바스크립트가 element에 접근이 안됩니다.
Q. DOM은 왜 필요한가요?
마크업언어에는 자바스크립트가 element(객체)에 접근 가능한 인터페이스가 없기 때문입니다.
한마디로 DOM이 있어야 자바스크립트로 동적인 웹 페이지를 만들 수 있다!!!!
DOM은 HTML 문서의 프로그래밍 인터페이스 역할을 하며, 자바스크립트가 웹 페이지의 요소들을 조작할 수 있게 해주는 핵심 요소
객체 = 여러 값과 기능을 담을 수 있는 서랍장
함수 = 특정 작업을 실행하게 하는 설명서
변수 = 물건을 하나씩만 담아두는 상자
Q. DOM을 통해 어떤 동작을 할 수 있나요?
element에 이밴트핸들러를 추가하거나, element에 문서를 추가, 수정, 제거할 수 있습니다.
Q. DOM은 왜 계층적구조로 표현되는지 설명해 주세요.
노드들과의 관계(부모-자식)를 명확히 정의할 수 있기 때문입니다.
이벤트버블링은 아래에서 위로 거품처럼 올라가는 것
이벤트캡처링은 위에서 아래로 순서대로 내려가는 것
Promise
Q. Promise 개념을 설명해주세요.
비동기 작업(네트워크 요청, 타이머 등)을 처리하는 객체입니다. 비동기작업을 .then()과 .catch()만 통해 보다 간결하게 표현.
Promise는 항상 다음 세 가지 상태 중 하나입니다.
1. 대기(Pending): 초기 상태, 작업이 아직 완료되지 않음 "햄버거 주문 전"
2. 이행(Fulfilled): 작업이 성공적으로 완료됨 "햄버거 주문 후"
3. 거부(Rejected): 작업이 실패함 "햄버거 주문 실패"
Q. Promise 등장 이전에는 어떻게 비동기처리를 했는지 설명해주세요.
비동기처리를 하는 함수에 성공 콜백과 실패 콜백을 각각 넣어 처리했습니다. 이럴경우 코드가 길어져 가독성이 떨어졌지만(callback hell) promise로 비동기처리시 에러처리를 한번에 해줘서 가독성이 올라갔습니다.
동기 작업과 비동기 작업의 차이
Q. async-await에 대해 설명해주세요.
Promise의 완료를 기다리게 하는 문법
async 함수: 항상 Promise를 반환하는 함수를 정의합니다
await 키워드: Promise가 완료될 때까지 실행을 일시 중지하고 결과값을 반환합니다
Q. async-await사용시 주의 할 점은?
에러핸들링은 try-catch 블록에서 하며, 실행 흐름을 고려하여 적절한 위치에 써야 함(어디서 에러가 났는지, 각 에러를 어떻게 처리할지에 따라 try-catch 위치를 결정)
👆 예시로 커피만들기를 그냥 실패로 하면 어떤 에러가 났는지 알 수 없음
Key
Q. React란 무엇인가요?
SPA 사용자 인터페이스를 개발하는데 유용한 라이브러리, 컴포넌트 기반 접근 방식
특징
1. 컴포넌트 기반 구조
2. 가상 DOM 사용
3. 단방향 데이터 흐름
4. 선언적 프로그래밍Q. React에서 사용되는 Key는 무엇인지 설명하세요.
key는 고유한 값. 재조정 단계에서 각 node의 key값을 비교하여
추가/삭제/순서 변경된 Node를 식별하기 위함
Q. 배열에 index를 key값으로 사용하면 안되는 경우는?
순서가 변경되어도 동일한 Key값이 유지되기 때문에
Q. 고유한 key값이 없는 경우 대체 방법은?
다른 Props를 적절히 조합하여 고유한 값을 만든다.
JavaScript는 Single Thread다.
비동기작업이 완료되었을 때 Main Thread에서 실행할 함수 = callback함수
Event loop란 Event Queue와 Call Stack사이에 존재하는 일종의 신호등
Q. Reflow란 무엇인지 설명해주세요.
웹 페이지 내에서 요소의 위치 또는 크기에 변화가 있을 때, 변화된 레이아웃을 다시 계산하는 과정
크기, 위치, 레이아웃, 폰트크기 관련
Q. Repaint란 무엇인지 설명해주세요.
웹 페이지 내에서 요소의 시각적인 표현에 변화가 있을때 변화된 표현을 다시 계산하는 과정
색상 관련
Q. Reflow와 Repaint의 성능상 차이점을 설명해주세요.
Reflow는 CPU부하가 큰 작업이므로, Reflow를 최소화 해야함
Q. Reflow를 최소화 하기 위한 방법은?
가급적 레이아웃 변경이 적은 요소 사용 (position 속성을 fixed, absolute같은 값 사용)
Virtual DOM
Q. Virtual DOM의 개념에 대해 설명하세요.
웹 성능을 최적화하기 위해 사용되는 DOM관리 방법
변경점을 찾아내서, 찾아낸 변경점에만 실제 DOM을 적용
Q. Virtual DOM의 동작하는 예시를 설명해주세요.
Q. state와 props가 변경될 때 마다 diffing과 reconciliation이 수행되는건가요?
X. 여러개의 상태 변화를 하나로 묶어 Batch update함
Diffing (차이점 찾기)
이전 Virtual DOM과 새 Virtual DOM 트리를 비교하는 과정
Reconciliation (조정)
Diffing으로 찾아낸 차이점을 실제 DOM에 효율적으로 적용하는 과정
Q. Virtual DOM을 사용하는 것이 그렇지 않은 것보다 좋은건가요?
X. 간단한 앱은 오히려 오버헤드 초래. 대규모 앱에서는 굿.
호이스팅
Q. 호이스팅이란 무엇인가요?
코드를 실행하기 전에 변수나 함수 선언을 스코프 최상단으로 끌어올리는 JavaScript 동작
Q. 변수와 함수 모두 호이스팅이 동일하게 동작하나요?
변수는 선언만 호이스팅 되지만, 함수는 선언과 초기화 모두 호이스팅 됨
Q. 왜 함수만 초기화과정까지 호이스팅 되나요?
함수가 어디서 선언되든 스코프 내 어디서나 사용할 수 있도록 JavaScript가 설계됨
Q. 왜 let과 const로 선언한 변수는 초기화전에 접근할 수 없도록 막아 놓았나요?
let과 const는 코드 안정성과 예측 가능성을 높이기 위해 TDZ(Temporal Dead Zone)를 적용. (var의 undefined 초기화는 많은 버그를 유발했고, 변수가 선언된 위치에서만 사용하도록 강제함으로써 코드 품질을 개선합니다. 또한 상수인 const의 특성(항상 초기화 필요)과의 일관성을 유지합니다.)
Q. var, let, const 차이점?
var(변수)는 재선언, 재할당이 가능하고, let(변수)은 재선언 불가, 재할당이 가능하고, const(상수)는 재선언과 재할당이 불가합니다. 현재는 var보다 let, const사용이 권장됩니다.
Q. 자바스크립트는 인터프리터 언어인데, 어떻게 호이스팅 현상이 일어날 수 있는거죠?
자바스크립트 엔진은 파싱과 실행이라는 두 단계를 거쳐 코드를 실행하기 때문에
인터프리터란 코드를 한 줄씩 읽어서 바로 실행하는 프로그램
Q. 화살표 함수와 function 키워드의 차이점은?
화살표 함수와 일반 함수의 가장 중요한 차이는 this의 동작
일반 함수(function):
this는 함수를 "누가" 호출했는지에 따라 달라집니다
버튼 클릭 핸들러에서는 버튼이this가 됩니다
객체 메서드에서는 그 객체가this가 됩니다
화살표 함수(=>):
this가 함수가 "어디서" 정의되었는지에 고정됩니다
버튼 클릭 핸들러에서도 상위 스코프의this를 유지합니다
객체 메서드로 쓰면 객체가 아닌 바깥 스코프의this를 가리킵니다
Q. this가 뭘까?
this는 JavaScript에서 현재 실행 컨텍스트(누가 함수를 호출했는지)를 참조하는 특별한 키워드
- 일반 함수에서 this는 함수를 호출한 방법에 따라 달라집니다
- 전역 스코프에서는 window 객체
- 객체 메서드에서는 해당 객체
- 이벤트 핸들러에서는 이벤트를 발생시킨 요소
call(),apply(),bind()메서드로 명시적 지정 가능
화살표 함수는 자신만의 this를 생성하지 않고 정의된 범위의 this를 그대로 사용합니다.
Q. 왜 화살표 함수에서도 this가 항상 상위 스코프를 참조하도록 했을까?
this바인딩의 일관된 동작을 보장하며, 코드 흐름에 따른 this값을 예측하기 쉽도록 했음
Q. 스코프란? 자바스크립트의 스코프는 어떻게 동작하나요?
변수나 함수에 접근 가능한 유효범위를 의미, 렉시컬 스코프(정적 스코프) 규칙을 따름
Q. 렉시컬 스코프란?
변수가 어디 정의되어 있는지에 따라 스코프가 결정되는 메커니즘
브라우저
Q. 브라우저 렌더링 순서 설명
Q. HTML파싱 중간에 script태그를 만나면?
파싱을 일시 중단함 (이유:)
Q. async와 defer속성 설명하세요
스크립트를 비동기적으로 로드할 수 있도록 하는 script태그 속성
CORS란?
Q. CORS란 무엇인지 설명해주세요.
CORS 교차 출처 리소스 공유
Q. SOP란?
동일 출저 정책! 현재와 동일한 출처의 리소스만 접근할 수 있도록 하는 정책
Q. SOP가 없을 경우 가능한 보안취약점은?
세션정보탈취 등 해킹
Q. 모든 CORS요청마다 Preflight 요청이 일어나나요?
단순요청, 캐싱이 되어있는 경우X (요청 메서드가 GET, HEAD, POST중 하나일 때)
클로저
함수가 자신이 선언될 당시의 환경(렉시컬 환경)을 기억하는 현상
=> 클로저=useState(클로저기반)
HTTP
HTTP상태 코드는 서버와 클라이언트간의 통신 결과를 숫자로 표현한 응답코드
200번대 상태코드
클라이언트 코드요청 성공
201 = (주로 POST) 요청의 결과로 서버에 리소스 성공적으로 생성
204 = 통신 결과 성공, 응답데이터 따로 전달 X
300번대 상태코드
클라이언트 요청을 다른 리소스 혹은 URL로 유도하는 역할
304 = 현재 요청하는 리소스가 변경X
400번대 상태코드
클라이언트 요청이 잘못 됨
401 = 잘못된 인증 정보로 요청
404 = 요청한 리소스가 서버에 존재 X
400 = 요청 매개변수 잘못 설정
431 = 헤더크기가 너무 큼
405 = HTTP 메서드 잘못 설정
Q. 400번대 vs 500번대 차이점은?
400번대는 클라이언트 요청이 잘못 됨, 500번대는 요청은 서버에 정상적으로 도달했으나 요청 처리 과정 문제 발생(서버 잘못)
Q. 상태코드 꼭 지켜야 하는가?
명확한 상태 코드를 전달해야, 클라이언트 측에서 어떤 에러인지 파악 가능
쿠키
Q. 쿠키특징 설명해 주세요.
웹 클라이언트에서 사용하는 데이터 저장 수단
HTTP 통신 헤더에 자동으로 포함되어 전송, 주로 sessionID와 같이 서버와의 통신에 필요한 데이터를 저장
Q. local storage와 session storage 공통점 설명
자바스크립트를 통해서만 데이터 저장과 접근 가능
Q. local storage와 session storage 차이점 설명
local storage는 탭이나 브라우저를 담아도 데이터 제거X
반면, session storage는 자동으로 제거
Q. Base64인코딩이란?
이전 데이터를 ASCII문자열로 변환하는 인코딩 방식
Q. 언제 사용하나요?
일반적으로 작은 아이콘이나 이미지를 서버에 요청하는 과정없이 브라우저에서 직접 불러오기 위해 사용
Q. JWT에 Base64가 사용되는 이유는?
JWT는 서버에서 발급되어 HTTP헤더나 URL파라미터를 통해 브라우저로 전달 -> 헤더와 페이로드는 JSON데이터로 이루어짐 -> HTTP헤더와 URL파라미터는 문자열만 처리
Q. Base64 인코딩 단점은?
원본데이터에 비해 용량이 33% 증가함
트랜스파일러
Q. 트랜스파일러란?
프로그래밍 언어로 작성된 코드를 다른 언어 또는 다른 문법으로 변환하는 도구
Q. 컴파일러와 트랜스파일러 차이
컴파일러: 프로그래밍 언어로 작성된 코드를 기계어 또는 바이트코드로 변환 (영어를 컴퓨터언어로 변환)
트랜스파일러: 프로그래밍 언어를 또 다른 언어로 변환 (영어를 한국어로 변역)
Q. 트랜스파일러와 폴리필의 차이
트랜스파일러: 빌드타임에서 코드 자체를 변경하는 빌드도구 (빌드타임에 실행)
폴리필: 런타임에서 import하여 호출하는 라이브러리 (런타임에 발생)
Q. React에서 트랜스파일러 사용 이유
브라우저는 JS엔진이 내장 -> 리액트는 JSX문법을 사용하기 때문
빌드타임에서 JSX문법 코드를 표준 JS로 변환해야 하기 때문에
Q. 트랜스파일러가 없으면?
JSX, TS언어로 개발 불가능 -> 개발 편의성과 안정성 낮아짐
CSS-in-JS
