πŸ“‹ ν”„λ‘ νŠΈμ—”λ“œ 개발자λ₯Ό μœ„ν•œ 토막상식

ν”„λ‘œμ νŠΈν•˜λ©΄μ„œ μ•Œκ²Œ 된 것듀과 μ½”λ”©ν…ŒμŠ€νŠΈλ₯Ό 톡해 배운 것듀, μžλ°”μŠ€ν¬λ¦½νŠΈ&제이쿼리: μΈν„°λž™ν‹°λΈŒ ν”„λ‘ νŠΈμ—”λ“œ μ›Ή 개발 κ΅κ³Όμ„œ(Jon Duckett)와 JavaScript: The Good Parts(Douglas Crockford)λ₯Ό 톡해 κ³΅λΆ€ν•œ 것듀, 그리고 Front-end Job Interview Questions에 λ‚˜μ™€μžˆλŠ” μ§ˆλ¬Έλ“€μ— λŒ€ν•œ λŒ€λ‹΅μ„ κ°„λž΅ν•˜κ²Œ μ •λ¦¬ν–ˆλ‹€.

일반적인 것듀

ν—κ°€λ¦¬μ•ˆ ν‘œκΈ°λ²•

λ³€μˆ˜ 이름에 데이터 νƒ€μž…μ„ μ ‘λ‘μ–΄λ‘œ λΆ™μ΄λŠ” ν‘œκΈ°λ²•μ΄λ‹€. 숫자라면 nVar, 배열이라면 aVar 이런 μ‹μœΌλ‘œ 뢙인닀. 2015λ…„ λ„€μ΄λ²„μ—μ„œ 인턴십을 ν•  λ•Œ μ½”λ”©μ»¨λ²€μ…˜μ΄ 헝가리언 ν‘œκΈ°λ²• + μΊλ©€μΌ€μ΄μŠ€μ—¬μ„œ κ·Έλ•Œ 처음 μ ‘ν•˜κ³  μ‚¬μš©ν•˜κΈ° μ‹œμž‘ν–ˆλŠ”λ°, μš”μ¦˜μ—λŠ” 헝가리언 ν‘œκΈ°λ²•μ„ μ§€μ–‘ν•œλ‹€κ³  ν•œλ‹€. 가독성과 μœ μ§€λ³΄μˆ˜ νš¨μœ¨μ„±μ΄ 떨어진닀고. (μ°Έκ³ )

블둝 μ•ˆμ—μ„œ λ³€μˆ˜ μ„ μ–Έ

Java의 경우 ν•œ 블둝 μ•ˆμ—μ„œλ§Œ μ“°μ΄λŠ” λ³€μˆ˜λ₯Ό μ½”λ“œ μœ„μͺ½μ— μ„ μ–Έν•˜μ§€ μ•Šκ³  블둝 μ•ˆμ— λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜λ©΄ μ½”λ“œλ₯Ό νŒŒμ•…ν•˜κΈ° λ”μš± μ‰¬μ›Œμ§€κ³ , μŠ€μ½”ν”„λ₯Ό μ œν•œν•  수 μžˆμ–΄ μ•ˆμ „ν•˜λ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ varνƒ€μž…μ€ 블둝 μŠ€μ½”ν”„κ°€ μ•„λ‹Œ ν•¨μˆ˜ μŠ€μ½”ν”„λ₯Ό μ μš©ν•˜κΈ° λ•Œλ¬Έμ— 어디에 μ„ μ–Έν•˜λ“  μ•„λ¬΄λŸ° 차이가 μ—†λ‹€. ν•˜μ§€λ§Œ letμ΄λ‚˜ constλ₯Ό μ‚¬μš©ν•œλ‹€λ©΄ μ–˜κΈ°κ°€ 달라진닀. 이 λ‘˜μ€ 블둝 μŠ€μ½”ν”„μ΄λ‹€. (μ°Έκ³ )

점진적 ν–₯상법(Progressive enhancement)κ³Ό μš°μ•„ν•œ μ„±λŠ₯μ €ν•˜λ²•(Graceful degradation)

μ‚¬μš©μžκ°€ 항상 μ΅œμ‹  κΈ°μˆ μ„ μ‚¬μš©ν•  수 μžˆλŠ” ν™˜κ²½μ—μ„œ μ„œλΉ„μŠ€λ₯Ό μ‚¬μš©ν•˜μ§€λŠ” μ•ŠλŠ”λ‹€. 특히 μ›Ήμ‚¬μ΄νŠΈλ₯Ό λ§Œλ“€ λ•ŒλŠ” μ΅œμ‹  λΈŒλΌμš°μ €μ™€ ꡬ식 λΈŒλΌμš°μ €λ₯Ό λͺ¨λ‘ 신경써야 ν•œλ‹€. 점진적 ν–₯상법과 μš°μ•„ν•œ μ„±λŠ₯μ €ν•˜λ²•μ€ μ΅œμ‹ κ³Ό ꡬ식에 λŒ€μ‘ν•˜κΈ° μœ„ν•œ 방법을 λ§ν•œλ‹€. (μ°Έκ³ )

점진적 ν–₯상법은 기본적으둜 ꡬ식 기술 ν™˜κ²½μ—μ„œ λ™μž‘ν•  수 μžˆλŠ” κΈ°λŠ₯을 κ΅¬ν˜„ν•˜κ³ , μ΅œμ‹  κΈ°μˆ μ„ μ‚¬μš©ν•  수 μžˆλŠ” ν™˜κ²½μ—μ„œλŠ” 더 λ‚˜μ€ μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•  수 μžˆλŠ” μ΅œμ‹  κΈ°μˆ μ„ μ œκ³΅ν•˜λŠ” 방법이닀. 즉, ꡬ식 ν™˜κ²½μ—μ„œλ„ μΆ©λΆ„νžˆ μ„œλΉ„μŠ€λ₯Ό μ‚¬μš©ν•  수 있고, μ΅œμ‹  ν™˜κ²½μ΄λΌλ©΄ 더 λ‚˜μ€ κΈ°λŠ₯듀을 μ‚¬μš©ν•  수 μžˆλ„λ‘ λ§Œλ“œλŠ” 것이닀. ꡬ식 λΈŒλΌμš°μ €λ₯Ό μ‚¬μš©ν•˜λŠ” μ‚¬μš©μžμ—κ²Œ 100만큼의 κΈ°λŠ₯을 μ œκ³΅ν•˜κ³ , μ΅œμ‹  λΈŒλΌμš°μ €λ₯Ό μ‚¬μš©ν•˜λŠ” μ‚¬μš©μžμ—κ²ŒλŠ” 130μ •λ„μ˜ κΈ°λŠ₯을 μ œκ³΅ν•˜λ„λ‘ μ›Ήμ‚¬μ΄νŠΈλ₯Ό λ§Œλ“ λ‹€κ³  보면 λœλ‹€.

μš°μ•„ν•œ μ„±λŠ₯μ €ν•˜λ²•μ€ 점진적 ν–₯상법과 λ°˜λŒ€μ΄λ‹€. μ΄λŠ” μ΅œμ‹  κΈ°μˆ μ„ 기반으둜 κΈ°λŠ₯을 κ΅¬ν˜„ν•œ λ’€, κ΅¬ν˜• κΈ°μˆ μ— κΈ°λ°˜ν•œ ν™˜κ²½μ—μ„œλ„ μœ μ‚¬ν•˜κ²Œ λ™μž‘ν•˜λ„λ‘ λ§Œλ“œλŠ” 방법이닀. μ΅œμ‹  λΈŒλΌμš°μ €μ—μ„œλŠ” 100만큼의 κΈ°λŠ₯을 μ œκ³΅ν•˜κ³ , ꡬ식 λΈŒλΌμš°μ €μ—μ„œλŠ” 50μ •λ„μ˜ κΈ°λŠ₯λ§Œμ„ μ œκ³΅ν•˜κ²Œ μ›Ήμ‚¬μ΄νŠΈλ₯Ό λ§Œλ“œλŠ” 것이닀. img νƒœκ·Έμ— alt 속성을 μ§€μ •ν•¨μœΌλ‘œμ¨ 이미지λ₯Ό 보여주지 λͺ»ν•˜λŠ” ν™˜κ²½μ—μ„œ 이미지λ₯Ό ν…μŠ€νŠΈλ‘œ λŒ€μ²΄ν•˜λŠ” 것이 λŒ€ν‘œμ μΈ μ˜ˆμ‹œλ‹€.

FOUC(Flash Of Unstyled Content)

FOUCλŠ” μ™ΈλΆ€μ˜ CSS μ½”λ“œλ₯Ό 뢈러였기 μ „ μŠ€νƒ€μΌμ΄ μ μš©λ˜μ§€ μ•Šμ€ νŽ˜μ΄μ§€κ°€ μž μ‹œ λ‚˜νƒ€λ‚˜λŠ” ν˜„μƒμ΄λ‹€. 특히 IEμ—μ„œ 자주 λ°œμƒν•˜λŠ” ν˜„μƒμœΌλ‘œ, μ‚¬μ˜Ήμž κ²½ν—˜μ„ μ €ν•˜ν•˜λŠ” μš”μΈμ΄ λœλ‹€. FOUCκ°€ λ°œμƒν•˜λŠ” μ΄μœ λŠ” λΈŒλΌμš°μ €κ°€ λ§ˆν¬μ—…μ— 참쑰된 νŒŒμΌλ“€μ„ λͺ¨μ•„ DOM을 생성할 λ•Œ κ°€μž₯ λΉ λ₯΄κ²Œ 뢄석할 수 μžˆλŠ” λΆ€λΆ„(HTML)을 λ¨Όμ € 화면에 ν‘œμ‹œν•œ λ’€, 화면에 좜λ ₯된 λ§ˆν¬μ—… μˆœμ„œμ— 따라 μŠ€νƒ€μΌ(CSS)을 μ μš©ν•˜κ³  슀크립트(Javascript)λ₯Ό μ‹€ν–‰ν•˜κΈ° λ•Œλ¬Έμ΄λ‹€.

FOUCλ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄μ„œλŠ” head νƒœκ·Έ μ•ˆμ— CSSλ₯Ό λ§ν¬ν•˜κ³ , @import의 μ‚¬μš©μ„ μžμ œν•΄μ•Ό ν•œλ‹€. λ˜ν•œ μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό head νƒœκ·Έ μ•ˆμ—μ„œ λ‘œλ“œν•˜λŠ” 것도 방법될 수 μžˆλ‹€. (ν•˜μ§€λ§Œ λ³„λ‘œ μΆ”μ²œν•˜μ§€ μ•ŠλŠ”λ‹€.) μ–΄λ–€ λ°©λ²•μœΌλ‘œλ„ ν•΄κ²°λ˜μ§€ μ•ŠλŠ”λ‹€λ©΄ FOUCκ°€ λ°œμƒν•˜λŠ” ꡬ역을 μˆ¨κ²Όλ‹€κ°€ λΈŒλΌμš°μ €κ°€ 쀀비됐을 λ•Œ λ‹€μ‹œ λ³΄μ—¬μ£ΌλŠ” 방법이 μžˆλ‹€. (μ°Έκ³ )

ARIA(Accessible Rich Internet Applications)와 μŠ€ν¬λ¦°λ¦¬λ”

ARIAλŠ” μ ‘κ·Όκ°€λŠ₯ν•œ 인터넷 μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μ˜λ―Έν•œλ‹€. μ΄λŠ” μ›Ή μ½˜ν…μΈ λ₯Ό κ°œλ°œν•  λ•Œ μž₯애인을 μœ„ν•œ μ ‘κ·Όμ„± ν–₯상 방법을 μ •μ˜ν•œλ‹€. ARIAλ₯Ό μ‚¬μš©ν•΄ μ›Ήμ‚¬μ΄νŠΈμ—¬λŸ¬ 곳의 접근성을 ν–₯상할 수 μžˆλ‹€. ARIAλŠ” <html> νƒœκ·Έμ— role 속성을 μ§€μ •ν•˜λŠ” λ°©μ‹μœΌλ‘œ μ‚¬μš©ν•  수 있으며, λŒ€λΆ€λΆ„μ˜ λΈŒλΌμš°μ €μ™€ μŠ€ν¬λ¦°λ¦¬λ”κ°€ ARIAλ₯Ό μ§€μ›ν•˜κ³  μžˆλ‹€. μŠ€ν¬λ¦°λ¦¬λ”λŠ” μ›Ήμ‚¬μ΄νŠΈμ˜ ꡬ성 μš”μ†Œλ“€μ„ μ½μ–΄μ£ΌλŠ” ν”„λ‘œκ·Έλž¨μœΌλ‘œ, μ‹œκ°μž₯μ• λ₯Ό 가진 μ‚¬μš©μžκ°€ 컴퓨터 화면에 무엇이 μžˆλŠ”μ§€ 인지할 수 있게 λ•λŠ”λ‹€. (μ°Έκ³ 1) (μ°Έκ³ 2)

CSS μ• λ‹ˆλ©”μ΄μ…˜κ³Ό Javascript μ• λ‹ˆλ©”μ΄μ…˜μ˜ 차이

μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” 메인 μ“°λ ˆλ“œκ°€ 무거운 μž‘μ—…μ„ ν•˜κ³  μžˆμ„ λ•Œ μ• λ‹ˆλ©”μ΄μ…˜ 처리의 μš°μ„ μˆœμœ„λ₯Ό λ―Έλ€„λ‘λŠ” 반면 CSSλŠ” 독립적인 μ“°λ ˆλ“œκ°€ μ• λ‹ˆλ©”μ΄μ…˜μ„ μ²˜λ¦¬ν•΄μ€€λ‹€. λ•Œλ¬Έμ— CSS μ• λ‹ˆλ©”μ΄μ…˜μ€ μ΅œμ ν™”κ°€ 쉽닀. ν•˜μ§€λ§Œ 항상 CSS μ• λ‹ˆλ©”μ΄μ…˜μ΄ μš°μˆ˜ν•œ 것은 μ•„λ‹ˆλ‹€. UI μš”μ†Œκ°€ μž‘μ€ 경우 CSSλ₯Ό μ‚¬μš©ν•˜κ³ , μ• λ‹ˆλ©”μ΄μ…˜μ„ μ„Έλ°€ν•˜κ²Œ μ œμ–΄ν•΄μ•Ό ν•˜λŠ” 경우 μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό μ‚¬μš©ν•˜λŠ” 것이 μ’‹λ‹€. (μ°Έκ³ 1) (μ°Έκ³ 2)

λ™μΌμΆœμ²˜μ •μ±…(Same-origin policy)κ³Ό CORS(Cross-origin resource sharing)

λ™μΌμΆœμ²˜μ •μ±…μ€ ν•œ 좜처의 λ¬Έμ„œκ°€ λ‹€λ₯Έ 좜처의 λ¬Έμ„œμ™€ μƒν˜Έμž‘μš©ν•˜μ§€ λͺ»ν•˜λ„λ‘ν•˜λŠ” 정책이닀. 두 λ¬Έμ„œμ˜ ν”„λ‘œν† μ½œ, 포트, ν˜ΈμŠ€νŠΈκ°€ κ°™μœΌλ©΄ λ™μΌμΆœμ²˜λΌκ³  ν•œλ‹€. CORSλŠ” μ–΄λ–€ μ›ΉνŽ˜μ΄μ§€μ— μžˆλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ ν•΄λ‹Ή 도메인이 μ•„λ‹Œ λ‹€λ₯Έ 도메인에 XMLHttpRequests μš”μ²­μ„ ν—ˆμš©ν•˜λŠ” 기법을 λ§ν•œλ‹€. λΈŒλΌμš°μ €λŠ” μ„œλ²„μ™€ 톡신할 λ•Œλ§ˆλ‹€ μ„œλ‘œμ— λŒ€ν•œ 정보λ₯Ό HTTP 헀더λ₯Ό μ΄μš©ν•΄ μ „λ‹¬ν•œλ‹€. CORSλŠ” HTTP 헀더에 정보λ₯Ό μΆ”κ°€ν•΄ λΈŒλΌμš°μ €μ™€ μ„œλ²„κ°€ μ„œλ‘œ 톡신해야 ν•œλ‹€λŠ” 사싀을 μ•Œκ²Œ ν•œλ‹€. CORSλ₯Ό ν†΅ν•˜μ§€ μ•Šμ„ 경우, Cross-domain μš”μ²­μ€ λ™μΌμΆœμ²˜μ •μ±…μ— μ˜ν•΄ λΈŒλΌμš°μ €κ°€ κΈˆμ§€ν•œλ‹€. CORSλŠ” λ‹€λ₯Έ μΆœμ²˜μ—μ„œ 온 μš”μ²­μ„ ν—ˆμš©ν•  지 κ²°μ •ν•˜κΈ° μœ„ν•΄ λΈŒλΌμš°μ €μ™€ μ„œλ²„κ°€ μƒν˜Έκ΅λ₯˜ν•˜λŠ” 방법을 μ •μ˜ν•œ 것이닀. CORSλŠ” W3C λͺ…세에 ν¬ν•¨λ˜μ–΄ μžˆμ§€λ§Œ IE의 κ²½μš°μ—λŠ” λΉ„ν‘œμ€€ XDomainRequest 객체λ₯Ό μ‚¬μš©ν•˜μ—¬ CORS μš”μ²­μ„ μ²˜λ¦¬ν•œλ‹€. (μ°Έκ³ 1) (μ°Έκ³ 2)

μ½”λ“œ μ˜μ‘΄μ„±κ³Ό DRY원칙

μ–΄λ–€ μŠ€ν¬λ¦½νŠΈλŠ” λ‹€λ₯Έ 좔가적인 슀크립트λ₯Ό ν•„μš”λ‘œ ν•˜κΈ°λ„ ν•œλ‹€. μ΄λ•Œ λ‹€λ₯Έ μŠ€ν¬λ¦½νŠΈμ— μ˜μ‘΄ν•˜λŠ” 슀크립트λ₯Ό μž‘μ„±ν•  λ•Œ ν•΄λ‹Ή μŠ€ν¬λ¦½νŠΈμ— μ˜μ‘΄μ„±μ΄ μžˆλ‹€κ³  ν‘œν˜„ν•œλ‹€. jQueryλ₯Ό ν™œμš©ν•˜λŠ” μŠ€ν¬λ¦½νŠΈλŠ” μ˜μ‘΄μ„±μ΄ μžˆλ‹€κ³  ν•  수 μžˆλ‹€. 이런 경우 주석을 톡해 μ˜μ‘΄μ„±μ„ λͺ…μ‹œν•˜λŠ” 것이 μ’‹λ‹€.

DRY원칙은 Don’t Repeat Yourself의 μ€„μž„λ§λ‘œ, μ†Œν”„νŠΈμ›¨μ–΄ 개발 원칙을 λ§ν•œλ‹€. ν•œκ΅­μ–΄λ‘œλŠ” μ€‘λ³΅λ°°μ œλΌκ³  ν•œλ‹€. 같은 μž‘μ—…μ„ μˆ˜ν–‰ν•˜λŠ” μ½”λ“œλ₯Ό 두 번 μž‘μ„±ν–ˆλ‹€λŠ” 이λ₯Ό μ½”λ“œ 쀑볡이라고 ν•˜λŠ”λ°, DRY원칙은 μ΄λŸ¬ν•œ μ½”λ“œ 쀑볡을 μ§€μ–‘ν•˜μžλŠ” 원칙이닀. μ½”λ“œ μ€‘λ³΅μ˜ λ°˜λŒ€ κ°œλ…μœΌλ‘œλŠ” μ½”λ“œ μž¬μ‚¬μš©(Code reuse)이 μžˆλ‹€. μ½”λ“œ μž¬μ‚¬μš©μ€ 같은 μ½”λ“œκ°€ 슀크립트의 λ‹€λ₯Έ κ³³μ—μ„œ ν•œ 번 이상 μ‚¬μš©λ˜λŠ” 것을 λ§ν•œλ‹€. ν•¨μˆ˜λ₯Ό ν™œμš©ν•˜λŠ” 것은 μ½”λ“œ μž¬μ‚¬μš©μ˜ 쒋은 예둜, μž¬μ‚¬μš© κ°€λŠ₯ν•œ ν•¨μˆ˜λ₯Ό 헬퍼 ν•¨μˆ˜(Helper function)라고 ν•œλ‹€. μ½”λ“œ μž¬μ‚¬μš©μ„ ꢌμž₯ν•˜κΈ° μœ„ν•΄ κ°œλ°œμžλ“€μ€ μž‘μ€ 슀크립트λ₯Ό μž‘μ„±ν•˜λŠ”λ°, μ΄λ•Œλ¬Έμ— μ½”λ“œ μž¬μ‚¬μš©μ€ μ½”λ“œ 사이에 더 λ§Žμ€ μ˜μ‘΄μ„±μ„ λ§Œλ“ λ‹€.

HTML

DOCTYPE

DOCTYPE은 λ¬Έμ„œν˜•μ„ λ§ν•˜λ©°, ν•΄λ‹Ή λ¬Έμ„œκ°€ μ–΄λ–€ λ²„μ „μ˜ μ–΄λ–€ λ§ˆν¬μ—… μ–Έμ–΄λ‘œ κ΅¬μ„±λ˜μ–΄μžˆλŠ”μ§€λ₯Ό μ˜λ―Έν•œλ‹€. DOCTYPE을 μ„ μ–Έν•˜λŠ” 것을 DTD(Dodumenttation Type Declaration)라고 ν•œλ‹€. DTDλŠ” 각 λ§ˆν¬μ—…μ˜ 각 λ²„μ „μ—μ„œ μ‚¬μš©κ°€λŠ₯ν•œ νƒœκ·Έλ‚˜ 속성 등을 μ •μ˜ν•˜κΈ° λ•Œλ¬Έμ— λ¬Έμ„œμ˜ μ΅œμƒλ‹¨μ— μœ„μΉ˜ν•΄μ•Ό ν•œλ‹€. HTML5 이전 버전은 SGML(Standard Generalized Markup Language)에 κΈ°λ°˜ν–ˆκΈ° λ•Œλ¬Έμ— DTD μ°Έμ‘°κ°€ ν•„μˆ˜μ μ΄μ—ˆλ‹€. HTML5λŠ” DTD μ°Έμ‘°κ°€ ν•„μš”ν•˜μ§€ μ•ŠμœΌλ©°, ν•˜μœ„ ν˜Έν™˜μ„ μœ„ν•΄ <!DOCTYPE html>만으둜 μ„ μ–Έν•œλ‹€. (μ°Έκ³ )

ν‘œμ€€λͺ¨λ“œ(Standard mode)와 ν˜Έν™˜λͺ¨λ“œ(Quirks mode)

ν‘œμ€€λͺ¨λ“œμ™€ ν˜Έν™˜λͺ¨λ“œλŠ” λΈŒλΌμš°μ €κ°€ 가진 두 가지 λ Œλ”λ§ λͺ¨λ“œλ‹€. λΈŒλΌμš°μ €λŠ” DTD에 따라 λ Œλ”λ§ν•  λͺ¨λ“œλ₯Ό μ„ νƒν•˜λŠ”λ°, 이 과정을 Doctype sniffingλ˜λŠ” Doctype switching이라고 ν•œλ‹€. λΈŒλΌμš°μ €κ°€ 좜λ ₯ν•˜κ³ μž ν•˜λŠ” λ¬Έμ„œκ°€ μ΅œμ‹ μ΄λΌλ©΄ W3Cλ‚˜ IETF의 ν‘œμ€€μ„ μ—„κ²©νžˆ μ€€μˆ˜ν•˜λŠ” ν‘œμ€€λͺ¨λ“œλ‘œ λ Œλ”λ§μ„ ν•œλ‹€. 반면 λ¬Έμ„œκ°€ 였래된 버전이라면 ν˜Έν™˜λͺ¨λ“œλ‘œ λ Œλ”λ§ν•œλ‹€. ν˜Έν™˜λͺ¨λ“œλŠ” 이전 μ„ΈλŒ€μ˜ λΈŒλΌμš°μ €μ— λ§žλŠ” λΉ„ν‘œμ€€ κ·œμΉ™μ„ λ¬Έμ„œμ— μ μš©ν•΄ 였래된 μ›ΉνŽ˜μ΄μ§€λ“€μ΄ μ΅œμ‹  λΈŒλΌμš°μ €μ—μ„œ 깨져보이지 μ•Šκ²Œ ν•œλ‹€. λΈŒλΌμš°μ €λŠ” λ¬Έμ„œκ°€ μ΅œμ‹ μΈμ§€ μ•„λ‹Œμ§€λ₯Ό DTD둜 νŒλ‹¨ν•œλ‹€. λ§Œμ•½ DTDκ°€ μ‘΄μž¬ν•˜μ§€ μ•Šκ±°λ‚˜ 일뢀가 λˆ„λ½λœ 경우 ν˜Έν™˜λͺ¨λ“œλ‘œ λ¬Έμ„œλ₯Ό ν•΄μ„ν•œλ‹€. λ˜ν•œ IE의 경우 DTD μ•žμ— μ£Όμ„μ΄λ‚˜ λ‹€λ₯Έ λ¬Έμžκ°€ 듀어갔을 λ•Œλ„ λ¬Έμ„œλ₯Ό ν˜Έν™˜λͺ¨λ“œλ‘œ ν•΄μ„ν•œλ‹€. (μ°Έκ³ )

XMLκ³Ό XHTML

XMLκ³Ό XHTMLλͺ¨λ‘ μ›Ή λ¬Έμ„œ κ·œκ²©μ΄λ‹€. XML은 W3Cμ—μ„œ μ—¬λŸ¬ 특수 λͺ©μ μ˜ λ§ˆν¬μ—… μ–Έμ–΄λ₯Ό λ§Œλ“œλŠ” μš©λ„μ—μ„œ ꢌμž₯λ˜λŠ” λ‹€λͺ©μ  λ§ˆν¬μ—… μ–Έμ–΄λ‹€. XML은 λ¬Έμ„œ μƒμ˜ 데이터 이름과 κ°’ 등을 κ΅¬λΆ„ν•˜κΈ° μœ„ν•΄ λ§Œλ“€μ–΄μ‘ŒλŠ”λ°, XML은 SGML(참고둜 SGML은 인터넷이 λ“±μž₯ν•˜κΈ° 이전에 λ§Œλ“€μ–΄μ‘Œλ‹€.)을 κΈ°λ°˜μœΌλ‘œν•œ HTML의 ν•œκ³„λ₯Ό κ·Ήλ³΅ν•˜μ—¬ XHTML을 μ΄λŒμ—ˆλ‹€. XML을 기반으둜 ν•œ HTML을 λ§Œλ“  μ…ˆμ΄λ‹€. XHTML은 XML의 문법을 λ”°λ₯΄λ©°, HTML 문법과 맀우 μœ μ‚¬ν•˜μ§€λ§Œ 더 μ—„κ²©ν•˜λ‹€.

XHTML이 더 ν‘œμ€€μΈ κ²ƒμ²˜λŸΌ λ³΄μ΄μ§€λ§Œ 사싀 κ·Έλ ‡κ²Œ ꢌμž₯ν•˜μ§€ μ•ŠλŠ” μ‚¬λžŒλ“€λ„ μžˆλ‹€. 일단 HTML의 ν˜Έν™˜μ„±μ΄ 더 λ†’κΈ° λ•Œλ¬Έμ΄λ‹€. XHTML은 1.1버전뢀터 λΉ„ν‘œμ€€μ΄λ‚˜ λΉ„κΆŒμž₯ νƒœκ·Έλ₯Ό ν˜Έν™˜ν•˜μ§€ λͺ»ν•˜κ²Œ λ˜λ©΄μ„œ μ§€λ‚˜μΉ˜κ²Œ μ—„κ²©ν•˜λ‹€λŠ”λŠ” λΉ„νŒμ„ λ°›μ•˜λ‹€. IEκ°€ XHTML을 ν•΄μ„ν•˜μ§€ λͺ»ν•˜λŠ” 것 μ—­μ‹œ XHTML의 ν˜Έν™˜μ„±μ„ λ–¨μ–΄λœ¨λ¦¬λŠ” μš”μΈμ΄ 됐닀. λ˜ν•œ XHTMLκ³Ό HTML의 μš”μ†Œμ™€ μ†μ„±μ—λŠ” 차이가 거의 μ—†λ‹€. 단지 HTMLμ—μ„œλŠ” <br>둜 써도 λ˜μ§€λ§Œ XHTMLμ—μ„œλŠ” λ°˜λ“œμ‹œ <br/>둜 μ¨μ•Όν•œλ‹€λŠ” μ •λ„μ˜ 문법이 λ‹€λ₯Ό 뿐이닀. 이런 μ μ—μ„œ ꡳ이 XHTML을 써야할 기술적 μ΄μœ λŠ” μ—†λ‹€λŠ” 것이닀. ν•œνŽΈ HTML5κ°€ λ°œν‘œλ˜λ©΄μ„œ XHTML은 거의 μ‚¬μš©λ˜μ§€ μ•Šκ³  μžˆλ‹€. (μ°Έκ³ )

data-* 속성

HTML5μ—μ„œ μƒˆλ‘œ μΆ”κ°€λœ data- 속성은 μ»€μŠ€ν…€ 데이터 μ†μ„±μœΌλ‘œ, κ°œλ°œμžκ°€ μž„μ˜λ‘œ 이름을 뢙일 수 μžˆλŠ” 속성이닀. data- 속성은 <html> νƒœκ·Έ μƒμ—μ„œ 별닀λ₯Έ μž‘μš©μ„ ν•˜μ§€ μ•ŠλŠ”λ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ DOM의 데이터에 μ ‘κ·Όν•˜κ±°λ‚˜ μ„œλ²„μ—μ„œ λ°›μ•„μ˜¨ 데이터λ₯Ό ν™œμš©ν•΄μ•Ό ν•  λ•Œ μ‚¬μš©λœλ‹€. (μ°Έκ³ )

Cookie, sessionStorage, localStorage

μΏ ν‚€(Cookie), μ„Έμ…˜ μ €μž₯μ†Œ(sessionStorage), 둜컬 μ €μž₯μ†Œ(localStorage)λŠ” λΈŒλΌμš°μ €μ— 데이터λ₯Ό μ €μž₯ν•˜κΈ° μœ„ν•œ 곡간듀이닀. HTML5 μ΄μ „μ—λŠ” μΏ ν‚€λ₯Ό 주둜 μ‚¬μš©ν–ˆλ‹€. ν•˜μ§€λ§Œ μΏ ν‚€λŠ” λ§Žμ€ μ–‘μ˜ 데이터λ₯Ό μ €μž₯ν•  수 μ—†κ³ , λ™μΌν•œ 도메인에 νŽ˜μ΄μ§€λ₯Ό μš”μ²­ν•  λ•Œλ§ˆλ‹€ μ„œλ²„λ‘œ ν•¨κ»˜ μ „μ†‘λ˜λ©°, λ³€μ‘°κ°€ μ‰¬μ›Œ λ³΄μ•ˆμ΄ 취약해진닀. κ·Έλž˜μ„œ HTML5λΆ€ν„°λŠ” μ €μž₯μ†Œ 객체(Storage object)λ₯Ό μ •μ˜ν•˜κ³  μžˆλ‹€. μ €μž₯μ†Œ κ°μ²΄λŠ” μ„Έμ…˜ μ €μž₯μ†Œμ™€ 둜컬 μ €μž₯μ†Œ 두 가지λ₯Ό μ œκ³΅ν•œλ‹€. 둜컬 μ €μž₯μ†Œμ— 데이터λ₯Ό 자μž₯ν•˜λ©΄ μ°½μ΄λ‚˜ 탭을 λ‹«μ•„μ„œ μ„Έμ…˜μ΄ μ’…λ£ŒλΌλ„ 데이터가 보쑴되고, μ—΄λ € μžˆλŠ” λͺ¨λ“  μ°½μ΄λ‚˜ 탭이 데이터λ₯Ό κ³΅μœ ν•˜κ²Œ λœλ‹€. μ„Έμ…˜ μ €μž₯μ†ŒλŠ” λ°˜λŒ€λ‹€. 일반적으둜 λΈŒλΌμš°μ €λŠ” μ €μž₯μ†Œμ— 5mb μ •λ„μ˜ 곡간을 ν• λ‹Ήν•˜λ©°, λ°μ΄ν„°λŠ” ν‚€-κ°’ 쌍(KVP; Key-Value Pair)을 μ΄μš©ν•˜λŠ” μ €μž₯μ†Œ 객체의 μ†μ„±μœΌλ‘œ μ €μž₯λœλ‹€. λ˜ν•œ λΈŒλΌμš°μ €λŠ” 데이터λ₯Ό λ³΄ν˜Έν•˜κΈ° μœ„ν•΄ λ™μΌμΆœμ²˜μ •μ±…μ— 의거, μ„œλ‘œ λ‹€λ₯Έ νŽ˜μ΄μ§€λŠ” 같은 도메인에 μ €μž₯된 λ°μ΄ν„°μ—λ§Œ 접근이 κ°€λŠ₯ν•˜λ„λ‘ μ œν•œν•˜κ³  μžˆλ‹€. (μ°Έκ³ 1) (μ°Έκ³ 2) (μ°Έκ³ 3)

script νƒœκ·Έμ˜ async와 defer

<script> νƒœκ·Έμ— async 속성과 defer 속성이 μΆ”κ°€λœ 것은 HTML5λΆ€ν„°λ‹€. λΈŒλΌμš°μ €κ°€ μ›Ή λ¬Έμ„œμ—μ„œ μ™ΈλΆ€ 슀크립트λ₯Ό λΆˆλŸ¬μ˜€λŠ” <script> νƒœκ·Έλ₯Ό λ§Œλ‚˜λ©΄ ν•΄λ‹Ή 슀크립트λ₯Ό λ‚΄λ €λ°›μ•„ ν•΄μ„ν•˜κ³  μ‹€ν–‰ν•  λ•ŒκΉŒμ§€ HTML μ½”λ“œ νŒŒμ‹± μž‘μ—…μ„ λ’€λ‘œ 미룬닀. κ·Έλž˜μ„œ 무거운 슀크립트 λ¬Έμ„œλ₯Ό 해석할 λ•ŒλŠ” νŽ˜μ΄μ§€ 전체가 λŠλ €μ§€λŠ” ν˜„μƒμ΄ λ°œμƒν•œλ‹€. 그런데 <script> νƒœκ·Έμ— asyncλ‚˜ defer 속성을 μ§€μ •ν•˜λ©΄ λ§ˆν¬μ—… μ½”λ“œ μž‘μ—…μ„ μ€‘λ‹¨ν•˜μ§€ μ•Šκ³  슀크립트λ₯Ό λ™μ‹œμ— λ‚΄λ €λ°›κ²Œ λœλ‹€. deferλŠ” λ§ˆν¬μ—… νŒŒμ‹±μ„ 마친 λ‹€μŒ 슀크립트λ₯Ό μ‹€ν–‰ν•˜λ©°, asyncλŠ” 슀크립트λ₯Ό λ‚΄λ €λ°›λŠ” μ¦‰μ‹œ 슀크립트λ₯Ό μ‹€ν–‰ν•œλ‹€. (μ°Έκ³ )

Progressive rendering

Progressive rendering은 μ½˜ν…μΈ λ₯Ό λΉ λ₯΄κ²Œ 화면에 λ Œλ”λ§ν•˜λŠ” 기법이닀. λΈŒλ‘œλ“œλ°΄λ“œ 인터넷이 λ“±μž₯ν•˜κΈ° 전에 맀우 μ€‘μš”ν•œ κΈ°μˆ μ΄μ—ˆκ³ , λͺ¨λ°”일 ν”Œλž«νΌμ„ κ³ λ €ν•œλ‹€λ©΄ μ—¬μ „νžˆ λ¬΄μ‹œν•  수 μ—†λŠ” 뢀뢄이닀. κ°€μ‹œμ˜μ—­μ˜ μ΄λ―Έμ§€λ§Œ λ‘œλ”©ν•΄μ£ΌλŠ” jQuery ν”ŒλŸ¬κ·ΈμΈ Lazy loading이 쒋은 μ˜ˆλ‹€. (μ°Έκ³ )

CSS

Reset CSS

λͺ¨λ“  λΈŒλΌμš°μ €μ—μ„œ ν†΅μΌλœ 화면을 λ³Ό 수 μžˆλ„λ‘ CSS의 기본값을 μ΄ˆκΈ°ν™”ν•˜λŠ” 것을 λ§ν•œλ‹€. Eric Meyer’s Resetκ³Ό Normalize.cssκ°€ 주둜 쓰인닀.

BFC(Block Formatting Context)와 IFC(Inline Formatting Context)

λͺ¨λ“  HTML μš”μ†ŒλŠ” μ‚¬κ°ν˜• λ°•μŠ€ ν˜•νƒœλ₯Ό μ·¨ν•˜κ³  μžˆλ‹€. λ°•μŠ€λŠ” Box-modelμ΄λΌλŠ” λͺ¨λΈμ„ 가지고 μžˆλ‹€. CSSμš”μ†Œμ—λŠ” displayκ°€ μ‘΄μž¬ν•˜λŠ”λ°, μ΄λŠ” 블둝(Block)κ³Ό 인라인(Inline) 두 가지 값을 κ°€μ§ˆ 수 μžˆλ‹€. block은 블둝 레벨 μš”μ†Œ(Block-level elements)λ₯Ό μ˜λ―Έν•˜λ©°, 블둝 레벨 μš”μ†ŒλŠ” BFC에 μ†ν•˜λŠ” λ°•μŠ€μ΄λ‹€. 블둝 레벨 μš”μ†Œ λ°•μŠ€λŠ” 수직으둜 계속 μŒ“μΈλ‹€. inline은 인라인 레벨 μš”μ†Œ(Inline-level elements)λ₯Ό μ˜λ―Έν•œλ‹€. 인라인 레벨 μš”μ†ŒλŠ” 인라인 레벨 λ°•μŠ€λ₯Ό μƒμ„±ν•˜λ©°, μ΄λŠ” IFC에 μ†ν•œλ‹€. 인라인 레벨 μš”μ†Œ λ°•μŠ€λŠ” μˆ˜ν‰μœΌλ‘œ 계속 μŒ“μΈλ‹€. λ˜ν•œ 인라인 레벨 λ°•μŠ€μ— borderλ‚˜ padding이 λˆˆμ— 보이더라도 사싀은 line-height에 μ˜ν•΄ 높이가 μ‘°μ ˆλœλ‹€. inline-block은 νŠΉμ΄ν•œλ°, 이 μš”μ†ŒλŠ” 인라인 μš”μ†Œμ²˜λŸΌ μˆ˜ν‰μœΌλ‘œ μŒ“μ΄μ§€λ§Œ 블둝 레벨 μš”μ†Œμ˜ λ°•μŠ€μ²˜λŸΌ 높이λ₯Ό κ³„μ‚°ν•œλ‹€. 즉 line-height에 μ˜μ‘΄ν•˜μ§€ μ•ŠλŠ”λ‹€. (μ°Έκ³ )

클리어링(Clearing) 기술

클리어링은 float 속성이 μ£Όλ³€ μš”μ†Œμ˜ λ°°μΉ˜μ— 영ν–₯을 λ―ΈμΉ˜μ§€ μ•Šλ„λ‘ν•˜λŠ” 것이닀. float 속성을 가진 μš”μ†ŒλŠ” μžμ‹ μ˜ μœ„μΉ˜λ₯Ό μ£Όλ³€ μ½˜ν…μΈ λ‘œλΆ€ν„° μƒλŒ€μ μœΌλ‘œ λ°°μΉ˜ν•˜κΈ° λ•Œλ¬Έμ— λ‹€λ₯Έ μ½˜ν…μΈ κ°€ κ·Έ μ£Όμœ„λ‘œ 흐λ₯΄κ²Œ λœλ‹€. 클리어링λ₯Ό 톡해 이λ₯Ό 방지할 수 μžˆλŠ”λ°, μ—¬κΈ°μ—λŠ” 4가지 방법이 μžˆλ‹€.

첫 λ²ˆμ§ΈλŠ” float에 float으둜 λŒ€μ‘ν•˜λŠ” 것이닀. μžμ‹ μš”μ†Œ 뿐만 μ•„λ‹ˆλΌ λΆ€λͺ¨ μš”μ†Œμ—κ²Œλ„ float 속성을 μ§€μ •ν•˜λ©΄ λΆ€λͺ¨ μš”μ†Œκ°€ μžμ‹ μš”μ†Œμ˜ 높이λ₯Ό λ°˜μ˜ν•œλ‹€. 단, μ΄λ ‡κ²Œ ν•˜λ©΄ λΆ€λͺ¨ μš”μ†Œμ˜ λ„ˆλΉ„κ°€ μžμ‹ μš”μ†Œλ₯Ό 담을 μ •λ„λ‘œ 쀄어든닀.

두 λ²ˆμ§ΈλŠ” float에 overflow μ†μ„±μœΌλ‘œ λŒ€μ‘ν•˜λŠ” 것이닀. μžμ‹ μš”μ†Œμ˜ 높이λ₯Ό λΆ€λͺ¨μ—κ²Œ λ°˜μ˜ν•˜λŠ” λ°©λ²•μœΌλ‘œ, λΆ€λͺ¨ μš”μ†Œμ˜ overflow 속성에 auto λ˜λŠ” hidden 값을 λΆ€μ—¬ν•œλ‹€. ν•˜μ§€λ§Œ auto κ°’μ˜ 경우 μžμ‹ μš”μ†Œκ°€ λΆ€λͺ¨ μš”μ†Œλ³΄λ‹€ 클 λ•Œ μŠ€ν¬λ‘€λ°”κ°€ 생기며, hidden κ°’μ˜ 경우 λ„˜μΉ˜λŠ” 뢀뢄이 μž˜λ €λ²„λ¦°λ‹€.

μ„Έ 번째둜 float을 빈 μ—˜λ¦¬λ¨ΌνŠΈλ‘œ 클리어링할 μˆ˜λ„ μžˆλ‹€. float이 μ§€μ •λœ μš”μ†Œ 뒀에 빈 μš”μ†Œλ₯Ό μΆ”κ°€ν•˜κ³  빈 μš”μ†Œμ˜ clear 속성에 both 값을 λΆ€μ—¬ν•˜λŠ” 것인데, μ˜λ―Έμ—†λŠ” μš”μ†Œλ₯Ό μ‚¬μš©ν•˜κ²Œ 되기 λ•Œλ¬Έμ— ꢌμž₯ν•˜μ§€ μ•ŠλŠ”λ‹€.

λ§ˆμ§€λ§‰μœΌλ‘œ float을 가상 μ„ νƒμž :after둜 ν΄λ¦¬μ–΄λ§ν•˜λŠ” 방법이 μžˆλ‹€. 가상 μ„ νƒμžλŠ” 가상 클래슀(pseudo-class)와 가상 μš”μ†Œ(pseudo-element)둜 λ‚˜λ‰œλ‹€. 가상 ν΄λž˜μŠ€λŠ” νŠΉμ • μš”μ†Œμ— μ•„λ¬΄λŸ° classλ₯Ό λΆ€μ—¬ν•˜μ§€ μ•Šμ•˜μ§€λ§Œ 마치 classλ₯Ό λ³€κ²½ν•œ 것과 같은 역동적인 효과λ₯Ό λ‚Ό 수 μžˆλŠ” 것듀이닀. :hover, :active, :focus 등이 여기에 μ†ν•œλ‹€. 가상 μš”μ†ŒλŠ” μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” μš”μ†Œλ₯Ό κ°€μƒμœΌλ‘œ μƒμ„±ν•˜λŠ” μ„ νƒμžλ‹€. :first-line, :before, :afterκ°€ 여기에 μ†ν•œλ‹€. 가상 μš”μ†ŒλŠ” HTML λ¬Έμ„œμ— μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” μ½˜ν…μΈ λ₯Ό 좜λ ₯ν•˜κΈ°λ„ ν•œλ‹€. μ΄λ ‡κ²Œ 가상 μš”μ†Œλ₯Ό μƒμ„±ν•œ λ‹€μŒ display: block; clear: both; 처리λ₯Ό ν•˜λ©΄ κΉ”λ”ν•˜κ²Œ 클리어링을 ν•  수 μžˆλ‹€. κ°€μž₯ ꢌμž₯ν•˜λŠ” 방법이닀. (μ°Έκ³ )

Image Replacement

μš”μ†Œλ₯Ό μ΄λ―Έμ§€λ‘œ κ΅μ²΄ν•˜λŠ” 기법이닀. 기본적으둜 λ‹€μŒκ³Ό 같이 ν•˜λ©΄ λœλ‹€:

.elements {
  background-image: url("image.png");
}

그리고 A History of CSS Image Replacementμ—μ„œ 더 λ§Žμ€ μ˜ˆμ‹œλ₯Ό λ³Ό 수 μžˆλ‹€.

IE box model과 W3C box model의 차이

λΈŒλΌμš°μ €μ— 따라 λ°•μŠ€ λͺ¨λΈμ΄ 달라 μš”μ†Œμ— μ§€μ •λœ λ„ˆλΉ„μ™€ 높이가 같아도 μ„œλ‘œ λ‹€λ₯΄κ²Œ λ Œλ”λ§λœλ‹€. λ°•μŠ€ λͺ¨λΈμ€ 기본적으둜 margin, border, padding, content둜 κ΅¬μ„±λ˜μ–΄ μžˆλ‹€.

두 λ°•μŠ€ λͺ¨λΈ.

W3C의 ν‘œμ€€ λ°•μŠ€ λͺ¨λΈμ€ μ½˜ν…μΈ μ˜ λ„ˆλΉ„, λ†’μ΄λ§Œμ„ width와 height둜 κ³„μ‚°ν•˜λŠ” 반면, IE의 λ°•μŠ€ λͺ¨λΈμ€ μ½˜ν…μΈ μ™€ padding, borderλ₯Ό ν¬ν•¨ν•œ λ„ˆλΉ„μ™€ 높이λ₯Ό width, height둜 κ³„μ‚°ν•œλ‹€. 이λ₯Ό μœ„ν•œ 해결책은 (1)DTDλ₯Ό 톡해 λΈŒλΌμš°μ €κ°€ 쿽슀 λͺ¨λ“œλ‘œ λ™μž‘ν•˜μ§€ μ•Šλ„λ‘ ν•˜κ±°λ‚˜ (2)wrapper μš”μ†Œλ₯Ό μ‚¬μš©ν•΄ wrapper μš”μ†Œμ— width, height 값을 ν• λ‹Ήν•˜κ³  λ‚΄λΆ€ μ—˜λ¦¬λ¨ΌνŠΈμ— padding, border 값을 ν• λ‹Ήν•˜κ±°λ‚˜ (3)Conditional commentλ₯Ό μΆ”κ°€ν•˜κ±°λ‚˜ (3)css hack을 μ‚¬μš©ν•˜λŠ” 방법이 μžˆλ‹€. (μ°Έκ³ )

κ·Έλ¦¬λ“œ μ‹œμŠ€ν…œ (Grid system)

λ°˜μ‘ν˜• μ›ΉνŽ˜μ΄μ§€λ₯Ό λ§Œλ“€κΈ° μœ„ν•΄ 자주 μ“°μ΄λŠ” κΈ°μˆ μ΄λ‹€. νŽ˜μ΄μ§€ μœ„μ— 격자λ₯Ό 그리고 κ·Έ μœ„μ— μš”μ†Œλ₯Ό κ·Έ μœ„μ— λ°°μΉ˜ν•˜λŠ” λ°©λ²•μœΌλ‘œ, 기술적인 이유만이 μ•„λ‹ˆλΌ λ””μžμΈμ μΈ μ΄μœ λ‘œλ„ μ‚¬μš©ν•œλ‹€. κ·Έλ¦¬λ“œ λ ˆμ΄μ•„μ›ƒμ€ CSSλ₯Ό μ΄μš©ν•΄ λ§Œλ“€ 수 μžˆλ‹€. μ‰½κ²Œ κ·Έλ¦¬λ“œ μ‹œμŠ€ν…œμ„ μ‚¬μš©ν•˜κΈ° μœ„ν•΄μ„œ λΆ€νŠΈμŠ€νŠΈλž©μ„ μ‚¬μš©ν•˜κΈ°λ„ ν•œλ‹€.

CSS μ „μ²˜λ¦¬κΈ°

CSS λ¬Έμ„œκ°€ λ°©λŒ€ν•΄μ§μ— 따라 μž‘μ—… νš¨μœ¨μ„ 높이기 μœ„ν•΄ λ“±μž₯ν•œ κΈ°μˆ μ΄λ‹€. μ „μ²˜λ¦¬κΈ°λ₯Ό μ‚¬μš©ν•˜λ©΄ CSS μƒμ˜ 반볡적인 뢀뢄을 μŠ€ν¬λ¦½νŠΈλ‚˜ λ³€μˆ˜λ‘œ μ²˜λ¦¬ν•  수 있고, λ‹€μ–‘ν•œ 연산이 κ°€λŠ₯해진닀. Lessλ‚˜ Sassκ°€ λŒ€ν‘œμ μΈ CSS μ „μ²˜λ¦¬κΈ°μ΄λ‹€.

@bgColor: #DFDFDF;
body {
  background-color: @bgColor;
}

μœ„λŠ” Less의 μ˜ˆμ‹œλ‹€. μ»΄νŒŒμΌμ„ ν•˜λ©΄ body의 background-color 값이 #DFDFDF둜 μΉ˜ν™˜λœ CSS μ½”λ“œλ₯Ό 얻을 수 μžˆλ‹€.

λ°˜μ‘ν˜• λ””μžμΈ(Responsive design)κ³Ό μ μ‘ν˜• λ””μžμΈ(Adaptive design)

λ°˜μ‘ν˜• λ””μžμΈμ€ λ””μŠ€ν”Œλ ˆμ΄μ˜ λ„ˆλΉ„μ— 따라 λ ˆμ΄μ•„μ›ƒμ„ λ³€ν˜•μ‹œν‚€κ³ , μ μ‘ν˜• λ””μžμΈμ€ 고정적 λ ˆμ΄μ•„μ›ƒμ„ 가진닀. λ°˜μ‘ν˜• 웹이 미디어쿼리λ₯Ό μ‚¬μš©ν•΄ μŠ€νƒ€μΌ λΆ„κΈ°λ₯Ό λ‚˜λˆ„λŠ” 방법이라면 μ μ‘ν˜• 웹은 λ””λ°”μ΄μŠ€λ₯Ό 체크해 κ·Έ λ””λ°”μ΄μŠ€μ— μ΅œμ ν™”λœ λ§ˆν¬μ—…μ„ ν˜ΈμΆœν•˜λŠ” 방법이닀. (μ°Έκ³ )

Javascript

좔상적 κ°™μŒ 비ꡐ(Abstract equality comparison)와 μ—„κ²©ν•œ κ°™μŒ 비ꡐ(Strict equality comparison)

좔상적 κ°™μŒ 비ꡐ(==)λŠ” 두 λ³€μˆ˜λ₯Ό 같은 데이터 νƒ€μž…μœΌλ‘œ λ³€ν™˜ν•œ λ‹€μŒ 값을 λΉ„κ΅ν•˜λŠ” 반면, μ—„κ²©ν•œ κ°™μŒ 비ꡐ(===)λŠ” 두 λ³€μˆ˜μ˜ κ°’κ³Ό 데이터 νƒ€μž…μ„ ν•¨κ»˜ λΉ„κ΅ν•œλ‹€. λ”°λΌμ„œ κ°’κ³Ό νƒ€μž…μ΄ μ™„μ „νžˆ μΌμΉ˜ν•΄μ•Ό trueλ₯Ό λ°˜ν™˜ν•œλ‹€. μ—„κ²©ν•œ κ°™μŒ 비ꡐλ₯Ό μ‚¬μš©ν•œ 비ꡐ κ²°κ³ΌλŠ” 예츑이 쉽고 νƒ€μž… κ°•μ œκ°€ μΌμ–΄λ‚˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— 좔상적 κ°™μŒ 비ꡐλ₯Ό μ‚¬μš©ν•˜λŠ” 것보닀 λ‚«λ‹€. (μ°Έκ³ )

κ³ κΈ‰ μ˜ˆμ™Έμ²˜λ¦¬(Advanced exception handling)

try...catch와 throw둜 κ³ κΈ‰ μ˜ˆμ™Έμ²˜λ¦¬λ₯Ό ν•  수 μžˆλ‹€. 참고둜 ν”„λ‘œκ·Έλž¨ μ‹€ν–‰ 쀑에 λ°œμƒν•˜λŠ” 였λ₯˜λŠ” μ˜ˆμ™Έ(Exception)이라고 ν•˜λ©°, μ½”λ“œμ˜ 문법적 였λ₯˜λŠ” μ—λŸ¬(Error)라고 ν•œλ‹€. try...catchλŠ” ꡬ동 쀑 μ½”λ“œμƒμ—μ„œ λ°œμƒν•  수 μžˆλŠ” 였λ₯˜λ“€μ„ μž‘μ•„μ€€λ‹€.

try {
  // try 블둝은 μ˜ˆμ™Έκ°€ λ°œμƒν•  μˆ˜λ„ μžˆλŠ” λΆ€λΆ„
} catch(e) {
  // catch 블둝은 try λΈ”λ‘μ—μ„œ μ˜ˆμ™Έκ°€ λ°œμƒν–ˆμ„ λ•Œ ν˜ΈμΆœλ˜λŠ” λΆ€λΆ„
  // 객체 eλŠ” nameκ³Ό message 속성을 가짐
} finally {
  // μ„ νƒμ μœΌλ‘œ finally 블둝을 μΆ”κ°€ν•  수 있음
  // μ˜ˆμ™Έ λ°œμƒ μ—¬λΆ€λ₯Ό λ– λ‚˜ 무쑰건 μ‹€ν–‰λ˜μ–΄μ•Ό ν•  λΆ€λΆ„
}

throw문은 κ°•μ œλ‘œ μ˜ˆμ™Έλ₯Ό λ°œμƒμ‹œν‚¬ λ•Œ μ‚¬μš©ν•œλ‹€. throw의 문법은 λ‹€μŒκ³Ό κ°™λ‹€:

throw expression;

ν‘œν˜„μ‹μ˜ 값은 숫자, 문자 λ“± μ–΄λ–€ 것이든 상관없닀. throwκ°€ λ°œμƒν•˜λ©΄ κ°€μž₯ κ°€κΉŒμš΄ catch λΈ”λ‘μœΌλ‘œ μ΄λ™ν•œλ‹€. λ‹€μŒκ³Ό 같이 μ‚¬μš©ν•˜λ©΄ λœλ‹€:

try {
  if(a > 100) {
    throw "Value too high";
  }
} catch(e) {
  alert(e);
}

(μ°Έκ³ 1) (μ°Έκ³ 2)

Event delegation

이벀트 λ¦¬μŠ€λ„ˆλ₯Ό λ“±λ‘ν•˜λŠ” 것은 DOM μž…μž₯μ—μ„œλŠ” λΆ€λ‹΄μŠ€λŸ¬μš΄ 일이며, λ¦¬μ†ŒμŠ€λ₯Ό μƒλ‹Ήνžˆ μž‘μ•„λ¨ΉλŠ” μž‘μ—…μ΄λ‹€. κ·Έλž˜μ„œ μš”μ†Œ ν•˜λ‚˜ν•˜λ‚˜μ— 이벀트λ₯Ό λ“±λ‘ν•˜λŠ” λŒ€μ‹  μœ„μž„μ„ ν•˜λŠ” 것이 λ°”λžŒμ§ν•˜λ‹€. μžμ‹ μš”μ†Œλ“€μ„ 감싼 λΆ€λͺ¨ μš”μ†Œμ— 이벀트λ₯Ό 등둝해 이벀트λ₯Ό μœ„μž„ν•˜λ©΄ 각각의 μžμ‹ μš”μ†Œλ“€μ— 이벀트λ₯Ό λ“±λ‘ν•˜λŠ” 효과λ₯Ό λ‚Ό 수 μžˆλ‹€. 이벀트λ₯Ό μœ„μž„ν•˜λ©΄ λ¦¬μ†ŒμŠ€λ₯Ό μ ˆμ•½ν•  수 μžˆμ„ 뿐만 μ•„λ‹ˆλΌ DOM νŠΈλ¦¬μ— μƒˆλ‘œμš΄ μš”μ†Œλ₯Ό μΆ”κ°€ν–ˆμ„ λ•Œ μ½”λ“œλ₯Ό μΆ”κ°€ν•  ν•„μš”κ°€ 없어지고, μ½”λ“œμ˜ 양을 쀄일 μˆ˜λ„ μžˆλ‹€. λ‹€μŒμ€ ul μš”μ†Œμ˜ μžμ‹ μš”μ†ŒμΈ li μš”μ†Œλ₯Ό ν΄λ¦­ν•˜λ©΄ ν•΄λ‹Ή li μš”μ†Œκ°€ μ‚¬λΌμ§€λŠ” μ½”λ“œμ΄λ‹€.

<ul id="todoList">
  <li>TODO: A</li>
  <li>TODO: B</li>
  <li>TODO: C</li>
</ul>

μ•„μ£Ό ν‰λ²”ν•œ λ¦¬μŠ€νŠΈμ΄λ‹€.

function getTarget(e) {
  if(!e) { // event 객체가 μ‘΄μž¬ν•˜μ§€ μ•ŠμœΌλ©΄
    e = window.event; // IE의 event 객체λ₯Ό μ‚¬μš©
  }

  return e.target || e.srcElement; // μ΄λ²€νŠΈκ°€ λ°œμƒν•œ μš”μ†Œλ₯Ό κ°€μ Έμ˜΄
}

function itemDone(e) {
  var elTarget, elParent;

  elTarget = getTarget(e); // μ΄λ²€νŠΈκ°€ λ°œμƒν•œ μš”μ†Œ κ°€μ Έμ˜΄ (li)
  elParent = target.parentNode; // ν•΄λ‹Ή μš”μ†Œμ˜ λΆ€λͺ¨ μš”μ†Œλ₯Ό κ°€μ Έμ˜΄ (ul)
  elParent.removeChild(elTarget); // μ΄λ²€νŠΈκ°€ λ°œμƒν•œ μš”μ†Œλ₯Ό μ œκ±°ν•¨ (li)
}

(function(){
  var el = document.getElementById('todoList');

  if(el.addEventListener) { // 이벀트 λ¦¬μŠ€λ„ˆκ°€ μ§€μ›λ˜λ©΄
    el.addEventListener('click', function(e) { // 클릭 μ΄λ²€νŠΈμ— λ¦¬μŠ€λ„ˆλ₯Ό 지정
      itemDone(e);
    }, false); // 이벀트 버블링을 μ‚¬μš©
  } else { // 이벀트 λ¦¬μŠ€λ„ˆκ°€ μ§€μ›λ˜μ§€ μ•ŠμœΌλ©΄
    el.attachEvent('onclick', function(e) { // IE의 onclick 이벀트λ₯Ό μ‚¬μš©
      itemDone(e);
    }
  });
})();

IEκΉŒμ§€ κ³ λ €ν•œ μ½”λ“œλ‹€. ν•˜λ‚˜μ˜ 이벀트 λ¦¬μŠ€λ„ˆλ‘œ μš”μ†Œ 3개λ₯Ό μ œμ–΄ν•˜κ³  μžˆλ‹€λ‹€. jQueryλŠ” 보닀 νŽΈν•˜κ²Œ 이벀트λ₯Ό 바인딩할 수 μžˆλ„λ‘ .delegate() λ©”μ†Œλ“œλ₯Ό μ œκ³΅ν•˜κ³  μžˆλ‹€.

Prototype 기반 상속

μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” ν΄λž˜μŠ€λΌλŠ” κ°œλ…μ΄ μ—†κΈ° λ•Œλ¬Έμ— ν”„λ‘œν† νƒ€μž…(Prototype)이 클래슀λ₯Ό λŒ€μ‹ ν•΄ 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ°μ˜ 핡심을 λ§‘λŠ”λ‹€. λ‹€λ§Œ ES6λΆ€ν„° 클래슀 문법이 좔가됐기 λ•Œλ¬Έμ— ν”„λ‘œν† νƒ€μž…μ— 직접 μ ‘κ·Όν•  ν•„μš”κ°€ μ—†μ–΄μ‘Œλ‹€. ES6와 ν•¨κ»˜ Javascript둜 OOPν•˜κΈ°λ₯Ό μ°Έκ³ ν•΄λ³΄μž. κ·Έλž˜λ„ ν”„ν† λ‘œνƒ€μž…μ€ μ—¬μ „νžˆ μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 기반이기 λ•Œλ¬Έμ— μ•Œμ•„λ‘λŠ” 것이 μ’‹λ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œλŠ” 이 ν”„λ‘œν† νƒ€μž…μ„ 톡해 λ‹€λ₯Έ 객체지ν–₯ μ–Έμ–΄μ—μ„œ μ“°μ΄λŠ” 클래슀λ₯Ό κ΅¬ν˜„ν•  수 μžˆλ‹€.

function Player() {
  this.hp = 100;
  this.mp = 50;
}

var kim = new Player();
var park = new Player();

console.log(kim.hp); // 100
console.log(kim.mp); // 50

console.log(park.hp); // 100
console.log(park.mp); // 50

kimκ³Ό park은 hp와 mpλ₯Ό 각각 100, 50μ”© 가지고 μžˆλ‹€. λ§Œμ•½ 객체λ₯Ό 100개 λ§Œλ“€λ©΄ 200개의 λ³€μˆ˜κ°€ λ©”λͺ¨λ¦¬μ— ν• λ‹Ήλœλ‹€. ν”„λ‘œν† νƒ€μž…μ„ ν™œμš©ν•˜λ©΄ λ©”λͺ¨λ¦¬λ₯Ό μ•„λ‚„ 수 μžˆλ‹€.

function Player() {}
Player.prototype.hp = 100;
Player.prototype.mp = 50;

var kim = new Player();
var park = new Player();

kimκ³Ό park은 ν”„λ‘œν† νƒ€μž…μ— μ—°κ²°λœ Player 객체의 값을 κ°€μ Έλ‹€ μ“Έ 수 μžˆλ‹€. hp와 mpλ₯Ό kimκ³Ό park이 κ³΅μœ ν•˜λŠ” 것이닀. μ΄λŸ¬ν•œ λ§€μ»€λ‹ˆμ¦˜μœΌλ‘œ ν”„λ‘œν† νƒ€μž…μ„ μ΄μš©ν•΄ 상속을 κ΅¬ν˜„ν•  수 μžˆλ‹€. (μ°Έκ³ 1) (μ°Έκ³ 2)

null, undefined, undeclared의 차이

이건 μ’…μ’… ν—·κ°ˆλ¦¬λŠ” κ²½μš°κ°€ μžˆλ‹€. null은 μ–΄λ– ν•œ 값도 가리킀지 μ•ŠλŠ”λ‹€λŠ” 의미의 μ›μ‹œκ°’μ΄λ‹€. λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜κ³  null을 ν• λ‹Ήν•œ 경우 ν•΄λ‹Ή λ³€μˆ˜κ°€ μ–΄λ– ν•œ 값도 가지지 μ•Šμ•˜λ‹€λŠ” μ˜λ―Έκ°€ λœλ‹€. undefinedλŠ” λ³€μˆ˜κ°€ μ„ μ–Έλμ§€λ§Œ 값이 ν• λ‹Ήλ˜μ§€ μ•Šμ•˜λ‹€λŠ” 것을 μ˜λ―Έν•˜λŠ” 값이닀. 즉, null은 κ°œλ°œμžλ‘œλΆ€ν„° ν• λ‹Ήλ˜λŠ” 값이고, undefinedλŠ” μ•„μ˜ˆ 할당을 ν•˜μ§€ μ•Šμ€ μƒνƒœλ‹€. undeclaredλŠ” λ³€μˆ˜ μžμ²΄κ°€ μ„ μ–Έλ˜μ§€ μ•Šμ•˜λ‹€λŠ” μ˜λ―Έλ‹€. μ½˜μ†”μ—μ„œλŠ” undefined와 λ˜‘κ°™μ΄ ν‘œκΈ°λ˜κΈ° λ•Œλ¬Έμ— λ³€μˆ˜κ°€ μ΄ˆκΈ°ν™”λ˜μ§€ μ•Šμ•˜λ‹€λŠ” 것인지, μ•„μ˜ˆ μ„ μ–Έλ˜μ§€ μ•Šμ•˜λ‹€λŠ” 것인지 확인할 ν•„μš”κ°€ μžˆλ‹€.

ν΄λ‘œμ €(Closure)

μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œλŠ” ν•¨μˆ˜ μ•ˆμ— 또 λ‹€λ₯Έ ν•¨μˆ˜λ₯Ό μ„ μ–Έν•  수 μžˆλŠ”λ°, ν•¨μˆ˜ μ•ˆμ˜ ν•¨μˆ˜μΈ λ‚΄λΆ€ν•¨μˆ˜(inner function)λŠ” μ™ΈλΆ€ν•¨μˆ˜(outer function)의 μ§€μ—­λ³€μˆ˜μ— μ ‘κ·Όν•  수 μžˆλ‹€. μ™ΈλΆ€ν•¨μˆ˜μ˜ 싀행이 λλ‚˜μ„œ μ™ΈλΆ€ν•¨μˆ˜κ°€ μ†Œλ©Έλœ 이후에도 λ‚΄λΆ€ν•¨μˆ˜λŠ” μ™ΈλΆ€ν•¨μˆ˜μ— μ ‘κ·Όν•  수 μžˆλ‹€. μ΄λŸ¬ν•œ λ©”μ»€λ‹ˆμ¦˜μ„ ν΄λ‘œμ €λΌκ³  ν•œλ‹€. MDN에 ν΄λ‘œμ €λ₯Ό ν™œμš©ν•œ μž¬λ°ŒλŠ” μ˜ˆμ œκ°€ μžˆλ‹€:

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

μ—¬κΈ°μ„œ makeAdder(x)λŠ” xλ₯Ό 인자둜 λ°›μ•„μ„œ μƒˆλ‘œμš΄ ν•¨μˆ˜λ₯Ό λ°˜ν™˜ν•œλ‹€. 그리고 λ°˜ν™˜λ˜λŠ” λ‚΄λΆ€ ν•¨μˆ˜λŠ” yλ₯Ό 인자둜 λ°›μ•„ x + yλ₯Ό λ°˜ν™˜ν•œλ‹€. (μ°Έκ³ 1) (μ°Έκ³ 2)

μžλ°”μŠ€ν¬λ¦½νŠΈ λͺ¨λ“ˆ νŒ¨ν„΄(Module pattern)

λͺ¨λ“ˆ νŒ¨ν„΄(Module pattern)은 μ½”λ“œ 섀계 방법을 λ§ν•œλ‹€. μ—¬κΈ°μ„œλŠ” 객체λ₯Ό publicκ³Ό private으둜 λ‚˜λˆ„λŠ” μΊ‘μŠν™”κ°€ 핡심이닀. μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” publicμ΄λ‚˜ private와 같은 μ ‘κ·Ό μ œν•œμžλ₯Ό μ œκ³΅ν•˜μ§€ μ•Šμ§€λ§Œ, ν΄λ‘œμ €λ₯Ό μ΄μš©ν•΄ κ΅¬ν˜„ν•  수 μžˆλ‹€. private methodλŠ” μ½”λ“œ 접근을 μ œν•œν•  수 μžˆμ„λΏλ§Œ μ•„λ‹ˆλΌ 좔가적인 μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ λ‹€λ₯Έ μŠ€ν¬λ¦½νŠΈμ™€ 이름이 μΆ©λŒν•˜λŠ” 것을 막을 수 μžˆλ‹€. 맀우 기본적인 방법은 λͺ¨λ“  μ½”λ“œλ₯Ό 읡λͺ…ν•¨μˆ˜ μ•ˆμ— 집어넣어 private μŠ€μ½”ν”„λ‘œ λ§Œλ“œλŠ” 것이닀. ν•˜μ§€λ§Œ μ΄λ ‡κ²Œ ν•˜λ©΄ μ½”λ“œλ₯Ό μž¬μ‚¬μš©ν•˜κΈ° λΆˆνŽΈν•΄μ§€κΈ° λ•Œλ¬Έμ— λ³„λ„μ˜ λ„€μž„μŠ€νŽ˜μ΄μŠ€λ₯Ό μ μš©ν•΄μ•Ό ν•œλ‹€. (μ°Έκ³ 1) (μ°Έκ³ 2

λ„€μ΄ν‹°λΈŒ 객체(Native object), 호슀트 객체(Host object), Built-in 객체

κ°μ²΄λŠ” 크게 3κ°€μ§€λ‘œ κ΅¬λΆ„λœλ‹€. λ„€μ΄ν‹°λΈŒ κ°μ²΄λŠ” ECMAScript λͺ…세에 μ •μ˜λœ 객체둜, μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λͺ¨λ“  엔진에 κ΅¬ν˜„λœ ν‘œμ€€κ°μ²΄μ΄λ‹€. BOM(Browser Object Model)κ³Ό DOM 등은 λͺ¨λ‘ λ„€μ΄ν‹°λΈŒ 객체며, μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진을 κ΅¬λ™ν•˜λŠ” μΈ‘μ—μ„œ λΉŒλ“œλ˜λŠ” 객체이닀. 호슀트 κ°μ²΄λŠ” κ°œλ°œμžκ°€ μ •μ˜ν•œ 객체이닀. λ§ˆμ§€λ§‰μœΌλ‘œ Built-in κ°μ²΄λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진을 κ΅¬μ„±ν•˜λŠ” κΈ°λ³Έ 객체듀을 ν¬ν•¨ν•œλ‹€. Number, String, Array, Date λ“±μ˜ λ‚΄μž₯객체듀이 μžˆλ‹€. (μ°Έκ³ )

κΈ°λŠ₯ κ²€μΆœ(Feature detection)κ³Ό κΈ°λŠ₯ μΆ”λ‘ (Feature inference)

κΈ°λŠ₯ κ²€μΆœμ΄λž€ μŠ€ν¬λ¦½νŠΈκ°€ ν˜ΈμΆœν•˜λŠ” κΈ°λŠ₯을 μ‚¬μš©μžμ˜ λΈŒλΌμš°μ €κ°€ μ§€μ›ν•˜λŠ”μ§€ μ²΄ν¬ν•˜λŠ” 것을 λ§ν•œλ‹€. λ‹€μŒμ€ λΈŒλΌμš°μ €κ°€ GPSλ₯Ό μ§€μ›ν•˜λŠ”μ§€ ν™•μΈν•˜λŠ” μ½”λ“œλ‹€.

if(navigator.geolocation) {...}

κΈ°λŠ₯ 좔둠도 κΈ°λŠ₯ κ²€μΆœμ²˜λŸΌ λΈŒλΌμš°μ €κ°€ νŠΉμ • κΈ°λŠ₯을 μ§€μ›ν•˜λŠ”μ§€ μ²΄ν¬ν•˜λŠ” 것이닀. ν•˜μ§€λ§Œ 'AκΈ°λŠ₯을 μ§€μ›ν•˜λ©΄ BκΈ°λŠ₯도 지원할 것이닀.'λΌλŠ” 좔둠이 바탕이 λœλ‹€. λ³„λ‘œ 쒋지 μ•Šμ€ 방법이닀. (μ°Έκ³ )

ν˜Έμ΄μŠ€νŒ…(Hoisting)

ν˜Έμ΄μŠ€νŒ…μ€ 인터프리터가 슀크립트λ₯Ό 해석할 λ•Œ, λ³€μˆ˜μ˜ μ •μ˜κ°€ μŠ€μ½”ν”„μ— 따라 μ„ μ–Έκ³Ό ν• λ‹ΉμœΌλ‘œ λΆ„λ¦¬λ˜μ–΄ 선언을 항상 μ»¨ν…μŠ€νŠΈμ˜ μ΅œμƒμœ„λ‘œ λŒμ–΄μ˜¬λ¦¬λŠ” 것을 μ˜λ―Έν•œλ‹€. 즉, λ³€μˆ˜λ₯Ό μ–΄λ””μ—μ„œ μ„ μ–Έν•˜λ“  μΈν„°ν”„λ¦¬ν„°λŠ” μ΅œμƒλ‹¨μ—μ„œ μ„ μ–Έν•œ κ²ƒμœΌλ‘œ ν•΄μ„ν•œλ‹€. μ΄λŠ” λ³€μˆ˜ 뿐 μ•„λ‹ˆλΌ ν•¨μˆ˜μ—λ„ μ μš©λœλ‹€. λ”°λΌμ„œ μƒλ‹¨μ—μ„œ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜κ³ , ν•˜λ‹¨μ—μ„œ ν•¨μˆ˜λ₯Ό μ •μ˜ν•΄λ„ κΈ°λŠ₯적인 λ¬Έμ œλŠ” μ—†λ‹€. (μ°Έκ³ )

이벀트 흐름(Event flow)

HTML μš”μ†Œκ°€ λ‹€λ₯Έ μš”μ†Œμ˜ 내뢀에 μ€‘μ²©λ˜μ–΄ μžˆμ„ λ•Œ μžμ‹ μš”μ†Œλ₯Ό ν΄λ¦­ν•˜λ©΄ λΆ€λͺ¨ μš”μ†Œλ₯Ό ν΄λ¦­ν•œ μ…ˆμ΄ λœλ‹€. 이처럼 μ΄λ²€νŠΈλŠ” 흐름을 가지고 있으며, 이것을 이벀트 흐름이라고 λΆ€λ₯Έλ‹€. 이벀트 νλ¦„μ—λŠ” 두 가지 방식이 μžˆλ‹€. λ¨Όμ € 이벀트 버블링(Event bubbling)은 μ΄λ²€νŠΈκ°€ μ§μ ‘μ μœΌλ‘œ λ°œμƒν•œ λ…Έλ“œλ‘œλΆ€ν„° μ‹œμž‘ν•΄ λ°”κΉ₯ λ…Έλ“œλ‘œ μ΄λ²€νŠΈκ°€ 퍼져 λ‚˜κ°€λŠ” 방식을 λ§ν•œλ‹€. λŒ€λΆ€λΆ„μ˜ λΈŒλΌμš°μ €κ°€ 기본적으둜 이 방식을 μ§€μ›ν•œλ‹€. λ°˜λŒ€λ‘œ 이벀트 캑쳐링(Event capturing)은 λ°”κΉ₯ λ…Έλ“œλΆ€ν„° μ‹œμž‘ν•΄μ„œ μ•ˆμͺ½μœΌλ‘œ νΌμ§€λŠ” 방식이닀. IE8 ν˜Ήμ€ κ·Έ 이전 λ²„μ „μ—μ„œλŠ” μ§€μ›λ˜μ§€ μ•ŠλŠ”λ‹€.

document load event와 DOMContentLoaded event

DOM을 μ œμ–΄ν•˜λŠ” μŠ€ν¬λ¦½νŠΈλŠ” λ§ˆν¬μ—…μ˜ λͺ¨λ“  μš”μ†Œμ— λŒ€ν•œ μ²˜λ¦¬κ°€ λλ‚œ 뒀에 λ‘œλ“œλ˜μ–΄μ•Ό ν•œλ‹€. κ·Έλž˜μ„œ 보톡 <body> νƒœκ·Έ μ΅œν•˜λ‹¨μ—μ„œ 슀크립트λ₯Ό λΆˆλŸ¬μ˜€λ„λ‘ν•œλ‹€. 또 λ‹€λ₯Έ 방법은 이벀트λ₯Ό μ΄μš©ν•˜λŠ” 것이닀. document load eventλŠ” νŽ˜μ΄μ§€μ˜ λͺ¨λ“  λ¦¬μ†ŒμŠ€κ°€ λ‘œλ“œλœ 이후에 μ‹€ν–‰λœλ‹€. λ•Œλ¬Έμ— ꡬ동이 μ§€μ—°λ˜μ–΄ μ‚¬μš©μž κ²½ν—˜μ„ μ €ν•˜ν•  수 μžˆλ‹€. 반면 DOMContentLoaded eventλŠ” 슀크립트 λ‘œλ“œλ₯Ό 마치고 싀행이 κ°€λŠ₯ν•œ μ‹œμ μ— λ°”λ‘œ μ‹€ν–‰λœλ‹€. (μ°Έκ³ )

쑰건뢀 μ‚Όν•­ μ—°μ‚°μž(Conditional ternary operator)

보톡 κ·Έλƒ₯ 'μ‚Όν•­ μ—°μ‚°μžβ€™μ΄λΌκ³  λΆ€λ₯Έλ‹€. if문을 μΆ•μ•½ν•΄μ„œ μ“Έ 수 μžˆλŠ” μœ μš©ν•œ μ—°μ‚°μžμ΄μ§€λ§Œ, κ³Όν•˜κ²Œ μ‚¬μš©ν•˜λ©΄ μ½”λ“œμ˜ 가독성을 λ–¨μ–΄λœ¨λ¦΄ 수 μžˆλ‹€.

var a = 1, b = 2;

console.log(a < b ? "True" : "False"); // "True"
console.log(a > b ? "True" : "False"); // "False"

a < b ? (
  console.log("True");
  alert("True");
) : (
  console.log("False");
  alert("False");
); // "True"

쑰건이 trueλ©΄ μ „μžμ˜ 값을 λ°˜ν™˜ν•˜κ³ , falseλ©΄ ν›„μžμ˜ 값을 λ°˜ν™˜ν•œλ‹€.

use strict

ES6μ—μ„œ μƒˆλ‘œ μΆ”κ°€λœ κΈ°λŠ₯으둜, μŠ€ν¬λ¦½νŠΈμ— "use strict;" ꡬ문을 μΆ”κ°€ν•˜λ©΄ strict modeμ—μ„œ μ‹€ν–‰ν•˜κ²Œ λœλ‹€. strict modeλŠ” μ½”λ”© μ‹€μˆ˜λ₯Ό μ°Ύμ•„ μ˜ˆμ™Έλ₯Ό λ°œμƒμ‹œν‚€κ³ , μ „μ—­ 객체에 μ ‘κ·Όν•˜λŠ” 것과 같은 μœ„ν—˜ν•œ μ•‘μ…˜μ„ λ§‰λŠ”λ‹€. 슀크립트 전체에 μ μš©ν•  μˆ˜λ„ 있고 νŠΉμ • ν•¨μˆ˜μ—λ§Œ μ μš©ν•  μˆ˜λ„ μžˆλ‹€. (μ°Έκ³ )

Call stackκ³Ό Task queue

μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 μš”μ²­μ΄ λ“€μ–΄μ˜¬ λ•Œλ§ˆλ‹€ μš”μ²­μ„ 순차적으둜 call stack에 λ‹΄μ•„ ν•˜λ‚˜μ”© μ²˜λ¦¬ν•œλ‹€. call stack은 ν•˜λ‚˜λ§Œ μ‘΄μž¬ν•˜κΈ° λ•Œλ¬Έμ— μš”μ²­λ„ ν•˜λ‚˜μ”©λ§Œ μ²˜λ¦¬ν•  수 밖에 μ—†λ‹€. task queueλŠ” μ²˜λ¦¬ν•΄μ•Ό ν•˜λŠ” taskλ₯Ό μž„μ‹œλ‘œ μ €μž₯ν•΄λ‘λŠ” 큐닀. call stack이 λΉ„μ›Œμ§€λ©΄ task queue에 있던 task듀이 μˆœμ„œλŒ€λ‘œ call stack에 pushλœλ‹€. κ°€λ Ή setTimeout() ν•¨μˆ˜λ‘œ 10초의 λ”œλ ˆμ΄λ₯Ό λ‘”λ‹€λ©΄, κ·Έλ™μ•ˆ setTimeout()이 μ²˜λ¦¬ν•  taskλŠ” task queue에 μŒ“μ΄κ³  λ‹€λ₯Έ λΆ€λΆ„μ˜ μŠ€ν¬λ¦½νŠΈλ“€μ΄ μ‹€ν–‰λœλ‹€. λ”°λΌμ„œ λ”œλ ˆμ΄λ₯Ό 0으둜 μ€˜λ„ setTimeout()의 taskλŠ” λ‹€λ₯Έ 것듀보닀 λ‚˜μ€‘μ— μ²˜λ¦¬λœλ‹€. (μ°Έκ³ )