hye-log

[React/Kendo UI] Grid 반응형 열 컬럼 구현 with Playwright (Kendo Grid Responsive Columns)

iihye_ — Thu, 30 Jul 2026 15:16:51 +0900

최근 프로젝트에서 Kendo UI를 사용하여 프론트엔드를 구현하고 있다.

Kendo UI는 Telerik에서 제공하는 UI 컴포넌트 라이브러리로 다양한 컴포넌트가 있다.

그 중에서 Grid 컴포넌트는 페이징, 정렬, 필터링 등 유용한 기능을 제공해서 목록조회를 구현할 때 사용했다.

https://www.telerik.com/kendo-ui

JavaScript UI Components - Build Better Apps Faster - Progress Kendo UI

Quickly build eye-catching web apps using Kendo UI's ultimate collection of JavaScript UI components with libraries for jQuery, Angular, React, and Vue.

www.telerik.com

문제가 되는 부분은 반응형 열 컬럼이 구현이 안되는 점이었다.

모든 컬럼에 width를 지정하면, 화면이 넓어져도 컬럼이 늘어나지 않아 Grid에 빈 공간이 발생한다.

한 컬럼을 제외하고 width를 지정하면, 화면이 넓어질 때 한 컬럼이 반응형으로 늘어나지만,

화면이 좁아지면 컬럼이 사라지는 문제가 발생했다.

<GridColumn field="columnNm" width="300px"/>

Kendo Grid의 스크롤 구조는 다음과 같다.

Page
 └─ Box
     └─ Grid
         ├─ Header
         └─ Content

단순히 Grid에 minWidth를 적용하면 Grid 내부가 부모보다 넓어지면 브라우저 전체에 가로 스크롤이 생기게 된다.

내가 원하는건 브라우저 전체 크기에 맞게 Grid가 보여야 하기 때문에 Grid 내부에 스크롤이 생겨야 한다.

<Box
    sx={{
        width: '100%',
        '& .k-grid': {
            width: '100%',
        },
    }}
>

일단 부모 컨테이너를 100%를 고정하여 페이지가 늘어나지 않도록 고정한다.

sx={{
    '& .k-grid-header-table, & .k-grid-table': {
        minWidth: '{고정 컬럼 width 합 + 가변 컬럼 width}',
    },
}}

Grid는 고정 컬럼 width 합 + 가변 컬럼 width로 정해준다.

예를 들어서 4개의 컬럼이 있다고 가정해보자.

번호(80px), 이름(120px), 건축물명(최소 300px), 작성날짜(200px) 이면,

고정 컬럼(번호, 이름, 작성날짜) 400px + 가변 컬럼(건축물명)) 300px = 700px 을 minWidth로 잡아준다.

그 결과 Grid 내부에 스크롤이 존재하면서, 가변 컬럼에 대해서 minWidth를 유지하게 되었다.

이 부분은 다른 목록조회 화면에서도 발생했던 문제이기 때문에,

재사용 가능하도록 컴포넌트로 분리해서 사용할 수 있게 만들었다.

프로젝트 내 어떤 파일에서든 KendoContainer 컴포넌트를 사용하면 Grid 반응형 열 컬럼 기능을 사용할 수 있는 것이다.

이 과정을 해결하기 위해 minWidth, className-headerClassName, css 여러 방법을 1시간 정도 시도했었다.

Grid 레이아웃이 의도하는 대로 동작하는지 자동으로 검증하고 코드를 수정하기 위해서 Playwright를 이용했다.

Playwright는 브라우저 자동화 및 End-to-End 테스트 프레임워크로,

실제 브라우저를 실행해 사용자의 동작을 자동으로 수행하고, 의도한 대로 동작하는지 검증할 수 있는 도구이다.

https://playwright.dev/

Fast and reliable end-to-end testing for modern web apps | Playwright

Web automation and testing for apps, scripts, and AI agents

playwright.dev

Playwright가 문제를 분석하고 해결한 과정은 다음과 같다.

Kendo Grid 구조 분석 -> CSS 수정 -> minWidth 테스트 -> 스크롤 테스트 -> 검증 -> 코드 확정

사실 인간이 수행하는 문제 과정과 다를 바가 없다.

다만 테스트 과정에서 단순히 "잘 보인다"가 아니라 실제 스크롤 동작과 열 너비를 검증하면서 정확한 테스트를 진행할 수 있었다.

토큰은 총 input에 40~60k, output에 4~7k, 총 50~65k 정도 사용되었는데,

코드 수정 - 테스트 - 결과 확인 - 수정 - 테스트 - 결과 확인 - ... 이 과정을 반복하면 토큰이 많이 사용되었다.

하지만 처음부터 모든 제약 조건을 한 번에 전달하고, 최종 격롸만 요청했기 때문에 토큰을 절약해서 사용할 수 있었다.

[JavaScript] 미디어쿼리(Media Query) vs 유저 에이전트(User Agent) 모바일 디바이스 감지하기

iihye_ — Tue, 4 Nov 2025 17:52:56 +0900

최근에 서비스 중인 웹 페이지를 모바일 디바이스에 맞게 변형하는 작업을 진행했다.

기존 메인 페이지를 모바일 환경에 다 담지 못하므로, 모바일용 메인 페이지를 만들고,

게시판도 모바일 디바이스에서 유연하게 사용할 수 있도록 UI를 전면 수정했다.

전반적인 디자인은 웹 디자이너께서 해주셨지만 이를 적용하는 건 나의 몫이었다

웹 화면과 모바일 화면을 구분하기 위해서 사용한 방법은 미디어 쿼리(Media Query)였다.

미디어 쿼리는 CSS에서 화면의 크기나 기기의 특성에 따라 다른 스타일을 적용할 수 있게 해주는 기능이다.

즉, 화면의 크기에 따라 달라지는 "반응형 웹(responsive web)"을 만들 수 있다.

미디어 쿼리는 @media 으로 CSS에 작성하면 된다.

@media (조건) {
  /* 조건을 만족할 때 적용될 CSS */
}

일반적으로 모바일은 768px 이하, 데스크톱은 1024px 이하로 구분하기 때문에 다음과 같이 작성한다.

/* 기본 스타일 (데스크톱용) */
body {
  font-size: 18px;
  background: white;
}

/* 화면 폭이 768px 이하일 때 (모바일용) */
@media (max-width: 768px) {
  body {
    font-size: 16px;
    background: #f0f0f0;
  }
}

CSS를 이렇게 작성했으면 JS에서도 화면의 크기를 판단하는 기준을 만들어줘야 한다.

모바일 상태를 판단하는 mobileContext 파일을 만들어서 window.innerWidth를 기준으로 화면의 크기를 가져와서 판단했다.

import { useEffect, useState } from 'react'

const mobileContext = () => {
  // 화면 크기 상태
  const [isMobile, setIsMobile] = useState(false)

  // 화면 크기 추적
  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768)
    }

    handleResize() // 초기값 설정
    window.addEventListener('resize', handleResize)

    // 컴포넌트 언마운트 시 이벤트 리스너 제거
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return isMobile
}

export default mobileContext

이와 같이 적용했더니 문제점이 발생했다..

웹에서 테스트 할 때는 화면의 크기를 줄이면서, "이 쯤이면 모바일에서도 보이겠지" 생각했는데,

실제 배포 후 웹 화면으로 접속했을 때에는 아래와 같이 잘려 보이는 것이었다..

미디어 쿼리는 화면의 크기에 따라 요소가 바뀌는 반응형 웹에 적합한 방식이지만,

내가 원했던 건 "모바일 디바이스에서는 모바일 화면만 보인다" 이기 때문에 다른 방법을 찾아야 했다.

클라이언트가 서버에 자신을 알리기 위해 보내는 문자열 정보인 유저 에이전트(User Agent)를 이용해보았다.

우리가 브라우저에 접속하면 클라이언트는 아래와 같이 유저 에이전트를 서버에 보낸다.

Mozilla/5.0 (Windows NT 10.0; Win64; x64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/121.0.0.0 Safari/537.36

그럼 서버는 이 정보를 보고,

"아, 사용자는 Windows 10 64bit 운영체제 환경에서 Chrome 121 브라우저로 Webkit 기반의 엔진을 사용하구나!" 라고 이해할 수 있다.

유저 에이전트를 통해 어떤 운영체제로 접속하는지 확인할 수 있기 때문에 안드로이드, 아이폰 등 모바일 디바이스를 감지할 수 있다.

유저 에이전트는 navigator.userAgent 속성을 통해 확인할 수 있다.

이 속성은 읽기 전용으로 현재 브라우저의 정보를 문자열로 반환한다.

console.log(navigator.userAgent);

innerWidth 대신에 userAgent 속성을 사용해서 모바일 디바이스를 감지한 코드이다.

import { useEffect, useState } from 'react'

function detectMobileDevice(agent: string) {
  const mobileRegex = [
    /Android/i,
    /iPhone/i,
    /iPad/i,
    /iPod/i,
    /BlackBerry/i,
    /Windows Phone/i,
  ]

  return mobileRegex.some((mobile) => agent.match(mobile))
}

const mobileContext = () => {
  // 화면 크기 상태
  const [isMobile, setIsMobile] = useState(false)

  // 화면 크기 추적
  useEffect(() => {
    setIsMobile(detectMobileDevice(navigator.userAgent))
  }, [])

  return isMobile
}

export default mobileContext

참고자료

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent

https://imkh.dev/js-detect-mobile-device

[QueryDSL] BooleanExpression과 BooleanBuilder의 모든 것

iihye_ — Fri, 31 Oct 2025 16:47:45 +0900

JPA, QueryDSL을 사용하는 프로젝트에서 BooleanExpression을 이용해서 where절을 자주 쓰곤 했는데,

최근에 소스코드 보안점검을 해보니 '널(Null) 포인터 역참조가 발생할 수 있다'고 지적 받은 코드가 있어서

BooleanExpression에서 널 포인터 역참조를 피하려면 어떻게 해야하는지,

BooleanExpression과 BooleanBuilder는 어떤 차이가 있고 어떤 상황에서 써야하는지 알아보려고 한다.

BooleanExpression과 BooleanBuilder는 QueryDSL에서 where절의 조건을 표현하는 조건 표현식이다.

사실 query문에 where문을 직접 입력해도 된다!

query.where(qUser.age.goe(18));

하지만 이렇게 쓰지 않는 이유는 조건이 있을 수도 있고, 없을 수도 있다.

예를 들면 나이(age)는 입력했지만, 이름(name)은 입력 안할 수도 있고, 활성화 여부(active)는 전체일 수도 있다.

query.where(...) 안에 직접 쓰면 if 문으로 계속 쿼리를 만들어야 한다.

따라서 동적으로 where절을 만들어서 재사용성, 가독성, 유지보수성을 향상시키기 위해 조건 표현식을 사용한다.

BooleanBuilder where = new BooleanBuilder();

if (age != null) {
  where.and(qUser.age.goe(age));
}

if (StringUtils.hasText(name)) {
  where.and(qUser.name.contains(name));
}

if (!"all".equals(status)) {
  where.and(qUser.status.eq(status));
}

query.where(where);

null 역참조가 발생할 수 있는 코드를 살펴보자.

BooleanExpression whereClause = Expressions.TRUE;
/**
	whereClause에 붙은 수많은 조건들...
**/

/** srchClause만 따로 작성하는 이유는 검색 관련 where절만 따로 관리하려고 **/
BooleanExpression srchClause= null;

if (StringUtils.hasText(srchData)) {
  srchClause= qDatas.title.eq(srchData);
}

if (srchClause!= null) {
  whereClause = whereClause.and(srchClause);
}

문제점 1. Expressions.TRUE

일반적으로 BooleanExpression에서 Expressions.TRUE를 쓰면 항상 true인 조건으로 시작하기 때문에,

where절에 초기값이 null이 아니라는 점에서 안전한 시작점을 만들어준다.

하지만 코드와 같이 whereClause.and(...) 메소드에 srchClause와 같이 또 다른 BooleanExpression이 들어간다면?

srchClause에서 null 참조 에러가 발생하게 된다.

실제 BooleanExpressions.and()의 내부에서는 다음과 같이 동작한다.

public BooleanExpression and(Predicate right) {
    return Expressions.booleanOperation(Ops.AND, this, right);
}

right가 null이면 내부에서 null 참조 에러가 발생하기 때문에, null 참조 에러가 발생하게 되는 것이다.

문제점 2. BooleanExpressions은 불변이다.

BooleanExpression은 불변이라 and()가 호출될 때마다 새로운 객체를 만든다.

즉, and()를 호출할 때마다 기존 식이 변경되는 것이 아니라 새로운 객체를 만드는 것이다.

BooleanExpression where = qUser.active.isTrue();
where = where.and(qUser.age.goe(18));

이 코드에서도 qUser.active.isTrue() 에서 BooleanExpression A가 생성되고,

A.and(qUser.age.goe(18)) 에서 BooleanExpresion B가 생성된다.

결과적으로 where은 BooleanExpression B를 가리키게 되고, A는 사라지지 않는다.

여기서 든 궁금증이 BooleanExpression으로 수십 개의 조건을 달면 메모리 문제가 발생할 수도 있을까?

사실 수십 개 조건 정도로는 메모리 문제가 없지만,

반복 루프로 수천~수만 개가 생성될 경우 GC에 부하를 일으킬 수 있고,

static 저장과 같이 장시간으로 누적되면 메모리 누수가 발생할 수 있다.

null 역참조가 발생할 수 있는 코드를 BooleanBuilder를 사용하여 수정할 수 있다.

BooleanBuilder whereClause = new BooleanBuilder();

if (StringUtils.hasText(srchData)) {
    whereClause.and(qDatas.title.eq(srchData));
}

whereClause를 BooleanBuilder 생성자를 이용하여 만들어주고,

BooleanExpression을 사용하는 것처럼 .and()를 호출하면서 조건을 붙여주면 된다.

BooleanBuilder는 가변 객체라서 null 체크가 필요 없다.

즉, and()를 호출하더라도 객체 내부의 상태가 변화하기 때문에 null 체크를 신경쓰지 않아도 된다.

null 체크를 하지 않아도 되기 때문에 조건이 많아도 코드를 간결하게 작성할 수 있다.

그럼 null 체크를 하지 않아도 되는 BooleanBuilder를 쓰는게 항상 좋을까?

그건 아니다.

BooleanExpression은 조건 수가 적고 간단할 때,

특정 BooleanExpression을 다른 곳에서 재사용하고 싶을 때 유용하다.

BooleanExpression activeUsers = qUser.status.eq("ACTIVE");
BooleanExpression adminUsers = qUser.role.eq("ADMIN");

query.where(activeUsers.and(adminUsers)); // 바로 조합 가능

이 같은 상황의 경우 고정 조건을 만들어서 and 하기 때문에 null 발생 우려가 없다.

BooleanExpression을 사용하기 애매한 상황에서 BooleanBuilder를 사용한다.

조건 수가 많거나 동적으로 달라질 때,

검색 화면, 필터링 조건처럼 여러 조건을 순차적으로 누적해야 할 때 유용하다.

BooleanBuilder builder = new BooleanBuilder();
if (hasText(title)) builder.and(qDatas.title.eq(title));
if (hasText(status)) builder.and(qDatas.status.eq(status));
if (hasText(owner)) builder.and(qDatas.owner.eq(owner));

query.where(builder);

http://querydsl.com/static/querydsl/3.6.3/reference/ko-KR/html_single/

QueryDSL 공식 문서에서는 복합 조건식을 작성할 때 BooleanBuilder 클래스를 사용하라고 권장하지만,

개발 상황에 따라 달라질 수 있지 않을까?!

때에 따라 적절한 표현식을 사용하고, 어떤 특징이 있는지 알고 사용하는 것도 중요하다!

[한글] 1분 만에 한글 메일 머지로 문서 자동화 하는 방법

iihye_ — Wed, 24 Sep 2025 12:49:34 +0900

이런 문서에 여러 개의 고유번호, 이름을 입력해서 문서를 만들어야 한다면?

물론 하나씩 입력할 수 있지만...

우리에게 시간은 중요하니까!

메일 머지 기능을 사용해서 1분 만에 입력해보자.

사용하는 기능은 도구 > 메일 머지 에 있다.

여기에 두 가지 메뉴가 있는데,

일단 메일 머지 표시 달기를 클릭하여 메일 머지를 만든다.

주소록 필드 선택하기에서 사용하는 게 있다면 골라도 되고,

필드 만들기 탭에서 새로 만들어도 된다.

내가 원하는 필드가 없기 때문에 직접 만들어서 사용했다.

원하는 필드를 만든 후 선택하여 넣기를 누르면 된다.

그러면 이렇게 중괄호 두 개 안에 필드 이름이 적혀 있고,

겉은 흰색 모양의 괄호가 감싸고 있는 것을 볼 수 있다.

이 위치에 내가 원하는 값들이 들어갈거다.

이제 메일 머지를 만들어보자.

도구 > 메일 머지 > 메일 머지 만들기를 눌러 메일 머지를 만든다.

먼저 자료 종류에 여러 가지가 있지만, 그나마 친숙한 네 번째 엑셀 파일을 가지고 만들거다.

출력 방향도 바로 인쇄할 수 있지만 확인차 파일로 저장한 뒤에 출력해보자.

1행에 필드명을 입력하고,

2행부터 해당 필드에 들어갈 값을 적어 저장해준다.

이 파일을 자료 종류 > 한셀/엑셀 파일에서 선택해준다.

출력 방향 > 파일 > 파일 이름도 저장하고 싶은 위치를 고른 후 파일 이름을 입력해준다.

그러면 이렇게 시트를 선택할 수 있고,

메일 머지를 할 목록을 선택할 수 있다.

shift 키를 눌러 여러 개를 연속적으로 선택할 수 있고,

ctrl 키를 눌러 단일 항목을 여러 개 선택할 수도 있다.

선택 버튼을 눌러 저장된 파일을 확인하면 다음과 같이 입력된 것을 볼 수 있다.

[CSS] img 비율 유지하면서 크기 줄이기(!important)

iihye_ — Tue, 23 Sep 2025 16:00:10 +0900

기존 웹페이지의 일부를 반응형으로 만드는 작업을 하고 있다..

~~(이거까지 하게 될 줄 몰랐지)~~
아무튼!

CSS는 디자이너 분이 해주셔서 내가 건들일 없다고 생각했는데,

테스트 페이지로 구조만 잡아주시고

실제 소스코드에 적용하는 건 내가 하다보니까

CSS를 수정하는 경우가 굉..장히... 많다(!!!)

게시판에 이미지를 업로드 한 경우

이미지 크기를 반응형으로 맞추는 작업을 진행했다.

가로 길이를 줄이면 반응형으로 모바일 화면으로 전환되는데,

이미지 크기는 변하지 않다보니 이렇게 튀어나오는 현상이 발생했다.

.table-scrollable img {
    max-width: 100%;
    display: block;   
}

튀어나온 이미지를 해결하기 위해서 max-width를 조절해보았다.

max-width를 100%로 조절하여 이미지가 부모 요소의 너비를 초과하지 않도록 설정했다.

여기서는 가장 바깥에 있는 table width에 맞춰서 width가 설정된다.

하지만..

내가 원한 건 기존 이미지의 비율을 유지하면서 사이즈를 줄이는 것이었다.

그래서 이 비율을 유지하면서 어떻게 width를 줄일까 고민하다가,

.table-scrollable img {
    max-width: 100%;   
    height: auto !important;
    display: block;   
}

height에 !important를 적용해서 해결하였다.

!important는 다른 CSS에서 height 값을 적용했더라도 스타일 규칙을 우선적으로 적용하게 한다.

max-width를 설정하면 이미지의 너비가 부모 요소의 너비를 넘지 않도록 제한한다.

이미지의 비율을 유지하려면 높이도 자동적으로 비례적으로 조정되어야 하는데,

height: auto를 우선적으로 적용시키면서 자동으로 높이가 설정되도록 하는 것이다.

!important로 이미지의 비율을 유지하면서 크기를 조절해보았다.

창의 크기가 늘어나면 이미지도 비율에 맞게 커지고,

창의 크기가 줄어들면 이미지도 비율에 맞게 작아진다.

다만 !important는 다른 스타일 규칙보다 우선적으로 적용되는 강제성이 있기 때문에 유지보수성이 떨어질 수 있다.

따라서 꼭 필요한 경우에만 사용하는 것이 좋다!

[QueryDSL] Expressions.dateTemplate로 SQL 구문 만들기

iihye_ — Mon, 22 Sep 2025 09:20:56 +0900

QueryDSL로 날짜별 생성된 데이터를 세는 쿼리를 구현했다.

그런데 내가 생각한 것과 데이터 개수가 다르게 나오는 것이다...

~~(왜그럴까)~~

1. 문제 상황

Tuple results = queryFactory.select(qStatsTable.regDt, qStatsTable.count()) 
                            .from(qStatsTable) 
                            .orderBy(qStatsTable.regDt.desc()) 
                            .groupBy(qStatsTable.regDt) 
                            .limit(1) 
                            .fetchOne();

stats_table에서 reg_dt를 기준으로 그룹화하여 내림차순으로 정렬한 뒤 select 하는 QueryDSL이다.

reg_dt는 등록일자를 의미하는 컬럼인데 내가 생각한 결과는 날짜별로 count 개수를 세는 것이다.

SELECT reg_dt, COUNT(*) 
FROM stats_table 
GROUP BY reg_dt 
ORDER BY reg_dt DESC 
LIMIT 1;

QueryDSL을 쿼리문으로 바꾼 뒤 실행한 결과는 다음과 같았다.

이 결과가 나온 이유는 reg_dt는 TimeStamp로 정의되어 있기 때문에

초단위 시간까지 일치하는 reg_dt끼리 그룹화되어버린 것이다.

내가 원하는 결과는 reg_dt가 일 단위까지 끊어서 그룹화 하는 것이었다.

2. 해결 방법

그래서 수정한 쿼리문은 다음과 같다.

SELECT DATE(reg_dt) AS reg_dt, COUNT(*) 
FROM stats_table 
GROUP BY DATE(reg_dt) 
ORDER BY reg_dt DESC 
LIMIT 1;

reg_dt를 DATE로 감싸면 TimeStamp였던 형식을 Date 형식으로 변환하면서,

내가 원하는 일 단위 기준의 데이터 개수를 얻게 되었다!

자 이렇게 쿼리문으로 어떻게 짜야 하는지 감을 잡았으니 이제 QueryDSL에 적용해보자.

다양한 방법이 있곘지만 내가 사용하고 있는 데이터베이스는 Cubrid(큐브리드)이기 때문에,

(큐브리드가 지원할 수 있는) Expressions.dateTemplate을 이용하여 SQL 표현식을 작성할 수 있다.

Expressions.dateTemplate는 QueryDSL에서 날짜 형식을 지정하여 SQL 구문을 작성할 때 사용한다.

기본적인 형식은 이렇게 생겼다.

Expressions.dateTemplate(Date.class, "DATE({0})", qEntity.dateField)

1) 타입(Date.class) : 반환될 타입을 지정한다. TimeStamp -> Date 변환이 필요하면 Date.class를, TimeStamp -> String 변환이 필요하면 String.class를 입력하면 된다.

2) 패턴("DATE({0})") : 날짜 형식을 지정하는 템플릿 문자열이다. DATE 함수를 통해 {0}에는 qEntity.dateField가 들어간다.

3) 값(qEntity.dateField) : 템플릿에서 사용될 값들을 전달한다.

이렇게 하면 시간 부분은 제외한 날짜만 추출할 수 있다.

예를 들어, 2025-09-15 12:30:45 에서 2025-09-15 만 추출할 수 있다.

날짜 형식을 DATE_FORMAT을 이용하여 직접 지정할 수도 있다.

Expressions.dateTemplate(Date.class, "DATE_FORMAT({0}, {1})", qEntity.dateField, "yyyy-MM-dd")

Query문으로 돌아가는 걸 확인했으니 QueryDSL에 적용시켜보자.

Tuple results = queryFactory.select(qStatsTable.regDt, qStatsTable.count())
                    .from(qStatsTable)
                    .groupBy(Expressions.dateTemplate(String.class, "DATE({0})", qStatsTable.regDt))
                    .orderBy(qStatsTable.regDt.desc())
                    .limit(1)
                    .fetchOne();

select 조건은 유지한채로 groupBy 문을 바꿔주었다.

기존에 qStatsTable.regDt 기준에서 qStatsTable.regDt을 DATE 형식으로 변환한 형태로 바꿔주었다.

3. 주요 Expressions 종류

1) Expressions.constant()

- 상수 값을 쿼리에서 사용할 때 사용한다.

Expressions.constant("Hello")

2) Expressioins.template()

- 템플릿 문자열을 이용하여 표현식을 생성한다.

Expressions.template(String.class, "CONCAT({0}, {1})", qEntity.firstName, qEntity.lastName)

3) Expressions.dateTemplate()

- 날짜 형식을 지정할 때 사용한다.

Expressions.dateTemplate(Date.class, "DATE_FORMAT({0}, {1})", qEntity.dateField, "yyyy-MM-dd")

4) Expressions.booleanTemplate()

- Boolean 타입을 처리할 수 있는 템플릿 표현식을 생성한다.

Expressions.booleanTemplate("{0} = {1}", qEntity.status, 1)

5) Expressions.numberTemplate()

- 숫자 타입 표현식을 생성할 때 사용한다.

Expressions.numberTemplate(Integer.class, "{0} + {1}", qEntity.num1, qEntity.num2)

6) Expressions.stringTemplate()

- 문자열 타입 표현식을 생성할 때 사용한다.

Expressions.stringTemplate("CONCAT({0}, {1})", qEntity.firstName, qEntity.lastName)

7) Expressions.path()

- Path 객체를 생성할 때 사용한다.

Expressions.path(String.class, "name")

8) Expressions.predicate()

- Predicate 객체를 생성할 때 사용한다.

Expressions.predicate(Ops.EQ, qEntity.status, 1)

저장할 때 Timestamp로 저장했기 때문에 groupBy도 초 단위로 그룹화하는 것을 놓쳤었다.

Expressions을 활용해서 다양한 조건을 가지고 있는 변수를 다룰 수 있었다.

[Apache POI] Iterator로 읽은 빈 셀 CellType.BLANK로 예외처리하기

iihye_ — Tue, 16 Sep 2025 14:20:24 +0900

Apache POI를 이용해서 엑셀 파일을 읽어오는 기능을 구현했는데,

기능 개발을 할 때는 되다가 테스트를 하니 ResponseDto에서 값을 가져오지 못하는 에러가 발생했다.

Dto에서 디버깅을 해보니 값은 들어있어서 xlsx에서 row를 iterator로 읽는 과정에서 문제가 있다고 판단했다.

1. 문제 상황

try (InputStream inputStream = file.getInputStream()) {
      Workbook workbook = new XSSFWorkbook(inputStream);
      Sheet sheet = workbook.getSheetAt(0);
      Iterator<Row> rowIterator = sheet.iterator();
	 
      rowIterator.next(); // head 읽기

      while (rowIterator.hasNext()) { // body 읽기
        Row row = rowIterator.next();
        /** 비즈니스 로직 **/
        ResponseDto.toDto(row)
      }

      workbook.close();
    }
}

이 코드는 xlsx 파일에서 한 줄씩 읽어 비즈니스 로직을 수행한 후 Dto로 변환하는 코드이다.

여기서 문제가 된 부분은 바로 rowIterator.next() 이 부분이다.

이 부분은 head row를 제외한 body row를 반복문으로 읽는 부분이다.

내가 읽은 xslx 파일은 다음과 같이 생겼다.

rowIterator.next() 부분에 디버깅해보니 다음과 같았다.

일단 첫 번째 줄은 정상적으로 읽었다.

<xml-fragment r="2" spans="1:6" x14ac:dyDescent="0.3" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac" xmlns:main="http://schemas.openxmlformats.org/spreadsheetml/2006/main">
  <main:c r="A2" s="2" t="s">
    <main:v>6</main:v>
  </main:c>
  <main:c r="B2" s="2" t="s">
    <main:v>7</main:v>
  </main:c>
  <main:c r="C2" s="2" t="s">
    <main:v>8</main:v>
  </main:c>
  <main:c r="D2" s="2" t="s">
    <main:v>9</main:v>
  </main:c>
  <main:c r="E2" s="2" t="s">
    <main:v>10</main:v>
  </main:c>
  <main:c r="F2" s="2" t="s">
    <main:v>11</main:v>
  </main:c>
</xml-fragment>

{0=데이터값1, 1=데이터값2, 2=데이터값3, 3=데이터값4, 4=데이터값5, 5=데이터값6}

5개의 데이터값을 정상적으로 읽어왔다.

다음 rowIterator.next()를 실행했을 때 빈 셀이므로 읽지 말아야 하는데,

<xml-fragment r="3" spans="1:6" x14ac:dyDescent="0.3" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x14ac="http://schemas.microsoft.com/office/spreadsheetml/2009/9/ac" xmlns:main="http://schemas.openxmlformats.org/spreadsheetml/2006/main">
  <main:c r="A3" s="2"/>
  <main:c r="B3" s="2"/>
  <main:c r="C3" s="2"/>
  <main:c r="D3" s="2"/>
  <main:c r="E3" s="2"/>
</xml-fragment>

{0=, 1=, 2=, 3=, 4=}

다음 비어있는 row도 읽어버리는 것이었다.

Iterator는 row를 읽어버렸으니 비즈니스 로직을 수행하고 dto로 변환하는 작업까지 들어가버린다.

이러니 dto에서는 빈 값만 받아 값을 가져오지 못하는 것이다.

2. 원인 분석

정확한 오류 원인을 파악하기 위해서 몇 가지 엑셀 파일로 실험을 해보았다.

일단 이 기능은 간단하게 설명하자면 엑셀 파일을 다운 받아 -> head5에 값을 입력한 뒤 -> 다시 업로드 하는 기능이다.

첫 번째 파일은 여러 row가 있는 엑셀 파일을 다운 받아 임의의 row를 지우고 데이터 값을 입력한 뒤 한 줄만 남기고 업로드하고,

두 번째 파일은 하나의 row가 있는 엑셀 파일을 다운 받아 데이터 값을 입력한 뒤 그대로 업로드하였다.

결과는?

첫 번째 파일은 에러가 발생했지만,

두 번째 파일은 에러가 발생하지 않았다!

두 파일의 차이점이라고 한다면 사용자가 빈 셀에도 값을 입력한 적이 있는지 여부이다.

첫 번째 파일은 임의로 지운 row에서 빈 값을 읽어 dto로 넘기니 에러가 발생하는 것이고,

첫 번째 파일 - 데이터값이 있었으나 delete로 삭제하여 셀 속성값 등이 남아 있는 상태

두 번째 파일은 하나의 row 외에 나머지 셀에 값을 입력한 적이 없으니 한 줄만 읽고 동작을 끝내는 것이다.

두 번째 파일 - 처음부터 데이터값을 입력하지 않은 깨끗한 상태

데이터 값을 삭제한다고 해도 셀 자체에 속성값 등이 남아 있기 때문에

iterator로 읽을 때 값이 남아 있다고 판단하여 계속 읽게 되는 것이다.

엑셀에서 파일을 편집할 때 삭제 기능을 이용하면 속성값 등을 모두 삭제하여 깨끗한 상태가 되지만

사용자 입장에서는 "데이터만 없으면 셀을 안 읽는거 아니야?" 라고 생각할 수 있기 때문에,

번거롭게 할 필요가 없다고 생각하여 이 부분에 예외 처리를 추가하였다.

이 삭제 기능을 쓰면 셀 값을 완전히 지울 수 있다.

3. 해결 방법

첫 번째로 생각한 방법은 iterator로 빈 셀 값을 읽으니 value를 string으로 바꾸어 빈 문자열인지 판단하는 것이다.

while (rowIterator.hasNext()) {
    Row row = rowIterator.next();

    // 셀 값을 string으로 바꾸어 빈 셀 판
    if (row.getCell(0).toString().equals(""))
      break;

    /** 비즈니스 로직 **/
    ResponseDto.toDto(row)
  }

row.getCell(0)이 반환하는 Cell 객체에 대해 문자열을 바꾸어 빈 문자열인지 판단한다.

그러나 빈 셀의 경우 "[Empty]" 또는 "null" 과 같은 결과를 반환할 수 있기 때문에 정확하게 체크하지 못할 수 있다.

또한, 문자열이 아니라 숫자나 날짜 형식의 셀이었다면 원하지 않는 형태로 변환될 수도 있고,

toString() 을 호출하는 것 자체가 불필요한 연산이기 때문에 성능에도 문제가 생길 수 있다.

두 번째로 찾아본 방법은 셀의 값을 완전히 삭제하지 않는 경우,

iterator를 통해 셀을 읽긴 하니까 CellType을 이용하여 빈 셀인지 판단하는 것이다.

while (rowIterator.hasNext()) {
    Row row = rowIterator.next();

    // CellType.BLANK를 이용하여 빈 셀 판단
    if (row.getCell(0).getCellType() == CellType.BLANK)
      break;

    /** 비즈니스 로직 **/
    ResponseDto.toDto(row)
  }

row.getCell()은 Cell의 타입을 반환하기 때문에 이 속성을 이용하여 빈 셀인지 판단할 수 있다.

CellType에는 5가지 종류가 있다.

- CellType.BLANK : 빈 셀

- CellType.STRING : 문자열

- CellType.NUMERIC : 숫자

- CellType.BOOLEAN : 불리언(true, false)

- CellType.ERROR : 오류(예. #DIV/0!, #VALUE!, #REF!)

문자열, 숫자, 날짜 등 어떤 데이터 타입이 오든 CellType을 기준으로 판단하기 때문에 정확하게 판단할 수 있고,

toString()을 사용했을 때 발생할 수 있는 NullPointerException의 가능성도 줄여준다.

셀에 값이 없어도 보이지 않는 속성값으로 인하여 에러가 발생할 수 있다는 사실을 알게 되었다.

개발을 할 때 가장 중요하게 생각하는 건 '사용자가 기능을 편하게 사용할 수 있는가?' 이므로

발생할 수 있는 가능성에 대해 예외 처리를 하는 것도 개발 능력이라고 생각한다.

예외 처리 방법도 사용자에게 에러 상황이라고 알려줄지, 예외 처리를 통해 정상적으로 서비스할지 선택할 수 있는데

이런 상황은 사용자가 굳이(?) 알 필요 없이 처리하면 되는 상황이었다.

충분히 가능할 수 있는 상황을 서비스 배포 전에 발견하고 처리할 수 있어서 다행이다!

[Kafka]헷갈리는 토픽(topic), 이벤트(event), 파티션(partition), 컨슈머(consumer) 정리하기 - 택배 물류 창고로 비유하기

iihye_ — Mon, 8 Sep 2025 17:52:09 +0900

카프카는 토픽을 기준으로 이벤트를 저장하고 전달하는데,
토픽은 여러 파티션으로 나뉘어져 있어서 여러 컨슈머가 병렬로 읽을 수 있어 처리 속도가 빨라!

카프카는 이벤트를 안전하게 전달해서 여러 서비스가 구독하여 처리하게 해줘.
여기서 이벤트를 분류하고 저장하는 단위를 토픽이라고 하는데,
물리적으로 여러 파티션에 나뉘어 저장할 수 있어서 병렬 처리가 가능해.
토픽에 담긴 개별 메시지를 이벤트라고 불러.

카프카의 주요 개념인 토픽, 이벤트, 파티션을 택배에 비유해보자.
모든 택배가 모이는 물류창고가 있을거야.
이 물류창고에는 여러 컨베이어 벨트가 있고,
이 컨베이어 벨트로 여러 택배 상자들이 있어.
여기서 물류창고 = 토픽, 컨베이어 벨트 = 파티션, 택배 상자 = 이벤트로 비유할 수 있어.

만약 전국의 택배를 하나의 컨베이어 벨트로 분류한다면 어떻게 될까?
하나의 컨베이어 벨트에 택배 상자가 계속 쌓이겠지?
그렇다면 컨베이어 벨트를 허브 별로 나눈다면 병목 현상을 해결할 수 있을꺼야.

카프카도 마찬가지로 이벤트가 계속 들어오는데 하나의 파티션으로 처리하면 느리게 돼.
여러 파티션으로 나누면 각 특성에 따라 이벤트를 처리할 수 있게 되는거야.
각 파티션마다 각 컨슈머가 처리할 수 있어서 병렬 처리가 가능하게 돼.

각 파티션은 같은 토픽의 이벤트를 전달하고, 각 파티션은 하나의 컨슈머만 접근할 수 있어.
어떤 이벤트가 어떤 파티션에 들어갈지는 프로듀서의 파티셔닝 전략에 따라 달라져서,

파티션마다 담기는 메시지 범위가 달라질 수 있어.

만약 특정 파티션을 담당하는 컨슈머의 트래픽에 과부하가 걸리게 된다면?
컨슈머를 추가해서 파티션 분배를 다시 조정하거나,
동적 키 매핑 / 해시 분산을 통해 리파티셔닝(re-partitioning)을 통해 새로운 토픽으로 쪼갤 수 있어
또는 핫 방 분리 전략이라고 해서 특정 키만 별도의 토픽/파티션을 만들어서 별도의 컨슈머가 처리하게 만드는 것도 가능해!

[Kafka]카프카(Apache Kafka)가 왜 필요한걸까? - 커피 주문으로 비유하기

iihye_ — Tue, 26 Aug 2025 14:56:24 +0900

카프카는 서비스 간 이벤트를 느슨하게 연결해서,
엄청 많은 트래픽을 안전하게 비동기로 처리하면서 확장 가능한 메시지 플랫폼이야.

우리가 키오스크에서 커피를 주문한다고 가정해보자.
그럼 커피를 주문함으로 인해,

1. (저장) 서버에 커피 주문이 저장된다.
2. (주방) 주문 내역을 주방으로 전송한다.
3. (재고) 커피 원두, 우유 등 재고를 차감한다.

저장, 주문, 재고 세 가지 일이 동시에 일어나야해.

만약 커피 주문이 엄청 많이 몰려온다면 어떻게 될까?
커피 주문과 동시에 저장, 주문, 재고 처리를 한 번에 하다보면
서버에 주문이 저장되는 데 시간이 걸려 주문 기록이 누락되거나,
주방으로 주문이 전달되는데 지연이 생기거나
재고 차감이 중복되어 마이너스 재고가 발생할 수 있어.

이러한 문제를 해결하기 위해서
각 작업을 독립적이고 효율적으로 처리할 수 있어야 해.
여기서 "카프카(Apache Kafka)"가 등장하게 된거야.

카프카는 각 작업을 비동기적으로 처리하고,
각 서비스가 독립적으로 메시지를 처리할 수 있게 해.

커피 주문을 카프카에 비유해보자면,
주문이 들어오면 카프카가 주문 이벤트를 받아.
카프카는 주문 저장, 주방 전달, 재고 차감 등 여러 시스템이 서로 영향을 주지 않도록 독립적으로 처리할 수 있게 도와줘.
각 시스템이 카프카로부터 메시지를 수신하여 처리하므로,
대량의 주문이 몰려도 시스템은 병목 현상 없이 원활하게 작업을 분산시킬 수 있어.

카프카는 데이터를 실시간으로 전달하고, 시스템 간에 안정적이고 효율적인 데이터 흐름을 보장하는 데 필수적인 역할을 하게 돼!

[React Bits] React에 애니메이션을 추가하고 싶다면, React Bits!

iihye_ — Wed, 20 Aug 2025 16:37:41 +0900

React 관련 애니메이션 문서를 찾아보다가

애니메이션, 컴포넌트, 배경 등 여러 React 컴포넌트를 제공해주고 있는 라이브러리를 발견했다.

이미 Github 21.9K star를 받은 레포지토리인데,

요즘 React를 쓴다면 "우와" 할법한 애니메이션들이 가득하다.

실제로 컴포넌트를 체험해볼 수도 있다!

사용 방법도 간단하다.

npm에서 설치를 먼저 해주고,

npm install gsap

사이트에서 체험해본 원하는 컴포넌트를 가져와서 쓰면 된다.

import SplitText from "./SplitText";

<SplitText
  text="Hello, you!"
  delay={100}
  duration={0.6}
/>

delay, duration 같은 props를 맘대로 조절할 수 있어서

커스터마이징에 자유롭다는 게 큰 장점인거 같다!

https://reactbits.dev/

React Bits

An open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces.

reactbits.dev

https://github.com/DavidHDev/react-bits

GitHub - DavidHDev/react-bits: An open source collection of animated, interactive & fully customizable React components for buil

An open source collection of animated, interactive & fully customizable React components for building stunning, memorable websites. - DavidHDev/react-bits

github.com