본문 바로가기

분류 전체보기

 (61)
React로 Intersection Observer 없이 Viewport 감지 구현하기 Intersection Observer API는 특정 엘리먼트가 viewport에 보일 때 관찰할 수 있게 해준다. 주로 페이지 성능 개선을 위해 Lazy Image Loading 등에 사용한다. 하지만 여기서는 Intersection Observer를 사용하지 않고, React와 TypeScript로 비슷한 기능을 직접 구현해보자.1. 화면 크기 구하기 및 이벤트 감지엘리먼트가 화면에 보이는지 관찰하려면, 먼저 window의 width, height를 알아야 한다. 화면 크기가 변할 때마다 관찰 함수를 실행하도록 resize 이벤트 핸들러를 추가한다. 또한, 스크롤이 발생할 때도 엘리먼트 위치를 재확인해야 하므로 scroll 이벤트 핸들러도 등록한다.// useEffect 예시useEffect(() =..
JSX에서 줄바꿈이 안되는 이유와 해결법 JSX에서는 일반적으로 문자열 내의 \n이 줄바꿈으로 동작하지 않고, 오히려 오류를 발생시키거나 무시된다.즉, 아래와 같이 작성하면 줄바꿈이 되지 않는다.const text = "첫 번째 줄\n두 번째 줄";return {text}; 하지만 CSS에서 white-space 속성을 pre-line으로 지정해주면, 문자열 내 \n을 줄바꿈으로 인식하게 되어 의도한 대로 출력할 수 있다. 예시: {"첫 번째 줄\n두 번째 줄"}이렇게 하면 실제 화면에서 아래처럼 줄바꿈이 적용된다.첫 번째 줄두 번째 줄
이미지 비교 슬라이더 구현 (Before / After) 두 개의 이미지를 겹쳐 놓고, 슬라이더(막대)를 X축 방향으로 이동시켜가며 전후 이미지를 비교할 수 있도록 구현했다. 중심 아이디어는 다음과 같다. 두 이미지를 같은 위치에 겹쳐 놓는다.슬라이더 막대(ref 부여)를 마우스로 드래그할 수 있게 만든다.이미지를 clip 속성으로 잘라서, 슬라이더 기준으로 보여질 영역을 조정한다. 이미지 2개 겹치기 두 개의 이미지를 position: absolute로 완전히 겹치게 만들고, 슬라이더 막대는 중앙에 배치한다.막대 드래그 로직ref로 막대 DOM에 접근마우스 이벤트로 position.x 좌표값 변경transform: translateX를 통해 실시간 이동const onMouseMove = useCallback((event) => { if (pres..
google-maps-react [리액트 구글 맵 기본 장소 마커 지우기] 구글 맵에서 기존에 있던 장소 마커를 지우고 싶을 경우 //커스텀 맵 스타일 선언 const mapStyle = [ { featureType: 'poi', //(물가, 교량..등 장소) elementType: 'labels.icon', stylers: [{ visibility: 'off' }], }, ... return( ) 위에 처럼 해주면 된다 참고 https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple Styled Map Types | Maps JavaScript API | Google Developers This example creates a new map type, which the us..
RTK의 updateQueryData와 onQueryStarted를 쉽게 이해하기 드래그앤드랍으로 리스트 순서를 변경할 때 종종 깜박임 현상이 발생한다.예를 들어, A, B, C라는 객체 리스트에서 C를 A 앞으로 옮긴다고 하자. 기대하는 화면 순서는 [C, A, B]이다.사용자가 C를 A 앞으로 드래그앤드랍 → 화면에는 [C, A, B]가 표시된다.순서 변경 API가 호출된다.아직 API 응답이 도착하지 않은 상태에서는 기존 리스트 상태가 다시 화면에 반영되어 [A, B, C]로 돌아간다.API 응답을 받은 후에야 리스트가 다시 [C, A, B]로 업데이트 된다.결과적으로 1번과 3번 사이에 상태가 왔다갔다하며 깜박임이 발생한다.이 문제를 해결하기 위해서는 2번 API 호출 시점에 로컬 상태를 즉시 업데이트해주면 된다.RTK에서 제공하는 onQueryStarted와 updateQue..
html2canvas와 CORS 문제 정리 html2canvas는 쉽게 말해, 웹 페이지의 div를 이미지로 변환해주는 라이브러리다.변환 과정은 대략 이렇게 진행된다:div → canvascanvas → canvas.toDataURL()데이터 URL로 변환된 이미지 생성CORS 에러 발생 원인근데 여기서 문제! 만약 div 안에 외부 도메인에서 불러온 이미지가 있다면, canvas가 이걸 “오염된 캔버스”라고 판단해서 CORS 오류를 발생시킨다.그 결과, 변환된 이미지에서는 div는 잘 보이는데, 외부 이미지가 아예 안 보이는 상황이 벌어진다.해결법예를 들어, AWS S3에 저장된 이미지를 CloudFront를 통해 불러올 때라면, 응답 헤더에 CORS 설정을 추가해줘야 한다.CloudFront 동작 부분에 Access-Control-Allow-..
RTK updateQueryData로 삭제 시 주의할 점 이럴 때가 있다. updateQueryData를 이용해서 미리 state를 업데이트하는데, 삭제한 값을 넣었는데도 왜 삭제가 안 될까? 원인은 바로 filter를 썼기 때문이다.예를 들어 이렇게 쓰면 안 된다:dispatch( api.util.updateQueryData('list', { deleteId }, draft => { // 이렇게 하면 안 된다! draft = draft.filter(obj => obj.id !== deleteId); }));왜냐면, draft를 이렇게 통째로 재할당해버리면, immer가 바뀐 걸 인지하지 못한다!그래서 이렇게 splice를 사용해야 한다:dispatch( api.util.updateQueryData('list', { deleteId }, dr..
transform과 position: fixed 관계 설명 transform이 적용된 부모 요소position: fixed;인데 위치가 안먹힘! 왜 이럴까?transform 속성이 적용된 요소는 새로운 viewport를 만든다.그래서 자식에 position: fixed를 줘도,원래 창 전체 기준이 아니라 그 새로 만든 영역 기준으로 위치가 잡혀버린다.즉, 우리가 생각한 ‘고정된 위치’가 아니게 되는 것! 정리하면!transform으로 위치 옮긴 부모 안에 있는 fixed는 ‘새로운 viewport’의 영향을 받아서 화면 전체 기준 위치 고정이 안 된다.그래서 의도한 위치가 안 나오니 주의하자~!
728x90
반응형

티스토리툴바