이 글은 ν”„λ‘ νŠΈμ—”λ“œ 직무 λ©΄μ ‘ 질문과 κ΄€λ ¨λœ Github μ €μž₯μ†Œ front-end-interview-handbook λ²ˆμ—­λ³ΈμœΌλ‘œ, μ €μž₯μ†Œμ— Translations ν΄λ”μ˜ λ‚΄μš©κ³Ό λ™μΌν•©λ‹ˆλ‹€.


HTML 질문

ν”„λ‘ νŠΈμ—”λ“œ λ©΄μ ‘ 질문 - HTML μ§ˆλ¬Έμ— λŒ€ν•œ ν•΄μ„€μž…λ‹ˆλ‹€.
Pull Requestλ₯Ό ν†΅ν•œ μ œμ•ˆ, μˆ˜μ • μš”μ²­ ν™˜μ˜ν•©λ‹ˆλ‹€.

DOCTYPE은 무엇을 ν•˜λ‚˜μš”?

DOCTYPE은 document type의 μ•½μ–΄μž…λ‹ˆλ‹€.
DOCTYPE은 항상 DTD(Document Type Definition)와 κ΄€λ ¨λ©λ‹ˆλ‹€.

DTDλŠ” νŠΉμ • λ¬Έμ„œκ°€ μ–΄λ–»κ²Œ κ΅¬μ„±λ˜μ–΄μ•Ό ν•˜λŠ”μ§€ μ •μ˜ν•©λ‹ˆλ‹€(μ˜ˆμ‹œ: button은 span을 포함할 수 μžˆμ§€λ§Œ, divλŠ” 그럴 수 μ—†λ‹€.), 반면, DOCTYPE은 λ¬Έμ„œκ°€ λŒ€λž΅ μ‘΄μ€‘ν• λ§Œν•œ DTDλ₯Ό μ„ μ–Έν•©λ‹ˆλ‹€. (μ˜ˆμ‹œ: 이 λ¬Έμ„œλŠ” HTML DTDλ₯Ό μ‘΄μ€‘ν•œλ‹€.)

μ›Ή νŽ˜μ΄μ§€μ˜λŠ” DOCTYPE 선언이 ν•„μš”ν•©λ‹ˆλ‹€. μœ μ € μ—μ΄μ „νŠΈμ—κ²Œ λ¬Έμ„œκ°€ μ‘΄μ€‘ν•˜λŠ” HTML μ‚¬μ–‘μ˜ 버전을 μ•Œλ¦¬λŠ”λ° μ‚¬μš©λ©λ‹ˆλ‹€.
μœ μ € μ—μ΄μ „νŠΈκ°€ μ˜¬λ°”λ₯Έ DOCTYPE을 μΈμ‹ν•˜λ©΄, λ¬Έμ„œλ₯Ό μ½λŠ”λ°μ— DOCTYPEκ³Ό μΌμΉ˜ν•˜λŠ” no-quirks modeλ₯Ό νŠΈλ¦¬κ±°ν•©λ‹ˆλ‹€.
μœ μ € μ—μ΄μ „νŠΈκ°€ μ˜¬λ°”λ₯Έ DOCTYPE을 μΈμ‹ν•˜μ§€ λͺ»ν•˜λ©΄, quirks modeλ₯Ό νŠΈλ¦¬κ±°ν•©λ‹ˆλ‹€.

HTML5 ν‘œμ€€μ— λŒ€ν•œ DOCTYPE 선언은 <!DOCTYPE html>μž…λ‹ˆλ‹€.

참고자료

[↑] Back to top

μ—¬λŸ¬ μ–Έμ–΄λ‘œ λ˜μ–΄ μžˆλŠ” μ½˜ν…μΈ μ˜ νŽ˜μ΄μ§€λ₯Ό μ–΄λ–»κ²Œ μ œκ³΅ν•˜λ‚˜μš”?

이 μ§ˆλ¬Έμ€ λ‹€μ†Œ λͺ¨ν˜Έν•©λ‹ˆλ‹€. μ—¬λŸ¬ μ–Έμ–΄λ‘œ μ œκ³΅λ˜λŠ” λ‚΄μš©μ˜ νŽ˜μ΄μ§€λ₯Ό μ œκ³΅ν•˜λŠ” 방법에 λŒ€ν•œ, κ°€μž₯ 일반적인 κ²½μš°μ— λŒ€ν•΄ 묻고 μžˆλ‹€κ³  κ°€μ •ν•©λ‹ˆλ‹€. ν•˜μ§€λ§Œ νŽ˜μ΄μ§€ λ‚΄μ˜ λ‚΄μš©μ€ ν•˜λ‚˜μ˜ μΌκ΄€λœ μ–Έμ–΄λ‘œλ§Œ ν‘œμ‹œλ˜μ–΄μ•Όν•©λ‹ˆλ‹€.

HTTP μš”μ²­μ„ μ„œλ²„μ— 보내면, λŒ€κ°œ μš”μ²­ν•˜λŠ” μœ μ € μ—μ΄μ „νŠΈκ°€ Accept-Language 헀더와 같은 κΈ°λ³Έ μ–Έμ–΄ 섀정에 λŒ€ν•œ 정보λ₯Ό λ³΄λƒ…λ‹ˆλ‹€. κ·Έ λ‹€μŒ μ„œλ²„λŠ” 이 정보λ₯Ό μ‚¬μš©ν•˜μ—¬ ν•΄λ‹Ή μ–Έμ–΄κ°€ 제곡 κ°€λŠ₯ν•œ 경우, ν•΄λ‹Ή μ–Έμ–΄ λ²„μ „μ˜ λ¬Έμ„œλ₯Ό λ°˜ν™˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ°˜ν™˜λœ HTML λ¬Έμ„œλŠ” <html lang="en">...</html>κ³Ό 같이 <html> νƒœκ·Έμ— lang 속성을 μ„ μ–Έν•΄μ•Ό ν•©λ‹ˆλ‹€.

λ°±μ—”λ“œμ—μ„œ, HTML λ§ˆν¬μ—…μ€ YML λ˜λŠ” JSON ν˜•μ‹μœΌλ‘œ μ €μž₯된 νŠΉμ • 언어에 λŒ€ν•œ i18n placeholder와 λ‚΄μš©μ„ ν¬ν•¨ν•©λ‹ˆλ‹€. κ·Έ λ‹€μŒ μ„œλ²„λŠ” 일반적으둜 λ°±μ—”λ“œ ν”„λ ˆμž„μ›Œν¬μ˜ 도움을 λ°›μ•„ νŠΉμ • μ–Έμ–΄λ‘œ HTML νŽ˜μ΄μ§€λ₯Ό 동적 μƒμ„±ν•©λ‹ˆλ‹€.

참고자료

[↑] Back to top

λ‹€κ΅­μ–΄ μ‚¬μ΄νŠΈλ₯Ό λ””μžμΈν•˜κ±°λ‚˜ κ°œλ°œν•  λ•Œ μ£Όμ˜ν•΄μ•Όν•  사항은 λ¬΄μ—‡μΈκ°€μš”?

  • HTML에 lang 속성을 μ‚¬μš©ν•©λ‹ˆλ‹€.
  • μ‚¬μš©μžλ₯Ό κ·Έλ“€μ˜ λͺ¨κ΅­μ–΄λ‘œ μ•ˆλ‚΄ν•©λ‹ˆλ‹€ - μ‚¬μš©μžκ°€ λ²ˆκ±°λ‘­μ§€ μ•Šλ„λ‘ μ‰½κ²Œ κ΅­κ°€/μ–Έμ–΄λ₯Ό λ³€κ²½ν•  수 μžˆλ„λ‘ ν•©λ‹ˆλ‹€.
  • ν…μŠ€νŠΈλ₯Ό ν¬ν•¨ν•œ 이미지λ₯Ό μ‚¬μš©ν•˜λŠ” 것은 ν™•μž₯κ°€λŠ₯ν•œ 접근이 μ•„λ‹™λ‹ˆλ‹€ - 이미지에 ν…μŠ€νŠΈλ₯Ό λ°°μΉ˜ν•˜λŠ” 것은 잘 보이고 μ‹œμŠ€ν…œ 글꼴이 μ•„λ‹Œ 글꼴을 λͺ¨λ“  컴퓨터에 ν‘œμ‹œν•˜λŠ”λ° μ—¬μ „νžˆ 널리 μ‚¬μš©λ˜λŠ” λ°©λ²•μž…λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ 이미지에 ν…μŠ€νŠΈλ₯Ό λ²ˆμ—­ν•˜λ €λ©΄, ν…μŠ€νŠΈ λ¬Έμžμ—΄μ— 각 언어에 λŒ€ν•΄ λ§Œλ“€μ–΄μ§„ 별도 이미지가 ν•„μš”ν•©λ‹ˆλ‹€. 이 같은 λŒ€μ²΄ 방식이 λŠ˜μ–΄λ‚˜λ©΄ 금방 ν†΅μ œκ°€ μ–΄λ €μ›Œμ§‘λ‹ˆλ‹€.
  • 단어/λ¬Έμž₯ 길이 μ œν•œ - 일뢀 μ–Έμ–΄λŠ” λ‹€λ₯Έ μ–Έμ–΄λ‘œ μž‘μ„±λ  λ•Œ 더 κΈΈμ–΄μ§ˆ μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. λ””μžμΈμ— λ ˆμ΄μ•„μ›ƒμ΄λ‚˜ μ˜€λ²„ ν”Œλ‘œμš° 문제 λ°œμƒμ— μ£Όμ˜ν•˜μ„Έμš”. λ””μžμΈμ— ν•„μš”ν•œ ν…μŠ€νŠΈμ˜ 양을 μ •ν•˜κ±°λ‚˜, λ””μžμΈμ΄ 꺠질 수 μžˆλŠ” λ””μžμΈμ€ ν•˜μ§€ μ•Šλ„λ‘ ν•˜λŠ” 것이 κ°€μž₯ μ’‹μŠ΅λ‹ˆλ‹€. 문자 수 μ œν•œμ€ 제λͺ©, λ ˆμ΄λΈ”, λ²„νŠΌκ³Ό 같은 ν•­λͺ©μ—μ„œ μ‚¬μš©λ©λ‹ˆλ‹€. λ³Έλ¬Έμ΄λ‚˜ λŒ“κΈ€κ³Ό 같이 자유둭게 흐λ₯΄λŠ” ν…μŠ€νŠΈμ— λŒ€ν•΄μ„œλŠ” λ¬Έμ œκ°€ λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
  • 색상이 μ–΄λ–»κ²Œ 이해될지에 λŒ€ν•΄ 주의 κΉŠκ²Œλ³΄μ„Έμš” - 색상은 언어와 문화에 따라 λ‹€λ₯΄κ²Œ μΈμ‹λ©λ‹ˆλ‹€. μ μ ˆν•œ 색상을 μ‚¬μš©ν•˜μ—¬ λ””μžμΈν•΄μ•Ό ν•©λ‹ˆλ‹€.
  • λ‚ μ§œμ™€ 톡화 ν˜•μ‹ - λ‚ μ§œλŠ” μ’…μ’… λ‹€λ₯Έ λ°©μ‹μœΌλ‘œ ν‘œν˜„λ©λ‹ˆλ‹€. 예) 미ꡭ의 "May 31, 2012" vs. 유럽의 "31 May 2012".
  • λ²ˆμ—­λœ λ¬Έμžμ—΄μ„ μ—°κ²°ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€ - "였늘의 λ‚ μ§œλŠ” " + date + "μž…λ‹ˆλ‹€" 와 같은 것은 ν•˜μ§€λ§ˆμ„Έμš”. λ‹¨μ–΄μ˜ μˆœμ„œκ°€ λ‹€λ₯Έ μ–Έμ–΄μ—μ„œλŠ” λ¬Έμžκ°€ λ§κ°€μ§€κ²Œλ©λ‹ˆλ‹€. λŒ€μ‹  각 언어에 λŒ€ν•œ λ§€κ°œλ³€μˆ˜μ™€ ν•¨κ»˜ ν…œν”Œλ¦Ώ μŠ€νŠΈλ§μ„ μ‚¬μš©ν•˜μ„Έμš”. 예λ₯Ό λ“€λ©΄, μ˜μ–΄μ™€ ν•œκ΅­μ–΄λ‘œλœ λ‹€μŒ 두 λ¬Έμž₯을 λ³΄μ„Έμš”. I will travel on {% date %}, λ‚˜λŠ” {% date %}에 μ—¬ν–‰ κ°ˆκ±°μ•Ό. λ³€μˆ˜μ˜ μœ„μΉ˜λŠ” μ–Έμ–΄μ˜ 문법에 따라 λ‹¬λΌμ§‘λ‹ˆλ‹€.
  • μ–Έμ–΄λ₯Ό μ½λŠ” λ°©ν–₯ - μ˜μ–΄λŠ” μ™Όμͺ½μ—μ„œ 였λ₯Έμͺ½μœΌλ‘œ, μœ„μ—μ„œ μ•„λž˜λ‘œ μ½μ§€λ§Œ, 전톡적인 μΌλ³Έμ–΄λŠ” μœ„μ—μ„œ μ•„λž˜λ‘œ, 였λ₯Έμͺ½μ—μ„œ μ™Όμͺ½μœΌλ‘œ μ½μŠ΅λ‹ˆλ‹€.
참고자료

[↑] Back to top

data-속성은 무엇에 μ’‹μ€κ°€μš”?

JavaScript ν”„λ ˆμž„μ›Œν¬κ°€ 인기있기 전에, ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžλŠ” λΉ„ν‘œμ€€ 속성, DOM μΆ”κ°€ ν”„λ‘œνΌν‹° λ“±μ˜ μ‘°μž‘μ—†μ΄, DOM μžμ²΄μ— 좔가적인 데이터λ₯Ό μ €μž₯ν•˜κΈ° μœ„ν•΄ data-속성을 μ‚¬μš©ν–ˆμ—ˆμŠ΅λ‹ˆλ‹€. μ΄λŠ” μ μ ˆν•œ μ†μ„±μ΄λ‚˜ μš”μ†Œκ°€ μ—†λŠ” νŽ˜μ΄μ§€λ‚˜ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ— μ‚¬μš©μžμ •μ˜ 데이터λ₯Ό λΉ„κ³΅κ°œλ‘œ μ €μž₯ν•˜κΈ° μœ„ν•œ κ²ƒμž…λ‹ˆλ‹€.

μš”μ¦˜μ—λŠ”, data-속성을 μ‚¬μš©ν•˜λŠ” 것을 ꢌμž₯ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. κ·Έ 이유 쀑 ν•˜λ‚˜λŠ” μ‚¬μš©μžκ°€ λΈŒλΌμš°μ €μ˜ inspect κΈ°λŠ₯λ₯Ό μ‚¬μš©ν•˜μ—¬ 데이터 속성을 μ‰½κ²Œ μˆ˜μ •ν•  수 μžˆλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. 데이터 λͺ¨λΈμ€ JavaScript μžμ²΄μ— 더 잘 μ €μž₯되며, λΌμ΄λΈŒλŸ¬λ¦¬λ‚˜ ν”„λ ˆμž„μ›Œν¬μ˜ 데이터 바인딩을 톡해 DOM을 μ—…λ°μ΄νŠΈλœ μƒνƒœλ‘œ μœ μ§€ν•˜λŠ” 것이 더 λ‚«μŠ΅λ‹ˆλ‹€.

참고자료

[↑] Back to top

HTML5λ₯Ό κ°œλ°©ν˜• μ›Ή ν”Œλž«νΌμœΌλ‘œ κ°„μ£Όν•  λ•Œ, HTML5의 ꡬ성 μš”μ†ŒλŠ” λ¬΄μ—‡μΈκ°€μš”?

  • 의미 - μ½˜ν…μΈ λ₯Ό 보닀 더 μ •ν™•ν•˜κ²Œ μ„€λͺ…ν•  수 μžˆλ„λ‘ ν—ˆμš©ν•©λ‹ˆλ‹€.
  • μ—°κ²° - μƒˆλ‘­κ³  ν˜μ‹ μ μΈ λ°©λ²•μœΌλ‘œ μ„œλ²„μ™€ 톡신할 수 μžˆλ„λ‘ ν—ˆμš©ν•©λ‹ˆλ‹€.
  • μ˜€ν”„λΌμΈκ³Ό μ €μž₯μ†Œ - μ›Ή νŽ˜μ΄μ§€κ°€ ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ 데이터λ₯Ό 둜컬둜 μ €μž₯ν•˜μ—¬, μ˜€ν”„λΌμΈμ—μ„œλ³΄λ‹€ 효율적으둜 μž‘λ™ν•˜λ„λ‘ ν—ˆμš©ν•©λ‹ˆλ‹€.
  • λ©€ν‹°λ―Έλ””μ–΄ - κ°œλ°©ν˜• μ›Ήμ—μ„œ λΉ„λ””μ˜€μ™€ μ˜€λ””μ˜€λ₯Ό μΌκΈ‰μœΌλ‘œ λ§Œλ“­λ‹ˆλ‹€.
  • 2D/3D κ·Έλž˜ν”½κ³Ό 효과 - 훨씬 λ‹€μ–‘ν•œ ν”„λ ˆμ  ν…Œμ΄μ…˜ μ˜΅μ…˜μ„ ν—ˆμš©ν•©λ‹ˆλ‹€.
  • μ„±λŠ₯κ³Ό 톡합 - 컴퓨터 ν•˜λ“œμ›¨μ–΄μ˜ μ„±λŠ₯ μ΅œμ ν™”μ™€ κ°œμ„ μœΌλ‘œ 더 λ‚˜μ€ μ‚¬μš©μ„ μ œκ³΅ν•©λ‹ˆλ‹€.
  • μž₯치 μ ‘κ·Ό - λ‹€μ–‘ν•œ μž…μΆœλ ₯ μž₯치의 μ‚¬μš©μ„ ν—ˆμš©ν•©λ‹ˆλ‹€.
  • μŠ€νƒ€μΌλ§ - μ‚¬μš©μžκ°€ 더 μ„Έλ ¨λœ ν…Œλ§ˆλ₯Ό μ‚¬μš©ν•˜κ²Œ ν•©λ‹ˆλ‹€.
참고자료

[↑] Back to top

μœ„ μ„Έ 가지 κΈ°μˆ μ€ λͺ¨λ‘ ν΄λΌμ΄μ–ΈνŠΈ μΈ‘μ—μ„œ 값을 μ €μž₯ν•˜λŠ” key-value μ €μž₯μ†Œ λ§€μ»€λ‹ˆμ¦˜μž…λ‹ˆλ‹€. λͺ¨λ‘ λ¬Έμžμ—΄λ‘œλ§Œ 값을 μ €μž₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

cookie localStorage sessionStorage
μƒμ„±μž ν΄λΌμ΄μ–ΈνŠΈλ‚˜ μ„œλ²„. μ„œλ²„λŠ” Set-Cookie 헀더λ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€ ν΄λΌμ΄μ–ΈνŠΈ ν΄λΌμ΄μ–ΈνŠΈ
만료 μˆ˜λ™μœΌλ‘œ μ„€μ • 영ꡬ적 탭을 닫을 λ•Œ
λΈŒλΌμš°μ € μ„Έμ…˜ μ „μ²΄μ—μ„œ 지속 만료 μ„€μ • 여뢀에 따라 닀름 O X
λͺ¨λ“  HTTP μš”μ²­κ³Ό ν•¨κ»˜ μ„œλ²„λ‘œ 보냄 μΏ ν‚€λŠ” Cookie 헀더λ₯Ό 톡해 μžλ™ 전솑됨 X X
μš©λŸ‰ (도메인당) 4kb 5MB 5MB
μ ‘κ·Όμ„± λͺ¨λ“  μœˆλ„μš° λͺ¨λ“  μœˆλ„μš° 같은 νƒ­
참고자료

[↑] Back to top

<script>, <script async>, <script defer> μ‚¬μ΄μ˜ 차이점을 μ„€λͺ…ν•˜μ„Έμš”.

  • <script> - HTML νŒŒμ‹±μ΄ μ€‘λ‹¨λ˜κ³ , 슀크립트λ₯Ό μ¦‰μ‹œ κ°€μ Έμ˜€κ³  μ‹€ν–‰λ˜λ©°, 슀크립트 μ‹€ν–‰ ν›„ HTML νŒŒμ‹±μ΄ λ‹€μ‹œ μ‹œμž‘λ©λ‹ˆλ‹€.
  • <script async> - 이 μŠ€ν¬λ¦½νŠΈλŠ” HTML νŒŒμ‹±κ³Ό λ³‘λ ¬μ μœΌλ‘œ κ°€μ Έμ˜€λ©°, κ°€λŠ₯ν•  λ•Œ μ¦‰μ‹œ μ‹€ν–‰λ©λ‹ˆλ‹€(μ•„λ§ˆ HTML νŒŒμ‹±μ΄ λλ‚˜κΈ° μ „). μŠ€ν¬λ¦½νŠΈκ°€ νŽ˜μ΄μ§€μ˜ λ‹€λ₯Έ μŠ€ν¬λ¦½νŠΈλ“€κ³Ό 독립적인 경우 asyncλ₯Ό μ‚¬μš©ν•˜μ„Έμš”. 예) analytics.
  • <script defer> - 이 μŠ€ν¬λ¦½νŠΈλŠ” HTML νŒŒμ‹±κ³Ό λ³‘λ ¬μ μœΌλ‘œ κ°€μ Έμ˜€μ§€λ§Œ, νŽ˜μ΄μ§€ νŒŒμ‹±μ΄ λλ‚˜λ©΄ μ‹€ν–‰λ©λ‹ˆλ‹€. 이 것이 μ—¬λŸ¬κ°œ μžˆλŠ” 경우, 각 μŠ€ν¬λ¦½νŠΈλŠ” νŽ˜μ΄μ§€μ— λ“±μž₯ν•œ μˆœμ„œλŒ€λ‘œ μ‹€ν–‰λ©λ‹ˆλ‹€. μŠ€ν¬λ¦½νŠΈκ°€ μ™„μ „νžˆ νŒŒμ‹±λœ DOM에 μ˜μ‘΄λ˜λŠ” 경우 defer 속성은 슀크립트λ₯Ό μ‹€ν–‰ν•˜κΈ° 전에 HTML이 μ™„μ „νžˆ νŒŒμ‹±λ˜λ„λ‘ ν•˜λŠ”λ° μœ μš©ν•©λ‹ˆλ‹€. <body>의 끝뢀뢄에 일반 <script>λ₯Ό λ‘λŠ” 것과 별 차이가 μ—†μŠ΅λ‹ˆλ‹€. defer μŠ€ν¬λ¦½νŠΈλŠ” document.writeλ₯Ό ν¬ν•¨ν•˜λ©΄ μ•ˆλ©λ‹ˆλ‹€.

주의: src 속성이 μ—†λŠ” 슀크립트 νƒœκ·ΈλŠ” async 와 defer 속성이 λ¬΄μ‹œλ©λ‹ˆλ‹€.

참고자료

[↑] Back to top

<head> μ•ˆμ— <link>λ₯Ό λ„£λŠ” 이유

<link>λ₯Ό <head> μ•ˆμ— λ„£λŠ” 것은 μ΅œμ ν™”λœ μ›Ήμ‚¬μ΄νŠΈλ₯Ό κ΅¬μΆœν•  λ•Œ μ μ ˆν•œ λͺ…μ„Έμ˜ μΌλΆ€μž…λ‹ˆλ‹€. νŽ˜μ΄μ§€κ°€ μ²˜μŒλ‘œλ“œλ˜λ©΄ HTMLκ³Ό CSSκ°€ λ™μ‹œμ— νŒŒμ‹±λ©λ‹ˆλ‹€. HTML은 DOM(Document Object Model)을 λ§Œλ“€κ³  CSSλŠ” CSSOM (CSS Object Model)을 λ§Œλ“­λ‹ˆλ‹€. 두 가지 λͺ¨λ‘ μ›Ήμ‚¬μ΄νŠΈμ—μ„œ μ‹œκ°μ μΈ 뢀뢄을 λ§Œλ“œλŠ”λ° ν•„μš”ν•˜λ―€λ‘œ, λΉ λ₯Έ "first meaningful paint"λ₯Ό κ°€λŠ₯ν•˜κ²Œ ν•©λ‹ˆλ‹€. 이 점진적 λ Œλ”λ§μ€ μ‚¬μ΄νŠΈμ˜ μ„±λŠ₯ μ μˆ˜μ—μ„œ μΈ‘μ •λ˜λŠ” μ‚¬μ΄νŠΈ μ΅œμ ν™”μ˜ λ²”μ£Όμž…λ‹ˆλ‹€. λ¬Έμ„œ μ΅œν•˜λ‹¨μ— μŠ€νƒ€μΌμ‹œνŠΈλ₯Ό λ‘λŠ” 것은 λ§Žμ€ λΈŒλΌμš°μ €μ—μ„œ 점진적 λ Œλ”λ§μ„ κΈˆμ§€ν•˜κ²Œ λ˜λŠ” κ²ƒμž…λ‹ˆλ‹€. λͺ‡λͺ‡ λΈŒλΌμš°μ €λŠ” μŠ€νƒ€μΌμ΄ λ³€κ²½λ˜λ©΄ νŽ˜μ΄μ§€μ˜ μš”μ†Œλ₯Ό λ‹€μ‹œ κ·Έλ¦¬λŠ” 것을 ν”Όν•˜κΈ° μœ„ν•΄ λ Œλ”λ§μ„ μ°¨λ‹¨ν•©λ‹ˆλ‹€. κ·Έλ ‡κ²Œλ˜λ©΄ μ‚¬μš©μžλŠ” 빈 ν•˜μ–€ νŽ˜μ΄μ§€λ₯Ό λ³΄κ²Œλ©λ‹ˆλ‹€.

κ·Έ 외에도 상단에 λ°°μΉ˜ν•˜λ©΄ νŽ˜μ΄μ§€κ°€ μ μ§„μ μœΌλ‘œ λ Œλ”λ§λ˜κΈ° λ•Œλ¬Έμ— UXκ°€ ν–₯μƒλ©λ‹ˆλ‹€. λ¬Έμ„œ 맨 μ•„λž˜μ— CSS λ₯Ό λ‘λŠ” 것은 Internet Explorer λ₯Ό λΉ„λ‘―ν•œ λ§Žμ€ λΈŒλΌμš°μ €μ—μ„œ 점진적 λ Œλ”λ§μ„ κΈˆμ§€μ‹œν‚€λŠ” κ²ƒμž…λ‹ˆλ‹€. λͺ‡λͺ‡ λΈŒλΌμš°μ €λŠ” μŠ€νƒ€μΌμ΄ λ³€κ²½λ˜λ©΄ νŽ˜μ΄μ§€μ˜ μš”μ†Œλ₯Ό λ‹€μ‹œ 그리지 μ•Šμ•„λ„ λ˜λ„λ‘ λ Œλ”λ§μ„ μ°¨λ‹¨ν•©λ‹ˆλ‹€. μ‚¬μš©μžλŠ” 빈 ν•˜μ–€ νŽ˜μ΄μ§€μ—μ„œ λ©ˆμΆ”κ²Œ λ©λ‹ˆλ‹€. λ˜ν•œ μŠ€νƒ€μΌμ΄ μ—†λŠ” λ‚΄μš©μ΄ 잠깐 λ³΄μ΄λŠ” 것을 λ°©μ§€ν•©λ‹ˆλ‹€. λ‹€λ₯Έ κ²½μš°μ—λŠ” μŠ€νƒ€μΌλ˜μ§€ μ•Šμ€ λ‚΄μš©μ΄ 깜빑일 수 μžˆμŠ΅λ‹ˆλ‹€(flashes of unstyled content: FOUC).

</body> 직전에 <script>λ₯Ό λ„£λŠ” 이유

<script>λŠ” λ‹€μš΄λ‘œλ“œλ˜κ³  μ‹€ν–‰λ˜λŠ” λ™μ•ˆ HTML νŒŒμ‹±μ„ μ°¨λ‹¨ν•©λ‹ˆλ‹€. 슀크립트λ₯Ό 맨 μ•„λž˜μ— 두면 HTML을 λ¨Όμ € νŒŒμ‹±ν•˜μ—¬ μ‚¬μš©μžμ—κ²Œ ν‘œμ‹œν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μŠ€ν¬λ¦½νŠΈμ— document.write()κ°€ μžˆμ„ λ•ŒλŠ” <script>λ₯Ό μ•„λž˜μͺ½μ— λ‘λŠ” 것이 μ˜ˆμ™Έμ μΌ 수 μžˆμŠ΅λ‹ˆλ‹€λ§Œ, μš”μ¦˜μ€ document.write()λ₯Ό μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. λ˜ν•œ, <script>λ₯Ό 맨 μ•„λž˜μ— 두면, λΈŒλΌμš°μ €κ°€ 전체 λ¬Έμ„œκ°€ νŒŒμ‹±λ  λ•ŒκΉŒμ§€ 슀크립트 λ‹€μš΄λ‘œλ“œλ₯Ό μ‹œμž‘ν•  수 μ—†λ‹€λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€. μ΄λ ‡κ²Œν•˜λ©΄ DOM μš”μ†Œλ₯Ό μ‘°μž‘ν•΄μ•Όν•˜λŠ” μ½”λ“œκ°€ 였λ₯˜λ₯Ό λ°œμƒμ‹œν‚€μ§€ μ•Šκ³  전체 슀크립트λ₯Ό μ€‘μ§€μ‹œν‚€μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. <head>에 <script>λ₯Ό λ„£μ–΄μ•Όν•˜λŠ” 경우, defer 속성을 μ‚¬μš©ν•˜μ„Έμš”. HTML을 νŒŒμ‹±ν•œ 후에 슀크립트λ₯Ό λ‹€μš΄λ‘œλ“œν•˜κ³  μ‹€ν–‰ν•˜λŠ” 것과 같은 νš¨κ³Όκ°€ μžˆμŠ΅λ‹ˆλ‹€.

참고자료

[↑] Back to top

ν”„λ‘œκ·Έλ ˆμ‹œλΈŒ λ Œλ”λ§μ΄ λ¬΄μ—‡μΈκ°€μš”?

ν”„λ‘œκ·Έλ ˆμ‹œλΈŒ λ Œλ”λ§μ΄λž€ μ½˜ν…μΈ λ₯Ό κ°€λŠ₯ν•œν•œ λΉ λ₯΄κ²Œ ν‘œμ‹œν•˜κΈ° μœ„ν•΄ μ›Ή νŽ˜μ΄μ§€μ˜ μ„±λŠ₯을 ν–₯μƒμ‹œν‚€λŠ” 데 μ‚¬μš©λ˜λŠ” κΈ°μˆ μž…λ‹ˆλ‹€. (특히, μΈμ‹λ˜λŠ” λ‘œλ”© μ‹œκ°„μ„ ν–₯μƒμ‹œν‚΅λ‹ˆλ‹€)

μ˜ˆμ „μ—λŠ” κ΄‘λŒ€μ—­ 인터넷을 μ‚¬μš©ν•˜κΈ°λ„ ν–ˆμ§€λ§Œ λΆˆμ•ˆμ •ν•œ λͺ¨λ°”일 데이터 연결이 점점 인기λ₯Ό λŒλ©΄μ„œ 졜근 κ°œλ°œμ— μžˆμ–΄μ„œλ„ μ—¬μ „νžˆ μœ μš©ν•©λ‹ˆλ‹€!

κ΄€λ ¨ 기술 μ˜ˆμ‹œ:

  • 이미지 지연 λ‘œλ”© - νŽ˜μ΄μ§€μ˜ 이미지λ₯Ό ν•œκΊΌλ²ˆμ— λ‘œλ”©ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. JavaScriptλ₯Ό μ‚¬μš©ν•˜μ—¬ μ‚¬μš©μžκ°€ 이미지λ₯Ό ν‘œμ‹œν•˜λŠ” νŽ˜μ΄μ§€ λΆ€λΆ„μœΌλ‘œ 슀크둀 ν•  λ•Œ 이미지λ₯Ό λ‘œλ“œ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  • λ³΄μ΄λŠ” μ½˜ν…μΈ μ˜ μš°μ„ μˆœμœ„ μ„€μ • (λ˜λŠ” 슀크둀 없이 λ³Ό 수 μžˆλŠ” λ Œλ”λ§) - κ°€λŠ₯ν•œ ν•œ 빨리 ν‘œμ‹œν•˜κΈ° μœ„ν•΄ μ‚¬μš©μž λΈŒλΌμš°μ €μ—μ„œ λ Œλ”λ§λ  νŽ˜μ΄μ§€μ— ν•„μš”ν•œ μ΅œμ†Œν•œμ˜ CSS/μ½˜ν…μΈ /슀크립트 만 ν¬ν•¨ν•˜λ©΄ deferred 슀크립트λ₯Ό μ‚¬μš©ν•˜κ±°λ‚˜ DOMContentLoaded/load 이벀트λ₯Ό μ‚¬μš©ν•˜μ—¬ λ‹€λ₯Έ λ¦¬μ†ŒμŠ€μ™€ λ‚΄μš©μ„ λ‘œλ“œν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  • 비동기 HTML ν”„λž˜κ·Έλ¨ΌνŠΈ - νŽ˜μ΄μ§€μ˜ λ°±μ—”λ“œμ—μ„œ HTML νŽ˜μ΄μ§€μ˜ 일뢀λ₯Ό λΈŒλΌμš°μ €λ‘œ κ°€μ Έμ˜΅λ‹ˆλ‹€. 이 κΈ°μˆ μ— λŒ€ν•œ μžμ„Έν•œ λ‚΄μš©μ€ μ—¬κΈ°μ—μ„œ 찾을 수 μžˆμŠ΅λ‹ˆλ‹€.
참고자료

[↑] Back to top

이미지 νƒœκ·Έμ— srcset 속성을 μ‚¬μš©ν•˜λŠ” μ΄μœ λŠ” λ¬΄μ—‡μΈκ°€μš”? 이 μ†μ„±μ˜ 컨텐츠λ₯Ό 평가할 λ•Œ λΈŒλΌμš°μ €κ°€ μ‚¬μš©ν•˜λŠ” ν”„λ‘œμ„ΈμŠ€λ₯Ό μ„€λͺ…ν•˜μ„Έμš”.

기기의 λ””μŠ€ν”Œλ ˆμ΄ λ„ˆλΉ„μ— 따라 λ‹€λ₯Έ 이미지λ₯Ό μ‚¬μš©μžμ—κ²Œ μ œκ³΅ν•˜λ €λŠ” 경우 srcset 속성을 μ‚¬μš©ν•©λ‹ˆλ‹€ - λ ˆν‹°λ‚˜ λ””μŠ€ν”Œλ ˆμ΄λ₯Ό 톡해 μž₯μΉ˜μ— κ³ ν’ˆμ§ˆ 이미지λ₯Ό μ œκ³΅ν•˜μ—¬ μ‚¬μš©μž κ²½ν—˜μ„ ν–₯μƒμ‹œν‚€κ³ , 저해상도 이미지λ₯Ό 저사양 기기에 μ œκ³΅ν•˜μ—¬ μ„±λŠ₯을 높이고 데이터 λ‚­λΉ„λ₯Ό μ€„μž…λ‹ˆλ‹€. (μ™œλƒν•˜λ©΄ 더 큰 이미지λ₯Ό μ œκ³΅ν•˜λŠ” 것은 λˆˆμ— 보일 μ •λ„μ˜ 차이가 μ—†κΈ° λ•Œλ¬Έ). 예λ₯Ό λ“€λ©΄: <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">λŠ” ν΄λΌμ΄μ–ΈνŠΈμ˜ 해상도에 따라 λΈŒλΌμš°μ €μ— small, medium, large .jpg κ·Έλž˜ν”½μ„ ν‘œμ‹œν•˜λ„λ‘ μ§€μ‹œν•©λ‹ˆλ‹€. 첫 번째 값은 이미지 이름이고 두 번째 값은 ν”½μ…€ λ‹¨μœ„μ˜ 이미지 λ„ˆλΉ„μž…λ‹ˆλ‹€. 320px λ„ˆλΉ„μ˜ 경우, λ‹€μŒκ³Ό 같은 계산을 λ”°λ¦…λ‹ˆλ‹€

  • 500 / 320 = 1.5625
  • 1000 / 320 = 3.125
  • 2000 / 320 = 6.25

ν΄λΌμ΄μ–ΈνŠΈμ˜ 해상도가 1x 일 경우, 1.5625κ°€ κ°€μž₯ 가깝고 small.jpg에 ν•΄λ‹Ήν•˜λŠ” 500wκ°€ λΈŒλΌμš°μ €μ— μ˜ν•΄ μ„ νƒλ©λ‹ˆλ‹€.

해상도가 λ ˆν‹°λ‚˜ (2x)인 경우 λΈŒλΌμš°μ €λŠ” μ΅œμ†Œκ°’μ—μ„œ κ°€μž₯ μœ„λ‘œ κ°€κΉŒμš΄ 해상도λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€. 500w (1.5625)λŠ” 1보닀 크고 이미지가 보기 쒋지 μ•Šμ„ 수 있기 λ•Œλ¬Έμ— μ„ νƒν•˜μ§€ μ•ŠλŠ”λ‹€λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€. κ·Έλž˜μ„œ λΈŒλΌμš°μ €λŠ” 계산 κ²°κ³Ό λΉ„μœ¨κ°’μ΄ 2에 κ°€κΉŒμš΄ 1000w (3.125) 이미지λ₯Ό μ„ νƒν•©λ‹ˆλ‹€.

srcsetλŠ” λ°μŠ€ν¬νƒ‘ λ””μŠ€ν”Œλ ˆμ΄μ²˜λŸΌ κ±°λŒ€ν•œ 이미지λ₯Ό ν•„μš”λ‘œν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— ν™”λ©΄ μž₯치λ₯Ό μ’νžˆλŠ” μž‘μ€ 이미지 νŒŒμΌμ„ μ œκ³΅ν•˜κ³ μžν•˜λŠ” 문제λ₯Ό ν•΄κ²°ν•©λ‹ˆλ‹€.

srcsetλŠ” 화면이 μž‘μ€ κΈ°κΈ°μ—μ„œ λ°μŠ€ν¬νƒ‘ λ””μŠ€ν”Œλ ˆμ΄μ²˜λŸΌ 큰 이미지가 ν•„μš”ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— μž‘μ€ 이미지 νŒŒμΌμ„ μ œκ³΅ν•˜λŠ” 문제λ₯Ό ν•΄κ²°ν•©λ‹ˆλ‹€ β€” λ˜ν•œ μ„ νƒμ μœΌλ‘œ 고해상도/저해상도 화면에 λ‹€λ₯Έ 해상도 이미지λ₯Ό μ œκ³΅ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

참고자료

[↑] Back to top

λ‹€λ₯Έ HTML ν…œν”Œλ¦Ώ μ–Έμ–΄λ₯Ό μ‚¬μš©ν•΄λ³Έ 적이 μžˆλ‚˜μš”?

λ„€, Pug (formerly Jade), ERB, Slim, Handlebars, Jinja, Liquid 등이 μžˆμŠ΅λ‹ˆλ‹€. ν•„μžμ˜ κ²¬ν•΄λ‘œ, 이듀은 λ‹€μ†Œ μ°¨μ΄λŠ” μ—†μœΌλ©°, 보여쀄 데이터λ₯Ό μ‘°μž‘ν•˜λŠ” 데 μœ μš©ν•œ ν•„ν„°λ“€κ³Ό λ‚΄μš©μ„ escapeν•˜λŠ” μœ μ‚¬ν•œ κΈ°λŠ₯을 μ œκ³΅ν•©λ‹ˆλ‹€. λŒ€λΆ€λΆ„μ˜ ν…œν”Œλ¦Ώ 엔진을 μ‚¬μš©ν•˜λ©΄ ν‘œμ‹œν•˜κΈ° 전에 μ²˜λ¦¬κ°€ ν•„μš”ν•œ μ΄λ²€νŠΈμ— μžμ‹ μ˜ ν•„ν„°λ₯Ό μ‚½μž…ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

[↑] Back to top

λ‹€λ₯Έ λ‹΅λ³€λ“€