[Django] Django Debug Toolbar의 윈도우 환경 MIME type 오동작 해결

Django Debug Toolbar 는 Django 개발 시 디버깅을 도와주는 매우 유용한 도구이다.

https://django-debug-toolbar.readthedocs.io

settings.py에서 Django Debug Toolbar를 Debug=True일 때 활성화하면, 브라우저 환경에서 Django 개발에 필요한 다양한 디버깅 옵션을 사용할 수 있다.

그런데 종종 윈도우 개발 환경에서 아래에서 서술할 문제가 발생할 수 있다.

---

목차

• 문제 상황
• MIME 타입이란?
• 해결 방법
  • 1. 레지스트리 편집기로 JS의 MIME 타입 수정하기(가장 근본적인 해결 방법)
  • 2. settings.py에 다음 설정을 추가(임시 해결 방법)
  • 3. mimetypes 모듈을 사용한 임시 코드 추가 (임시 해결 방법)

---

문제 상황

개발 서버 실행시, 아래와 같은 오류 메시지가 뜨면서 Django Debug Toolbar가 로드에 실패할 수 있다.

$ python manage.py runserver

Watching for file changes with StatReloader
Performing system checks...

System check identified some issues:

WARNINGS:
?: (debug_toolbar.W007) JavaScript files are resolving to the wrong content type.
        HINT: The Django Debug Toolbar may not load properly while mimetypes are misconfigured. See the Django documentation for an explanation of why this occurs.
https://docs.djangoproject.com/en/stable/ref/contrib/staticfiles/#static-file-development-view

This typically occurs on Windows machines. The suggested solution is to modify HKEY_CLASSES_ROOT in the registry to specify the content type for JavaScript files.

[HKEY_CLASSES_ROOT\.js]
"Content Type"="application/javascript"

오류 메시지에도 나오듯이, 이는 Windows 환경에서 종종 나타나는 문제이다. 

이는 JavaScript 파일의 MIME 타입이 올바르게 설정되지 않아서 발생하는 현상이다.

 

MIME 타입이란?

MIME 타입(Multipurpose Internet Mail Extensions Type)은 파일의 형식을 식별하는 표준화된 방법이다. 웹에서 특히 중요한 역할을 하는데, 브라우저가 받은 파일을 어떻게 처리해야 할지 결정하는 데 사용된다.

쉽게 설명하면:

1. 브라우저가 서버에서 파일을 받을 때, "이게 어떤 종류의 파일이야?"라고 물어보는 것과 같다.
2. 서버는 MIME 타입을 통해 "이건 JavaScript 파일이야" 또는 "이건 이미지 파일이야"라고 알려준다.
3. 브라우저는 이 정보를 바탕으로 파일을 적절히 처리한다.

즉 위 에러는, 서버가 js 파일에 대해 application/json이 아닌 다른 text/plain과 같은 타입으로 브라우저에 응답을 해서, 브라우저가 js 파일 로딩을 거부한 상황이다.

 

해결 방법

1. 레지스트리 편집기로 JS의 MIME 타입 수정하기(가장 근본적인 해결 방법)

1. Windows + R 키를 눌러 실행 창을 열기
2. 'regedit' 입력하고 실행
3. HKEY_CLASSES_ROOT\.js 위치로 이동
4. 마우스 우클릭 > 새로 만들기 > 문자열 값
5. 이름을 'Content Type' 으로 설정
6. 값을 'application/javascript' 로 설정

아래와 같이 .js의 Content Type이 application/javascript로 수정되어야 한다. 

 

2. settings.py에 다음 설정을 추가(임시 해결 방법)

STATICFILES_HANDLERS = (
    'django.contrib.staticfiles.handlers.StaticFilesHandler',
)

• Django의 개발 서버가 정적 파일(CSS, JavaScript 등)을 어떻게 처리할지 지정하는 설정이다.
• StaticFilesHandler는 Django의 기본 정적 파일 처리기로, 파일의 MIME 타입을 좀 더 정확하게 처리한다.
• Windows의 MIME 타입 설정을 우회하고 Django가 직접 처리하도록 하는 방식이다.

 

3. mimetypes 모듈을 사용한 임시 코드 추가 (임시 해결 방법)

settings.py에 아래 내용을 추가한다.

import mimetypes

mimetypes.add_type("application/javascript", ".js", True)

• 파이썬의 mimetypes 모듈을 사용해서 파일 확장자와 MIME 타입의 매핑을 직접 추가하는 방식이다.
• ".js" 확장자를 가진 파일은 "application/javascript" MIME 타입으로 처리하라고 파이썬에 알려주는 것이다.
• 마지막 매개변수 True는 이 매핑을 강제로 적용하라는 의미이다.

2번, 3번 방법 모두 Windows의 레지스트리를 수정하지 않고도 JavaScript 파일이 올바른 MIME 타입으로 처리되도록 하는 방법이다. 둘 중에서는 더 직접적이고 명확한 3번 방법이 권장된다.