티스토리

주갬의 블로그

검색하기

블로그 홈

주갬의 블로그

jjuya96.tistory.com/m

주갬 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[Library] React-Dropzone 라이브러리 사용방법 오늘은 파일 업로드를 간편하게 구현할 수 있는 dropzone.js의 리액트 버전, react-dropzone을 활용하는 방법에 대해 다뤄보겠습니다. dropzone.js는 공식 문서가 잘 정리되어 있어 기본적인 사용법을 익히기 어렵지 않지만, react-dropzone의 공식 문서는 다소 부족한 감이 있습니다. 그래서 이번 글에서는 리액트와 결합하여 react-dropzone을 효율적으로 활용하는 방법을 중심으로 설명드리겠습니다. 기본적인 함수 사용법 등은 dropzone.js의 공식 문서를 참고하시면 도움이 될 것입니다. Dropzone.js 공식 문서 https://docs.dropzone.dev/ Introduction | DropzoneThe documentation for the JavaScr.. 공감수 0 댓글수 0 2024. 11. 15.
[React] 토큰 타임아웃 적용해서 자동 로그아웃 기능 구현하기 로컬 스토리지를 이용해서 30분이 지나면 엑세스 토큰이 사라져 자동으로 로그아웃 되게 하는 코드를 작성했다. 이런 식으로 사용하면 된다. 공감수 0 댓글수 0 2024. 11. 13.
[최적화] React 프로젝트 최적화 - 1. 문제점 인식 (LightHouse) 회사에서 듀얼 모니터가 되지 않던 M1 맥북을 교체해주었다. 무려 M3 맥북 💻 으로!! (본론은 아니지만 자랑) 전에 쓰던 맥북에서 데이터를 옮기고 업무를 하려고 전에 개발하던 리액트 프로젝트 개발 사이트를 딱 열었는데 세상에 렌더링이 너무 느린 것이다... 그래서 네트워크 탭을 열어서 확인해보니 빌드된 파일의 용량이 무려 23MB,, 사진을 빨리 띄우면 뭐하나 메인 빌드 파일이 너무 커서 뜨지를 않는데,,ㅎ 수정이 시급하다고 생각했다. 어디서부터 시작해야할지 몰라 이것저것 찾아보다 LightHouse라는 구글 확장 프로그램을 이용해 사이트 성능을 측정할 수 있다는 것을 알게되었다. 이 프로그램의 좋은 점은 점수를 산출해줄 뿐만 아니라 꽤 구체적으로 개선 방안을 제시해준다는 것이다. 이 LightHou.. 공감수 0 댓글수 0 2024. 2. 19.
[Library] React-bootstrap모달창 닫기버튼 스타일이 깨지는 현상 안녕하세요 주갬입니다. 오늘은 react-bootstrap을 이용 중에 모달창 닫기버튼 스타일이 깨지는 현상을 해결한 방법에 대해 말씀드리려고 합니다. 다른 bootstrap 요소들은 잘 나오는데 모달창 안에 있는 닫기 버튼만 스타일이 깨지는 현상이 발생했습니다. 원래는 이렇게 예쁜 닫기버튼이 나와야합니다. 구글링을 해본 결과 이 현상은 bootstrap 버전과 react-bootstrap 버전이 맞지 않을 때 발생한다고 합니다. https://stackoverflow.com/questions/65472384/react-bootstrap-only-close-button-styling-not-working React-Bootstrap ONLY Close Button Styling .. 공감수 0 댓글수 0 2023. 11. 21.
[React Hooks] useEffect와 useSelector 같이 쓸 때 주의해야 할 렌더링 순서 안녕하세요 주갬입니다. 회사에서 리액트로 프로젝트를 하고 있는데 캐시를 지우고 사이트를 열면 렌더링이 제대로 되지 않는 오류를 발견했습니다. 문제 상황) 렌더링에 문제가 발생한 hook은 다음과 같습니다. const tk = useSelector(state => state.user.tk); const uuid = useSelector(state => state.user.uuid); const ogc = useSelector(state => state.user.ogc); useEffect(() => { var data = JSON.stringify({ "tk" : tk, "uuid" : uuid, "ogc" : ogc }); var config = { method: 'post', url: ~~~~ , he.. 공감수 0 댓글수 0 2022. 9. 8.
[Library] react-select 'label' 키 이름 안맞추고 원하는 키 이름으로 지정하는 방법 React로 개발 중 셀렉트박스를 만들 때 유용하게 사용할 수 있는 React-Select 라이브러리가 있습니다. https://react-select.com/home React-SelectA flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support.jedwatson.github.io 이 라이브러리를 활용하면 CSS로 직접 하나하나 셀렉트 박스를 만들지 않아도 몇 줄의 코드만으로 쉽게 셀렉트 박스를 구현 할 수 있습니다. 위의 공식 사이트에 들어가면 설치 방법과 간단한 사용 방법이 있으니 참고해 주세요. 저는 이 react-select 라이브러리를 사용해 셀렉트 박스를 구현.. 공감수 0 댓글수 0 2022. 5. 4.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.