프론트엔드 기술 면접 질문 20

01카드 20장 전체 보기

1. 1주소창에 URL을 입력하면 무슨 일이 일어나나요?DNS로 IP 조회 → TCP 연결(HTTPS면 TLS 핸드셰이크) → HTTP 요청·응답 → HTML을 파싱해 DOM, CSS로 CSSOM → 렌더 트리 → 레이아웃 → 페인트 → 합성.
2. 2var, let, const의 차이는?var: 함수 스코프, 호이스팅 시 undefined로 초기화, 재선언 가능. let·const: 블록 스코프, 선언 전 접근은 TDZ 에러, 재선언 불가. const는 재할당 불가(객체 내부 값은 바꿀 수 있음).
3. 3클로저란 무엇인가요?함수가 만들어질 때의 렉시컬 환경을 기억해서, 바깥 함수가 끝난 뒤에도 그 변수에 접근하는 것. 쓰임: 상태 숨기기, 함수 팩토리, 디바운스.
4. 4이벤트 루프를 설명해 주세요.콜 스택이 비면 마이크로태스크(Promise.then, queueMicrotask)를 모두 처리하고, 그다음 매크로태스크(setTimeout, I/O) 하나를 실행해요. 렌더링은 태스크 사이에 일어나요.
5. 5==와 ===의 차이는?==는 타입을 바꾼 뒤 비교, ===는 타입과 값을 모두 비교. 예상치 못한 형변환을 막으려면 ===를 기본으로.
6. 6this는 어떻게 정해지나요?호출 방식으로 정해져요. obj.method()는 obj, 그냥 호출은 undefined(엄격 모드), new는 새 객체, call·apply·bind로 지정. 화살표 함수는 바깥의 this를 그대로 써요.
7. 7Promise와 async/await를 설명해 주세요.Promise는 나중에 정해질 값(대기·이행·거부). async 함수는 Promise를 돌려주고, await는 이행될 때까지 그 함수의 실행을 멈춰요. 오류는 try/catch, 동시에 기다릴 땐 Promise.all.
8. 8이벤트 위임이란?자식마다 리스너를 다는 대신 부모 하나에 달고 event.target으로 구분해 처리. 버블링을 이용하고, 나중에 추가되는 요소와 메모리 면에서 유리해요.
9. 9디바운스와 스로틀의 차이는?디바운스: 마지막 호출 뒤 일정 시간 조용하면 한 번 실행(검색 입력). 스로틀: 정해진 간격마다 최대 한 번 실행(스크롤, 리사이즈).
10. 10CORS는 무엇이고 왜 생기나요?브라우저는 다른 출처로의 요청 응답을 기본으로 막아요. 서버가 Access-Control-Allow-Origin 등의 헤더로 허용해야 읽을 수 있고, 단순하지 않은 요청은 먼저 OPTIONS 프리플라이트를 보내요.
11. 11쿠키, localStorage, sessionStorage의 차이는?쿠키: 요청마다 서버로 전송, 약 4KB, 만료·HttpOnly·SameSite 설정. localStorage: 지울 때까지 유지, 약 5MB, JS에서만. sessionStorage: 탭 단위, 탭을 닫으면 사라짐.
12. 12리플로우와 리페인트의 차이는?리플로우: 크기·위치를 다시 계산(비쌈). 리페인트: 색처럼 모양만 다시 그림. transform과 opacity는 합성 단계만 거쳐서 애니메이션에 유리해요.
13. 13React의 가상 DOM과 재조정은?상태가 바뀌면 새 요소 트리를 만들어 이전 트리와 비교(diff)하고, 달라진 부분만 실제 DOM에 반영해요. 목록은 key로 같은 항목을 알아봐요.
14. 14리스트의 key로 index를 쓰면 왜 안 되나요?항목이 추가·삭제·정렬되면 같은 index가 다른 항목을 가리켜서, 입력값 같은 상태가 엉뚱한 항목에 붙고 불필요한 재렌더가 생겨요. 고유한 id를 써요.
15. 15useEffect의 의존성 배열은 어떻게 동작하나요?배열 안 값이 바뀔 때만 실행, 빈 배열이면 마운트 때 한 번. 반환한 정리 함수는 다음 실행 전과 언마운트 때 실행. 의존성을 빠뜨리면 오래된 값(stale closure)을 읽어요.
16. 16useMemo와 useCallback은 언제 쓰나요?렌더 사이에 계산 결과(useMemo)나 함수 참조(useCallback)를 기억해요. 비싼 계산이나 memo된 자식에게 넘길 때만 쓰고, 남용하면 오히려 비용이 늘어요.
17. 17CSR, SSR, SSG의 차이는?CSR: 브라우저에서 JS로 그림(첫 화면 느림, 검색 노출 약함). SSR: 요청마다 서버에서 HTML 생성. SSG: 빌드 때 HTML을 만들어 정적 배포. 서버에서 만든 HTML에 이벤트를 연결하는 과정이 하이드레이션.
18. 18XSS와 CSRF를 어떻게 막나요?XSS: 악성 스크립트 주입 → 출력 이스케이프, innerHTML 지양, CSP. CSRF: 로그인된 사용자 권한으로 원치 않는 요청 → SameSite 쿠키, CSRF 토큰, 중요한 요청은 재확인.
19. 19웹 성능은 어떻게 개선하나요?먼저 측정(Core Web Vitals: LCP·INP·CLS). 번들 분할과 지연 로딩, 이미지 크기·형식 최적화, 캐싱, 중요한 리소스 우선 로드, 불필요한 리렌더 줄이기.
20. 20웹 접근성을 위해 기본으로 하는 것은?시맨틱 태그, 이미지 alt, 입력과 label 연결, 키보드로 모두 조작 가능·포커스 표시, 글자 대비 4.5:1, ARIA는 시맨틱 태그로 안 될 때만.

02외움에서 외우면

03다른 단어장