alswl alswl

JavaScript로 개발을 하는 상황에서 자주 마주치게 되는 문제 중 하나는 과도한 이벤트 발생이다.예를 들어, 사용자가 입력 필드에 글자를 빠르게 입력하거나, 마우스를 빠르게 움직일 때마다 이벤트가 계속해서 발생하여 성능 저하를 야기할 수 있다. 이러한 문제를 해결하기 위한 것이 throttle과 debounce이다. 💡 Throttle 💡Throttle은 일정 시간 간격으로 이벤트를 제한하는 기법이다. 즉, 특정 시간 이내에 발생하는 여러 개의 이벤트 중 가장 마지막 이벤트만 실행하거나, 일정 시간마다 한 번씩만 이벤트를 실행한다. ⭐️ Throttle의 장점 ⭐️일정한 간격으로 이벤트 실행: 사용자 경험을 저해하지 않으면서 성능을 유지할 수 있다.API 호출 제한: 서버에 부하를 주는 API ..

웹 페이지에서 사용자의 상호 작용은 이벤트를 통해 이루어진다.버튼 클릭, 마우스 이동, 키보드 입력 등 다양한 사용자의 행동이 이벤트로 발생되고, 이벤트 핸들러를 통해 특정 동작을 수행할 수 있다. 이벤트는 단순히 발생만 하는 것이 아닌, DOM 트리를 다라 전파되는 특징을 가지고 있다. 이러한 이벤트 전파와 이벤트 전파를 기반으로 하여 더욱 효율적인 이벤트 처리를 가능하게 하는 이벤트 위임에 대해 알아보고자 한다. 💡 이벤트 전파 💡이벤트가 발생한 요소에서 시작하여 DOM 트리를 따라 상위 또는 하위 쪽으로 전파되는 과정을 의미한다. DOM 트리 상에 존재하는 DOM 요소 노드에서 이벤트가 발생하면, 이벤트 객체는 DOM 트리 통해 다른 DOM 요소 노드로 전파하게 되는 것이다.  happy 위와..

CSS를 사용하면서 어떠한 태그에 테두리를 만들고자 하면 바로 떠오르는 CSS 속성은 border일 것이다. 기본적으로 가장 많이 사용하는 속성이자, 어느 브라우저에서나 값이 동일하게 적용되는 속성이다.border의 경우 테두리를 모든 면에 줄 수도 있지만, 특정 테두리만 옵션을 줄 수도 있다는 장점이 있다. 하지만 이 border만이 테두리를 줄 수 있는 건 아니다.outline이나 box-shadow 같은 속성들로도 테두리 효과를 줄 수 있다. 이 중 오늘은 outline이라는 속성과 이 border 속성의 차이를 알아보고자 한다. 둘의 가장 큰 차이는 다음과 같다. ⭐️ border과 outline ⭐️borderborder를 적용하면 선 두께 만큼 레이아웃이 변한다.  outlineoutline을..

웹 사이트의 이용이 활발해지고, 기기가 다양해지는 만큼 기기에 따른 화면의 크기도 다양하게 변화해 왔다.다양한 기기에 대응하기 위해 웹 서비스를 유연하게 만드는 것은 선택이 아닌 필수가 되었고, 이러한 유연한 대응을 할 수 있게 도와준 것이 flex와 grid라는 CSS 속성들이다. ❓ Flex ❓1차원적인 부분만을 고려하여, 수평과 수직 영역 중 하나의 방향으로만 설정이 가능하다. Flex를 이용한 정렬을 이해하기 위해서는 가장 쉬운 예시로 "꼬치"를 생각해볼 수 있다.꼬치 축의 방향대로 가로 정렬을 하거나, 꼬치를 뜯어먹는 방향인 세로 방향으로 정렬이 가능한 것을 생각하면 Flex에 대한 이해가 높아질 것이다. Flex는 Flex Container 안에 있는 flex item들의 크기와 간격을 자동으..

이 전 글인 CSRF과 동일하게 웹 해킹 공격 중 하나로, XSS는 웹 또는 보안을 공부하면서 들어본 적이 있을 것이다. 인터넷이 발전하는 만큼 인터넷을 악용하려고 하는 사용자도 많고, 개발자의 의도와 다르게 시스템을 사용하는 사용자들도 많아 보안상으로 문제가 됐다. 이에 따른 악용 사례로 여러 사건 사고가 많았기에 어떠한 작은 페이지라도 보안을 신경 쓰는 것이 중요해졌다. 보안상 취약하지 않은 웹페이지를 만드는 것이 중요한 만큼 관련된 보안에 대해 알고 가는 것은 필수적이다. ❓ XSS(Cross Site Scripting)XSS는 공격자가 입력한 악성 스크립트에 사용자가 응답하는 취약점이다. XSS라는 명칭은 공격자가 웹사이트를 넘어서 공격한다는 뜻에서 유래가 되었다. 이는 사용자 입력 값에 대한 검..

인터넷의 발전으로 웹 페이지 사용자가 급증하는 시대에, 보안은 매우 중요한 요소 중에 하나이다.그렇기에 안전한 사이트를 만들기 위해서는 보안에 대한 공부가 필수적이게 되었다. 여러 보안 문제들 중에 CSRF에 대해서 자세하게 알아보도록 하자. ❓ CSRF(Cross Site Request Forgery)CSRF는 사이트간 요청 위조라는 의미로 웹 보안 취약점의 일종이다. 인터넷을 사용하면서 웹 페이지에 요청을 보내는 경우가 대다수 일어나는데, 이때 사용자의 의도와는 다르게 공격자가 의도한 데이터 수정 및 삭제, 등록 등을 특정 웹사이트에 요청하는 공격이다. 예를 들어, 공격자가 신뢰할 수 있는 사용자의 계정으로 유해한 게시물을 업로드 하는 경우를 예로 들 수 있다. 🚨 CSRF 동작원리CSRF는 일반적..

인터넷을 많이 사용하는 요즘, 인터넷을 사용하다보면 웹페이지가 리로드 되거나 요소가 추가되는 등의 변경사항이 발생할 때 다시 페이지가 그려지는 걸 경험한 적이 있을 것이다. 이러한 현상은 Reflow와 Repaint라는 두 과정을 통해 이루어진다. 앞 글에서 브라우저 렌더링 과정을 알아보았으니, 이의 연장선으로 렌더링 최적화를 알기 위해 Reflow와 Repaint에 대해서 알아보도록 하자. 💡 Reflow(Layout) 💡웹 페이지의 레이아웃을 계산하고 요소의 위치와 크기를 결정하는 과정이다. 브라우저에서 웹페이지 렌더링 과정을 모두 거쳐 최종적으로 웹페이지를 화면에 보여줬다고 해도 렌더링 과정이 완전히 종료된 것은 아니다. 어떠한 경우에 따라 요소의 위치와 크기를가 수정되는 경우가 생기면, Lay..

우리가 평소 Google Chrome, Apple Safari, Naver Whale, Microsoft Edge 등 다양한 브라우저를 사용하여 여러 웹사이트들에 방문 및 정보 조회를 하게 된다. 이때 우리가 조회하게 되는 콘텐츠를 노트북 또는 스마트폰 안에서 보여줄 수 있는 기술이 바로 브라우저 렌더링이다. 그렇다면 이 브라우저가 HTML, CSS, JS 코드를 어떻게 우리가 조회할 수 있도록 만들어주는지 알아보도록 하자. 브라우저 렌더링?브라우저 렌더링이란 웹 서버로부터 받은 HTML, CSS, JS 등의 코드를 해석하고 화면에 출력하는 과정이다. 브라우저는 웹 서버로부터 코드를 전달 받고, 전달 받은 코드를 마치 빈 캔버스에 물감과 펜 등으로 그림을 그리는 것처럼 웹 페이지를 시각적으로 표현하여 사..