최근 프로젝트에서 Kendo UI를 사용하여 프론트엔드를 구현하고 있다.Kendo UI는 Telerik에서 제공하는 UI 컴포넌트 라이브러리로 다양한 컴포넌트가 있다.그 중에서 Grid 컴포넌트는 페이징, 정렬, 필터링 등 유용한 기능을 제공해서 목록조회를 구현할 때 사용했다.https://www.telerik.com/kendo-ui JavaScript UI Components - Build Better Apps Faster - Progress Kendo UIQuickly build eye-catching web apps using Kendo UI's ultimate collection of JavaScript UI components with libraries for jQuery, Angular, Re..

최근에 서비스 중인 웹 페이지를 모바일 디바이스에 맞게 변형하는 작업을 진행했다.기존 메인 페이지를 모바일 환경에 다 담지 못하므로, 모바일용 메인 페이지를 만들고,게시판도 모바일 디바이스에서 유연하게 사용할 수 있도록 UI를 전면 수정했다. 전반적인 디자인은 웹 디자이너께서 해주셨지만 이를 적용하는 건 나의 몫이었다😂웹 화면과 모바일 화면을 구분하기 위해서 사용한 방법은 미디어 쿼리(Media Query)였다.미디어 쿼리는 CSS에서 화면의 크기나 기기의 특성에 따라 다른 스타일을 적용할 수 있게 해주는 기능이다.즉, 화면의 크기에 따라 달라지는 "반응형 웹(responsive web)"을 만들 수 있다. 미디어 쿼리는 @media 으로 CSS에 작성하면 된다.@media (조건) { /* 조건을 ..

JPA, QueryDSL을 사용하는 프로젝트에서 BooleanExpression을 이용해서 where절을 자주 쓰곤 했는데,최근에 소스코드 보안점검을 해보니 '널(Null) 포인터 역참조가 발생할 수 있다'고 지적 받은 코드가 있어서BooleanExpression에서 널 포인터 역참조를 피하려면 어떻게 해야하는지,BooleanExpression과 BooleanBuilder는 어떤 차이가 있고 어떤 상황에서 써야하는지 알아보려고 한다.BooleanExpression과 BooleanBuilder는 QueryDSL에서 where절의 조건을 표현하는 조건 표현식이다. 사실 query문에 where문을 직접 입력해도 된다!query.where(qUser.age.goe(18));하지만 이렇게 쓰지 않는 이유는 조건..

이런 문서에 여러 개의 고유번호, 이름을 입력해서 문서를 만들어야 한다면?물론 하나씩 입력할 수 있지만...우리에게 시간은 중요하니까!메일 머지 기능을 사용해서 1분 만에 입력해보자. 사용하는 기능은 도구 > 메일 머지 에 있다.여기에 두 가지 메뉴가 있는데,일단 메일 머지 표시 달기를 클릭하여 메일 머지를 만든다. 주소록 필드 선택하기에서 사용하는 게 있다면 골라도 되고,필드 만들기 탭에서 새로 만들어도 된다.내가 원하는 필드가 없기 때문에 직접 만들어서 사용했다.원하는 필드를 만든 후 선택하여 넣기를 누르면 된다. 그러면 이렇게 중괄호 두 개 안에 필드 이름이 적혀 있고,겉은 흰색 모양의 괄호가 감싸고 있는 것을 볼 수 있다.이 위치에 내가 원하는 값들이 들어갈거다. 이제 메일 머지를 만들어보자.도구..

기존 웹페이지의 일부를 반응형으로 만드는 작업을 하고 있다..(이거까지 하게 될 줄 몰랐지)아무튼!CSS는 디자이너 분이 해주셔서 내가 건들일 없다고 생각했는데,테스트 페이지로 구조만 잡아주시고실제 소스코드에 적용하는 건 내가 하다보니까CSS를 수정하는 경우가 굉..장히... 많다(!!!) 게시판에 이미지를 업로드 한 경우이미지 크기를 반응형으로 맞추는 작업을 진행했다. 가로 길이를 줄이면 반응형으로 모바일 화면으로 전환되는데,이미지 크기는 변하지 않다보니 이렇게 튀어나오는 현상이 발생했다. .table-scrollable img { max-width: 100%; display: block; } 튀어나온 이미지를 해결하기 위해서 max-width를 조절해보았다.max-width를 100%로..