개발노동자

현재 저는 관리자 페이지를 개발 하고 있습니다. 관리자 페이지 같은 경우 한 화면에 보여져야할 콘텐츠가 많기도 하고, 주로 모달 또는 다이얼로그들이 엄청 많습니다. 그러다 보니 한 화면의 Load 되어야 할 Js 파일 사이즈가 좀 큽니다...  이 부분을 최적화 해볼 생각입니다. 일단 최적화 전 용량을 보면 사용자를 관리하는 페이지 Load Js 크기가 너무 큽니다. (클수도 있지만 화면에 그려지는 콘텐츠가 얼마 없음) 그래서 해당 페이지에서 사용하는 다이얼로그들을 next/dynamic으로 지연로딩시켜서 불러오고 용량이 어떻게 줄었는지 보려합니다. import dynamic from 'next/dynamic';import UsersBlockingLoading from '@/components/loadi..

Next.js 타입스크립트환경에서 Slider 컴포넌트를 만드는 과정을 기록해보려합니다. 1. npm 설치npm i react-slick slick-carousel 2. ImageSlider 컴포넌트생성"use client";import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css";import { useState } from "react";import Slider from "react-slick";import Image from "next/image";import { FaCircle, FaRegCircle } from "react-icons/fa";interface ImageSliderProps { i..

회사에서 Drag Drop 이벤트를 사용을 하는 부분이 라이브러리를 통해 구현되어 있었는데 커스텀이 힘든 경우가 대부분이였었다.. 그렇기에 HTML 에서 지원하는 방식으로만 구성해봤다. 공식문서 https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API HTML Drag and Drop API - Web APIs | MDN HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers. developer.mozilla.org "use client" import { DragEvent } from "react" const DragItem ..