본문 바로가기

전체 글54

이벤트 캡처링과 버블링 아래와 같은 그림이 있다. 해당 그림은 각 네모박스마다. click 이벤트가 등록되어 있는데 아래 코드처럼 이벤트가 등록되어있다. Click Me 여기서 Click Me 버튼을 클릭하면 콘솔로그에는 아래 그림 처럼 나타난다. 이유가 뭘까? 바로 이벤트 버블링 때문이다. 이벤트 버블링이란? 자식 요소가 이벤트가 발생이 되면 부모도 자신이 등록된 이벤트가 호출 되는 것이다. 가장 최상단의 부모까지 이벤트가 발생한다. 다시 정리하면 이벤트 버블링은 HTML 요소에서 이벤트가 발생하면 해당 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 과정을 의미합니다. 즉, 자식 요소에서 이벤트가 발생하면 부모 요소까지 이벤트가 전파되는 것을 말합니다. 즉, Click Me 결과에 저렇게 나온 이유가 Click Me.. 2023. 3. 6.
window.history API window.history 객체는 현재 브라우저 창의 세션 기록을 나타내는 JavaScript API입니다. 이 객체를 사용하면 브라우저 창의 이전 페이지 및 다음 페이지로 이동하거나, 이전 페이지로 돌아가는 등의 조작을 할 수 있습니다. window.history 객체에는 다음과 같은 메서드와 속성이 있습니다. 메서드: history.back(): 브라우저 창의 이전 페이지로 이동합니다. history.forward(): 브라우저 창의 다음 페이지로 이동합니다. history.go(n): n이 0보다 크면 브라우저 창의 다음 n번째 페이지로 이동하고, n이 0보다 작으면 이전 n번째 페이지로 이동합니다. history.pushState(state, title, url): 현재 페이지의 이력 스택에 새로.. 2023. 2. 28.
리액트 hydrate React에서 "hydrate"는 일반적으로 서버 측 렌더링된 HTML과 클라이언트 측 JavaScript 앱을 연결하는 과정을 의미합니다. 보통 React 앱은 JavaScript로 작성되며, 브라우저에서 JavaScript 파일이 로드되어야 실행됩니다. 이 때, 첫 페이지 로드 시에 React 앱이 화면에 나타나기까지 JavaScript 파일이 다운로드되는 시간이 필요하므로 사용자는 앱이 로드되는 동안 대기해야 합니다. 이는 사용자 경험을 저하시킬 수 있습니다. 이 문제를 해결하기 위해 React는 서버 측 렌더링을 지원합니다. 서버에서 React 앱을 렌더링하여 HTML 문자열로 출력한 다음, 이 HTML 문자열을 클라이언트로 보내어 브라우저에서 JavaScript 파일을 로드하고 React 앱을 .. 2023. 2. 21.
의존성 주입(Dependency Injection)과 제어의 역전(Inversion of Control) 의존성 주입(Dependency Injection)은 객체 지향 프로그래밍에서 중요한 개념 중 하나로, 객체 간의 의존성을 느슨하게 만들어주는 디자인 패턴이다. 의존성 주입은, 객체 간의 결합도를 낮추고 유연성과 재사용성을 높이기 위해 사용된다. 객체 간의 결합도가 높다는 것은, 한 객체가 다른 객체에 강하게 의존한다는 것을 의미 한다. 이러한 경우, 한 객체의 변경이 다른 객체에도 영향을 미치기 떄문에 유지보수가 어려워진다. 이를 해결하기 위해 의존성 주입을 사용. 아래 사진을 보면 A 클래스 안에 생성자 메서드에서 B클래스를 직접 생성하여 사용한다. 하지만 이러면 A가 B를 사용하지 않고 C를 사용하고 싶을 때 A클래스 내부에서 직접 변경해줘야 한다. 하지만 이러면 유지보수가 어려워진다. 이걸 의존성.. 2023. 2. 18.

티스토리툴바