728x90 반응형 팀프로젝트6 이벤트 버블링이 되지 않았던 문제 해결하기 아래의 게시물도 참고해서 확인해주시면 좋을 거 같습니다! 마우스 포인터가 요소를 벗어나지 않았음에도 onMouseOut 이벤트가 실행되는 이유 + 해결방법 이전에 노션에 정리를 해둔 내용이나, 제대로 정리되지 않은 부분이 있어 블로깅을 하게 되었다. 그리고 노션은 나만 보기도 하니깐! 문제상황 나는 아이콘에 mouse를 hover했을 때 dropdown 메뉴가 1two13.tistory.com 문제상황 나는 아이콘에 mouse를 hover했을 때 dropdown 메뉴가 화면에 노출되고, 메뉴 안에 있는 값을 클릭했을 때 해당 값이 선택되도록 구현하고 싶었다. dropdown 메뉴를 구현하기 위해 에게 onMouseOver 이벤트와 onMouseOut 이벤트를 등록한 상황이다. 두 번째로 확인되는 문제점은.. 2023. 3. 26. 마우스 포인터가 요소를 벗어나지 않았음에도 onMouseOut 이벤트가 실행되는 이유 + 해결방법 이전에 노션에 정리를 해둔 내용이나, 제대로 정리되지 않은 부분이 있어 블로깅을 하게 되었다. 그리고 노션은 나만 보기도 하니깐! 문제상황 나는 아이콘에 mouse를 hover했을 때 dropdown 메뉴가 화면에 노출되고, 메뉴 안에 있는 값을 클릭했을 때 해당 값이 선택되도록 구현하고 싶었다. dropdown 메뉴를 구현하기 위해 에게 onMouseOver 이벤트와 onMouseOut 이벤트를 등록한 상황이다. 근데 여기서 확인되는 첫 번째 문제점이 있었다. 선택된 영역 위에, 즉 div 위에 마우스를 올렸을 때 onMouseOver 이벤트만 발생되어야 하는데, onMouseOut 이벤트도 발생되는 문제점이 있었다. 참고로 onMouseOut 이벤트는 마우스의 커서가 해당 요소에서 위치하다가 빠져나갈.. 2023. 3. 26. [react] 웹에서 터치 스크롤 직접 구현하기 하나의 큰 안에 여러개의 이미지들이 있고, 이 이미지들을 트랙패드를 사용하는 것처럼 터치 스크롤을 구현하고자 했다. 터치 스크롤은 이미지 위에 마우스를 올리고 좌우로 스크롤 했을 때 이동한 위치에 있는 이미지를 보여주는 기능이다. 터치 스크롤 기능 미리보기 코드로는 어떻게 구현할 수 있을까? 1. 먼저 여러개의 이미지들을 담고 있는 가장 큰 에게 3개의 이벤트를 줄거다. onMouseDown, onMouseMove, onMouseUp 이벤트이다. onMouseDown은 마우스 왼쪽 버튼을 클릭했을 때, onMouseMove는 마우스를 움직였을 때, onMouseUp은 영역을 벗어났을 때 호출된다. 그리고 div에게 ref 속성을 주어 특정 DOM 즉, div를 선택할 수 있게 해줬다. 이렇게 구구절절 설.. 2023. 3. 20. [React] 메모리에 있는 값과 화면에 보여지는 값이 상이한 문제 문제 상황 아래 사진에서 삭제 버튼을 클릭했을 때 메모리에 있는 skillList(redux로 관리하고 있는 배열로, 객체들을 요소로 가지고 있다.)의 값은 변경되지만, 실제 화면에 보여지는 값은 변경되지 않는 문제점이 있었다. 시도한 해결방법과 문제점 skillList.map을 실행할 때 주는 key의 값을 index(숫자)가 아닌 랜덤한 값을 주는 방법이였다. 이 방법을 시도하게 된 이유는 스킬 추가 버튼을 클릭했을 때 콘솔창에 오류가 발생하는데 key prop이 문제라는 내용의 오류 문구였고, 이를 해결하면 문제 상황이 해결될 줄 알았다. 지금 생각해보면 그 오류는 그 오류고,(사실 오류도 아니였고 warning이였다😂) 값이 변경되지 않는 문제는 다른 문제였을텐데 아무튼 여기에 꽃혀서 빙빙 돌아갔.. 2023. 3. 8. React Virtual DOM이란? DOM이란? 브라우저는 화면을 그리기 위해서 DOM(Document Object Model)이라는 개념을 사용한다. DOM은 HTML 파일 내용을 토대로 만들어지는데, JavaScript와 같은 언어로 수정할 수 있도록 만들어진 웹 페이지의 객체 지향 표현이다. DOM은 브라우저가 화면을 그리기 위해 필요한 정보가 트리 형태로 저장된 데이터다. DOM이 제공하는 API를 통해 DOM 구조에 접근하고, 원하는대로 변경할 수 있다. 이를 DOM 조작이라고 한다. Virtual DOM이란? React에서 Virtual DOM은 실제 DOM 내용에 기반하여 만들어진다. 실제 DOM과 같은 내용을 담고 있는 복사본이라고 생각하면 되는데 이 복사본은 실제 DOM이 아닌 JavaScript 객체 형태로 메모리 안에 .. 2023. 2. 8. 이전 1 2 다음 728x90 반응형
