#reactjs

Articles tagged with #reactjs

[React] 클라이언트에서 이미지를 압축해보자
우리는 서버 비용을 직접 부담하고 있기 때문에 항상 최적화와 비용 절감 방법을 고민하게 된다. 현재 자유게시판이 활성화가 많이 되지는 않았지만 사용자들이 업로드하는 이미지가 평균 5MB 이상일 경우를 대비해서 클라이언트에서 이미지 압축을 진행했다. 웹에서는 크게 두 가지 방법이 있었는데 Canvas API를 직접 사용하는 방법 browser-image-compression 라이브러리를 활용하는 방법 이 있다. 여러 장점을 고려해 brow...
Oct 8, 20252 min read20
[React] React + localStorage로 하루에 한 번만 보이는 팝업 만들기
이번 프로젝트에 설문조사 배너를 제작했는데… 흠… 뭔가 별로라는 의견이 많았다! (팀원들 의견) 🙄 디자인이 문제일까? 해서 래퍼런스를 많이 찾아봤는데 … ! 일반 웹사이트는 설문조사 배너 자체를 안 만들어요,,,🤭 충격 그 자체 ( 난 아직 멀었음 ) 그리고 알아보니깐.. 설문조사 배너는 사용자 경험을 해치기 쉬워 잘 쓰이지 않는다고 한다! 그래서 나는 모달 팝업 방식으로 전환하기로 결정했고 실무에서 자주 사용하는 패턴으로 구현했다. 방...
Jul 9, 20253 min read5
[북잡 프로젝트] 기존 에디터를 Tiptap으로 리팩토링한 이유와 과정
이전에 작성한 글에서 분명 Draft.js를 사용한 이유에 대해 작성했으며 겪었던 트러블슈팅 내용까지 적었지만 결국 Tiptap으로 리팩토링을 하게 되었다..😅 그래서 이번 글에서는 변경한 이유 사용 방법 에 대해 적어보려고 한다. 변경한 이유 이전 글에서도 썼지만, Draft.js는 이제 유지보수가 안 되고 있다.이 부분이 초반에는 문제가 안됐지만, 현재는 이미지 삽입 기능을 구현하는데 어려움이 있구나를 느꼈다. 문서에는 있는 것 같...
Jun 8, 20253 min read13
[React] React-Hook-Form 으로 폼(Form)을 구현하자 ‼️
왜 React-Hook-Form 사용을 결정하게 되었는지 ? 👇🏻 저번 프로젝트에서도 반려동물 정보 입력 페이지를 담당 했었는데 그때는 리액트 훅 폼을 사용하지 않았다..! 그러다보니 모든 입력 필드를 useState로 관리했고 코드도 어마무시하게 길어졌다. (입력 + 수정 + 추가) 페이지 코드가 모두 260줄이 넘는 이슈…!! 이게 웃긴게 그 당시 하면서 느꼈지만 입력 + 수정 + 추가 모두 같은 폼을 사용하고 있다.(+같은 코드) 그때...
Jun 2, 20256 min read13
[트러블슈팅] 글 작성 라이브러리(feat. react-draft-wysiwyg) 폰트크기 & 폰트종류 등이 작동 안 하는 이슈
이번 프로젝트에서 글 작성을 해야하는 폼이 필요해서 라이브러리를 사용하기로 했다! 처음에는 Tiptab 라이브러리 사용하려고 했는데 이미지 처리에 어려움이 있어서 react-draft-wysiwyg로 결정하기로 했다. 먼저 둘의 공통점과 차이점을 보자 공통점은 둘 다 게시글 작성용 리치 에디터이다. 차이점은 react-draft-wysiwyg의 경우 간단하고 빠른데 커스터마이징에 한계가 있고 Tiptab의 경우 러닝커브가 높지만 커스터마이징...
May 28, 20253 min read3
[트러블슈팅] Scroll to Top 버튼 및 페이지 이동 시 스크롤 맨 위 미작동 이슈 해결
이런 식으로 버튼들을 오른쪽 하단에 빼주었다 ✨ 아무래도 글이 많아지면 스크롤을 아래로 계속 내렸다가 다시 위로 올리는 게 꽤 귀찮고 요즘 대부분의 웹사이트에서도 이 기능을 제공하고 있다..! (다들 아시다시피 😘) 근데 작동을 안 해요🙂‍↔️ ㅋㅋㅋㅋㅋㅋ 👻 기존코드 (App.jsx) import { BrowserRouter } from 'react-router-dom' import AppRoutes from './routes/App...
May 27, 20254 min read9