뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

내가 step slider에 대한 정의를 잘 몰랐던건가.... 하는 생각을 했다. ... 저번 주에 회사 프로젝트 중 슬라이드지만 구분이 되어있고, 그 구분자에 대한 값을 받아와야하는 step slide가 들어가는 부분이 있었다.그 정도는 으레 있겠지 싶어서 찾아봤는데 내가 원하는 형태의 step slide가 없었다.아래 이미지와 같은 모양이 대부분이었다. 하지만 내가 원하는 모양은 좀 더 구분이 되어있고, 라벨도 붙어있으며 그 부분의 값도 가져올 수 있는 것을 원했다.어느정도 커스텀을 하면 되겠지만 일단 스타일부터 내가 원하던 스타일이 아니었다.그래서 내가 npm library에 하나 올려야겠다 라고 생각했다. ... 우선 원하는 모양을 잡았다. 그리고 간단하게 vite를 이용한 react, type..

개발 공부를 하다보면 디자인 패턴이라는 것에 대해서 들어봤을 것이다.디자인 패턴이라는 것은 반복적으로 일어나는 문제들을 어떻게 풀어나갈 것인가에 대한 재사용 가능한 솔루션을 제공해놓은 것을 말한다.대표적으로는 이라는 것이 있다. 그렇다면 React를 주로 사용하는 프론트엔드 개발자에게 있어서 사용할 수 있는 디자인패턴은 어떤 것들이 있을까?  HOC(고차 컴포넌트)우선 HOC이다. HOC는 자주 들어봤을 것이라고 생각한다. 이는 컴포넌트 자체를 인수로 받아들이고 향상된 기능을 갖춘 새 컴포넌트를 반환하는 함수이다.추가 기능으로 컴포넌트를 감싸서 코드 재사용, 교차 편집 문제 및 동작 구성을 가능하게 한다.HOC를 이용한 authentication, data fetching, memoization 등을 할..

React(리액트)는 NextJS와 더불어 최고의 주가를 달리고 있는 프론트엔드 라이브러리이다.그러나 우리는 프론트엔드, 백엔드 등의 웹/앱 개발자이지 리액트 개발자가 아니다.리액트 자체에 너무 한정적으로 공부할 필요는 없다.그러나 리액트를 사용하겠다라고 하면 조금 더 깊이 있게, 혹은 명확히 알고 사용하는 것이 좋다고 생각한다.그래서 ReactJS를 사용하는데 있어서 필요한 것들을 나누려고 한다.   ReactJS란 무엇인가?다들 리액트 공식 문서는 한 번 이상 보면서 사용하고 있을 것이라고 생각한다.그러나 보통 learn, 혹은 reference, api 쪽을 주로 보게 되는 것 같다.그 라이브러리가 무엇인지 알기 위해서는 메인 홈페이지를 먼저 살펴보는 것이 좋다.리액트에 대한 설명을 보면 Creat..

이번 리액트 프로젝트에서 처음 사용해보는 라이브러리들이 꽤있다. 그 중 하나가 TanStack Table이고, 사용한 버전은 v8 이다. https://tanstack.com/table/latest/docs/introduction 일반적인 테이블은 문서를 봐가면서 따라하면 그리 어렵지 않게 사용할 수 있다. 그런데 이번에는 중간 중간에 헤더가 합쳐져 있는 것을 구현해야했다. + Shadcn을 사용했지만 일반 html tag도 상관 없다 일반 테이블 만들기 ( Normal Table ) 일반테이블은 문서를 보면 알 수 있지만 생각 보다 쉽게 할 수 있고 다양하게 커스터마이징도 가능하다. 기본적으로 React에서 TanStack Table을 사용할 때는 useReactTable이라는 것을 가져와서 사용하게 ..

특별히 서버단을 사용하지 않을 예정이고, 중요한 내용을 담고 있지 않다면 로컬스토리지를 이용하는 것도 좋은 방법 중 하나이다. 로컬 스토리지를 어떻게 이용하여 저장, 불러오기, 삭제를 할 수 있는지 알아보자. LocalStorage에 저장하기 localStorage.setItem('이름', JSON.stringify(..)) example for React) useEffect(() => { localStorage.setItem('my-data', JSON.stringify(data)) }) 위와 같이 하면 LocalStorage에 저장 할 수 있다. '이름' 이라고 적힌 부분은 LocalStorage에 저장하고 싶은 이름을 적으면 되고, 저장하고 싶은 데이터는 JSON.stringify를 통해서 저장 하..

최근에 맡아본 업무 중 하나가 파일을 업로드하고 다운로드 할 수 있는 기능을 만드는 것이었다. 원래 어려운 것이 아닐 수 있으나... 적어도 나에게는 생각보다 복잡한 과정을 거쳐야 했으므로 정리를 해두고 싶은 생각이 들었다. 그리고 이런 것들을 이해 할 수 있는 이론 지식을 가져야겠다는 마음도 함께 생겼다. 나에게 주어진 옵션은 이러했다. 1. 파일은 어떤 종류의 확장자던지 올릴 수 있어야한다. 2. 업로드 하는 파일의 크기는 50MB를 넘어가서는 안된다. 3. 파일 이름 + 파일크기가 나와야하고, 파일 크기는 사이즈에 따라서 convert되어야 한다. 4. 드래그앤드롭으로 파일을 넣을 수 있어야한다. 나는 이런 옵션을 가지고 개발을 시작했다. (** 추가 : 파일업로드, 다운로드에 초점을 맞추므로 UI..

일반적으로 많은 회사에서 redux, mobx를 사용하는 얘기는 들었다. 나 또한 Redux, mobx는 경험이 있지만 Recoil은 얘기만 들어봤지 사용해보진 않았는데 그래서 documentation을 따라해보면서 알아가보려고 한다. 나는 머리가 좋지 않다. 그래서 하나하나 잘 따져가면서 공부를 해야한다. redux를 익힐 때 고생했던 경험을 살려... 이번에는 redux를 익혔을 때의 순서를 지켜가면서 공부를 해봐야겠다 About Recoil 우선 각 상태관리 라이브러리들의 architecture 에 대해서 머리에 그림을 그려야 한다. Redux의 경우, Flux architecture를 기반으로 했고, mobX의 경우 Proxy, Context API는 context를 기반으로 했다. 그렇다면 R..

.... "Welcome to 자료구조!!" 날짜 바꾸는 것이 잘 되지 않아서 함께 스터디 하고 있는 분에게 물어봤더니 이런 말이 돌아왔다. 내가 아는 자료구조랑 달라서 "어? 이런 것도 자료구조에요?" 라고 물어봤더니, "문자형 데이터를 내 멋대로 조종하는 작업이니까요. 실제로는 Timestamp를 datetime으로 바꿔서 제공해주는데, 그걸 패트릭님이 숫자로 바꿔서 비교한 다음에 문자열로 결과물을 내놓는 거잖아요. 그렇기에 자료구조이지요." 라는 답이 왔다. 현재 회사 사정상 백엔드 없이 프론트 작업만 먼저 선행 되어야 하는 경우가 생겼다. 그래서 우선은 임시로 데이터들을 만들어놓고 그것이 작동을 하는지 정도만 알아보려고 했다. 이 후에 백엔드 분이 오시면 내가 만들어놓은 것을 보여드리고 비교해보고..