분류 전체보기

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) => { // ...

Module import export 키워드로 내보내진 변수, 함수 등등을 불러올 수 있는 키워드 import를 사용하면 스크립트 의존성을 훨씬 간편하게 관리할 수 있다 module-name 내에 export default로 내보내진 것을 가져온다 import defaultExport from "module-name"; module-name 내에서 export된 모든 것을 모두 가져오고 as 이후 이름은 중복되지만 않으면 자유롭게 정할 수 있다 import * as allItems from "module-name"; module-name 내에서 export된 것 중에 특정 값만 가져온다 import { loadItem } from "module-name"; module-name 내에서 export된 것 ..

컴포넌트 방식으로 생각하기 컴포넌트 만들기 - TodoList UI를 선언적으로 표현하기 위해 다음과 같이 추상화를 할 수 있다 App ㄴ Header ㄴ TodoForm ㄴ TodoList 여기서 Header, TodoForm, TodoList는 서로 독립적인 하나의 단위로 구현되는데 이를 컴포넌트라고 한다. 각각의 컴포넌트는 동작이 독립적으로 돌아가고 사용하는데 다른 곳에 영향을 주지 않는다 컴포넌트화가 되어 있으면 컴포넌트 부분만 코드를 수정하면 되어서 재사용이 쉽고 유지보수하기 좋다 Client 사이드 데이터 저장하기 Cookie 쿠키는 브라우저에 저장되는 작은 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부 다른 저장 방법에 비해 가장 오래된 방식 Cookie 추가하기 : 이..