React12 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. Converting circular structure to JSON --> starting at object with constructor 'HTMLInputElement' 에러 이 에러는 발생했을때 에러 내용도 길고 직역해도 뭔가 이해가 쉽게 되지 않아 겁먹을 수 있는 에러 같지만 정말 간단한 에러이다. 직역하면 JSON으로 객체를 변환하려고 할때 순환구조를 갖게 되어 문제라는 뜻인데 내 경우에는 값 넣으려고 api 호출할때 파라미터 값 중 document에서 ID로 html 객체를 가지고 온 다음 value를 가지고 전달해줬어야 하는데 깜빡하고 value를 빼먹었더니 HTML 객체를 파라미터로 던져줬다고 에러를 뱉어내는 것이었다. 결론적으로 파라미터를 JSON 형태로 묶어서 보내는데 그때 값들 중 HTML 객체를 그냥 넣어놓은 것이 있었어! 라고 알려주는 것 나도 깜빡하고 이럴 경우가 많을 것 같아 적어놓고 계속 상기해야겠다! 2024. 4. 18. [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. 이전 1 2 3 다음