Dev Diary 💻

Intro안녕하세요. 이번 시간에는 yarn berry 제거 방법에 대해 알아보겠습니다. 개발 환경은 Next.js + React 구성을 전제로 진행하겠습니다.혹시 yarn berry가 무엇인지 궁금하신 분들은 링크에 걸려있는 포스팅 참고 부탁드립니다 . How to remove yarn berryYarn Berry (Yarn 2+)를 제거하는 방법은 다음과 같습니다:1. Yarn Berry 설정 파일 삭제프로젝트의 루트 디렉토리에서 .yarnrc.yml 파일을 삭제합니다.#.yarnrc.yml filenodeLinker: node-modulesyarnPath: .yarn/releases/yarn-3.6.0.cjs 2. 패키지 매니저 변경Yarn 1.x로 돌아가려면, yarn을 다시 설치해야 합니다. 다..

Intro안녕하세요. 이번시간에는 React MUI에서 anchorEl 란 무엇이며 사용 이유에 대해 알아보겠습니다.  anchorEl ?Material-UI (MUI)에서 팝오버(Popover)나 메뉴(Menu)와 같은 컴포넌트에서 사용되는 속성으로, 팝업의 위치를 지정하는 역할을 합니다. 이 속성은 팝업이 열릴 위치의 기준이 되는 요소(Element)를 지정합니다. 주요 컴포넌트에서의 anchorEl 사용1. PopoverPopover 컴포넌트는 기준 요소인 anchorEl의 위치를 기준으로 화면에 표시됩니다. The content of the Popover. 2. MenuMenu 컴포넌트는 주로 네비게이션 또는 드롭다운 메뉴를 만들 때 사용됩니다. anchorEl을 통해 메뉴가 나타날 위치를 지정..

Intro안녕하세요. 이번 시간에는 TableVirtuoso 사용 중 데이터가 빈 배열일 때 EmptyPlaceholder 속성을 활용하는 방법에 대해 알아보겠습니다.  Example현재 코드는 다음과 같다고 가정해봅시다. 이 상태에서 dataList가 null이거나 빈배열일 때 특정 데이터가 비어있다는 특정 텍스트를 표시해보겠습니다. const VirtuosoTableComponents = (totalColSpan: number): TableComponents => ({ Scroller: React.forwardRef((props, ref) => ( )), Table: (props) => ( ), TableHead: React.forwardRef((props, ref) => ( ..

Intro안녕하세요. 이번 시간에는 react-virtuoso 에서 동적 높이를 설정하는 방법에 대해 알아보겠습니다. 참고로 저는 third-party mui tabler과 결합하여 사용하였습니다.  My casereact-virtuoso mui table 사용법은 아래와 같습니다. height 를 설정해줄 때 다음과 같이 고정값이 들어가게 됩니다. export default function ReactVirtualizedTable() { return ( );} 제 케이스의 경우 여러 rows 데이터가 있고, 그 데이터들은 각각 높이가 달라서 height를 동적으로 설정해줘야 했습니다. 어떤 방법을 사용해야 할까요?  How to solve the problemimport Re..

Intro안녕하세요. 이번 시간에는 react-virtuoso 가 무엇이며, react virtuoso 를 사용하여 react table 렌더링 최적화하는 방법에 대해 알아보도록 하겠습니다. Issuemui react table을 사용하던 도중 데이터 양이 많아지면서 테이블이 그려지는 속도가 느려져 서비스 이용에 문제가 발생하였습니다.  따라서 react table의 성능을 개선하기 위해 개선 방안을 찾아야 했습니다.  관련 라이브러리를 서치하던 도중 TanStack 와, mui 공식 홈페이지에 Virtualized table 부분에 소개되어 있는 react-virtuoso 두개의 라이브러리를 발견하였습니다. star의 수 자체는 TanStack이 더 높았지만 사용방법이 더 쉽고, 기존 프로젝트에 용이하..

Intro안녕하세요. AWS 관련 용어 정리를 해보도록 하겠습니다. 이 글은 생활코딩의 AWS 아마존 웹 서비스(Amazon Web Services) 책을 바탕으로 정리한 내용입니다.  RDS-1아마존 RDS는 Amazon Relational Database Service의 줄임말입니다. 즉 컴퓨터에 DB를 설치하고 대신 운영해주는 서비스입니다.

Intro안녕하세요. AWS 관련 용어 정리를 해보도록 하겠습니다. 이 글은 생활코딩의 AWS 아마존 웹 서비스(Amazon Web Services) 책을 바탕으로 정리한 내용입니다.  S3를 서버로 활용하기CloudFront를 사용하게 되면 더 이상 우리의 웹 서버는 사용자를 직접 만나지 않습니다. 사용자가 CloudFront로 접속하게 되면 CloudFront가 클라이언트가 돼서 웹 서버에게 요청합니다. 그럼 웹 서버가 자신의 정보를 CloudFront에 전송하고, CloudFront는 웹 서버의 정보를 저장하고 사용자에게 응답합니다. 이후 사용자가 CloudFront를 접속했을 때 웹 서버의 정보를 CloudFront가 저장하게 되면 그 다음의 요청은 CloudFront가 응답합니다.  웹 서버는 ..

Intro안녕하세요. AWS 관련 용어 정리를 해보도록 하겠습니다. 이 글은 생활코딩의 AWS 아마존 웹 서비스(Amazon Web Services) 책을 바탕으로 정리한 내용입니다.  AWS 기본 사용법클라우드 컴퓨팅: 인터넷 너머에 있는 남의 컴퓨터를 구름 (cloud)에 비유해서 클라우드 컴퓨팅이라는 이름이 만들어졌습니다. 서버, 스토리지, 데이터베이스, 네트워킹 등의 컴퓨팅 서비스를 인터넷을 통해 온디맨드로 제공하고, 사용한 만큼만 비용을 지불하는 것을 말합니다. 호스팅(hosting): 호스트 컴퓨터를 빌려줘서 서버로 사용할 수 있도록 제공하는 서비스를 말합니다.호스트(host): 인터넷에 연결된 컴퓨터 한 대를 의미합니다. EC2(Elastic Compute Cloud): AWS에서 독립된 컴..

Intro안녕하세요. 이번 시간에는 react-apexcharts 의 y축 단위를 설정하는 방법에 대해 알아보겠습니다.  How to solve the problem기존 chart options 코드는 다음과 같습니다. 저의 경우 y축이 화폐 단위였기 때문에 보기 쉽게 자릿수 표시가 필요했습니다. const options: any = { chart: { height: 250, type: 'bar', stacked: false, toolbar: false, animations: { enabled: true, easing: 'easeinout', speed: 500, }..

Intro안녕하세요. 저는 AWS EC2 인스턴스에 설치된 리눅스의 서비스 상태를 확인해야 했는데요, 이번 시간에는 systemctl 명령어 사용 방법 그리고 프로세스 상태 확인법에 대해 알아보겠습니다. Systemctl?systemctl는 리눅스 시스템에서 systemd 시스템 및 서비스 관리자를 제어하고 관리하기 위한 명령어입니다. systemd는 리눅스의 초기화 시스템으로 부팅 프로세스를 관리하고, 시스템 서비스 시작 및 중지 상태 조회 등의 작업을 수행합니다.How to command#1 서비스(프로세스) 시작 및 중지systemctl start [서비스명]: 특정 서비스를 시작합니다.systemctl stop [서비스명]: 특정 서비스를 중지합니다.systemctl restart [서비스명]: ..