DEV/JS3013 [JS30] day 8 - Fun with HTML5 Canvas Canvas를 사용하기 위해서는 html에서 를 선언해 준 후 JS에서 기본 세팅을 시작한다 JS 베이스 세팅 // 캔버스 대지를 가져오고, 앞으로 context는 2d임을 canvas에 명시 const canvas = document.querySelector('#draw'); const ctx = canvas.getContext('2d'); // 기본 캔버스 사이즈를 window 크기 전체로 늘려 줌 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Base-setting ctx.strokeStyle = '#BADA55'; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.lineW.. 2021. 12. 12. [JS30] day 7 - Array cardio day 2 1. Array.some() const isAdult = people.some(function(person) { const currentYear = (new Date()).getFullYear(); if(currentYear - person.year >= 19) { return true; } }); // Arrow function const currentYear = (new Date()).getFullYear(); const isAdult = people.some(person => (currentYear - person.year >= 19)); Array에 있는 객체 중 찾고자 하는 조건에 맞는 객체가 하나라도 있으면 참을 반환 모든 요소가 통과하지 못하면 거짓을 반환 (빈 배열은 항상 거짓) 2. Ar.. 2021. 12. 12. [JS30] day 6 - Ajax type ahead API를 사용해 데이터를 가져와 검색한 도시, 인구수를 가져오기 이하 구현하는데 필요한 개념정리 fetch() request나 axios. jquery등의 라이브러리를 사용하지 않고, JS에서 api를 받아오기 위한 방법 REST API를 호출할 때 사용되는 브라우저 내장 함수임 첫 번째 인자로 URL, 두 번째 인자로 옵션 객체를 받고 Promise 타입의 객체를 반환함 참고 문서 : https://www.daleseo.com/js-window-fetch/ promise 비동기 처리를 위한 메서드 ES6에서 도입되었음 resolve와 reject 2개의 함수형 파라미터를 가짐 resolve ⇒ 미래 시점에 얻게 될 결과를, reject ⇒ 미래 시점에 발생할 예외를 넘겨줌 const promise = .. 2021. 12. 12. [JS30] day 5 - Flex panels image gallery CSS, Flex 사용 부분 글씨 크기 변화 (scale) 클릭 하면 글씨 나타남 (tranform) 갤러리 배치 (flex) html { box-sizing: border-box; background: #000000; font-family: 'Noto Serif Display', serif; font-size: 20px; font-weight: 200; } body { margin: 0; } *, *:before, *:after { box-sizing: inherit; } .panels { min-height: 100vh; overflow: hidden; display: flex; } .panel { background: #6B0F9C; color: white; text-align: center; al.. 2021. 12. 9. 이전 1 2 3 4 다음
