프론트엔드 개발자를 위한 토막상식 — Steemit

일반적인 것들

헝가리안 표기법

블록 안에서 변수 선언

점진적 향상법(Progressive enhancement)과 우아한 성능저하법(Graceful degradation)

FOUC(Flash Of Unstyled Content)

ARIA(Accessible Rich Internet Applications)와 스크린리더

CSS 애니메이션과 Javascript 애니메이션의 차이

동일출처정책(Same-origin policy)과 CORS(Cross-origin resource sharing)

코드 의존성과 DRY원칙

HTML

DOCTYPE

표준모드(Standard mode)와 호환모드(Quirks mode)

XML과 XHTML

data-* 속성

Cookie, sessionStorage, localStorage

script 태그의 async와 defer

Progressive rendering

CSS

Reset CSS

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

클리어링(Clearing) 기술

Image Replacement

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

IE box model과 W3C box model의 차이

그리드 시스템 (Grid system)

CSS 전처리기

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

반응형 디자인(Responsive design)과 적응형 디자인(Adaptive design)

Javascript

추상적 같음 비교(Abstract equality comparison)와 엄격한 같음 비교(Strict equality comparison)

고급 예외처리(Advanced exception handling)

try {
  // try 블록은 예외가 발생할 수도 있는 부분
} catch(e) {
  // catch 블록은 try 블록에서 예외가 발생했을 때 호출되는 부분
  // 객체 e는 name과 message 속성을 가짐
} finally {
  // 선택적으로 finally 블록을 추가할 수 있음
  // 예외 발생 여부를 떠나 무조건 실행되어야 할 부분
}

throw expression;

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

Event delegation

<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);
    }
  });
})();

Prototype 기반 상속

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

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

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

null, undefined, undeclared의 차이

클로저(Closure)

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

자바스크립트 모듈 패턴(Module pattern)

네이티브 객체(Native object), 호스트 객체(Host object), Built-in 객체

기능 검출(Feature detection)과 기능 추론(Feature inference)

if(navigator.geolocation) {...}

호이스팅(Hoisting)

이벤트 흐름(Event flow)

document load event와 DOMContentLoaded event

조건부 삼항 연산자(Conditional ternary operator)

var a = 1, b = 2;

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

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

use strict

Call stack과 Task queue