[Project] 장고 admin 페이지 css 오류

[Project] 장고 admin 페이지 css 오류

 

📖 개요

장고를 이용하여 포트폴리오 웹사이트를 만드는 중 admin 사이트의 css가 적용이 안 되는 버그를 발견하다.

 

본인은 "0 static files copied to" 오류가 계속 뜨고 검색을 해봐도 좀 처럼 잘 해결되지 않아서 많은 시간을 사용하였다.

이 글을 보면서 앞으로 누군가에게 도움이 되었으면 좋겠다.

 

 

📚 원인

관리자 도구로 들어고면 콘솔창에 css파일을 찾을 수 없다고 뜨는데 여기서 문제가 발생한 것이다.

처음 프로젝트를 만들때 static 경로를 설정해주었는데 admin 사이트에 접속할 때 내가 지정해 주었던 static  폴더에서 admin 사이트의 css, js, img 를 찾고 있었고 그로 인해 css가 적용이 되지 않았던 것이다.

 

 

📚  해결 방법

📑 우선 settings.py의 DUBUG를 True로 설정해준다

 

📑  settings.py에서 STATIC_ROOT를 설정해주어야 한다.

STATIC_ROOT = "/home/myusername/myproject/static"
# or, eg,
STATIC_ROOT = os.path.join(BASE_DIR, "static")

 

📑 명령어 창에 아래와 같은 명령어를 입력하여준다.

python manage.py collectstatic

이 명령어는 프로젝트에 있는 모든 STATIC 파일들을 모아주는 역할을 한다.

 

📑 경로를 설정해둔 STATIC 파일 안에 admin 파일이 생기면 성공이다.

 

 

 

📚  해결과정에서 어려웠던 점

📑 0 static files copied to

해결과정에서 계속 위처럼 결과가 나와서 정말 많은 시간을 소비하였는데 단순한 오류였고 쉽게 해결할 수 있었다.

🔎 오류가 났던 코드

🔎 해결 방법

STATIC_URL = 'static/'
STATIC_ROOT = 'static/'
STATICFILES_FINDERS = ['django.contrib.staticfiles.finders.FileSystemFinder',
                   'django.contrib.staticfiles.finders.AppDirectoriesFinder']

 

📑 You're using the staticfiles app without having set the STATIC_ROOT setting to a filesystem path.

python manage.py collectstatic 명령어를 실행 시 STATIC_ROOT를 찾은 후 파일을 합치게 되는데 STATIC_ROOT 없이 명령어를 사용하면 이렇게 결과가 나온다. 

 

📑 STATICFILES_DIRS과 같이 사용 시 버그

STATIC_URL = 'static/'
STATIC_ROOT = 'static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]
STATICFILES_FINDERS = ['django.contrib.staticfiles.finders.FileSystemFinder',
                   'django.contrib.staticfiles.finders.AppDirectoriesFinder']

위처럼 STATICFILES_DIRS와 STATIC_ROOT를 같이 작성한 후 명령어를 작성하니 오류가 발생하였는데 STATICFILES_DIRS를 제거하여주었다.