🀯 ν”„λ‘ νŠΈμ—”λ“œ 인터뷰가 더 이상 쉽지 μ•Šλ‹€ β€” 이 10κ°€μ§€ μ–΄λ €μš΄ μ§ˆλ¬Έμ— λŒ€λΉ„ν•˜μ„Έμš”

λ°œν–‰: (2026λ…„ 1μ›” 4일 μ˜€ν›„ 11:00 GMT+9)
6 min read
원문: Dev.to

Source: Dev.to

Cover image for 🀯 Frontend Interviews Are Not Easy Anymore β€” Be Ready for These 10 Tough Questions

κ°œμš”

2025년에 ν”„λ‘ νŠΈμ—”λ“œ 개발자 역할을 μ–»λŠ” 것은 이제 JavaScriptλ‚˜ React, Angular, Vue 같은 인기 ν”„λ ˆμž„μ›Œν¬λ§Œ μ•Œλ©΄ λ˜λŠ” 것이 μ•„λ‹™λ‹ˆλ‹€.
μ˜€λŠ˜λ‚  면접은 훨씬 깊이 λ“€μ–΄κ°‘λ‹ˆλ‹€ β€” μ±„μš© λ‹΄λ‹ΉμžλŠ” 웹이 μ‹€μ œλ‘œ μ–΄λ–»κ²Œ λ™μž‘ν•˜λŠ”μ§€ μ΄ν•΄ν•˜κ³  있기λ₯Ό κΈ°λŒ€ν•©λ‹ˆλ‹€.

ν”„λ‘ νŠΈμ—”λ“œ 면접을 μ€€λΉ„ν•˜κ³  μžˆλ‹€λ©΄, μ‹€μ „μ—μ„œ λ‚˜μ˜¬ 수 μžˆλŠ” 10κ°€μ§€ μ§ˆλ¬Έμ„ μ†Œκ°œν•©λ‹ˆλ‹€ πŸ‘‡

1️⃣ google.com을 λΈŒλΌμš°μ €μ— μž…λ ₯ν•˜λ©΄ μ •ν™•νžˆ 무슨 일이 μΌμ–΄λ‚˜λ‚˜μš”?

전체 흐름을 μ„€λͺ…ν•˜μ„Έμš”:

  1. DNS 쑰회
  2. TCP ν•Έλ“œμ‰μ΄ν¬
  3. TLS μ„€μ •
  4. HTTP μš”μ²­
  5. μ„œλ²„ 응닡
  6. λ Œλ”λ§ νŒŒμ΄ν”„λΌμΈ
  7. JavaScript μ‹€ν–‰

2️⃣ TCP vs UDP β€” μ‹€μ œ μ˜ˆμ‹œμ™€ ν•¨κ»˜ μ„€λͺ…ν•  수 μžˆλ‚˜μš”?

  • TCP – μ‹ λ’°μ„± 있고 μˆœμ„œκ°€ 보μž₯되며 였λ₯˜ 검사가 μ΄λ£¨μ–΄μ§€λŠ” 전솑(예: μ›Ή λΈŒλΌμš°μ§•, 이메일, 파일 전솑).
  • UDP – 더 λΉ λ₯΄κ³  연결이 μ—†μœΌλ©° 전솑 보μž₯이 μ—†λŠ” 방식(예: μ˜μƒ 슀트리밍, κ²Œμž„, VoIP).

3️⃣ HTTP와 HTTPSλŠ” λ‚΄λΆ€μ μœΌλ‘œ μ–΄λ–»κ²Œ λ™μž‘ν•˜λ‚˜μš”?

TLS/SSL μ•”ν˜Έν™”λ₯Ό μ„€λͺ…ν•˜κ³ , 이것이 MITM(Man‑in‑the‑Middle) 곡격을 μ–΄λ–»κ²Œ λ°©μ§€ν•˜λŠ”μ§€, 그리고 HTTPSκ°€ ν˜„λŒ€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ— ν•„μˆ˜μΈ 이유(λΈŒλΌμš°μ €κ°€ 이제 HTTPλ₯Ό λ³΄μ•ˆ μœ„ν—˜μœΌλ‘œ ν‘œμ‹œ)λ₯Ό μ„œμˆ ν•˜μ„Έμš”.

4️⃣ HTTP/1.1 vs HTTP/2.0 β€” μ„±λŠ₯ μΈ‘λ©΄μ—μ„œ μ™œ μ€‘μš”ν•œκ°€μš”?

  • HTTP/1.1 – 병렬 처리 μ œν•œ, ν—€λ“œβ€‘μ˜€λΈŒβ€‘λΌμΈ 차단.
  • HTTP/2 – λ©€ν‹°ν”Œλ ‰μ‹±, 헀더 μ••μΆ•, μ„œλ²„ ν‘Έμ‹œ.

이 차이λ₯Ό μ΄ν•΄ν•˜λ©΄ μ„±λŠ₯ μ΅œμ ν™”μ— λŒ€ν•œ 관심을 보여쀄 수 μžˆμŠ΅λ‹ˆλ‹€.
πŸ‘‰ Explained on FrontendGeek

5️⃣ HTTP μš”μ²­/응닡 라이프사이클을 λ‹¨κ³„λ³„λ‘œ μ„€λͺ…ν•΄ μ£Όμ„Έμš”

URL μž…λ ₯λΆ€ν„° μ΅œμ’… λ Œλ”λ§κΉŒμ§€ λ‹€μŒμ„ λ‹€λ£¨μ„Έμš”:

  1. μš”μ²­ 전솑 – 헀더와 λ°”λ””.
  2. μ„œλ²„ 처리 – 헀더와 데이터가 ν¬ν•¨λœ 응닡.
  3. λΈŒλΌμš°μ € νŒŒμ‹± 및 λ Œλ”λ§ – HTML β†’ CSSOM β†’ JS μ‹€ν–‰ β†’ λ ˆμ΄μ•„μ›ƒ β†’ 페인트 β†’ ν•©μ„±.

6️⃣ JWT vs OAuthβ€―2.0 vs OpenID Connect β€” μ–Έμ œ 각각을 μ‚¬μš©ν•˜λ‚˜μš”?

  • JWT (JSON Web Tokens) – λ¬΄μƒνƒœ 인증, κ°„λ‹¨ν•œ μ‚¬μš© 사둀.
  • OAuthβ€―2.0 – 제3자 μ ‘κ·Ό κΆŒν•œ λΆ€μ—¬(예: β€œGoogle λ‘œκ·ΈμΈβ€).
  • OpenID Connect – OAuthβ€―2.0 μœ„μ— κ΅¬μΆ•λœ 신원 인증 λ ˆμ΄μ–΄.

7️⃣ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ XSS, CSRF, CORS λ¬Έμ œλ‘œλΆ€ν„° μ–΄λ–»κ²Œ λ³΄ν˜Έν•  수 μžˆλ‚˜μš”?

  • XSS – μž…λ ₯ μ΄μŠ€μΌ€μ΄ν”„, CSP 헀더, μ •ν™” 라이브러리.
  • CSRF – CSRF 토큰, SameSite μΏ ν‚€.
  • CORS – μ˜¬λ°”λ₯Έ μ„œλ²„ 헀더 μ„€μ •, ν”„λ¦¬ν”ŒλΌμ΄νŠΈ μš”μ²­ 이해.

8️⃣ DOM vs Canvas λ Œλ”λ§ β€” μ–Έμ œ 각각을 μ‚¬μš©ν•΄μ•Ό ν•˜λ‚˜μš”?

  • DOM λ Œλ”λ§ – UI 쀑심, μ ‘κ·Όμ„± 확보, ν…μŠ€νŠΈκ°€ λ§Žμ€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ— 이상적.
  • Canvas λ Œλ”λ§ – κ²Œμž„, 무거운 κ·Έλž˜ν”½, μ• λ‹ˆλ©”μ΄μ…˜, μ‹€μ‹œκ°„ λ Œλ”λ§μ— 졜적.

9️⃣ Long Polling vs WebSockets vs Server‑Sent Events (SSE)

  • Long Polling – μ—…λ°μ΄νŠΈλ₯Ό μœ„ν•œ 반볡 μš”μ²­.
  • WebSockets – 전이쀑, 지속 μ—°κ²°.
  • SSE – μ„œλ²„κ°€ ν΄λΌμ΄μ–ΈνŠΈμ— 이벀트λ₯Ό ν‘Έμ‹œ(단방ν–₯).

πŸ”Ÿ Local Storage vs Session Storage vs Cookies β€” μ–΄λŠ 것을 선택해야 ν• κΉŒμš”?

  • Local Storage – 영ꡬ적인 킀‑값 μ €μž₯μ†Œ(5–10β€―MB).
  • Session Storage – 탭을 λ‹«μœΌλ©΄ μ‚­μ œ.
  • Cookies – 크기가 μž‘κ³  λͺ¨λ“  μš”μ²­μ— ν•¨κ»˜ 전솑(인증 토큰에 적합).

🧠 마무리 생각

ν”„λ‘ νŠΈμ—”λ“œ 면접이 점점 μ–΄λ €μ›Œμ§€λŠ” μ΄μœ λŠ” 기업이 디버깅, μ΅œμ ν™”, μ‹€μ œ μ„œλΉ„μŠ€ 규λͺ¨ ν™•μž₯κΉŒμ§€ ν•  수 μžˆλŠ” 개발자λ₯Ό μ›ν•˜κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€ β€” λ‹¨μˆœνžˆ React둜 ν•  일 λͺ©λ‘ 앱을 λ§Œλ“œλŠ” μˆ˜μ€€μ΄ μ•„λ‹ˆλΌ 말이죠.

이 10κ°€μ§€ μ§ˆλ¬Έμ— μžμ‹  있게 λ‹΅ν•  수 μžˆλ‹€λ©΄ λ‹€μŒ λ©΄μ ‘μ—μ„œ 돋보일 수 μžˆμŠ΅λ‹ˆλ‹€.

πŸ‘‰ λ©΄μ ‘μ—μ„œ 이 쀑 μ–΄λ–€ μ§ˆλ¬Έμ„ 받은 적 μžˆλ‚˜μš”?

Back to Blog

κ΄€λ ¨ κΈ€

더 보기 Β»

Reactμ—μ„œ κ°„λ‹¨ν•œ Carousel/Slider λ§Œλ“€κΈ°

μΊλŸ¬μ…€ λ˜λŠ” μŠ¬λΌμ΄λ”λŠ” μ΄λ―Έμ§€λ‚˜ μ½˜ν…μΈ λ₯Ό ν•˜λ‚˜μ”© ν‘œμ‹œν•˜λŠ” ν›Œλ₯­ν•œ λ°©λ²•μž…λ‹ˆλ‹€. λ²„νŠΌμ„ μ‚¬μš©ν•˜μ—¬ 이λ₯Ό 탐색할 수 μžˆμŠ΅λ‹ˆλ‹€. μ•„λž˜λŠ” κ°„λ‹¨ν•œ κ΅¬ν˜„...

React μ„œλ°‹ 2026

React Summit 2026 컀버 이미지 https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.a...