/prepare_frontend_interview

πŸ“š ν”„λ‘ νŠΈμ—”λ“œ 기술 면접을 μœ„ν•œ ν•Έλ“œλΆ λ§Œλ“€κΈ°

prepare_frontend_interview

ν”„λ‘ νŠΈμ—”λ“œ 기술 면접을 μœ„ν•œ ν•Έλ“œλΆ λ§Œλ“€κΈ°

λ©΄μ ‘μ˜ 인터뷰어 뢄듀이 JS의 수 λ§Žμ€ κ°œλ…λ“€μ„ μˆœμ„œλŒ€λ‘œ μ§ˆλ¬Έμ„ ν•˜μ§€λŠ” μ•ŠμŠ΅λ‹ˆλ‹€.

ν•˜μ§€λ§Œ μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ μ—°κ΄€λ˜μ–΄ μžˆλŠ” κ°œλ…λ“€μ„ μˆœμ„œλŒ€λ‘œ λ‚˜μ—΄ν•˜κ³  ν•Έλ“œλΆ ν˜•μ‹μœΌλ‘œ 보닀 보면,

λͺ¨λ₯΄λŠ” κ°œλ…μ„ νŒŒμ•…ν•˜κ³  ν•œλˆˆμ— λ³΄λŠ” 것에 μžˆμ–΄μ„œ 도움이 λ˜μ§€ μ•Šμ„κΉŒ μ‹Άμ–΄ μ œμž‘ν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

크게 β‘  CS β‘‘ HTML/CSS β‘’ JavaScript 둜 λ‚˜λˆ„μ—ˆμŠ΅λ‹ˆλ‹€

β‘  CS인 computer scienceμ—λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 이외에 지식듀에 λŒ€ν•œ 쑰금 μž‘λ‹€ν•œ λ‚΄μš©μ΄ λ‹΄κΈΈ μ˜ˆμ •μž…λ‹ˆλ‹€

λͺ©μ°¨λ₯Ό 보고 ν•΄λ‹Ή λ‚΄μš©μ΄ λ§ˆμŒμ— λ“œμ‹€ κ²½μš°μ— λ³΄μ‹œλŠ” 것을 μΆ”μ²œν•©λ‹ˆλ‹€!

질문의 λΉˆλ„

β‘  JS > β‘‘ CS > β‘’ React > β‘£ HTML/CSS

contribute

β‘  클둠 λ°›κΈ° / 포크 λ°›κΈ°

$ git clone https://github.com/junh0328/prepare_frontend_interview.git

β‘‘ λ‚΄μš© μΆ”κ°€ λ˜λŠ” λ³€κ²½ν•˜κΈ°

ex)

- [νƒ€μž…κ³Ό μΈν„°νŽ˜μ΄μŠ€ πŸ”₯](#νƒ€μž…κ³Ό-μΈν„°νŽ˜μ΄μŠ€) >>> [xxx](#xxx) λ§ˆν¬λ‹€μš΄ ꡬ쑰

  - νƒ€μž…μŠ€ν¬λ¦½νŠΈλ₯Ό μ™œ μ“°λ‚˜μš”? (본인이 λŠλ‚€μ )
  - νƒ€μž…κ³Ό μΈν„°νŽ˜μ΄μŠ€μ˜ 차이λ₯Ό μ•„λ‚˜μš”?
  - μ œλ„€λ¦­μ΄λž€?

β‘’ λͺ©μ°¨μ—λ„ ν•΄λ‹Ή λ‚΄μš© μΆ”κ°€ν•˜κΈ°

ex)

- `νƒ€μž…κ³Ό μΈν„°νŽ˜μ΄μŠ€ πŸ”₯` >>> λ°±ν‹± 내뢀에 제λͺ© κ·ΈλŒ€λ‘œ ν‘œμ‹œ `xxx`

  - νƒ€μž…μŠ€ν¬λ¦½νŠΈλ₯Ό μ™œ μ“°λ‚˜μš”? (본인이 λŠλ‚€μ )
  - νƒ€μž…κ³Ό μΈν„°νŽ˜μ΄μŠ€μ˜ 차이λ₯Ό μ•„λ‚˜μš”?
  - ν”„λ‘œμ νŠΈ 진행 μ‹œμ— μ–΄λ–€ μƒν™©μ—μ„œ νƒ€μž…μ„ μ“°κ³  μ–΄λ–€ μƒν™©μ—μ„œ μΈν„°νŽ˜μ΄μŠ€λ₯Ό μΌλ‚˜μš”?

β‘£ 이슈 생성 및 PR 날리기

μ˜ˆμ‹œ 이슈: (junh0328#6)

ν…œν”Œλ¦Ώμ„ μž‘μ„±ν•΄ λ‘μ—ˆμœΌλ‹ˆ, ν•΄λ‹Ή μ˜ˆμ‹œ μ΄μŠˆμ— 맞좰 μž‘μ„±ν•΄μ£Όμ‹œλ©΄ λ©λ‹ˆλ‹€!

β‘  Computer Science

  • ν”„λ‘œμ„ΈμŠ€μ™€ μŠ€λ ˆλ“œ πŸ”₯

    • ν”„λ‘œμ„ΈμŠ€κ°€ λ­”κ°€μš”?
    • μŠ€λ ˆλ“œκ°€ λ­”κ°€μš”?
    • ν”„λ‘œμ„ΈμŠ€μ™€ μŠ€λ ˆλ“œλŠ” μ–΄λ–€ 차이가 μžˆλ‚˜μš”?

  • μ‹±κΈ€ μŠ€λ ˆλ“œμ™€ λ©€ν‹° μŠ€λ ˆλ“œ πŸ”₯

    • μ‹±κΈ€ μŠ€λ ˆλ“œ μž₯점
    • μ‹±κΈ€ μŠ€λ ˆλ“œ 단점
    • λ©€ν‹° μŠ€λ ˆλ“œ μž₯점
    • λ©€ν‹° μŠ€λ ˆλ“œ 단점

  • HTTP πŸ”₯

    • HTTPλž€ λ­”κ°€μš”?
    • HTTP ν”„λ‘œν† μ½œμ˜ κ°€μž₯ 큰 νŠΉμ§•μ€ λ­”κ°€μš”?
    • URL은 λ­”κ°€μš”?
    • HTTP/1.1 κ³Ό HTTP/2.0의 μ°¨μ΄λŠ” λ­”κ°€μš”?
    • HTTPSλŠ” HTTPλž‘ 뭐가 λ‹€λ₯Έκ°€μš”?
    • 심화) κ³΅κ°œν‚€ (λΉ„λŒ€μΉ­ν‚€) 방식이 λ­”κ°€μš”?

  • μΏ ν‚€ μ„Έμ…˜ πŸ”₯

    • μΏ ν‚€, μ„Έμ…˜μ„ μ™œ μ“°λ‚˜μš”? πŸ”₯πŸ”₯
    • μΏ ν‚€κ°€ λ­”κ°€μš”? πŸ”₯πŸ”₯
    • μ„Έμ…˜μ΄ λ­”κ°€μš”? πŸ”₯πŸ”₯
    • 쿠킀와 μ„Έμ…˜μ˜ μ°¨μ΄λŠ” μ–΄λ–€ 점이 μžˆμ„κΉŒμš”? πŸ”₯πŸ”₯

  • CORS πŸ”₯

    • CORSκ°€ λ­”κ°€μš”?
    • CORSλ₯Ό κ²ͺκ³  직접 ν•΄κ²°ν•΄ λ³Έ κ²½ν—˜μ΄ 있으면 λ§ν•΄μ£Όμ„Έμš”

  • SaaS πŸ”₯

    • SaaSκ°€ λ­”κ°€μš”?
    • 기타 λΉ„μ¦ˆλ‹ˆμŠ€ μœ ν˜•β€‹μ€ 뭐가 μžˆλ‚˜μš”?

  • 개발 방법둠 πŸ”₯

    • 폭포수 λ°©λ²•λ‘ μ΄λž€ λ­”κ°€μš”?
    • μ• μžμΌ λ°©λ²•λ‘ μ΄λž€ λ­”κ°€μš”?

  • Cache πŸ”₯

  • μΊμ‹œλž€ λ¬΄μ—‡μΈκ°€μš”?

  • CI CD πŸ”₯

    • CI CDλž€ λ­”κ°€μš”?

  • CDN πŸ”₯

    • CDNμ΄λž€ λ­”κ°€μš”?

  • ν…ŒμŠ€νŠΈ πŸ”₯

    • ν…ŒμŠ€νŠΈλž€ λ¬΄μ—‡μΈκ°€μš”?
    • ν…ŒμŠ€νŠΈμ˜ μ˜ˆλŠ” μ–΄λ–€ 것듀이 μžˆλ‚˜μš”?
    • ν…ŒμŠ€νŠΈλŠ” μ™œ ν•΄μ•Ό ν•˜λ‚˜μš”?
    • μœ λ‹› ν…ŒμŠ€νŠΈλž€ λ¬΄μ—‡μΈκ°€μš”?
    • 톡합 ν…ŒμŠ€νŠΈλž€ λ¬΄μ—‡μΈκ°€μš”?
    • E2E ν…ŒμŠ€νŠΈλž€ λ¬΄μ—‡μΈκ°€μš”?

  • business logic πŸ”₯

    • business logic μ΄λž€ λ¬΄μ—‡μΈκ°€μš”?

  • Snippet πŸ”₯

    • snippet μ΄λž€ λ¬΄μ—‡μΈκ°€μš”?

  • μ›ΉνŒ© πŸ”₯

    • μ›ΉνŒ©μ΄λž€?
    • λͺ¨λ“ˆμ΄λž€?
    • λͺ¨λ“ˆ λ²ˆλ“€λ§μ΄λž€?
    • μ›ΉνŒ©μ΄ λ“±μž₯ν•œ 이유 μ›ΉνŒ© μ‚¬μš© μ‹œμ— 이점
    • λ°”λ²¨μ΄λž€?
    • μ›ΉνŒ©μ˜ μ£Όμš” 속성 4가지

  • νƒ€μž…κ³Ό μΈν„°νŽ˜μ΄μŠ€ πŸ”₯πŸ”₯πŸ”₯

    • 이 글을 λ³΄μ‹œλŠ” λΆ„λ“€κ»˜
    • νƒ€μž…μŠ€ν¬λ¦½νŠΈλ₯Ό μ™œ μ“°λ‚˜μš”? (본인이 λŠλ‚€μ )
    • νƒ€μž…κ³Ό μΈν„°νŽ˜μ΄μŠ€μ˜ 차이λ₯Ό μ•„λ‚˜μš”?
    • ν”„λ‘œμ νŠΈ 진행 μ‹œμ— μ–΄λ–€ μƒν™©μ—μ„œ νƒ€μž…μ„ μ“°κ³  μ–΄λ–€ μƒν™©μ—μ„œ μΈν„°νŽ˜μ΄μŠ€λ₯Ό μΌλ‚˜μš”?

β‘‘ HTML/ CSS

HTML

  • DOCTYPE πŸ”₯

    • DOCTYPE에 λŒ€ν•˜μ—¬ μ„€λͺ…ν•˜μ‹œμ˜€
    • meta νƒœκ·Έμ— λŒ€ν•΄μ„œ μ•Œκ³  μžˆλ‚˜μš”?
    • meta νƒœκ·Έμ˜ μš”μ†Œμ— λŒ€ν•΄μ„œ μ•„λŠ”λŒ€λ‘œ λ§ν•΄λ³΄μ„Έμš”

  • μ›Ή ν‘œμ€€ 및 μ›Ή μ ‘κ·Όμ„± πŸ”₯

    • μ›Ή ν‘œμ€€μ΄λž€?
    • HTML5μ—μ„œ μΆ”κ°€λœ λ‚΄μš©μ΄ μžˆλ‚˜μš”?
    • μ›Ή μ ‘κ·Όμ„±μ΄λž€?
    • μ›Ή 접근성에 λ§žλŠ” λ§ˆν¬μ—… μ˜ˆμ‹œ λͺ‡κ°€μ§€ λ§ν•΄λ³΄μ‹œμ˜€
    • μ‹œλ©˜ν‹± νƒœκ·Έλž€ 무엇인가 μ™œ μ‚¬μš©ν•˜λŠ”κ°€
    • ν…μŠ€νŠΈ κ΄€λ ¨ νƒœκ·Έ
    • SEOλž€ 무엇인가?
    • Button νƒœκ·Έμ˜ Default type은 무엇인가?
    • Section νƒœκ·Έμ™€ article νƒœκ·Έμ˜ 차이점

  • κ·Έ μ™Έ πŸ”₯

    • 이미지 크기가 클 경우 λ Œλ”λ§ 속도가 λŠλ €μ§ˆν…λ° 이λ₯Ό κ°œμ„ ν•˜κΈ° μœ„ν•œ 방법
    • UIλž€ 무엇인지 μ„€λͺ…ν•˜μ‹œμ˜€

  • SVGλž€ ? πŸ”₯

    • SVG μž₯점과 단점
    • SVG λ‚΄λΆ€ λ„ν˜•μ— λŒ€ν•΄ μ•„λŠ”κ²Œ μžˆλ‚˜μš”?

CSS

  • display πŸ”₯

    • block
    • inline
    • inline-block
    • none

  • position에 λŒ€ν•˜μ—¬ μ„€λͺ…ν•΄λ³΄μ„Έμš”. πŸ”₯

    • static
    • relative
    • fixed
    • absolute

  • floatκ°€ μ–΄λ–»κ²Œ μž‘λ™ν•˜λŠ”κ°€ πŸ”₯

  • Flexboxλ‚˜ Grid μŠ€νŽ™μ„ μ‚¬μš©ν•΄λ³Έ 적이 μžˆλ‚˜μš” ? πŸ”₯

    • flex λ₯Ό μ‚¬μš©ν•˜λŠ” μ΄μœ κ°€ λ¬΄μ—‡μΈκ°€μš”?
    • Gridλ₯Ό μ‚¬μš©ν•˜λŠ” μ΄μœ κ°€ λ¬΄μ—‡μΈκ°€μš”?

  • 이미지 νƒœκ·Έλ₯Ό μŠ€νƒ€μΌλ‘œ λŒ€μ²΄ν•˜λŠ” 법 πŸ”₯

  • λ°˜μ‘ν˜• μ›Ήμ˜ 3μš”μ†Œ πŸ”₯πŸ”₯

  • CSS selectorκ°€ μ–΄λ– ν•œ μ›λ¦¬λ‘œ λ™μž‘ν•˜λ‚˜μš”? πŸ”₯

  • λ°˜μ‘ν˜•μ›Ήκ³Ό μ μ‘ν˜•μ›Ήμ— μ„€λͺ…ν•˜μ‹œμ˜€ πŸ”₯

    • λ°˜μ‘ν˜• μ›Ήμ΄λž€? πŸ”₯
    • μ μ‘ν˜• μ›Ήμ΄λž€?

  • PX, EM에 λŒ€ν•΄ μ„€λͺ…ν•˜μ‹œμ˜€ πŸ”₯πŸ”₯

    • μ ˆλŒ€λ‹¨μœ„
    • μƒλŒ€λ‹¨μœ„
    • px
    • em
    • ex
    • %
    • pt

  • CSS 적용 μš°μ„ μˆœμœ„ πŸ”₯πŸ”₯

  • CSS-in-JS에 λŒ€ν•΄μ„œ μ„€λͺ…ν•΄ μ£Όμ„Έμš”. πŸ”₯

  • CSS μ „μ²˜λ¦¬κΈ°(CSS preprocessors)λ₯Ό μ‚¬μš©ν•΄λ³΄μ…¨λ‚˜μš”? πŸ”₯

    • μ‚¬μš©ν•΄λ΄€λ‹€λ©΄ μž₯점과 단점

  • paddingκ³Ό margin의 차이가 λ¬΄μ—‡μΈκ°€μš”? πŸ”₯

    • padding에 λŒ€ν•˜μ—¬
    • margin에 λŒ€ν•˜μ—¬

β‘’ JavaScript

  • ν”„λ‘œκ·Έλž˜λ° πŸ”₯

    • ν”„λ‘œκ·Έλž˜λ°μ΄λž€ 뭐라고 μƒκ°ν•˜λ‚˜μš”?
    • μ»΄νŒŒμΌλŸ¬λŠ” 뭐고 μΈν„°ν”„λ¦¬ν„°λŠ” λ­”κ°€μš”?

  • μžλ°”μŠ€ν¬λ¦½νŠΈλž€ πŸ”₯

    • μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ νŠΉμ§•μ€ 뭐가 μžˆλ‚˜μš”?

  • λ³€μˆ˜ πŸ”₯

    • λ³€μˆ˜λž€ λ¬΄μ—‡μΈκ°€μš”?
    • μ‹λ³„μžλž€ λ¬΄μ—‡μΈκ°€μš”? πŸ”₯
    • λ³€μˆ˜λ₯Ό μ„ μ–Έν•œλ‹€λŠ” 것은 μ–΄λ–€ 것을 μ˜λ―Έν•˜λ‚˜μš”?
    • var ν‚€μ›Œλ“œλŠ” λ­”κ°€μš”?
    • ν˜Έμ΄μŠ€νŒ…μ΄ λ­”κ°€μš”? πŸ”₯πŸ”₯πŸ”₯πŸ”₯
    • var ν‚€μ›Œλ“œμ˜ λ¬Έμ œμ μ€ 무엇이 μžˆλ‚˜μš”? πŸ”₯πŸ”₯
    • let ν‚€μ›Œλ“œλŠ” var ν‚€μ›Œλ“œμ™€ μ–΄λ–€ 점이 λ‹€λ₯Έκ°€μš”? πŸ”₯πŸ”₯πŸ”₯
    • TDZ πŸ”₯πŸ”₯πŸ”₯
    • const ν‚€μ›Œλ“œλŠ” μ–΄λ–€ νŠΉμ§•μ΄ μžˆλ‚˜μš”? πŸ”₯πŸ”₯
    • μ‹λ³„μž 넀이밍 κ·œμΉ™μ€ μ–΄λ–€ 것듀이 μžˆλ‚˜μš”?
    • 넀이밍 μ»¨λ²€μ…˜μ€ μ–΄λ–€ 것듀이 μžˆλ‚˜μš”?
    • λ¦¬ν„°λŸ΄μ΄ λ­”κ°€μš”?

  • 데이터 νƒ€μž… πŸ”₯

    • 데이터 νƒ€μž…μ˜ μ’…λ₯˜λŠ” μ–΄λ–€ 것듀이 μžˆλ‚˜μš”? πŸ”₯
    • μ‹¬λ²Œ νƒ€μž…μ€ 뭐죠?
    • 데이터 νƒ€μž…μ€ μ™œ ν•„μš”ν• κΉŒμš”? πŸ”₯
    • 정적 타이핑이 λ­”κ°€μš”?
    • 동적 타이핑이 λ­”κ°€μš”?

  • νƒ€μž…λ³€ν™˜κ³Ό 단좕 평가 πŸ”₯

    • λͺ…μ‹œμ  νƒ€μž… λ³€ν™˜μ΄ λ­”κ°€μš”?
    • λͺ…μ‹œμ  νƒ€μž… λ³€ν™˜ ν•¨μˆ˜λ₯Ό 예λ₯Ό λ“€μ–΄λ³Ό 수 μžˆλ‚˜μš”?
    • 암묡적 νƒ€μž… λ³€ν™˜μ΄ λ­”κ°€μš”?
    • truthy / falsy ν•œ 값이 λ­”κ°€μš”?

  • λ°°μ—΄ πŸ”₯

    • μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 배열은 자료ꡬ쑰의 λ°°μ—΄κ³Ό κ°™λ‚˜μš”?
    • λ°°μ—΄μ˜ λ©”μ„œλ“œλŠ” μ–΄λ–€ μ’…λ₯˜κ°€ μžˆλ‚˜μš”?
    • κ³ μ°¨ ν•¨μˆ˜μ— λŒ€ν•΄μ„œ μ•„λ‚˜μš”?
    • forEach λ©”μ„œλ“œμ™€ mapλ©”μ„œλ“œμ˜ 차이점에 λŒ€ν•΄ μ•Œκ³  μžˆλ‚˜μš”?

  • 객체 λ¦¬ν„°λŸ΄ πŸ”₯

    • μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ κ°μ²΄λž€ λ­˜κΉŒμš”?
    • ν•¨μˆ˜μ™€ λ©”μ„œλ“œμ˜ 차이점에 λŒ€ν•΄ μ•Œκ³  κ³„μ‹ κ°€μš”?
    • μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ 객체λ₯Ό μƒμ„±ν•˜λŠ” 방법은 μ–΄λ–€ 것듀이 μžˆλ‚˜μš”?

  • μ›μ‹œ κ°’κ³Ό 객체 비ꡐ πŸ”₯

    • 동적 타이핑을 μ§€μ›ν•˜λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ λ°μ΄ν„°μ˜ νƒ€μž…μ„ 크게 2개둜 λ‚˜λˆ„λŠ” μ΄μœ κ°€ μžˆμ„κΉŒμš”?
    • 값에 μ˜ν•œ 전달이 λ­”κ°€μš”?
    • 참쑰에 μ˜ν•œ 전달이 λ­”κ°€μš”?

  • ν•¨μˆ˜ πŸ”₯

    • μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ ν•¨μˆ˜λ₯Ό μ •μ˜ν•˜λŠ” 방법은 λͺ‡κ°€μ§€κ°€ μžˆλ‚˜μš”?
    • ν•¨μˆ˜ μ„ μ–Έλ¬Έκ³Ό ν•¨μˆ˜ ν‘œν˜„μ‹μ€ μ–΄λ–€ 차이가 μžˆλ‚˜μš”?
    • μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜(IIFE)에 λŒ€ν•΄ μ•Œκ³  μžˆλ‚˜μš”? μ•Œκ³  μžˆλ‹€λ©΄ μ•„λŠ” λ‚΄μš©μ— λŒ€ν•΄ λ§ν•΄λ³΄μ„Έμš”

  • μŠ€μ½”ν”„ πŸ”₯

    • μŠ€μ½”ν”„κ°€ λ­”κ°€μš”? πŸ”₯πŸ”₯πŸ”₯
    • μŠ€μ½”ν”„μ—λŠ” μ–΄λ–€ μ’…λ₯˜κ°€ 있죠? πŸ”₯πŸ”₯
    • λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λ₯Ό μ•„λ‚˜μš”? μ•ˆλ‹€λ©΄ λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λŠ” 무엇을 μ˜λ―Έν•˜λ‚˜μš”? πŸ”₯
    • μ „μ—­ λ³€μˆ˜λ‘œ λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜λ©΄ μƒκΈ°λŠ” λ¬Έμ œμ μ€ 무엇이 μžˆμ„κΉŒμš”?

  • μƒμ„±μž ν•¨μˆ˜μ— μ˜ν•œ 객체 생성 πŸ”₯

    • μƒμ„±μž ν•¨μˆ˜κ°€ λ­”κ°€μš”?
    • 객체 λ¦¬ν„°λŸ΄λ‘œ λ§Œλ“€ λ•Œμ™€λŠ” 무슨 차이가 있죠? μ™œ μƒμ„±μž ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜λ‚˜μš”?
    • μƒμ„±μž ν•¨μˆ˜κ°€ 객체(μΈμŠ€ν„΄μŠ€)λ₯Ό μƒμ„±ν•˜λŠ” 과정에 λŒ€ν•΄ κ°„λž΅ν•˜κ²Œ μ„€λͺ…해쀄 수 μžˆλ‚˜μš”?

  • ν•¨μˆ˜μ™€ 일급 객체 πŸ”₯

    • 일급 객체가 λ­”κ°€μš”?
    • μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ ν•¨μˆ˜κ°€ 일급 객체라면, 일급 객체둜 뭘 ν•  수 μžˆλ‚˜μš”?
    • 꼬리 질문) ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μ΄ λ­”κ°€μš”? πŸ”₯πŸ”₯
    • 꼬리 질문) 순수 ν•¨μˆ˜κ°€ λ­”κ°€μš”? 일반 ν•¨μˆ˜μ™€λŠ” μ–΄λ–€ 차이가 있죠? πŸ”₯πŸ”₯

  • ν”„λ‘œν† νƒ€μž… πŸ”₯

    • 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ°μ€ 무엇을 μ˜λ―Έν•˜λ‚˜μš”? πŸ”₯
    • 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ°μ˜ νŠΉμ§•μ— λŒ€ν•΄ 말해볼 수 μžˆλ‚˜μš”? πŸ”₯
    • μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄μΈκ°€μš”?
    • ν”„λ‘œν† νƒ€μž…μ΄ λ­”κ°€μš”?

  • strict mode πŸ”₯

    • strict modeκ°€ λ­”κ°€μš”?
    • strict modeλ₯Ό 톡해 무엇을 μ˜ˆλ°©ν•  수 있죠?

  • 빌트인 객체 πŸ”₯

    • 빌트인 객체가 λ­”κ°€μš”? μ’…λ₯˜λŠ” μ–΄λ–€κ²Œ 있죠?
    • 래퍼 객체에 λŒ€ν•΄μ„œ μ•Œκ³  μžˆλ‚˜μš”?

  • this πŸ”₯

    • thisκ°€ λ­”κ°€μš”? πŸ”₯
    • this λ°”μΈλ”©μ΄λž€? πŸ”₯
    • thisλŠ” λ™μ μœΌλ‘œ 바인딩이 λœλ‹€κ³  ν•˜λŠ”λ° λ°”μΈλ”©λ˜λŠ” 객체가 μ–΄λ–»κ²Œ λ‹€λ₯΄λ‚˜μš”?

  • μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ πŸ”₯

    • μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— λŒ€ν•΄ λ§ν•΄λ³΄μ„Έμš” πŸ”₯πŸ”₯

  • ν΄λ‘œμ € πŸ”₯

    • ν΄λ‘œμ €μ— λŒ€ν•΄μ„œ μ•„λ‚˜μš”? πŸ”₯πŸ”₯πŸ”₯
    • ν΄λ‘œμ €λ₯Ό μ‚¬μš©ν•˜λ©΄ 뭐가 μ’‹μ£ ? πŸ”₯πŸ”₯
    • ν΄λ‘œμ €λ₯Ό μ–΄λ–»κ²Œ μƒμ„±ν•˜λ‚˜μš”? πŸ”₯

  • 클래슀 πŸ”₯

    • μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ ν΄λž˜μŠ€κ°€ 생기기 μ „μ—λŠ” μ–΄λ–€ λ°©μ‹μœΌλ‘œ 객체지ν–₯ νŒ¨ν„΄μ„ κ΅¬ν˜„ν–ˆλ‚˜μš”?
    • 그럼 μƒμ„±μž ν•¨μˆ˜μ™€ ν΄λž˜μŠ€λŠ” μ–΄λ–€ 차이가 μžˆλ‚˜μš”?
    • 클래슀 μ •μ˜
    • 클래슀의 상속

  • μŠ€ν”„λ ˆλ“œ 문법 πŸ”₯

    • spread 문법이 λ­”κ°€μš”?
    • μ–΄λ–€ μƒν™©μ—μ„œ μ‚¬μš©ν•  수 있죠?

  • ꡬ쑰 λΆ„ν•΄ ν• λ‹Ή πŸ”₯

    • ꡬ쑰 λΆ„ν•΄ 할당이 λ­”κ°€μš”?
    • ꡬ쑰 λΆ„ν•΄ 할당은 크게 μ–΄λ–€ μ’…λ₯˜κ°€ μžˆλ‚˜μš”?

  • λΈŒλΌμš°μ € λ Œλ”λ§ κ³Όμ • πŸ”₯

    • λΈŒλΌμš°μ €μ˜ λ Œλ”λ§ 과정에 λŒ€ν•΄ μ„€λͺ…ν•΄λ³΄μ„Έμš” πŸ”₯
    • λΈŒλΌμš°μ €μ˜ λ Œλ”λ§ 과정에 μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” μ–΄λ–»κ²Œ λ™μž‘ν•˜λ‚˜μš”? πŸ”₯
    • <script></script> νƒœκ·Έλ₯Ό <body></body> νƒœκ·Έ 밑에 λ‘¬μ•Όν•˜λŠ” μ΄μœ κ°€ μžˆμ„κΉŒμš”?

  • DOM πŸ”₯

    • DOM이 λ­”κ°€μš”?
    • DOM을 κ΅¬μ„±ν•˜λŠ” 건 뭐가 μžˆλ‚˜μš”?

  • 이벀트 πŸ”₯

    • 마우슀 이벀트 νƒ€μž…μ—λŠ” 뭐가 μžˆλ‚˜μš”? click 말고 클릭을 λŒ€μ²΄ν•  수 μžˆλŠ” μ΄λ²€νŠΈκ°€ μžˆλ‚˜μš”?
    • κ·Έ 외에 μ•Œκ³  μžˆλŠ” λŒ€ν‘œμ μΈ μ΄λ²€νŠΈκ°€ μžˆλ‚˜μš”?
    • 이벀트 ν•Έλ“€λŸ¬λ₯Ό λ“±λ‘ν•˜λŠ” λ°©μ‹μ—λŠ” μ–΄λ–€ 것듀이 μžˆλ‚˜μš”?
    • 이벀트 μ „νŒŒ(propagation)에 λŒ€ν•΄μ„œ μ•Œκ³  μžˆλ‚˜μš”?
    • 이벀트 μœ„μž„(delegation)에 λŒ€ν•΄μ„œ μ•Œκ³ μžˆλ‚˜μš”? πŸ”₯
    • e.preventDefault 에 λŒ€ν•΄ μ•Œκ³  μžˆλ‚˜μš”?
    • e.stopPropagation

  • 타이머 πŸ”₯

    • 호좜 μŠ€μΌ€μ₯΄λ§μ΄ λ¬΄μ—‡μΈκ°€μš”?
    • 타이머 ν•¨μˆ˜μ—λŠ” μ–΄λ–€ 것듀이 μžˆλ‚˜μš”?
    • μ΄λ²€νŠΈκ°€ κ³Όλ„ν•˜κ²Œ ν˜ΈμΆœλ˜μ–΄ μ„±λŠ₯에 문제λ₯Ό μΌμœΌν‚¬ κ²½μš°μ— ν•  수 μžˆλŠ” μ–΄λ–€ 일을 톡해 ν•΄κ²°ν•  수 μžˆλ‚˜μš”?
    • λ””λ°”μš΄μŠ€μ— λŒ€ν•΄μ„œ μ•Œκ³  μžˆλ‚˜μš”?
    • μ“°λ‘œν‹€μ— λŒ€ν•΄μ„œ μ•Œκ³  μžˆλ‚˜μš”?

  • 비동기 ν”„λ‘œκ·Έλž˜λ° πŸ”₯

    • 동기와 λΉ„λ™κΈ°μ˜ 차이점에 λŒ€ν•΄μ„œ μ„€λͺ…해쀄 수 μžˆλ‚˜μš”? πŸ”₯πŸ”₯

      • ν•œμ€„ μš”μ•½

    • 이벀트 루프와 νƒœμŠ€ν¬ 큐에 λŒ€ν•΄μ„œ μ•Œκ³  μžˆλ‚˜μš”? πŸ”₯πŸ”₯πŸ”₯

    • λ§ˆμ΄ν¬λ‘œνƒœμŠ€ν¬ 큐에 λŒ€ν•΄μ„œ μ•Œκ³  μžˆλ‚˜μš”? πŸ”₯πŸ”₯

    • νƒœμŠ€ν¬ 큐와 λ§ˆμ΄ν¬λ‘œνƒœμŠ€ν¬ 큐 쀑 μ–΄λ–€ 것이 λ¨Όμ € μ‹€ν–‰λ˜λ‚˜μš”? πŸ”₯πŸ”₯

  • Ajax πŸ”₯

    • Ajaxκ°€ λ­”κ°€μš” μ–΄λ–€ 것을 λ‹΄λ‹Ήν•˜κ³  있죠?
    • Ajaxλ₯Ό μ‚¬μš©ν•˜λ©΄ κΈ°μ‘΄ 방식과 μ–΄λ–€ 차이가 μžˆμ„κΉŒμš”?
    • JSON 이 λ­”κ°€μš”?
    • JSON이 μ œκ³΅ν•˜λŠ” 정적 ν”„λ‘œν† νƒ€μž… λ©”μ„œλ“œμ— λŒ€ν•΄ λͺ‡κ°€μ§€ 말해볼 수 μžˆλ‚˜μš”?
    • Ajax둜 HTTP μš”μ²­μ„ 보내기 μœ„ν•΄μ„œλŠ” μ–΄λ–€ 방법을 μ‚¬μš©ν•  수 μžˆλ‚˜μš”?
    • XMLHttpRequest와 fetch λ©”μ„œλ“œμ˜ μ°¨μ΄λŠ” 무엇이라고 μƒκ°ν•˜μ‹œλ‚˜μš”? πŸ”₯

  • REST API πŸ”₯

    • REST APIκ°€ λ­”κ°€μš”?
    • REST API의 ꡬ성은 μ–΄λ–€ 것이 μžˆλ‚˜μš”?
    • REST APIλ₯Ό μ„€κ³„ν•˜λŠ”λ° μ€‘μš”ν•œ 것이 μžˆμ„κΉŒμš”?
    • HTTP μš”μ²­ λ©”μ„œλ“œμ— λŒ€ν•΄μ„œ μ•„λŠ”λŒ€λ‘œ μ–˜κΈ°ν•΄λ³΄μ„Έμš”
    • HTTP μƒνƒœ μ½”λ“œλ₯Ό μ•„λŠ”λŒ€λ‘œ λ§ν•΄μ£Όμ„Έμš” πŸ”₯

  • Promise πŸ”₯

    • μ½œλ°±μ΄λž€ 뭐라고 μƒκ°ν•˜λ‚˜μš”? πŸ”₯
    • ν”„λ‘œλ―ΈμŠ€κ°€ λ­”κ°€μš”? πŸ”₯
    • ν”„λ‘œλ―ΈμŠ€ 생성 방법
    • ν”„λ‘œλ―ΈμŠ€μ˜ μƒνƒœλ₯Ό λ‚˜νƒ€λ‚΄λŠ” 것은 μ–΄λ–€ 것듀이 μžˆλ‚˜μš”? πŸ”₯
    • ν”„λ‘œλ―ΈμŠ€ 빌트인 객체가 μ œκ³΅ν•˜λŠ” 정적 λ©”μ„œλ“œμ— λŒ€ν•΄ μ•Œκ³  μžˆλ‚˜μš”? πŸ”₯

  • μ œλ„ˆλ ˆμ΄ν„°μ™€ async await πŸ”₯

    • μ œλ„ˆλ ˆμ΄ν„°λž€ λ­”κ°€μš”? 일반 ν•¨μˆ˜μ™€λŠ” μ–΄λ–€ 차이가 있죠?
    • μ œλ„ˆλ ˆμ΄ν„°μ˜ ꡬ쑰
    • async/await κ°€ λ­”κ°€μš”? 기쑴의 Promiseμ™€λŠ” μ–΄λ–€ 차이가 있죠? πŸ”₯
    • Promise와 async/await의 차이점 ν•œ 쀄 μš”μ•½ πŸ”₯

  • μ—λŸ¬ πŸ”₯

    • μ—λŸ¬μ²˜λ¦¬λ₯Ό μ™œ ν•΄μ•Ό ν•˜λ‚˜μš”? πŸ”₯
    • μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ μ—λŸ¬λ₯Ό μ²˜λ¦¬ν•˜λŠ” λ°©λ²•μ—λŠ” 뭐가 μžˆμ„κΉŒμš”?

  • λͺ¨λ“ˆ πŸ”₯

    • λͺ¨λ“ˆμ΄ λ­”κ°€μš”?

β‘£ React

  • React μ‹œμž‘πŸ”₯

  • λ¦¬μ•‘νŠΈλŠ” λΌμ΄λΈŒλŸ¬λ¦¬μΈκ°€μš” ν”„λ ˆμž„μ›Œν¬ μΈκ°€μš”?πŸ”₯

  • λ¦¬μ•‘νŠΈλ₯Ό μ‚¬μš©ν•˜λŠ” 이유πŸ”₯πŸ”₯

  • virtual DOM에 λŒ€ν•΄μ„œ μ•„λ‚˜μš”?πŸ”₯πŸ”₯

  • Reactμ—μ„œ ν•¨μˆ˜ μ»΄ν¬λ„ŒνŠΈμ™€ 클래슀 μ»΄ν¬λ„ŒνŠΈμ˜ 차이 πŸ”₯

  • λ¦¬μ•‘νŠΈμ—μ„œ ν•¨μˆ˜ν˜• μ»΄ν¬λ„ŒνŠΈλΌκ³  λΆ€λ₯΄μ§€ μ•Šκ³  ν•¨μˆ˜ μ»΄ν¬λ„ŒνŠΈλΌκ³  λΆ€λ₯΄λŠ” μ΄μœ κ°€ λ¬΄μ—‡μΈκ°€μš” πŸ”₯

  • props와 state의 차이πŸ”₯

  • Propsκ°€ μ»΄ν¬λ„ŒνŠΈκ°„μ— μ „λ‹¬λ°›λŠ” 것이라고 ν–ˆλŠ”λ° μžμ‹μ—μ„œ λΆ€λͺ¨λ‘œλ„ 전달할 수 μžˆλŠ”κ°€ πŸ”₯

  • FLUX에 λŒ€ν•΄μ„œ μ•„λ‚˜μš”? πŸ”₯πŸ”₯

  • λ¦¬λ•μŠ€μ— λŒ€ν•΄μ„œ μ•„λ‚˜μš”? πŸ”₯πŸ”₯

  • λ¦¬λ•μŠ€μ˜ κΈ°λ³Έ 원칙은? πŸ”₯πŸ”₯

  • Reactμ—μ„œ state의 λΆˆλ³€μ„±μ„ μœ μ§€ν•˜λΌλŠ” 말이 μžˆλŠ”λ° 이에 λŒ€ν•΄ μ„€λͺ…해달라 πŸ”₯

  • λ¦¬λ“€μ„œ λ‚΄λΆ€μ—μ„œ λΆˆλ³€μ„±μ„ μ§€ν‚€λŠ” μ΄μœ λŠ”? μ „κ°œ μ—°μ‚°μžμ˜ 단점을 ν•΄κ²°ν•  수 μžˆλŠ” 방법은 무엇인가 πŸ”₯

  • λ¦¬μ•‘νŠΈ μ‚¬μš©μ‹œμ— λΆ€μˆ˜νš¨κ³Όλ‘œ 인해 μƒκΈ°λŠ” 문제점이 μžˆλ‹€λ©΄ πŸ”₯πŸ”₯

    • λΆ€μˆ˜ 효과λ₯Ό μΌμœΌν‚€λŠ” ν•¨μˆ˜ (뢈순 ν•¨μˆ˜)
    • λΆ€μˆ˜ 효과λ₯Ό μΌμœΌν‚€μ§€ μ•ŠλŠ” ν•¨μˆ˜ (순수 ν•¨μˆ˜)
    • μš”μ•½

  • μ»΄ν¬λ„ŒνŠΈμ˜ 라이프 사이클 λ©”μ„œλ“œ πŸ”₯πŸ”₯

    • 이해
    • λ©”μ„œλ“œ μ’…λ₯˜ πŸ”₯

  • Hooks의 μ’…λ₯˜ πŸ”₯πŸ”₯

    • useState
    • useEffect
    • useReducer
    • useMemo
    • useCallback
    • useRef
    • μ»€μŠ€ν…€ Hooks

  • useMemo와 useCallback의 차이λ₯Ό μ•„λ‚˜μš” πŸ”₯πŸ”₯

  • λ¦¬μ•‘νŠΈμ—μ„œ setStateλŠ” 비동기 λ™μž‘μΈκ°€μš” 동기 λ™μž‘μΈκ°€μš”? πŸ”₯

  • setStateκ°€ 비동기 λ™μž‘μ„ μ·¨ν–ˆμ„ λ•Œ 얻을 수 μžˆλŠ” 이점은 λ¬΄μ—‡μΈκ°€μš”? πŸ”₯

  • useLayoutEffectλŠ” λ¬΄μ—‡μΈκ°€μš”? πŸ”₯

  • λ¦¬μ•‘νŠΈμ˜ μ„±λŠ₯κ°œμ„  방법에 λŒ€ν•΄μ„œ μ„€λͺ…ν•΄μ£Όμ„Έμš”

  • μ»΄ν¬λ„ŒνŠΈμ—μ„œ 이벀트λ₯Ό μ‹€ν–‰μ‹œν‚€κΈ° μœ„ν•΄μ„œλŠ” μ–΄λ–»κ²Œ 핸듀링해야 ν•˜λ‚˜μš”?πŸ”₯

  • SPAκ°€ λ­”κ°€μš”?πŸ”₯

    • SPA의 단점

  • SSR이 λ­”κ°€μš”?πŸ”₯

  • SEOκ°€ λ­”κ°€μš”?πŸ”₯

    • TTV, TTI

  • ν•˜μ΄λ“œλ ˆμ΄μ…˜μ— λŒ€ν•΄ μ•Œκ³  μžˆλ‚˜μš” πŸ”₯

  • Next의 λ Œλ”λ§ μˆ˜ν–‰ 방식 πŸ”₯

  • Nextλ₯Ό μ“΄ μ΄μœ κ°€ μžˆλ‚˜μš” ? πŸ”₯

  • Nextλ₯Ό κ΅¬μ„±ν•˜λŠ” κΈ°λ³Έ μ„€μ • νŒŒμΌμ— λŒ€ν•΄μ„œ μ•Œκ³  μžˆλ‚˜μš”? πŸ”₯

  • 사전 λ Œλ”λ§μ„ μœ„ν•΄ μ‚¬μš©ν•΄ λ³Έ ν•¨μˆ˜κ°€ μžˆλ‚˜μš” πŸ”₯

  • Suspense πŸ”₯

    • suspenseκ°€ λ­”κ°€μš”?
    • suspense둜 κ°€λŠ₯ν•œ 것은 μ–΄λ–€ 것듀이 μžˆλ‚˜μš”?

β‘€ 자료ꡬ쑰

  • μžλ£Œκ΅¬μ‘°λž€ λ¬΄μ—‡μΈκ°€μš” πŸ”₯

    • 효율적으둜 데이터λ₯Ό 관리해야 ν•˜λŠ” 이유 (예)

  • λŒ€ν‘œμ μΈ μžλ£Œκ΅¬μ‘°λŠ” μ–΄λ–€ 것듀이 μžˆλ‚˜μš” πŸ”₯

    • μ„ ν˜• ꡬ쑰
    • λΉ„ μ„ ν˜• ꡬ쑰

  • 리슀트 πŸ”₯

  • 큐 πŸ”₯

  • μŠ€νƒ πŸ”₯

  • λ§ν¬λ“œ 리슀트 πŸ”₯

  • 해쉬 ν…Œμ΄λΈ” πŸ”₯

  • 트리 πŸ”₯

  • νž™ πŸ”₯

  • κ·Έλž˜ν”„ πŸ”₯

β‘₯ 'ν”Όλ©΄μ ‘μž'κ°€ μƒκ°ν•˜λŠ” μ˜ˆμƒ 질문 리슀트

⑦ λΉ„λ°€μŠ€λŸ¬μš΄ λ©΄μ ‘ ν›„κΈ° 및 질문 리슀트

레퍼런슀