---
title: "JavaScript code"
version: 5.2
locale: ko
source: https://docs.djangoproject.com/ko/5.2/internals/contributing/writing-code/javascript/
canonical: https://djangodocs.dev/ko/5.2/internals/contributing/writing-code/javascript/
---
# JavaScript code

Django 코어의 대부분은 Python이지만 “admin” 및 “gis” 기여 앱에는 JavaScript 코드가 포함되어 있습니다.

Django에 포함하기 위해 JavaScript 코드를 작성할 때 이러한 코딩 표준을 따르십시오.

## 코드 스타일

- “.editorconfig” 파일에 명시된 들여쓰기 스타일을 준수하십시오. 들여쓰기 및 공백 문제를 방지하려면 “EditorConfig”\_ 지원 텍스트 편집기를 사용하는 것이 좋습니다. 대부분의 JavaScript 파일은 들여쓰기에 4개의 공백을 사용하지만 일부 예외가 있습니다.
- 변수 이름을 지정할 때 “underscore\_case” 대신 “camelCase”를 사용합니다. JavaScript 파일마다 다른 코드 스타일을 사용하는 경우가 있습니다. 각 파일의 코드 스타일을 준수하도록 하십시오.
- ESLint\_code linter를 사용하여 코드에 버그와 스타일 오류가 있는지 확인합니다. ESLint는 JavaScript 테스트를 실행할 때 실행됩니다. 또한 텍스트 편집기에 ESLint 플러그인을 설치하는 것이 좋습니다.
- 가능한 경우 나중에 JavaScript로 페이지 구조가 변경되더라도 작동하는 코드를 작성합니다. 예를 들어 클릭 핸들러를 바인딩할 때는 “$(selector)” 대신 “$(‘body’).on(‘click’, selector, func)”을 사용합니다.(func)’를 클릭합니다. 이렇게 하면 프로젝트가 JavaScript를 사용하여 Django의 기본 동작을 쉽게 확장할 수 있습니다.

## JavaScript 패치

Django의 관리 시스템은 jQuery 프레임워크를 활용하여 관리 인터페이스의 기능을 향상시킵니다. 이와 함께 관리 JavaScript 성능을 강조하고 전체 관리 미디어 파일 크기를 최소화합니다.

## 자바스크립트 테스트

Django’s JavaScript tests can be run in a browser or from the command line.
The tests are located in a top level [js\_tests](https://github.com/django/django/blob/stable/5.2.x/js_tests) directory.

### 쓰기 테스트

Django의 JavaScript 테스트에서는 “QUnit”을 사용합니다. 다음은 테스트 모듈의 예입니다.

```javascript
QUnit.module('magicTricks', {
    beforeEach: function() {
        const $ = django.jQuery;
        $('#qunit-fixture').append('<button class="button"></button>');
    }
});

QUnit.test('removeOnClick removes button on click', function(assert) {
    const $ = django.jQuery;
    removeOnClick('.button');
    assert.equal($('.button').length, 1);
    $('.button').click();
    assert.equal($('.button').length, 0);
});

QUnit.test('copyOnClick adds button on click', function(assert) {
    const $ = django.jQuery;
    copyOnClick('.button');
    assert.equal($('.button').length, 1);
    $('.button').click();
    assert.equal($('.button').length, 2);
});
```

Please consult the `QUnit` documentation for information on the types of
[assertions supported by QUnit](https://api.qunitjs.com/assert/).

### 테스트 실행

JavaScript 테스트는 웹 브라우저 또는 명령줄에서 실행할 수 있습니다.

####  브라우저에서 테스트합니다.

To run the tests from a web browser, open up [js\_tests/tests.html](https://github.com/django/django/blob/stable/5.2.x/js_tests/tests.html) in your
browser.

테스트를 실행할 때 코드 범위를 측정하려면 HTTP를 통해 해당 파일을 확인해야 합니다. 코드 적용 범위를 보려면 다음과 같이 하십시오.

- 루트 디렉토리에서 “python -m http.server”를 실행합니다(‘js\_tests’ 내부가 아님).
- 웹 브라우저에서 [http://localhost:8000/js\_tests/tests](http://localhost:8000/js_tests/tests).html을 엽니다.

#### 명령줄에서 테스트합니다.

명령줄에서 테스트를 실행하려면 “Node.js”\_가 설치되어 있어야 합니다.

“Node.js”를 설치한 후 Django 체크아웃의 루트에서 다음을 실행하여 JavaScript 테스트 종속성을 설치합니다.

```console
$ npm install
```

*Windows*

```doscon
...\> npm install
```

그런 다음 다음을 사용하여 테스트를 실행합니다.

```console
$ npm test
```

*Windows*

```doscon
...\> npm test
```