전체 글45 React로 구현하는 드래그 가능한 그리드 대시보드 소개 최근 대시보드나 캔버스 기반 애플리케이션에서 자주 볼 수 있는 그리드 기반 드래그 앤 드롭 시스템을 React로 구현하는 방법을 알아보겠습니다. 이 글에서는 dnd-kit과 react-resizable을 사용하여 다음 기능들을 구현할 것입니다:그리드에 맞춘 드래그 앤 드롭아이템 크기 조절충돌 감지반응형 그리드 시스템 기술 스택React@dnd-kit/core: 드래그 앤 드롭 기능 구현react-resizable: 크기 조절 기능 구현Material-UI Icons: UI 아이콘 핵심 컴포넌트 구조 프로젝트는 크게 두 개의 주요 컴포넌트로 구성됩니다:Widget.jsx: 전체 그리드 시스템을 관리하는 컴포넌트입니다. 이 컴포넌트는 그리드의 상태를 관리하고, 드래그 앤 드롭 로직을 처리합니다.Resi.. 2025. 1. 2. [일상] 영화 사흘 오늘은 영화 사흘을 보고왔다 원래도 공포 영화 좋아하는데 우리나라에서 만든 공포영화 못참지~! 스포 주의 아빠 너무 발암..ㅠㅠ 연기는 진짜 잘함 2024. 11. 17. [Library] React-Dropzone 라이브러리 사용방법 오늘은 파일 업로드를 간편하게 구현할 수 있는 dropzone.js의 리액트 버전, react-dropzone을 활용하는 방법에 대해 다뤄보겠습니다. dropzone.js는 공식 문서가 잘 정리되어 있어 기본적인 사용법을 익히기 어렵지 않지만, react-dropzone의 공식 문서는 다소 부족한 감이 있습니다. 그래서 이번 글에서는 리액트와 결합하여 react-dropzone을 효율적으로 활용하는 방법을 중심으로 설명드리겠습니다. 기본적인 함수 사용법 등은 dropzone.js의 공식 문서를 참고하시면 도움이 될 것입니다. Dropzone.js 공식 문서 https://docs.dropzone.dev/ Introduction | DropzoneThe documentation for the JavaScr.. 2024. 11. 15. [React] 토큰 타임아웃 적용해서 자동 로그아웃 기능 구현하기 로컬 스토리지를 이용해서 30분이 지나면 엑세스 토큰이 사라져 자동으로 로그아웃 되게 하는 코드를 작성했다. 이런 식으로 사용하면 된다. 2024. 11. 13. [생활] 나 혼자 집 수리 해보기 - 가스레인지 교체 집에 산 지 3년이 넘어가다 보니 여기저기 수리할 곳들이 하나둘씩 생기기 시작했다. 이사 갈 계획이 있어서 그동안은 미뤄왔는데, 이제는 내가 직접 고쳐보려고 한다.일하면서 퇴근 후에 집 수리를 하려니 귀찮아서 처음엔 사람을 부르려고 했는데, 어차피 혼자 살면서 계속 손볼 일이 생길 테니 이번 기회에 공부도 할 겸 직접 해보기로 결심했다. 수리할 부분들을 정리해보면 이렇다.- 가스레인지 제일 오른쪽 화구 불 안붙음- 전등 깜박거림- 세면대 똑딱이 안올라옴- 뚜기가 만든 큰 방충망 구멍- 문 손잡이 녹슬어 열고 닫기가 안됨- 뚜기가 만든 거실 쪽 벽지 뜯김 문 손잡이 녹이 슬어 열고 닫기 힘든 거랑 거실 쪽 벽지 뜯김은 퇴거 후에 집주인께서 직접 손보셔야 하는 부분이라 그냥 넘어가기로 했다. 나머지 4개.. 2024. 11. 12. [주간 회고] 11월 둘째주 업무CSMS Studio Editor watermark, cut 구현 생활운동은 가슴 운동 1회, 유산소는 뚜기랑 시장 투어 걷기 한 시간 정도!식단 조절 안함퀸가비 프로젝트 매니저 만들기 부분 1차 구현 완료 -> 테스트 하면서 프롬프트 수정집 수리 - 가스레인지 AS 받음 (못 고침. 노후되어서 아예 교체해야한다고 함)* 남은 집 수리 항목 - 전등 안정기 교체 - 세면대 배관 교체 - 방충망 교체 KPT 회고KEEP집밥 먹기 잘 지키고 있음 👍돈도 덩달아 아끼고 있음. 이번달 카드값 저번달 대비 백만원 정도 줄듯티스토리 블로그챌린지 시작! 작심 4일 완료. 계속 잘 써보자PROBLEM운동을 너무 적게 함! 적어도 2회로 늘리기식단을 쓰레기 처럼 함. 라면이랑 떡볶이 너무 자주 먹음TRY운동 주 3.. 2024. 11. 11. 이전 1 2 3 4 ··· 8 다음 반응형
