### Start Development Server with Webpack

Source: https://github.com/nhn/tui.pagination/blob/master/CONTRIBUTING.md

Starts the webpack development server for live previewing of changes during development. Requires npm to be installed.

```bash
npm run serve
```

--------------------------------

### Setup TOAST UI Pagination Development Environment

Source: https://github.com/nhn/tui.pagination/blob/master/README.md

Commands to set up the development environment for TOAST UI Pagination. This includes cloning the repository, installing dependencies, and running initial tests.

```sh
$ git clone https://github.com/{your-personal-repo}/tui.pagination.git
$ cd tui.pagination
$ npm install
$ npm run test
```

--------------------------------

### Install Dependencies with npm and Bower

Source: https://github.com/nhn/tui.pagination/blob/master/CONTRIBUTING.md

Installs project dependencies using npm and Bower. Ensure Node.js and Bower are installed globally.

```bash
npm install && bower install
```

--------------------------------

### Install TOAST UI Pagination via bower

Source: https://github.com/nhn/tui.pagination/blob/master/README.md

Command to install the latest version of TOAST UI Pagination using bower. Also shows how to install a specific tagged version.

```sh
$ bower install tui-pagination # Latest version
$ bower install tui-pagination#<tag> # Specific version
```

--------------------------------

### Install TUI Pagination using npm

Source: https://github.com/nhn/tui.pagination/blob/master/docs/getting-started.md

Installs the latest version or a specific version of the tui-pagination package using npm.

```sh
$ npm install --save tui-pagination # Latest version
$ npm install --save tui-pagination@<version> # Specific version
```

--------------------------------

### Install TUI Pagination via npm

Source: https://github.com/nhn/tui.pagination/wiki/v3.0.0-Migration-Guide

Shows the commands to install the TUI Pagination component from npm, including installing the latest version and a specific version.

```bash
$ npm install tui-pagination
$ npm install tui-pagination@<version>
```

--------------------------------

### Install and Use TUI Pagination with npm (JavaScript)

Source: https://github.com/nhn/tui.pagination/blob/master/docs/v3.0.0-migration-guide.md

Shows how to install the tui-pagination package using npm and import it into a Node.js project using CommonJS.

```bash
$ npm install tui-pagination
$ npm install tui-pagination@<version>
```

```javascript
const Pagination = require('tui-pagination');
const instance = new Pagination(options);
```

--------------------------------

### Example Pull Request Title Format

Source: https://github.com/nhn/tui.pagination/blob/master/CONTRIBUTING.md

Demonstrates the conventional format for pull request titles, including type, short description, and associated issue numbers. The type should be capitalized, and the description should use the present tense.

```markdown
    <Type>: Short Description (fix #111)
    <Type>: Short Description (fix #123, #111, #122)
    <Type>: Short Description (ref #111)
```

--------------------------------

### Check Code Style with ESLint

Source: https://github.com/nhn/tui.pagination/blob/master/CONTRIBUTING.md

Runs ESLint to check the code for style violations and ensure adherence to coding standards. Requires Node.js and ESLint to be installed.

```bash
npm run eslint
```

--------------------------------

### Create Pagination Instance (Before)

Source: https://github.com/nhn/tui.pagination/wiki/v3.0.0-Migration-Guide

Demonstrates the previous method for creating an instance of the Pagination component using the 'tui.component.Pagination' namespace.

```javascript
// create instance of Pagination
// before using 'tui.component.Pagination' namespace
var instance = new tui.pagination(selector, options);
```

--------------------------------

### Run TOAST UI Pagination Tests

Source: https://github.com/nhn/tui.pagination/blob/master/README.md

Command to execute the test suite for the TOAST UI Pagination project, ensuring code quality and functionality.

```sh
$ npm run test
```

--------------------------------

### Run TOAST UI Pagination Development Server

Source: https://github.com/nhn/tui.pagination/blob/master/README.md

Commands to run the development server for TOAST UI Pagination, allowing for live code updates. It also includes a command to run the server specifically for Internet Explorer 8 compatibility.

```sh
$ npm run serve
$ npm run serve:ie8 # Run on Internet Explorer 8
```

--------------------------------

### Create TUI Pagination instance with options

Source: https://github.com/nhn/tui.pagination/blob/master/docs/getting-started.md

Creates a new Pagination instance with custom options, including total items, items per page, visible pages, and custom templates.

```javascript
const options = {
  totalItems: 10,
  itemsPerPage: 10,
  visiblePages: 10,
  page: 1,
  centerAlign: false,
  firstItemClassName: 'tui-first-child',
  lastItemClassName: 'tui-last-child',
  template: {
    page: '<a href="#" class="tui-page-btn">{{page}}</a>',
    currentPage: '<strong class="tui-page-btn tui-is-selected">{{page}}</strong>',
    moveButton:
      '<a href="#" class="tui-page-btn tui-{{type}}">
        <span class="tui-ico-{{type}}">{{type}}</span>
      </a>',
    disabledMoveButton:
      '<span class="tui-page-btn tui-is-disabled tui-{{type}}">
        <span class="tui-ico-{{type}}">{{type}}</span>
      </span>',
    moreButton:
      '<a href="#" class="tui-page-btn tui-{{type}}-is-ellip">
        <span class="tui-ico-ellip">...</span>
      </a>'
  }
};

const pagination = new Pagination('pagination', options);
```

--------------------------------

### Create Pagination Instance

Source: https://github.com/nhn/tui.pagination/wiki/Getting-Started

Instantiate the TUI Pagination component by providing the container element (or its selector) and an options object. The options object configures the pagination behavior and appearance.

```javascript
var pagination = new tui.Pagination('pagination', options);

// Or with a container element:
var container = document.getElementById('pagination');
var pagination = new tui.Pagination(container, options);
```

```javascript
var options = {
  totalItems: 10,
  itemsPerPage: 10,
  visiblePages: 10,
  page: 1,
  centerAlign: false,
  firstItemClassName: 'tui-first-child',
  lastItemClassName: 'tui-last-child',
  template: {
      page: '<a href="#" class="tui-page-btn">{{page}}</a>',
      currentPage: '<strong class="tui-page-btn tui-is-selected">{{page}}</strong>',
      moveButton:
          '<a href="#" class="tui-page-btn tui-{{type}}">
              <span class="tui-ico-{{type}}">{{type}}</span>
          </a>',
      disabledMoveButton:
          '<span class="tui-page-btn tui-is-disabled tui-{{type}}">
              <span class="tui-ico-{{type}}">{{type}}</span>
          </span>',
      moreButton:
          '<a href="#" class="tui-page-btn tui-{{type}}-is-ellip">
              <span class="tui-ico-ellip">...</span>
          </a>'
   }
};

var pagination = new tui.Pagination('pagination', options);
```

--------------------------------

### Instantiate and Use TOAST UI Pagination

Source: https://github.com/nhn/tui.pagination/blob/master/README.md

This snippet shows how to create an instance of the TOAST UI Pagination component, providing a container element and configuration options. It also demonstrates calling an API method like `getCurrentPage()`.

```javascript
const container = document.getElementById('tui-pagination-container');
const instance = new Pagination(container, { /* options */ });

instance.getCurrentPage();
```

--------------------------------

### Create Pagination Instance (JavaScript)

Source: https://github.com/nhn/tui.pagination/blob/master/docs/v3.0.0-migration-guide.md

Demonstrates how to create an instance of the Pagination component using the new namespace and API.

```javascript
// create instance of Pagination
// before using 'tui.component.Pagination' namespace
const instance = new tui.pagination(selector, options);
```

--------------------------------

### Import Pagination Constructor

Source: https://github.com/nhn/tui.pagination/blob/master/README.md

Demonstrates how to import the Pagination constructor function from the 'tui-pagination' library in different JavaScript environments. This is necessary to create new pagination instances.

```javascript
const Pagination = tui.Pagination;
```

```javascript
const Pagination = require('tui-pagination'); /* CommonJS */
```

```javascript
import Pagination from 'tui-pagination'; /* ES6 */
```

--------------------------------

### Initialize TUI Pagination Component

Source: https://github.com/nhn/tui.pagination/wiki/Tutorial

This JavaScript snippet demonstrates how to create an instance of the TUI Pagination component. It shows three ways to initialize: using the container's ID, using the container element directly, or initializing with a comprehensive set of options.

```javascript
var pagination = new tui.component.Pagination('pagination', options);

// Or using a container element
var container = document.getElementById('pagination');
var pagination = new tui.component.Pagination(container, options);

// Example with full options
var options = {
  totalItems: 10,
  itemsPerPage: 10,
  visiblePages: 10,
  page: 1,
  centerAlign: false,
  firstItemClassName: 'tui-first-child',
  lastItemClassName: 'tui-last-child',
  template: {
      page: '<a href="#" class="tui-page-btn">{{page}}</a>',
      currentPage: '<strong class="tui-page-btn tui-is-selected">{{page}}</strong>',
      moveButton:
          '<a href="#" class="tui-page-btn tui-{{type}}">
              <span class="tui-ico-{{type}}">{{type}}</span>
          </a>',
      disabledMoveButton:
          '<span class="tui-page-btn tui-is-disabled tui-{{type}}">
              <span class="tui-ico-{{type}}">{{type}}</span>
          </span>',
      moreButton:
          '<a href="#" class="tui-page-btn tui-{{type}}-is-ellip">
              <span class="tui-ico-ellip">...</span>
          </a>'
   }
};

var pagination = new tui.component.Pagination('pagination', options);
```

--------------------------------

### Run Project Tests

Source: https://github.com/nhn/tui.pagination/blob/master/CONTRIBUTING.md

Executes the project's test suite to verify functionality and ensure code quality. Tests must pass for new contributions.

```bash
npm run test
```

--------------------------------

### Customizing move button template using string

Source: https://github.com/nhn/tui.pagination/blob/master/docs/getting-started.md

Demonstrates customizing the 'moveButton' template using a string, which is then processed by tui-code-snippet's template utility.

```javascript
...
template: {
  ...
  moveButton:
    '<div class="custom-page-btn custom-{{type}}">
      <span class="custom-ico-{{type}}"></span>
    </div>'
  },
  ...
...
```

--------------------------------

### Create TUI Pagination instance with container element

Source: https://github.com/nhn/tui.pagination/blob/master/docs/getting-started.md

Creates a new Pagination instance by passing the container DOM element directly.

```javascript
const container = document.getElementById('pagination');
const pagination = new Pagination(container);
```

--------------------------------

### Handling beforeMove and afterMove custom events

Source: https://github.com/nhn/tui.pagination/blob/master/docs/getting-started.md

Illustrates how to use the 'beforeMove' and 'afterMove' custom events to control page transitions and log the current page number.

```javascript
pagination.on('beforeMove', evt => {
  const { page } = evt;
  const result = ajax.call({page});

  if(result) {
    pagination.movePageTo(page);
  } else {
    return false;
  }
});

pagination.on('afterMove', ({ page }) => console.log(page));
```

--------------------------------

### Import TUI Pagination component and CSS

Source: https://github.com/nhn/tui.pagination/blob/master/docs/getting-started.md

Imports the Pagination component and its associated CSS file using ES6 modules.

```javascript
import Pagination from 'tui-pagination';
import 'tui-pagination/dist/tui-pagination.css';
```

--------------------------------

### Include CSS and JS Files

Source: https://github.com/nhn/tui.pagination/wiki/Getting-Started

To use the TUI Pagination component, you need to include its CSS and JavaScript files. These files are typically found in the 'dist' folder of the repository.

```html
<link rel="stylesheet" href="tui-pagination.css">
<script type="text/javascript" src="tui-code-snippet.js"></script>
<script type="text/javascript" src="tui-pagination.js"></script>
```

--------------------------------

### Include TOAST UI Pagination via CDN

Source: https://github.com/nhn/tui.pagination/blob/master/README.md

This snippet shows how to include the TOAST UI Pagination CSS and JavaScript files using a Content Delivery Network (CDN). It demonstrates using the 'latest' version, but can be adapted for specific version tags.

```html
<link rel="stylesheet" href="https://uicdn.toast.com/tui.pagination/latest/tui-pagination.css" />
<script src="https://uicdn.toast.com/tui.pagination/latest/tui-pagination.js"></script>
```

--------------------------------

### HTML Structure for TOAST UI Pagination

Source: https://github.com/nhn/tui.pagination/blob/master/README.md

This snippet illustrates the required HTML structure for the TOAST UI Pagination component. A container element with the class 'tui-pagination' is needed to initialize the pagination.

```html
<div id="tui-pagination-container" class="tui-pagination"></div>
```

--------------------------------

### Create TUI Pagination instance with ID selector

Source: https://github.com/nhn/tui.pagination/blob/master/docs/getting-started.md

Creates a new Pagination instance by targeting the container element using its ID.

```javascript
const pagination = new Pagination('pagination');
```

--------------------------------

### Use TUI Pagination with CommonJS

Source: https://github.com/nhn/tui.pagination/wiki/v3.0.0-Migration-Guide

Illustrates how to use the TUI Pagination component in a Node.js environment using the CommonJS module system by requiring the package and creating an instance.

```javascript
var Pagination = require('tui-pagination');
var instance = new Pagination(options);
```

--------------------------------

### Customizing move button template using a function

Source: https://github.com/nhn/tui.pagination/blob/master/docs/getting-started.md

Shows how to customize the 'moveButton' template using a function, allowing dynamic generation of HTML based on the button type.

```javascript
...
template: {
  ...
  moveButton: type => {
    let template = '';

    if (type === 'first') {
      template =
        '<div class="custom-page-btn">
          <span class="custom-ico"></span>
        </div>';
    }

    return template;
  },
  ...
...

```

--------------------------------

### Include CSS and JavaScript Files

Source: https://github.com/nhn/tui.pagination/wiki/Tutorial

To use the TUI Pagination component, you need to include its CSS and JavaScript files. These files are typically found in the 'dist' folder of the repository. This snippet shows the HTML tags required for linking these assets.

```html
<link rel="stylesheet" href="tui-component-pagination.css">
<script type="text/javascript" src="code-snippet.js"></script>
<script type="text/javascript" src="tui-component-pagination.js"></script>
```

--------------------------------

### Customize Pagination with HTML Templates (JavaScript)

Source: https://github.com/nhn/tui.pagination/blob/master/examples/example03-using-template.html

Instantiates a TUI Pagination component with custom HTML templates for various elements like page buttons, current page indicator, and move buttons. This enables extensive control over the pagination's appearance and behavior.

```javascript
var pagination = new tui.Pagination('pagination', {
  totalItems: 500,
  template: {
    page: '<a href="#" class="tui-page-btn">{{page}}p</a>',
    currentPage: '<strong class="tui-page-btn tui-is-selected">{{page}}p</strong>',
    moveButton: '<a href="#" class="tui-page-btn tui-{{type}} custom-class-{{type}}">' +
      '<span class="tui-ico-{{type}}">{{type}}</span>' +
      '</a>',
    disabledMoveButton: '<span class="tui-page-btn tui-is-disabled tui-{{type}} custom-class-{{type}}">' +
      '<span class="tui-ico-{{type}}">{{type}}</span>' +
      '</span>',
    moreButton: '<a href="#" class="tui-page-btn tui-{{type}}-is-ellip custom-class-{{type}}">' +
      '<span class="tui-ico-ellip">...</span>' +
      '</a>'
  }
});
```

--------------------------------

### Customize Pagination Templates

Source: https://github.com/nhn/tui.pagination/wiki/Getting-Started

Customize the appearance of pagination elements like page buttons and move buttons by providing custom templates. Templates can be defined as strings or functions.

```javascript
template: {
    ...
    moveButton:
        '<div class="custom-page-btn custom-{{type}}">
            <span class="custom-ico-{{type}}"></span>
        </div>'
    },
    ...
```

```javascript
template: {
    ...
    moveButton: function(type) {
        var template = '';

        if (type === 'first') {
            template = '<div class="custom-page-btn">
                           <span class="custom-ico"></span>
                       </div>';
        }

        return template;
    },
    ...
...
```

--------------------------------

### Add Container Element for Pagination

Source: https://github.com/nhn/tui.pagination/wiki/Getting-Started

A container element with an ID and class is required to render the pagination component.

```html
<div id="pagination" class="tui-pagination"></div>
```

--------------------------------

### Customize Pagination Button Templates (String)

Source: https://github.com/nhn/tui.pagination/wiki/Tutorial

This JavaScript snippet illustrates how to customize the appearance of pagination buttons, specifically the 'moveButton', by providing a custom HTML string template. This allows for fine-grained control over the button's structure and classes.

```javascript
template: {
    // ... other template properties
    moveButton:
        '<div class="custom-page-btn custom-{{type}}">' + 
            '<span class="custom-ico-{{type}}"></span>' + 
        '</div>'
    // ...
}
```

--------------------------------

### Handle Custom Events

Source: https://github.com/nhn/tui.pagination/wiki/Getting-Started

The pagination component supports custom events like 'beforeMove' and 'afterMove'. The 'beforeMove' event allows cancellation by returning false, and 'afterMove' provides the new page number.

```javascript
pagination.on('beforeMove', function(evt) {
    var ePage = evt.page;
    var result = ajax.call({page: ePage});

    if(result) {
        pagination.movePageTo(ePage);
    } else {
        return false;
    }
});

pagination.on('afterMove', function(evt) {
    var ePage = evt.page;
    console.log(ePage);
});
```

--------------------------------

### Customize Pagination Button Templates (Function)

Source: https://github.com/nhn/tui.pagination/wiki/Tutorial

This JavaScript snippet shows an alternative method for customizing pagination button templates using a function. The function receives the button type as an argument and returns the HTML string for the button, offering dynamic template generation.

```javascript
template: {
    // ... other template properties
    moveButton: function(type) {
        var template = '';

        if (type === 'first') {
            template = '<div class="custom-page-btn">' +
                           '<span class="custom-ico"></span>' + 
                       '</div>';
        }

        return template;
    },
    // ...
}
```

--------------------------------

### Disable Usage Statistics (Options)

Source: https://github.com/nhn/tui.pagination/blob/master/README.md

Demonstrates how to disable Google Analytics usage statistics by setting the `usageStatistics` option to `false` when creating a new Pagination instance.

```javascript
const options = {
  ...
  usageStatistics: false
}

const instance = new Pagination(container, options);
```

--------------------------------

### Handle Pagination Custom Events

Source: https://github.com/nhn/tui.pagination/wiki/Tutorial

This JavaScript snippet demonstrates how to attach event listeners to the TUI Pagination component to intercept page navigation. The 'beforeMove' event allows you to validate the page change before it occurs, while the 'afterMove' event is triggered after the page has successfully changed.

```javascript
pagination.on('beforeMove', function(evt) {
    var ePage = evt.page;
    // Example: Perform an AJAX call to fetch data for the new page
    // var result = ajax.call({page: ePage}); 
    var result = true; // Placeholder for actual async result

    if(result) {
        // If the result is successful, move to the requested page
        pagination.movePageTo(ePage);
    } else {
        // If the result is not successful, cancel the page move
        return false;
    }
});

pagination.on('afterMove', function(evt) {
    var ePage = evt.page;
    console.log('Moved to page:', ePage);
});
```

--------------------------------

### Revert Commit Message Format

Source: https://github.com/nhn/tui.pagination/blob/master/docs/COMMIT_MESSAGE_CONVENTION.md

Specifies the format for revert commits, referencing the original commit hash and providing a space for additional explanations.

```git
revert: commit <short-hash>

This reverts commit <full-hash>
More description if needed
```

--------------------------------

### Commit Message Format

Source: https://github.com/nhn/tui.pagination/blob/master/docs/COMMIT_MESSAGE_CONVENTION.md

Defines the standard structure for commit messages, including type, subject, body, and breaking changes. Adheres to a 100-character line limit.

```git
<Type>: Short description (fix #1234)

Longer description here if necessary

BREAKING CHANGE: only contain breaking change
```

--------------------------------

### Disable Usage Statistics (tui-code-snippet)

Source: https://github.com/nhn/tui.pagination/blob/master/README.md

Shows how to disable Google Analytics usage statistics by setting `tui.usageStatistics` to `false` when using the `tui-code-snippet` library (v2.2.0 or later).

```javascript
tui.usageStatistics = false;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.