핵심 요약
순수 바닐라 자바스크립트를 활용해 데이터 검색, 오름차순/내림차순 정렬, 그리고 페이지네이션 기능이 모두 포함된 가벼운 데이터테이블을 직접 만드는 방법을 코드와 함께 설명합니다.
1. 개발 목적 및 환경
대형 프레임워크나 무거운 외부 플러그인을 사용하지 않고도 웹 애플리케이션에서 표 형태의 데이터를 다루는 것은 성능 면에서 큰 이점을 가집니다. 이 가이드는 HTML5, CSS3, ES6+ JavaScript 환경을 기준으로 작성되었습니다.
2. 핵심 기능 및 구현 방식
- 구현할 주요 기능 목록입니다.
- 실시간 검색: 입력창에 검색어를 입력하면 이름, 이메일 등의 필드에서 즉시 일치하는 행을 필터링합니다.
- 열 정렬: 테이블 헤더를 클릭하여 오름차순과 내림차순으로 데이터를 정렬합니다.
- 페이지네이션: 지정된 개수만큼 데이터를 나누어 보여주고 이전/다음 페이지로 이동합니다.
3. 코드 구조 안내
프로젝트는 총 3개의 파일로 구성됩니다. index.html은 마크업 구조를 담당하고, style.css는 모던하고 깔끔한 테이블 디자인을 적용하며, app.js는 데이터 렌더링 및 인터랙션 로직을 처리합니다.
TIP
CSS 파일과 JS 파일이 HTML과 동일한 디렉토리에 위치해야 정상적으로 연결됩니다.
4. 주요 소스 코드 설명
HTML 구조 설계
검색 입력 필드와 데이터를 동적으로 표시할 테이블 요소, 그리고 페이지네이션 버튼을 담을 컨테이너로 구성합니다.
JavaScript 상태 관리
원본 데이터 배열, 현재 페이지 번호, 페이지당 행 개수, 검색어 및 정렬 상태를 변수로 관리하여 사용자 액션에 따라 UI가 동기화되도록 구현했습니다.
5. 자주 발생하는 오류 및 해결 방법
| 오류 상황 | 원인 | 해결 방법 |
|---|---|---|
| 테이블이 렌더링되지 않음 | DOM 요소의 ID나 클래스명이 JS 코드와 일치하지 않음 | HTML의 선택자 속성과 자바스크립트 내 querySelector 인자 값을 확인 |
| 정렬 클릭 시 반응 없음 | 이벤트 위임이나 데이터 키 값이 잘못 지정됨 | th 요소에 data-sort 속성이 올바르게 들어갔는지 확인 |
| 한글 검색 시 실시간 반영 안 됨 | keydown 이벤트 사용으로 조합 문자 처리 누락 | input 이벤트를 사용하여 실시간 값 변화를 감지하도록 수정 |
주의
대량의 데이터(10만 건 이상)를 클라이언트단에서 처리할 경우 브라우저 렌더링 성능이 저하될 수 있으므로 서버사이드 페이지네이션을 고려해야 합니다.
6. 자주 묻는 질문 (FAQ)
외부 API에서 데이터를 받아와 연동할 수 있나요?
네, 가능합니다. app.js 파일 내의 초기 데이터 배열 대신 fetch() 함수 등을 사용하여 서버 API로부터 JSON 데이터를 비동기식으로 불러온 뒤 렌더링 함수를 호출하면 됩니다.
모바일 화면에서 테이블이 잘리면 어떻게 하나요?
CSS에 미디어 쿼리를 적용하거나 테이블 컨테이너에 overflow-x: auto를 설정하여 가로 스크롤이 가능하도록 만들면 반응형으로 대응할 수 있습니다.
핵심 요약
이번 글에서는 바닐라 자바스크립트로 가볍고 유연한 데이터테이블을 만드는 법을 살펴보았습니다. 첨부된 예제 코드를 바탕으로 프로젝트 요구사항에 맞게 기능을 확장해 보시기 바랍니다.