반응형 React18 react-img-mapper 그리고 html2canvas와 html-to-image, jsPDF [이미지 처리에 관하여] 이 부분에 대해서는 쓸 내용이 많다.단순히 이미지 처리에 대한 내용 뿐만 아니라 관련되어 있는 환경 설정 문제까지 다 엮여버리는 바람에 프로젝트 시작 후 손에 꼽을 정도로 힘든 작업이었다. 일단! 내가 하려고 한 기능적인 부분은 특정 이미지가 있고 그 이미지에서 원하는 지점(Spot)에 표시를 하는 내용이었다. 1차적으로 단순히 이미지만 띄우는게 아니고 interaction이 있기 때문에 img 태그가 아닌 해당 기능을 부분적으로라도 지원해주는 라이브러리를 사용하려 했고 조사할때 제일 눈에 많이 띄었던 react-image-mapper 를 사용하기로 했다.처음엔 너무 간단했다.import ImageMapper from "react-image-mapper"; src만 크기만 맞춰주면 잘 뜬다. key값은.. 2024. 5. 14. [Reactstrap] DropdownItem에 Custom Component 넣고 싶은 경우 처리 상위 Header 영역 같은 경우에는 dropdown 컴포넌트로 구성하는 경우가 많은 것으로 알고 있다. 특정 기능을 만들다가 dropdown 하위로 있는 dropdownItem 에 customInput인 switch를 넣게 되었는데 이게... 스위치를 toggle하면 toggle 이벤트에 타기도 전에 그냥 dropdown만 닫겨버리는 현상이 발생... 결론적으로 이것 때문에 한 두시간 잡았던거 같은데 애시당초 잘못 접근 했던게 아! 이게 스위치를 토글하기 전에 dropdownItem 쪽 이벤트에서 가로채서 먼저 클릭하니 닫아버리는구나! 라고 생각해서 이벤트 버블링만 막으면 되는 줄 알고 계속 관련 처리만 했는데 죽어도 스위치 토글 이벤트에는 타지도 않더라 이럴땐 다시 리셋! 처음으로 돌아가서 그래 공식.. 2024. 4. 8. 파일 업로드에 사용할 라이브러리 기존에 다른 프로젝트에서 Dropzone 라이브러리를 사용했었다. Dropzone도 해당 라이브러리만의 특이한 점들이 있어서 공부하고 쓰느라 조금 애먹었는데 지금 진행중인 프로젝트에서는 이 참에 다른것도 써보자는 생각에 react-drag-and-drop-files 를 써보기로 했었다. 라이브러리명만 보더라도 리액트에서 사용될 목적으로 만들어졌을거라 생각이 들기도 해서 여러모로 호환성이 좋겠지 생각했다. 또 다른 이유는 기존의 input 태그 마냥 첨부하는 방식이 아니라 꼭 drag & drop으로 파일을 첨부하는 기능이 필요했다. 근데 사용해보니까 이 라이브러리 상당히 불친절한거 같다. drop 하기전에 최초에 표시할 문구 정도만 속성으로 설정할 수 있고 drop 하고 난뒤 상태에 따른 Text 등은 .. 2024. 4. 4. 갑자기 8000 Port가 사용중이라 정상 구동 안될 때 매번 그런건 아닌데 요즘 간헐적으로 작업하다 그냥 VSCode 종료하고 다시 작업하려고 run 시키면 8000 포트가 이미 사용중이라 정상적으로 구동할 수 없다는 에러가 발생한다. Node를 구동시키고 작업을 하다가 그냥 VSCode만 종료하면 프로세스에는 Node 서버는 구동이 종료가 되지 않고 계속 살아있어서 문제인듯... 이라고 이해했다. 처음에는 그냥 IDE 껐다 켜면 되니까 그냥 그렇게 했는데 여러번 그렇게 해도 안죽을 때가 있다... Mac 기준으로 혹시 이런 경우가 생기면 사용중인 포트를 죽이면 되기 때문에 간단한 방법이라 공유하겠다. 일단 터미널 켜고 8000번 포트로 사용중인게 있는지 조회 lsof -i :8000 그럼 PID 와 함께 여러 정보가 뜰 것 (Node를 사용 중이 아니라도 .. 2024. 3. 21. 이전 1 2 3 4 5 다음 반응형