본문 바로가기

REACT

 (21)
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’의 영향을 받아서 화면 전체 기준 위치 고정이 안 된다.그래서 의도한 위치가 안 나오니 주의하자~!
Object – map()을 이용한 JSON 데이터 수정 자바스크립트에서 배열 안의 특정 객체만 값을 바꾸고 싶을 때는 어떻게 할까? 흔히 사용하는 패턴은 Array.prototype.map()과 조건문(===)을 조합해서 특정 조건을 만족하는 객체만 수정하는 것이다.예제 코드// 특정 고유 키 값(compareVal)을 기준으로 배열의 특정 객체만 업데이트setSampleData( sampleData.map(item => item.key === compareVal // 고유 키로 비교 ? { ...item, key: e.target.value } // 값만 변경 : item // 나머지는 그대로 ));위 예제는 React의 상태 업데이트 예시로, 기존 sampleData 배열을 순회하며 특정 조건을 만족하는 객체만 찾아 해당 값을 ..
jQuery로 특정 주차 날짜 가져오기 (FullCalendar 기반) 가끔 이런 경우가 있죠. 예를 들어서, 1주차, 3주차, 4주차, 5주차의 날짜만 뽑아오고 싶을 때가 있다.그럴 땐 $(".fc-week") 기준으로 DOM을 파고들어가면 된다.(이 예제는 FullCalendar에서 .fc-week DOM 구조를 기준으로 한 설명)핵심 개념.fc-week : 한 주 단위의 row.fc-bg td.fc-day : 요일별 날짜 셀.fc-other-month : 현재 달이 아닌 날짜 셀data-date : 날짜 정보가 담긴 속성구현 코드// 가져오고 싶은 주차const wkArr = [1, 3, 4, 5];const dates = [];for (let j = 0; j 동작 방식 설명wkArr 배열을 반복하며 주차(index)를 선택한다.각 주차 내에서 td.fc-day를 7번..
AWS- appspec.yml root 우리 서비스는 Code pipeline을 통해 배포를 한다 pipeline의 단계는 총 소스-빌드-배포 3가지 구성으로 되어있다. 소스트리는 깃허브와 연결하여 커밋할시에 바로 변경 릴리즈를 감지하여 소스로 간다음 그다음 빌드로 넘어가게 된다. 이때 우린 build중에 환경을 구축하기 위해 프로젝트에 buildspec.yml 파일을 작성해야한다. version: 0.2 phases: install: runtime-versions: java: openjdk8 build: commands: - echo [PHASE] Entered the build phase... - gradle bootjar post_build: commands: - echo [PHASE] Entered the post_build phase..
728x90
반응형

티스토리툴바