🍒 Chae-ri Dev 🍒

Ajax(Asynchronous JavaScript and XML)JavaScript 기반의 비동기적으로 데이터를 처리하는 기술페이지 전체를 새로고침하지 않고 브라우저 상에서 사용자의 동작에 따라 웹 페이지의 일부분을 업데이트 할 수 있도록 한다.Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. 1. 사용자의 이벤트 발생2. JS가 XMLHttpRequest를 생성 후, 서버에게 요청 후 응답 받음3. 반환 받은 데이터를 통해 특정 부분 업데이트 여기서 클라이언트와 서버는 JSON 형식의 데이터를 주고 받는다. JSON이란?클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다. 기존의 XML 데이터 포맷으로 통신하는 과정이 복잡하다고 느껴..

사용자가 어떠한 입력값을 입력할 때 실시간으로 api를 불러와야할 때(input),사용자가 사이트의 스크롤을 내릴 때 발생하는 수많은 이벤트들이 발생할 때(scroll),화면 크기를 조정(resize)하거나 마우스가 움직일 때(mousemove) 위 상황을 봤을 때 짧은 시간 안에 이벤트 핸들러가 콜백함수를 계속해서 호출하고 대량의 api가 호출되기에 성능 저하가 나타나는 상황이 발생한다. 이를 해결하기 위해서는 Debounce(디바운스)와 Throttle(쓰로틀)을 활용하여 이벤트를 제어해야만 한다. Debounce와 Throttle는 둘 다 일정 시간에 따라 이벤트 핸들러의 호출을 제어하는 부분에서는 같지만, 차이점이 있다.Debounce Debounce는 계속해서 호출된 함수들 중 제일 마지막 또는..

바닐라 JS 실습 프로젝트를 하는 도중자바스크립트 동작이 제대로 안되는 것을 확인했다. 이벤트를 걸어줬는데 이벤트도 동작을 안하고 콘솔로 확인해보니 dom 관련 메서드가 제대로 동작이 안되는 걸 확인할 수 있었다.Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 가 태그보다 먼저 로드되고 있어서,app.js가 실행될 때 아직 clickBtn과 backgroundDiv가 DOM에 존재하지 않았기 때문에 발생하는 문제였다. 문제의 코드... // ❌  해결 방법에는 script 태그 위치를 옮기거나 defer나 async 요소를 넣으면 된다. (추가로 DOMContentLoaded라는 것도 있다고 한다...

함수란 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것을 의미한다. 자바스크립트에서는 함수를 크게 4가지 방법으로 정의한다. 함수 선언문자바스크립트에서 함수를 선언할 때 가장 일반적으로 사용하는 방식function(a, b) { return a + b} 함수 표현식다음 예제처럼 함수는 표현식으로도 사용할 수 있다.const sum = function (a, b) { return a + b}sum(10, 24) // 24💡 일급 객체 : 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체 함수는 다른 함수의 매개변수나 반환값이 될 수 있고 위 예제처럼 할당도 가능하다. -> 일급 객체가 되이 위한 조건을 함수는 모두 갖췄음! 함수..

ES6에서 let, const가 도입되기 이전까지는 var 키워드를 통해 변수를 선언하였다.하지만 var 키워드의 여러 문제점 때문에 이 문제점들을 보완하기 위해 let과 const가 등장한 것인데,var의 문제점은 무엇이고 var, let, const 세 키워드의 차이점과 여기서 쓰이는 개념인 호이스팅에 대해 알아보자. var 키워드 사용의 문제점1. 중복 선언 가능var a = 10;var a = 30;console.log(a); // 30var는 중복으로 선언이 가능하다. 동일한 이름의 변수를 선언해도 에러가 발생하지 않기에 의도치 않은 문제가 발생할 수 있다.2. 함수 레벨의 스코프스코프란, 변수가 사용될 수 있는 영역이라고 보면 된다.var 키워드로 선언한 변수는 함수의 코드 블록을 지역 스코프..