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

이번에 프로젝트 마이그레이션 작업을 준비하던 와중에 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 등을 할..

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이라는 것을 가져와서 사용하게 ..