자곰

전역변수를 선언하고 그것을 JS로 조작하는 방법에 대해서 다루겠습니다. HTML and CSS 제가 조작할 값은 전체 화면의 주요 색, 이미지의 padding(Spacing), filter값입니다 입력을 3개를 두고 값을 변화를 통해 전체 변수를 조작하여 UI 변화를 조작하는 것입니다 컨트롤러인 input에 각각 커스텀속성을 주어서 suffix를 붙일 수 있도록 하였습니다. JavaScript 설명 const inputControllers = document.querySelectorAll(".controls input"); const valueUpdate = (e) => { // suffix 판별 const suffix = e.target.dataset.sizing || ""; document.docu..

setInterval을 통한 일정주기로 변하는 애니메이션을 구현해보고자 합니다 HTML and CSS 간단하게 시 분 초를 나타내는 침과 시계모양을 만들었습니다 JavaScript 설명 // 현재 시간을 가져와 각 시계 바늘의 각도를 계산하고 적용하는 함수입니다. function setTime() { // 현재 시간을 가져옵니다. const now = new Date(); // 현재 시, 분, 초를 추출합니다. const hours = now.getHours(); const mins = now.getMinutes(); const seconds = now.getSeconds(); // 각 바늘의 각도를 계산합니다. const secondsDegree = (seconds / 60) * 360 + 90; ..

주제 키를 눌렀을 때, audio 파일 소리를 재생시켜 악기처럼 연주를 해보는 간단한 JS를 구현해보고자 한다. 밑에 같은 사운드 플레이 파일이 필요합니다 A clap S hihat D kick F openhat G boom H ride J snare K tom L tink 이 처럼 html 코드를 작성해줍니다 data 속성을 통해서 div태그와 audio태그를 매칭시켜주었습니다 key 속성: key 속성은 눌린 키의 실제 값(문자)을 나타냅니다. 예를 들어, A 키를 눌렀을 때는 "A"가 됩니다. code 속성: code 속성은 눌린 키의 물리적인 위치를 나타냅니다. 이 값은 브라우저와 운영체제에 따라 다릅니다. 예를 들어, A 키를 눌렀을 때는 "KeyA"가 됩니다. 저는 여기서 code를 이용할 것..

먼저 두가지에 대해서 간략한 설명을 하고 비교를 해보며 학습을 해보겠습니다. Fetch API는 네트워크 요청을 위해 fetch()라는 메서드를 제공하는 인터페이스입니다. 모던 브라우저에 내장되어 있어 따로 설치할 필요가 없습니다. Axios는 서드파트 라이브러리로 CDN 혹은 패키지 매니저를 통해 설치하여야 사용할 수 있습니다. 두 가지 모두 promise 기반의 HTTP 클라이언트입니다. 즉, 네트워크를 요청하면 resolve, reject 할 수 있는 promise를 반환합니다. 두 가지는 모두 네트워크 요청을 하고 promise를 반환합니다. 무엇이 다를까요? 문법 1) fetch fetch(url, { method: "GET", // 다른 옵션도 가능합니다 (POST, PUT, DELETE, e..

html에 자바스크립트를 적용 시킬 때는 2가지를 고려해야 합니다. 첫 번째는 태그와 태그 중 어디에 넣을 것인가? 두 번째는 async 방식과 defer 방식중 어떤 것을 선택할 것 인가? 스크립트 파일 입력 시기에 따른 차이 ( head vs body ) 스크립트를 태그 내에 포함하는 경우 스크립트 파일이 HTML 문서의 파싱 과정 중에 로드되고 실행됩니다. 따라서, 스크립트 파일을 로드하는 동안에는 HTML 파싱이 일시 중단됩니다. 이는 스크립트 파일이 크거나 다운로드 시간이 오래 걸릴 경우 웹 페이지의 렌더링이 지연될 수 있는 단점이 있습니다. 과정 : parsing HTML → js script 파일 만남 → fetch → excute → parsingHTML → 페이지 준비! ( fetch +..

Promise를 잘 다루는 방법 중 하나는 매서드를 사용하는 것 입니다. 5가지 주요 매서드를 정리해봅시다. 1. Promise.all 여러 개의 Promise를 동시에 처리하고, 모든 Promise가 이행되거나 한 개의 Promise가 거부될 때까지 기다리는 기능을 제공 .all 메서드는 Promise들로 이루어진 배열을 인자로 받습니다. 모든 Promise가 이행되면 최종적으로 배열을 반환 하지만 하나의 Promise라도 실패하면 첫 번째 거부된 Promise의 결과를 반환하며 나머지 Promise들은 무시 병렬 처리에 유용 const promise1 = fetchDataFromServer1(); const promise2 = fetchDataFromServer2(); const promise3 = ..

이전 포스팅에서 콜백에서 순차적으로 비동기작업을 처리할 때 콜백지옥을 보셨던 것 기억하시나요? 프로미스에선 순차적으로 처리해야하는 비동기 작업이 여러개 있을때 어떻게 해야할까요? 프라미스 체이닝을 통한 비동기 처리를 이용한다면 어렵지 않습니다. new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); // (1) }).then(function(result) { // (2) alert(result); // 1 return result * 2; }).then(function(result) { // (3) alert(result); // 2 return result * 2; }).then(function(result) { alert..

콜백이란? 자바스크립트에서는 함수는 객체입니다.( 매우 중요한 사실) 함수의 파라미터로서 객체를 전달할 수 있을까요? 네, 할 수 있습니다. 다른 함수에 인수로 전달되는 함수입니다. ( 일급 함수 ) 예를 들어, map의 경우 각 반복에 대해 동기적으로 호출 되는 콜백 함수를 사용합니다. const map = (arr, callback) => { const result = [] for (let i = 0; i n * 2) // [2, 4, 6, 8, 10] JS는 코드를 위에서 아래로 순차적으로 실행합니다. 그러나 코드가 다른 행위..

캡처링과 버블링을 활용하여 이벤트 위임(event delegation) 을 구현하는 시간을 가져보겠습니다. 이벤트 위임은 비슷한 방식으로 여러 요소를 다룰때 사용합니다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 하나만 할당하여 요소들을 한번에 다룰 수 있습니다. 공통 조상에 할당한 핸들러에서 event.target 을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있습니다. 예를 들어, 여러 개의 리스트 아이템()이 있는 목록()이 있다고 가정해봅시다. 각 리스트 아이템을 클릭할 때마다 어떤 동작을 수행하고자 합니다. 이때 이벤트 위임을 사용하면 모든 리스트 아이템에 각각 이벤트 핸들러를 등록하지 않아도 됩니다. 아래는 이벤트 위임을 사용하여 목록의 ..

이벤트 버블링과 이벤트 캡처링은 자바스크립트의 이벤트 전파 방식에 대해 중요한 개념입니다. 이 두 가지는 이벤트가 DOM 요소에서 상위 요소로 전파되는 방향을 나타내며, 이를 이해하고 활용하면 효율적인 이벤트 처리와 이벤트 위임을 구현할 수 있습니다. 이벤트 버블링 (Event Bubbling) 이벤트 버블링은 이벤트가 발생한 요소에서 시작하여, 상위 요소로 전파되는 방식입니다. 즉, 자식 요소에서 발생한 이벤트가 부모 요소로 전파됩니다. 예를 들어, 클릭 이벤트가 버튼에서 발생하면, 버튼 -> 부모요소 -> 부모요소의 부모요소 순으로 이벤트가 전파됩니다. 💡 ⚠️거의 모든 이벤트는 버블링 됩니다. 키워드는 ‘거의’ 입니다. focus 이벤트와 같이 버블링 되지 않는 이벤트도 있습니다. 버블링 되지 않는..