디바운싱 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식을 디바운싱이라고 말한다. 주로 마지막 또는 첫 번째로 처리된 함수를 처리하는 방식으로 사용한다.  정리하면 특정 시간 이내, 추가 이벤트가 없는 경우, 첫 번째 ( 또는 마지막 ) 1회만 실행하는 방식이다.  검색창에 글을 입력하면 검색 결과가 바로 나오는 기능을 본 적이 있을 것이다. [ 검색하기 ]라는 트리거가 입력이 되면 바로 실행되기 때문에 특별한 작업이 없다면 입력을 할 때마다 API를 호출하기 때문에 비용과 성능적인 측면 모두 좋지 않은 방법이다. 이런 문제를 해결하기 위해서 디바운싱을 사용한다. ※ 쓰로틀링 연이어 발생한 이벤트에 대해서 일정한 delay를 포함시켜, 연속적으로 발생하는 이벤트를 무시하는 방식으로 사용한다...

Scope Chain ( 스코프 체인 ) 현재 실행되고 있는 위치에 필요한 값이 있는지 확인하고 없다면 상위 스코프를 찾아 올라가는 과정을 스코프 체인이라고 한다. function aaa(){ banana = 3 console.log(banana)}aaa();위 코드가 브라우저상에서 어떻게 실행될까? 자세하게 알아보기 위해서는 개발자 도구의 source를 통해서 확인이 가능하다. 먼저 실행해야 하는 곳에 브레이크 포인트 ( 11번 라인 )를 걸어둔다. 브레이크 포인트는 코드가 빠르게 실행되다가 멈추고 싶은 코드에서 멈추게 할 수 있는 기능이다.  1번 버튼은 실행하지 않고 뛰어넘는 것이고, 2번 버튼은 실행 과정을 하나하나 살펴볼 수 있다.  aaa 함수에 브레이크 포인트를 걸어두고 함수 안으..

특정 함수를 반복해서 호출하는 경우 어떤 방법을 많이 사용할까? 다른 사람은 어떨지 모르겠지만 본인은 setInterval을 많이 사용해서 구현한다.  하지만 애니메이션을 구현할 때 setInterval을 사용한다면 성능을 저하하는 문제가 발생할 수 있다. 그때 대신 사용하는 것이 Request Animation Frame이다.  어떤 문제가 발생하는 것일까? 웹사이트의 화면은 여러 프레임으로 보여진다. 홈페이지를 스크롤 했을 때 16.7ms 마다 새로운 프레임이 생성되는 것을 볼 수 있다. 브라우저는 1초에 60프레임 지원하기 때문에 16.7ms 이 단순 계산으로도 맞다.  즉, 브라우저에 애니메이션이 매끄럽게 보여지기 위해서는 16.7ms 안에 1frame 화면에 그려져야 한다는 것이다. 그렇지 않으..

Transition자바스크립트의 클릭 이벤트를 사용해서 클릭한 위치를 확인할 수 있다. window.addEventListener("click", function (e) { console.log(e.clientX, e.clientY);}); 클릭한 위치에 동그란 오브젝트를 이동시키는 애니메이션을 만들려면 어떻게 해야할까? 우선 동그란 오브젝트를 먼저 만들어주자면 다음과 같이 만들 수 있다.  너비와 높이가 30px인 붉은 공이다. 그리고 애니메이션이 발생했을 때 진행되는 속도는 1초로 설정해두었다. const ballElem = document.querySelector(".ball");window.addEventListener("click", function (e) { ball..

홈페이지에서 사용자가 로그인을 하고, 로그인 정보를 fetch 했을 때 브라우저에서 비밀번호를 fetch할 수 없어야 한다. 즉, 비밀번호를 알아내는 것이 불가능해야 한다.  DB에 있는 비밀번호를 알 수 있게 된다면, 해커가 DB를 해킹했을 때 민감한 정보에 접근이 가능하게 된다. 또한 다른 사이트에서도 동일한 아이디와 비밀번호를 사용하는 경우 문제가 더 심각해진다.  따라서 비밀번호나 계좌번호같은 민감한 정보를 백엔드에 저장할 때 그대로 저장하지 않는다. 양방향 암호화 양방향 암호화는 JWT같은 복호화가 되는 암호화를 말한다. 즉, 암호화와 복호화 모두 할 수 있는 암호화 방법이다. DB에 양방향 암호화 방식을 사용한다면 만약 데이터베이스가 털리게 된다면 홈페이지를 통해서 비밀번호를 추측할 수 있게 ..

첫 번째 로그인브라우저에서 email과 password를 가지고 로그인 요청을 백엔드로 보낸다면 백엔드는 해당 유저가 존재하는지 DB를 확인하고 있다면 session에 저장을 한다. session에 저장할 때 특정 id를 부여하는데, 브라우저에 response로 넘겨준다.  이렇게 보내진 id는 해당 유저가 누구인지 식별할 때 사용된다. 하지만 유저의 정보를 백엔드 서버에서 받기 때문에 한번에 여러명의 정보를 받으면 session의 한계가 존재하기 때문에 문제가 발생한다.  이것을 해결하기 위해서 백엔드 서버의 성능상 한계가 있기 때문에 scale-up을 통해 컴퓨터 성능을 올려주었다. scale-up→ 컴퓨터 성능(cpu, memory 등)을 올려주는 작업두 번째 로그인 백엔드 컴퓨터의 성능을 오려주었..

홈페이지를 만들 때 스크롤에 따른 이벤트는 아주 많이 사용된다.지금까진 제대로 컨트롤하는 방법을 몰라서 라이브러리 등을 사용해서 만들었는데, 요즘 트렌드에는 스크롤 이벤트가 워낙 많이 들어가서 직접 사용하는 방법에 대해서 알아보려고 한다.  특정 라이브러리가 아닌 순수 자바스크립트의 기능을 사용해서 구현해보려고 한다.  속성이벤트를 구현하기 전에 사용할 수 있는 속성이 어떤 것들이 있는지 알아보자. (function () { const outputEle = document.querySelector(".output"); window.addEventListener("scroll", function (e) { outputEle.innerHTML = window.innerHeight; });})();..

배열이나 객체를 사용할 때 특정 배열을 복사하거나 새롭게 만들기 위해서 복사를 하는 경우가 있다. 이때 경우에 따라 예상치 못한 작업이 발생하는데, 이것이 얕은 복사로 인한 문제들이다.  얕은 복사주소값까지만 복사를 해주는 것이 얕은 복사이다. const object = { name: "잉여", age: "28",};const newObject = { ...object };console.log(newObject);객체를 복사할 때 많이 사용하는 방식이 spread 연산자를 활용하는 방식이다. 이렇게 하면 object의 주소값만 복사하는 것이 아닌 내부값을 새롭게 복사하기 때문에 newObject의 name이 변경되더라도 object의 name은 변화가 없다.  이렇게보면 이 행위 자체가 얕은 복사가 ..