history api 브라우저에서 페이지 로딩을 하면 세션 히스토리를 가진다. 세션 히스토리는 페이지를 이동할 때마다 쌓이며, 이를 통해 앞으로 가기나 뒤로 가기가 가능하다. pushState, replaceState 함수로 '화면 이동 없이' 현재 url를 업데이트할 수 있다. pushState: 세션 히스토리에 새 url 상태를 쌓는다. replaceState: 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다. → SPA(Single Page Application) 구현 가능 history API를 사용하면 hashbang으로 했던 url을 바꿔줄 수 있다. / → HomePage /list → ListPage /detail/1 → DetailPage 일반 url 형식을 따르기 ..

fetch api 비동기 http 요청을 좀 더 쓰기 편하게 해주는 API XMLHttpRequest를 대체 Promise 기반으로 동작 fetch api 사용하기 fetch("http request를 날릴 URL") .then((res) => { return res.json(); // response는 json이나 text로 바꿔서 사용해야 함 }) .then((data) => { // 조회된 json 데이터가 들어옴 console.log(data); }); fetch api 특징 1. fetch의 기본 응답 결과는 Response 객체이다. 따라서 Response 객체를 얻은 뒤에는 응답을 json으로 바꾸거나 text로 바꾸는 등의 처리가 필요하다. + 참고로 Response에는 json, text..

ES6 Module 모던 브라우저(2019.11~)에서는 흔히 말하는 웹팩, 즉 번들러없이 ES6 모듈을 쓸 수 있다. import export 키워드로 내보내진 변수, 함수 등을 불러올 수 있는 키워드이다. // 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 "mod..

컴포넌트 방식으로 생각하기 컴포넌트란? 표현하는 부분을 추상화한 것으로 독립적이며, 다른 곳에 영향을 미치지 않아야 한다. 그럼으로써 추후에 재사용이 가능하다. 즉 추상화란 어떤 독립적인 부분들을 묶어서 단위를 생성한다고 할 수 있다. 만일 투두 리스트를 만든다고 한다면 Header, TodoForm, TodoList 3개의 컴포넌트로 나눌 수 있다. 그리고 3개의 컴포넌트를 생성하고 관리하는 App 컴포넌트까지 총 4개의 컴포넌트로 동작하는 구조를 가지게 된다. TodoList 만들기 TodoList 컴포넌트 생성 // params.$target - 해당 컴포넌트가 추가가 될 DOM 엘리먼트 // params.initialState - 해당 컴포넌트의 초기 상태 function TodoList(para..