DEV15 [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. [JS30] day 4 - Array cadio day 1 1. Array.filter() const born = inventors.filter(inventor => 1500 inventor.first + inventor.last); console.log(fullname); console.table(fullname); dict 형태로 저장된 inventor 안에서 firstname과 lastname을 뽑아낸다 map() : arr.map(callback(currentValue[, index[, array]])[, thisArg]) filter와 유사하게 함수를 이용하지만 filter와 다른 점은 함수를 적용한 결과값을 모아 새로운 배열을 반환 한다는 점임(데이터가 바뀜) 3. sort const oldered = inventors.sort(function(a, .. 2021. 12. 9. [JS30] day 3 - playing with CSS variables and JS CSS 에도 variables(변수)이 존재한다 문서 전반적으로 재 사용할 값을 담아 root값을 변경하면 —variables를 가진 모든 개체의 값이 변경 사용은 var();로 사용 CSS variables를 JS로 조작 const inputs = document.querySelectorAll('.controls input'); function handleUpdate() { const suffix = this.dataset.sizing || ''; document.documentElement.style.setProperty('--$(this.name)', this.value + suffix); } inputs.forEach(input => input.addEventListener('change', ha.. 2021. 12. 7. 이전 1 2 3 4 다음
