디벨롭per

구글 맵에서 기존에 있던 장소 마커를 지우고 싶을 경우 //커스텀 맵 스타일 선언 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..

updateQueryData는 기존에 존재하는 패치작업을 쉽게 수행할 수 있다. 나같은 경우에는 드래그앤 드랍을 통해 order처리를 할 때 사용하게 됐다. 큰 틀은 이렇다. A,B,C라는 objectList에서 C를 A로 옮길 경우 order를 변환하는 API를 호출한다. 물론 update는 되지만 깜박이는 현상이 있었다. 문제 상황 1. C를 A로 드래그앤 드랍 : [C, A, B] 2. 업데이트 API가 호출 됨 3. 아직 API로부터 결과를 받지 않아 기존 list state때문에 다시 원복됨 [ A, B, C ] 4. 업데이트 된 API 결과를 다시 받아 LIST UPDATE함 [C,A,B] 그리하여 1과 3 사이 state때문에 깜박이는 현상이 존재했던 것이다. 이를 해결하기 위해서는 2번인 ..

html2canvas cors html2canvas라이브러리는 쉽게말해서 div를 이미지로 변환해주는 라이브러리다. 변환 방향은 (1)div-> (2)canvas-> canvas.dataUrl->image cors 에러 원인 : div에서 canvas로 변환하는 과정에서 canvas는 로컬이미지가 아닌 다른 도메인의 이미지가 있을 경우 이를 오염된 캔버스로 판정하여 cors 오류를 만들어냈다. 그리하여 변환된 결과물에서도 div는 잘 보이지만, 이미지만 안보이게 되는 이슈가 있었다. 해결 : 코드는 s3를 aws의 cloudFront를 통해 가져오고 있었다. 이곳에서 가져올때 cors오류를 없애기 위해서는 응답헤더에 Access-control-header를 받아와야만 가능했다. cloudFront의 동작..

RTK updateQueryData를 이용해 state를 미리 삭제한 값으로 업데이트할 때 삭제가 안되는 점 이유 : 삭제된 값을 넣을때 filter을 사용하여 수정하면 안되고, splice를 통해 넣어주니 됐다. dispatch( api.util.updateQueryData("list",{deleteId},draft)=>{ //안됨 (ㅌ) draft = draft.filter(obj=> obj.id!=== deleteId); //됨 const index = draft.findIndex((obj)=>obj.id===deleteId); draft.splice(index,1); })

원인 : transform 속성을 통해 위치가 이동된 element의 경우 position fixed 속성이 안먹게된다. 이유 : transform 속성을 통해 새로운 viewport 영역이 생성되며, 자식의 fixed 값은 새로 만들어진 viewport의 영향을 받기때문에 원하는 위치로 이동이 안된다.

#3 기본 레이아웃 구성 및 팝업 생성 #2 기본 버튼 컴포넌트 만들기 #1 기획단계 및 UI 작업 드디어 1인 토이 프로젝트를 진행하려 마음을 먹었다. 토이 프로젝트의 큰 토픽은 이름표다. (..오잉) 회사마다 다를 수 있지만 현재 본인이 potential-coding.tistory.com 깃허브 일일커밋 4일차 개발 사항은 - 이미지 첨부 - 이미지 앞면, 뒷면 보여주기 - 엑셀파일 첨부 - 엑셀 파싱 작업 진행 완료 --- 현재 css는 아직 완전히 구현되지 않은 상태이다. 이렇게 앞면과 뒷면 이미지를 불러오고, 엑셀에서 매일 첫번째 로우인 header 컬럼을 받아와 변수 지정에 설정했다. 그리하여 앞으로는 header에 있는 이름, 직급, 부서명 등을 드래그앤 드랍할 수 있는 객체로 만들어 명함 ..

#2 기본 버튼 컴포넌트 만들기 #1 기획단계 및 UI 작업 드디어 1인 토이 프로젝트를 진행하려 마음을 먹었다. 토이 프로젝트의 큰 토픽은 이름표다. (..오잉) 회사마다 다를 수 있지만 현재 본인이 다니고 있는 회사인 경우 신입 potential-coding.tistory.com 오늘은 깃허브 일일커밋 3일차다 오늘은 기본 레이아웃 구성과 팝업창 컴포넌트를 만들고 열기, 닫기 기능까지 구현해보았다. 현재까지의 진행상황을 공유하자면, 3일차 구현 - 50% 유연한 레이아웃 - Sticky한 Footer, Header 구현 - 팝업창 컴포넌트 구현 및 사용 - 파일 업로드 버튼 컴포넌트 커스텀 이번 1인 프로젝트를 진행하면서 제일 뿌듯한 점은 맨날 display : inline-block만 쓰는 나에게 ..

#1 기획단계 및 UI 작업 드디어 1인 토이 프로젝트를 진행하려 마음을 먹었다. 토이 프로젝트의 큰 토픽은 이름표다. (..오잉) 회사마다 다를 수 있지만 현재 본인이 다니고 있는 회사인 경우 신입들이 올 때마다 이름표 potential-coding.tistory.com ----- 기존엔 UI를 구성하기 위해 Material-UI, ant design의 컴포넌트들을 사용했다. 하지만 이번 프로젝트에서는 직접 만들어보고싶어 styled-component를 이용해 만들었다. 버튼 컴포넌트 생성 먼저, 내가 개발하면서 자율적으로 버튼을 커스텀하고 싶은 속성은 - 텍스트 - border 여부 및 색상 - outlined 여부 - backgroundColor : 버튼 색상 - fontColor : 폰트 색상 -..

드디어 1인 토이 프로젝트를 진행하려 마음을 먹었다. 토이 프로젝트의 큰 토픽은 이름표다. (..오잉) 회사마다 다를 수 있지만 현재 본인이 다니고 있는 회사인 경우 신입들이 올 때마다 이름표를 한명, 한명씩 수동으로 제작한다. (각각 이름넣고,,, 직급넣고,, PRINT) X (신입사원 또는 직급 변동 수) 나는 이게 너무 귀찮아보였다. 그리하여 본인이 사용자에게 엑셀 형식만 맞도록 요구하고, 그 틀 안에서만 이름표에 필요한 직원의 데이터를 가진 명단을 업로드 하면 이를 자동적으 이름표를 만들어주는 제네레이터를 개발하고자 한다. - 계기 : 사람 수 만큼 수동적으로 이름표를 만드는데 소비되는 시간이 불필요해 보임 - 해결법 : 시스템에서 업로드 된 직업 명단에 따라 자동으로 이름표 만들어주는 제네레이터..

Map postst = list.stream().collect(groupingBy(SalesCollectViewVo::getTmId)); System.out.println(postst.toString()); Map postsPerTypeAndAuthor = posts.stream() .collect(groupingBy(post -> new Tuple(post.getType(), post.getAuthor())));