[javascript] SlickGrid의 썸네일 이미지 렌더링

01 Dec 2023

javascript

SlickGrid는 JavaScript로 구현된 고성능의 그리드 플러그인입니다. 이번 포스트에서는 SlickGrid을 사용하여 썸네일 이미지를 렌더링하는 방법을 알아보겠습니다.

필요한 라이브러리 가져오기

먼저, SlickGrid과 jQuery를 사용하기 위해 필요한 라이브러리를 가져와야 합니다. 아래의 코드를 HTML 파일의 <head> 태그 안에 추가합니다.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/6pac/SlickGrid/slick.core.js"></script>
<script src="https://cdn.jsdelivr.net/gh/6pac/SlickGrid/slick.grid.js"></script>

데이터 준비하기

이미지 정보를 담은 데이터를 준비해야 합니다. 예를 들어, 아래와 같은 형태의 객체 배열을 사용할 수 있습니다.

var data = [
  { id: 1, name: "이미지 1", thumbnail: "https://example.com/image1.jpg" },
  { id: 2, name: "이미지 2", thumbnail: "https://example.com/image2.jpg" },
  // ...
];

커스텀 썸네일 렌더러 만들기

SlickGrid에서는 Formatter를 사용하여 셀의 내용을 커스터마이즈할 수 있습니다. 썸네일 이미지를 출력하기 위해 커스텀 썸네일 렌더러 함수를 만들어보겠습니다.

function thumbnailFormatter(row, cell, value, columnDef, dataContext) {
  return "<img src='" + value + "' alt='" + dataContext.name + "' />";
}

이 함수는 해당 셀의 value를 이미지 태그로 래핑하여 반환합니다. value은 데이터 객체에서 thumbnail 속성의 값을 가리킵니다. 또한, alt 속성에는 이미지의 이름을 넣어줍니다.

그리드 초기화하기

이제 위에서 작성한 썸네일 렌더러를 사용하여 그리드를 초기화할 수 있습니다. 아래의 코드를 참고하여 그리드를 생성합니다.

var columns = [
  { id: "id", name: "ID", field: "id" },
  { id: "name", name: "이름", field: "name" },
  { id: "thumbnail", name: "썸네일", field: "thumbnail", formatter: thumbnailFormatter }
];

var options = {
  enableCellNavigation: true,
  enableColumnReorder: false
};

var grid = new Slick.Grid("#myGrid", data, columns, options);

columns 배열에서 각각의 컬럼에 대한 설정을 지정하고, options 객체에서 그리드의 기본 설정을 조정할 수 있습니다.

Slick.Grid 생성자에는 그리드가 표시될 요소의 ID를 지정해야 합니다. 위의 코드에서는 #myGrid라는 ID를 가진 요소에 그리드를 생성하도록 지정하였습니다.

실행 결과 확인하기

위의 코드를 작성한 뒤, HTML 파일을 오픈하여 실행해보면 데이터에 따라 정상적으로 썸네일 이미지가 렌더링되는것을 확인할 수 있습니다.

결론

SlickGrid을 사용하여 이미지를 포함한 썸네일 렌더링은 간단하게 구현할 수 있습니다. 이를 통해 사용자 친화적이고 직관적인 그리드 인터페이스를 구현할 수 있습니다.

참고사항

SlickGrid Github 저장소