context를 사용해서 상태 관리를 할 때 storage에서 상태 값을 가져오는 경우, 맨 처음 storage에서 가져온 값은 새로고침 할 때까지 바뀌지 않는다. Provider 부분에서 state를 수정해야 한다. const getStateName = () => { return storage.get(""); }; const [stat...

npm i typescript -g // mac에서는 sudo npm i typescript -g yarnpkg

Route 컴포넌트로 특정 주소에 컴포넌트 연결 Route라는 컴포넌트를 사용하면 어떤 규칠을 가진 경로에 어떤 컴포넌트를 보여줄 지 정의할 수 있습니다. / 경로를 사용하는 Route에 exact라는 props를 설정하지 않으면 /about 경로가 / 규칙에도 일치하기 때문에 두 컴포넌트가 모두 나타나게 됩니다. <Route path="/...

canvas를 사용할 때는 태그에 width, height 값을 꼭 넣어주어야 한다. (속성을 정의하지 않을 경우 기본으로 300, 150 크기를 가진다.) canvas의 width, height를 직접 변경할 때는 setState 등을 통해 상태를 변경하거나 javascript property를 이용한다. canvas.width = 800; c...

네크워크의 구조 컴퓨터 네트워크란? 컴퓨터가 두 대 이상 연결되어 있으면 컴퓨터 네트워크가 되고, 컴퓨터 간에 필요한 데이터(정보)를 서로 주고받을 수 있다. 컴퓨터 간의 데이터(파일) 전송, 웹 사이트 열람, 메일 송/수신과 같은 작업을 할 수 있다. 인터넷은 전 세계의 큰 네트워크부터 작은 네크...

immutable 데이터와 mutable 데이터 immutable 데이터 immutable은 불변이라는 뜻이며 boolean, number, string 등의 기본형 데이터는 immutable하다. var v1 = 'test' var v2 = v1 console.log(v1) // 'test' console.log(v2) // 'test' ...

OS별 시스템 폰트 OS Version System Font Mac OS X El Capitan San Francisco Mac OS X Yosemite Helvetica Neue ...

TodoList를 만들며 container element에 클릭 이벤트를 위임해주었다. this.containerEl.addEventListener("click", ({ target }) => { if (target.id === "add-user-button") { return this.addUserButtonClick...

element.insertAdjacentHTML(position, text); position ‘beforebegin’ : element 앞에 ‘afterbegin’ : element 안에 가장 첫번째 child ‘beforeend’ : element 안에 가장 마지막 child ‘after...

fetch API fetch() 함수는 url과 options 객체를 인자로 받아 Request를 보내고, Response로 Promise 객체를 반환한다. 브라우저에 내장된 fetch() 함수를 이용하면 axios, jQuery.ajax와 같은 라이브러리를 사용하는 것보다 자원의 낭비를 줄일 수 있다. 사용...