Front-end/React
-
TanStack Table v8 - Merge header cell (헤더 병합)Front-end/React 2024. 3. 7. 11:57
이번 리액트 프로젝트에서 처음 사용해보는 라이브러리들이 꽤있다. 그 중 하나가 TanStack Table이고, 사용한 버전은 v8 이다. https://tanstack.com/table/latest/docs/introduction 일반적인 테이블은 문서를 봐가면서 따라하면 그리 어렵지 않게 사용할 수 있다. 그런데 이번에는 중간 중간에 헤더가 합쳐져 있는 것을 구현해야했다. + Shadcn을 사용했지만 일반 html tag도 상관 없다 일반 테이블 만들기 ( Normal Table ) 일반테이블은 문서를 보면 알 수 있지만 생각 보다 쉽게 할 수 있고 다양하게 커스터마이징도 가능하다. 기본적으로 React에서 TanStack Table을 사용할 때는 useReactTable이라는 것을 가져와서 사용하게 ..
-
LocalStorage로 저장, 불러오기, 삭제 (JS, React)Front-end/React 2023. 2. 5. 21:45
특별히 서버단을 사용하지 않을 예정이고, 중요한 내용을 담고 있지 않다면 로컬스토리지를 이용하는 것도 좋은 방법 중 하나이다. 로컬 스토리지를 어떻게 이용하여 저장, 불러오기, 삭제를 할 수 있는지 알아보자. LocalStorage에 저장하기 localStorage.setItem('이름', JSON.stringify(..)) example for React) useEffect(() => { localStorage.setItem('my-data', JSON.stringify(data)) }) 위와 같이 하면 LocalStorage에 저장 할 수 있다. '이름' 이라고 적힌 부분은 LocalStorage에 저장하고 싶은 이름을 적으면 되고, 저장하고 싶은 데이터는 JSON.stringify를 통해서 저장 하..
-
리액트 파일 업로드, 파일 다운로드 File upload, download with javascript reactFront-end/React 2022. 6. 24. 17:24
최근에 맡아본 업무 중 하나가 파일을 업로드하고 다운로드 할 수 있는 기능을 만드는 것이었다. 원래 어려운 것이 아닐 수 있으나... 적어도 나에게는 생각보다 복잡한 과정을 거쳐야 했으므로 정리를 해두고 싶은 생각이 들었다. 그리고 이런 것들을 이해 할 수 있는 이론 지식을 가져야겠다는 마음도 함께 생겼다. 나에게 주어진 옵션은 이러했다. 1. 파일은 어떤 종류의 확장자던지 올릴 수 있어야한다. 2. 업로드 하는 파일의 크기는 50MB를 넘어가서는 안된다. 3. 파일 이름 + 파일크기가 나와야하고, 파일 크기는 사이즈에 따라서 convert되어야 한다. 4. 드래그앤드롭으로 파일을 넣을 수 있어야한다. 나는 이런 옵션을 가지고 개발을 시작했다. (** 추가 : 파일업로드, 다운로드에 초점을 맞추므로 UI..
-
React 상태 관리 : Recoil 로 해보자!Front-end/React 2021. 12. 4. 18:42
일반적으로 많은 회사에서 redux, mobx를 사용하는 얘기는 들었다. 나 또한 Redux, mobx는 경험이 있지만 Recoil은 얘기만 들어봤지 사용해보진 않았는데 그래서 documentation을 따라해보면서 알아가보려고 한다. 나는 머리가 좋지 않다. 그래서 하나하나 잘 따져가면서 공부를 해야한다. redux를 익힐 때 고생했던 경험을 살려... 이번에는 redux를 익혔을 때의 순서를 지켜가면서 공부를 해봐야겠다 About Recoil 우선 각 상태관리 라이브러리들의 architecture 에 대해서 머리에 그림을 그려야 한다. Redux의 경우, Flux architecture를 기반으로 했고, mobX의 경우 Proxy, Context API는 context를 기반으로 했다. 그렇다면 R..
-
캘린더 날짜 바꾸기 - Welcome to Data structureFront-end/React 2021. 9. 15. 15:19
.... "Welcome to 자료구조!!" 날짜 바꾸는 것이 잘 되지 않아서 함께 스터디 하고 있는 분에게 물어봤더니 이런 말이 돌아왔다. 내가 아는 자료구조랑 달라서 "어? 이런 것도 자료구조에요?" 라고 물어봤더니, "문자형 데이터를 내 멋대로 조종하는 작업이니까요. 실제로는 Timestamp를 datetime으로 바꿔서 제공해주는데, 그걸 패트릭님이 숫자로 바꿔서 비교한 다음에 문자열로 결과물을 내놓는 거잖아요. 그렇기에 자료구조이지요." 라는 답이 왔다. 현재 회사 사정상 백엔드 없이 프론트 작업만 먼저 선행 되어야 하는 경우가 생겼다. 그래서 우선은 임시로 데이터들을 만들어놓고 그것이 작동을 하는지 정도만 알아보려고 했다. 이 후에 백엔드 분이 오시면 내가 만들어놓은 것을 보여드리고 비교해보고..
-
React - context API를 사용해보자!Front-end/React 2021. 9. 7. 14:27
리액트에서 state를 관리하는 방법은 다양하다. 리액트는 단방향 워터풀 방식으로 부모에서 자식에게 props를 통해서 전달되어, 데이터 흐름이 일정하다. 그 말은 흐름을 비교적 알기 쉬워서 이해가 빠르게 된다는 장점도 가질 수 있다. 대표적으로 Redux, Mobx와 같은 것을 활용하여 state를 관리하게 되는데, Redux는 한번 사용하려면 귀찮다? 혹은 까다롭다? 라는 것이 따라붙는다. 큰 데이터도 아니고, 어떤 한 부분만 전달 하고 싶은 경우 굳이 Redux나 Mobx를 사용할 필요 없이 contextAPI를 활용할 수 있을 것이다. 특히 요즘은 contextAPI를 잘 만들어놔서 많은 경우 사용하기 좋다고 할 수 있다. 전체적으로 데이터를 전달해야하는 경우 Redux, Mobx를 사용하면 좋을..
-
portals을 이용한 리액트 모달창(modal) 만들기Front-end/React 2021. 7. 6. 17:20
(앞서 작성한 내용은 배움의 부족으로 나도 알아보기 애매해서... 다시 정리해서 올렸다.) 2021-10-22 수정 완료// (궁금한 점이 있거나, 틀린 부분이 있으면 말씀주세요~~!🧸) 프로젝트의 기획이 바뀌면서 모달을 만들어야 할 일이 생겼다. Modal은 리액트를 공부하다보면 한 번 쯤은 만들어보는 경우가 많이 있어서 간단하다고 생각했다. 그러나 공부를 할 때는 작동 방법에 대해서 배우느라 한 페이지에서 모달 창이 잠깐 나타나기만 하면 됐다. 하지만 프로젝트에서는 여러 곳에서 같은 Modal 창을 사용해야 한다. 그러면 단순히 component로 만들면 되지 않을까? 라고 생각 할 수 있지만 모달창은 의외로 복잡하다 (나만 그런가....) 한 사이트의 글을 발췌해보면 아래와 같다. "React's ..
-
리액트로 기간(날짜) 지정하기 date range ( react-flatpickr )Front-end/React 2021. 7. 5. 17:40
사실 사람들이 많이 사용하는 것으로는 react-datepicker, react-calendar, react-dates 등이 있다. 하지만 나는 이번 프로젝트에서 템플릿을 기반으로 사용하기 때문에 이미 설치 되어있는 react-flatpickr를 사용해보려고 한다. 어떠한 단점이 있어서 사람들이 많이 사용하지 않는 것 같은데, 결국 어떤 date picker던지 그 코어는 비슷하다고 생각되어 하는 김에 정리를 해놓으면 나중에 다른 것을 사용할 때도 도움이 될 것이라고 생각된다. 어디든지 사용 할 수 있는 flatpickr라는 것이 있는데 내가 사용한 것은 react를 위해서 나온 react-flatpickr 이다. 1. Installation 설치는 npm, yarn 두 가지 중 아무거나 사용할 수 있다..