one Book a Day

3. events const searchInput = document.querySelector(".search"); const suggestions = document.querySelector(".suggestions"); searchInput.addEventListener("change", displayMatches); searchInput.addEventListener("keyup", displayMatches); search클래스를 가진 input box가 변하거나 key가 눌릴때마다 displayMatches를 불러옵니다. keyup은 키보드를 이용한 입력만 감지함. (마우스 클릭으로 붙혀넣기하거나 자동완성 단어를 클릭해서 입력되는 이벤트 인식x) change는 외부를 눌렀을때만 인지함. 키보드 ..

fetch 콜백함수 : 나중에 call하는 방법으로 순서를 지정해주는 비동기 처리. JavaSecipt, API, Markup을 근간으로 한 JAM stack. 과거처럼 서버단에서 API를 호출해주기 보다 Client에서 직접 API 호출하는 경우가 많아짐. 브라우저에서 직접 비동기로HTTP통신을 하는 Ajax fetch 함수는 원격 API를 간편하게 호출할 수 있도록 브라우저 내장 함수. fetch이전에는 request, axios, jQuery 라이브러리. node.js에서는 node-fetch나 unfetch 라이브러리. IE에서는 지원 안함. 사용법 fetch(url, options) .then((response) => console.log("response:", response)) .catch(..

Local Storage local storage 이벤트 위임. data는 늘 서버로 보내야 할까? 브라우저는 서버로 data를 보내면 해당 내용의 반환에 따라 rerendering된다. 하지만 중요도가 낮거나 유실되어도 될 데이터까지 DB에 저장해야할까? 브라우저는 이런 데이터를 client단에서 해결하기 위한 웹 스토리지를 제공한다. 웹 스토리지는 브라우저마다 제공하는 용량이 다르다. 같은 컴퓨터의 같은 브라우저에만 영속한다. Local Storage vs Session Storage 세션 스토리지는 웹 페이지의 세션이 끝날때 저장된 데이터가 지워지고 로컬 스토리지는 지워지지 않는다. 즉 동일 사이트를 여러 창에 띄우면 세션 스토리지에 격리되어 저장된다(로그인을 각각 따로) 하지만 로컬 스토리지에 담..

https://youtu.be/RIPYsKx1iiU 1. checkboxes This is an inbox layout. Check one item inbox라는 박스안에 각 checkbox가 존재. 2. e.shiftKey const checkboxes = document.querySelectorAll( '.inbox input[type="checkbox"]' ); let lastChecked; function handlecheck(e) { let inBetween = false; if (e.shiftKey && this.checked) { checkboxes.forEach((checkbox) => { if (checkbox === this || checkbox === lastChecked) { inB..

09_Dev_Tools_Domination 1. Regular console.log("Hello"); 2. Interpolated console.log("Hello I am a %s string!", "?"); %s로 들어감 3. Styled console.log( "%c I am some great text", "font-size: 50px; background:red; text-shadow: 10px 10px 0 blue" ); 스타일 적용됨 4. Warning, Error console.warn("OH NOOO"); console.error("Shit"); 5. Info console.info("crocodiles eat 3-4 people per year"); 6. Testing const p =..

HTML5_Canvas 1. Canvas canvas 태그. 그림을 그릴 수 있다. 2. 변수 설정 고정변수 const canvas = document.querySelector("#draw"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx.strokeStyle = "#BADASS"; ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.lineWidth = 100; ctx.globalCompositeOperation = "multiply"; canvax의 속성을 정하고 line의 속성을 정한다. 유동 변수 let i..

Array Cardio 1. some const isAdult = people.some( (person) => new Date().getFullYear() - person.year >= 19 ); python 의 any랑 같은 메서드. 하나라도 true면 true 2. every const allAdults = people.every( (person) => new Date().getFullYear() - person.year >= 19 ); python의 all. 모두 true여야 true 3. find, findIndex const comment = comments.find((comment) => comment.id == 823423); const index = comments.findIndex((co..

Type Ahead input form Filter for a city or a state form 태그로 검색창을 만듭니다. 자동완성을 구현할 것임. filter로 DB에 있는 모든 검색어 중 일치하는 prefix를 가진 모든 문자열을 나열. cities DB const endpoint = "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json"; const cities = []; fetch(endpoint) .then((blob) => blob.json()) .then((data) => cities.push(...data)); fetch로..

Image_Gallary script 각 panel들을 가져와 각각에 click event 나 transition 이벤트가 끝났을 떄 특정한 함수를 실행시켜 class를 부여, 선택자를 동적으로 선택할 생각입니다. css /* Flex Children */ .panel > * { margin: 0; width: 100%; transition: transform 0.5s; /* border: 1px solid red; */ flex: 1 0 auto; display: flex; justify-content: center; align-items: center; } .panel > *:first-child { transform: translateY(-100%); } .panel.open-active > *:f..

Array_Cardio 1. filter const fifteen = inventors.filter( (inventor) => inventor.year >= 1500 && inventor.year `${inventor.first} ${inventor.last}` ); console.log(fullNames); 요소들을 원하는 대로 가공해서 재생산. 3.sort const ordered = inventors.sort((a, b) => (a.year > b.year ? 1 : -1)); console.table(ord..