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

최근 NextJS, Typescript, Shadcn을 이용해서 사내 CRM 프로젝트를 만들고 있다.CRM이다보니 Dialog 내부에서 여러가지 multi-form 형식의 처리가 많이 들어간다.우리 팀은 Shadcn을 사용하고 있으므로 Shadcn의 Dialog를 사용했는데 Dialog 내부의 Textarea에서 Enter를 입력해도 아래로 커서가 내려가지 않는 현상이 발생했다.  우선 첫 번째로 든 생각은 Textarea에서 Enter key 사용이 되는지 확인해보는 것이었다.Textarea에 onKeyDown을 사용해서 콘솔을 찍어보면 Enter가 제대로 먹히고 있는 것은 확인할 수 있다.그러면 다른 곳에서 인터셉트 해간다는 생각을 해야할 것이다. 나는 Shadcn의 Dialog만 사용하고 내부적인 ..

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

이번에 프로젝트 마이그레이션 작업을 준비하던 와중에 React가 19버전으로, 그리고 NextJS가 15버전으로 업데이트 되었다.기왕 버전이 업데이트 된 김에 우리 프로젝트도 최신의 버전으로 한 번 가져가보기로 했다.다행히  아직 메인 페이지와 라우팅 정도가 전부이다 보니 업데이트를 해도 크게 달라지는 점은 없었다. 1. Verseion 15로 업그레이드 우선 NextJS 홈페이지에 나와있는 방식대로 커맨드를 입력하여 업그레이드를 진행했다.그리고 package.json에서 확인해보니 dependencies 버전이 바뀐 것을 확인했다.그리고 다시 실행시켜보니 아직 만들어진게 없고 라우팅 정도만 해놓은지라 특별히 문제 될 만한 것은 없어보여서 다음 해야할 일을 진행했다. 2.  Markdown and MDX..

특히 프론트엔드 개발자로 일하다보면 "렌더링(Rendering)" 이라는 단어를 많이 사용하게 된다.렌더링이라는 것은 어떤 정보를 표현하는 것을 말하는데, 특히 웹 개발에서는 주로 데이터 처리를 통해 사용자에게 보여지는 특정 페이지를 생성하는 과정을 말한다. 개인적으로 프론트엔드 개발자 입장에서 아주 중요하다고 생각한다.아무리 성능 좋은 백엔드 컴퓨팅 기능을 갖추고, 좋은 인프라를 구축해놨다고 하더라도 결국 유저 눈에 보이지 않으면, 그리고 사용성이 떨어지게 된다면 다른 대안을 찾기 마련이기 때문이다.이렇게 중요한 렌더링이라는 것은 과거부터 많은 고민거리가 되었고, 그로 인해 다양한 경우에 맞는 패러다임의 적용이 필요했고, 그에 맞는 라이브러리나 프레임워크가 도입되기도 했다.특히 React, Angula..

정해진 이미지 위에 코드를 이용해서 그래프를 만들고, 클릭하면 전체화면으로 볼 수 있도록 만들어야 했다.이 때 필요한 것이 clipping, 그리고 DOM node를 이미지화 시키는 것이다.  1. 이미지 위에 그래프 그리기웹 디자이너가 없는 상황에서 포토샵으로 이미지를 만들어주면 그 위에 코드로 그래프를 그려야하는 일이 생겼다.숫자나 문자 같은 경우에는 위치만 잡아서 올리면 되지만 그래프나 수분량을 나타내는 경우 수분량에 따라서 신체에 수분이 차오르는 정도를 표현해야했다.내가 생각한 방법은 모든 그래프를 꽉차 있는 상태의 이미지로 받아서 그 위에 사용자의 정보에 따라 계산을 해서 바탕색을 채우는 방식으로 진행했다. 2. 사용자의 수분량에 따라 신체 이미지에서 수분량 나타내기백오피스에서 내부적으로 상담을..

NextJS를 처음 도입해서 프로젝트를 하고 있다.대부분 React만 했었고, NextJS는 React와 거의 같다라고 들어서 큰 문제 없이 사용할 수 있을지 알았는데 생각보다 CSR, SSR을 맞춰서 사용해야하다보니 고민을 해야하는 부분이 많았다. 오늘은 프로젝트 중 만난 Warning 중 하나인 Props must be serializable for components in "use client" file.... 의 해결에 대해서 알아보려고 한다.  배경어떤 경우 문제가 나타났는지 살펴보자면.../////////////////////////////////////////////////////////////// 부모 컴포넌트/////////////////////////////////////////////..

프론트엔드 개발을 하면서 가장 신경이 쓰이는 부분은 아무래도 상태관리일 것이다.그 중요도를 아는 만큼 redux, zustand, recoil, mobX, jotai 등 다양한 전역 상태관리 툴이 라이브러리로 제공되어지고 있고, 리액트 자체에서도 context API와 같은 훅을 제공해주기도 한다. 상태 관리라는 말은 애플리케이션의 상태(Data)를 효율적으로 관리하는 것을 말한다.UI는 사용자의 interaction에 따라서 동적으로 변해야 하고, 유저의 입력 값, 서버와의 통신 등 다양한 상태를 관리하게 되는데, 적절한 상태 관리 전략을 고려하지 않으면 대규모 애플리케이션의 개발 및 유지보수가 매우 어려워지므로 상태를 효율적으로 관리할 필요성이 있는 것이다.  Local state management..

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