Float 수평정렬, block 형태 float: left로 왼쪽 수평 정렬을 했는데 요소들이 컨테이너 밖으로 튀어나왔다. 이런 경우에는 해제(clear)를 해줘야 한다 해제(clear) 하는법 float를 부여했다가 해제를 시작할 요소에 clear 속성을 부여한다 (그러나 사용하지 않을 요소를 구조적으로 만드는 것은 비효율적이다) container에 overflow: hidden => float과 관련이 없다(근본적인 해결 방법이 아니다) 컨테이너에 가상 요소 선택자 ::after를 이용 (가상 요소 선택자는 content가 필수로 있어야 한다) clearfix가 부여된 컨테이너에는 float을 사용하는 요소들만 있어야 한다 Position position은 body 기준으로 위치한다 static을 제..
history API 브라우저에서 페이지 로딩을 하면, 세션 히스토리라는 것을 갖는다 세션 히스토리는 페이지를 이동할 때마다 쌓이게 되며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다 pushState, replaceState 두 개의 함수로 화면 이동 없이 현재 url을 업데이트할 수 있다 pushState : 세션 히스토리에 새 url 상태를 쌓는다 replaceState : 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다 이전 예제에서 hashbang으로 했던 url을 아래처럼 바꿔줄 수 있다 / => HomePage /list => ListPage /detail/1 => DetailPage 일반 url 형식을 따르기 때문에..
Promise 비동기 작업을 제어하기 위해 나온 개념으로, callback hell에서 어느정도 벗어날 수 있게 해준다 Promise로 정의된 작업끼리는 연결할 수 있으며, 이를 통해 코드의 depth가 크게 증가하지 않는 효과가 있다 const promise = new Promise((resolve, reject) => { // promise 내부에서 비동기 상황이 종료될 때, resolve 함수 호출 // promise 내부에서 오류 상황일 때, reject 함수 호출 }) Promise에서는 then을 이용해 비동기 작업 이후 실행할 작업을 지정한다 function asyncPromiseWork() { // .... return new Promise((resolve, reject) => { // ...
