one Book a Day

Symbol 뒤에 HTML Number를 붙혀주면 특수문자를 입력할 수 있다. Symbol HTML Number HTML Name Description ! ! exclamation point " " &quot\; double quotes # # number sign $ $ dollar sign % % percent sign & & &amp\; ampersand ' ' single quote ( ( opening parenthesis ) ) closing parenthesis * * asterisk + + plus sign , , comma - - minus sign - hyphen . . period / / slash : : colon ; ; semicolon > > greater than sig..

D3.js D3은 데이터 기반 문서(Data-Driven Documents) SVG, HTML, CSS를 이용해 웹 브라우저에 맞춤형 데이터 시각화를 생성하기 위한 오픈소스 Protovis는 정적 시각화, D3은 상호작용, 전환 및 변환에 중점. 전역 JavaScript 개체 d3을 정의 D3의 기능 웹 표준 사용 데이터 기반 DOM 조작 데이터 기반 elements 동적 속성 시각화 유형 맞춤형 시각화 전환(transition) 상호작용 및 애니메이션(duration, delay, easy) D3의 장점 모든 JS 프레임워크와 함께 사용 가능. D3는 데이터에 중점을 두고 있으므로 데이터 시각화에 유리. D3는 오픈 소스기 때문에 소스 코드로 작업하고 고유한 기능 추가가 가능 웹 표준과 함께 작동하므로..

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..

4. 이벤트 핸들링 사용자가 웹 브라우저에서 DOM요소들과 상호작용하는 것을 event라 함. 1. 리액트의 이벤트 시스템 HTML 이벤트와 인터페이스가 동일하다. const Say = () => { const [message, setMessage] = useState(""); const onClickEnter = () => setMessage("안녕하세요"); const onClickLeave = () => setMessage("안녕히 가세요!"); const [color, setColor] = useState("black"); return ( 입장 퇴장 주의점 이벤트는 카멜케이스로 작성한다.(onclick -> onClick) 이벤트에 실행할 JS 코드가 아니라 함수형태의 값을 전달. HTML은 큰따..

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..