👇🏻CATEGORY👇🏻96 dnd-kit로 칸반보드 구현하기 (@dnd-kit/react) dnd-kit로 칸반보드 구현하기 (@dnd-kit/react)최신 버전 @dnd-kit/react는 복잡한 설정과 상태 관리 로직을 라이브러리 내부로 캡슐화해 개발자 경험(DX)을 크게 개선했다.기존 @dnd-kit/core로 칸반보드를 구현할 때 가장 어려웠던 점은 드래그 자체보다 상태 관리 로직이 훨씬 복잡하다는 것이었다.같은 컬럼 내 이동인지다른 컬럼으로 이동하는지index 계산배열 재정렬이 모든 로직을 직접 구현해야 했다. 하지만 최신 버전인 @dnd-kit/react에서는 👉 드래그 상태 관리를 라이브러리가 대신 처리 해주면서 구현 난이도가 크게 낮아졌다.🚀 무엇이 달라졌을까?Migration guide - @dnd-kit Migration guide - @dnd-kitA comprehen.. 2026. 3. 24. React/Next.js 마크다운 목차 구현하기 (feat. 클릭 시 스크롤) React/Next.js 마크다운 목차(Table of Contents) 구현하기[✨FRONTEND/📍React] - React/Next.js 마크다운 적용하기 React/Next.js 마크다운 적용하기React 마크다운 미리보기 적용하기👁️React 프로젝트에서 글 작성 기능을 구현하면서 처음에는 단순히 textarea만 사용해 글을 입력받도록 만들었다. 하지만 마크다운 문법을 사용하는 글이라면bori-note.tistory.com 예전에 게시글 등록할 때 마크다운 미리보기 기능을 구현한 적이 있다. 이번에 다른 프로젝트를 진행하면서 동일하게 미리보기 기능을 적용해봤는데, 상세 페이지를 볼 때 내용이 길어져 벨로그 처럼 목차 기능을 넣어보기로 했다. 블로그 글처럼 내용이 길어질 경우 사용자가 원하는.. 2026. 3. 16. Spring Boot에서 Swagger(OpenAPI) 문서 만들기 Spring Boot에서 Swagger(OpenAPI) 문서 만들기프로젝트를 진행하다 보면 API가 늘어날수록 “이거 뭐였지?” 하는 순간이 온다.그래서 Swagger(OpenAPI)를 붙여 API 명세를 자동화 + 테스트까지 한 번에 정리했다.1️⃣ build.gradle 의존성(Dependency) 추가implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:3.0.2' 나는 springdoc-openapi를 사용했다.Spring Boot 3.x 기준이라면 위 스타터 하나면 끝.2️⃣ application.yml 또는 application.properties 기본 설정springdoc.api-docs.path=/v3/api-docssprin.. 2026. 3. 9. Spring Boot + MyBatis 게시판 페이지네이션 구현 (LIMIT, OFFSET) 게시판을 만들다 보니 결국 필요한 게 페이지네이션이다.데이터가 많아지면 한 번에 다 가져오는 건 말이 안 되고, 직접 LIMIT / OFFSET을 써서 페이징을 구현해보기로 했다. 이번 글에서는 Spring Boot + MyBatis 환경에서 게시글 목록 페이지네이션을 어떻게 설계하고 구현했는지 정리했다!1. 요청 DTO 정의// GetPostListReq.java@Getter@Setterpublic class GetPostListReq { private String title; // 제목 검색 @Min(value = 1, message = "페이지는 1 이상이어야 합니다.") private int page = 1; // 페이지 @Min(value = 1, message = "페이지.. 2026. 3. 3. Tailwind Breakpoint 기준으로 useResponsive 훅 만들기 Tailwind Breakpoint 기준으로 useResponsive 훅 만들기Tailwind 반응형 클래스http://tailwindcss.com/docs/responsive-design Responsive design - Core conceptsUsing responsive utility variants to build adaptive user interfaces.tailwindcss.com 나는 평소에 반응형 작업을 할 때Tailwind의 sm, md, lg 같은 breakpoint 클래스를 사용했다. PC에서만 보이는 요소 이 방식은 스타일 제어에는 정말 편하다.하지만 다음과 같은 상황에서는 한계가 있었다. 모바일일 때 아예 컴포넌트를 렌더링하지 않고 싶을 때특정 디바이스에서 API 호출을 막고.. 2026. 2. 26. [코딩테스트] 프로그래머스 MySQL: 특정 물고기를 잡은 총 수 구하기 프로그래머스 MySQL: 특정 물고기를 잡은 총 수 구하기https://school.programmers.co.kr/learn/courses/30/lessons/298518 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 낚시앱 데이터베이스에서특정 물고기(BASS, SNAPPER)를 몇 마리 잡았는지 구하는 SQL 문제다. 테이블은 두 개로 구성되어 있다. FISH_INFO 👉 잡은 물고기 정보 (종류는 숫자로 저장)IDFISH_TYPELENGTHTIME00302021/12/0410502020/03/0720402020/03/0731202022/03/0941NULL2022/04/0852132021/04/28606.. 2026. 2. 23. MySQL 설치부터 비밀번호 초기화까지 (feat. DBeaver) MySQL 설치부터 비밀번호 초기화까지1️⃣ MySQL 설치// Homebrew로 설치brew install mysql// 설치 완료 후 버전 확인mysql --version2️⃣ 환경변수(PATH) 설정MySQL 명령어를 어디서든 실행하려면 PATH 설정이 필요하다. 터미널 실행하면 뭘 사용하고 있는지 확인할 수 있다. zsh 사용하는 경우 (기본 macOS)open ~/.zshrc bash 사용하는 경우open ~/.bash_profile 명령어를 실행하면 에디터가 나온다. 파일 맨 아래에 추가하자.export PATH="$PATH:/usr/local/mysql/bin" ⚠️ M1/M2 맥이면 /opt/homebrew/opt/mysql/bin 일 수도 있음확인 방법which mysql 저장 후 .. 2026. 2. 20. 내가 pnpm을 쓰는 이유 사실 나는 pnpm을 쓰면서도 정확한 이유를 잘 알지 못했다.프로젝트를 시작할 때 그냥 자연스럽게 pnpm을 선택했다. 이유는 단순했다.“요즘 다 pnpm 쓴다던데?”“설치 속도가 빠르다던데?” 그 정도면 충분하다고 생각했다.어차피 패키지 매니저는 npm, yarn, pnpm 중 하나일 뿐이라고 여겼다. 그런데 문득 이런 생각이 들었다.나는 왜 pnpm을 쓰는 걸까?정말 단순히 빠르기 때문일까? 어쩌면 ‘남들이 많이 쓰니까’라는 이유로 아무 생각 없이 선택하고 있었던 건 아닐까?그래서 이번에는 막연한 이유가 아니라, 구조적인 이유를 이해해보기로 했다. pnpm은 왜 등장했는지,모노레포와는 어떤 관계가 있는지,그리고 나는 왜 이 도구를 계속 쓰고 있는지.하나씩 정리해보려 한다.🧱 모노레포라는 개념부터 이.. 2026. 2. 13. 패키지 관리자 비교 프론트엔드 개발을 하다 보면 가장 먼저 마주치는 도구 중 하나가 패키지 매니저다.패키지 매니저는 프로젝트에 필요한 라이브러리를 설치하고, 버전을 관리해 주는 도구다. 대표적으로 npm, Yarn, pnpm, Bun이 있으며,각각 설치 방식과 성능, 사용 목적에 차이가 있다.이번 글에서는 네 가지 도구의 특징과 장단점을 정리해본다.📦 npm (Node Package Manager)Node.js 공식 기본 패키지 관리자설치 명령: npm install장점가장 널리 사용되는 표준Node.js 설치 시 기본 포함단점상대적으로 느린 설치 속도node_modules 디렉터리 크기 큼npm은 패키지를 프로젝트 내 node_modules 폴더에 통째로 복사해서 설치함실제로 같은 파일이 여러 번 저장되기 때문에 디스크.. 2026. 2. 13. 이전 1 2 3 4 ··· 11 다음
