인프런 커뮤니티 질문&답변

윤해빈님의 프로필 이미지
윤해빈

작성한 질문수

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

장고가 static 파일을 다루는 방법

이번 강의 마지막에 다룬건 무슨 의미가 있는건가요?

해결된 질문

작성

·

250

1

마지막 부분에

static 폴더를 따로 둔다음 여기서 부트스트랩과 jquery를 다운받아서 위치시킨다음

layout.html 에 아래와 같이 하신 부분이 잘 이해가 안갑니다.

<link rel="stylesheet" href="{% static 'bootstrap-5.2.0-dist/css/bootstrap.css'%}" />
<script src="{% static 'jquery-3.6.0.min.js'%}"></script>
<script src="{% static 'bootstrap-5.2.0-dist/js/bootstrap.js'%}"></script>
 
부트스트랩을 서빙하는 형태로 구현해본 것이라고 말씀하셨는데 혹시 static 파일의 사용방법을 간단하게 보여주신거라고 이해하면 될까요?
기존에 아래와 같이 cdn에서 가져온것과 크게 무슨 차이가 있는지 잘 모르겠어서 질문드립니다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/darkly/bootstrap.min.css" integrity="sha384-nNK9n28pDUDDgIiIqZ/MiyO3F4/9vsMtReZK39klb/MtkZI3/LtjSjlmyVPS3KdN" crossorigin="anonymous">    
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
 

답변 1

1

이진석님의 프로필 이미지
이진석
지식공유자

안녕하세요.

보통의 js/css 라이브러리는 cdn을 통해서 라이브러리를 사용할 수 있도록 제공해줍니다.

그런데 cdn을 통한 라이브러리 활용에서는, 관리주체가 우리가 아닙니다. 그래서 어떠한 이유로 유저가 사용하는 해외망 불안/장애나 cdn 서비스 장애 등의 이유로, 우리의 서비스는 문제가 없는 데 위 이유로 서비스 이용에 차질이 생길 수 있습니다.

그래서 실서비스에서는 실서비스에서는 가급적 cdn을 사용하기 보다 (사용할 수도 있습니다.), 우리가 관리하는 서비스에서 모두 서빙하는 것이 서비스 안정성에 도움이 됩니다.

그러한 이유로 장고의 static 기능을 활용해, 직접 js/css 파일들을 서빙하는 예시를 보여드린 것입니다.

화이팅입니다. :-)

ps: 이때 cdn 에서의 부트스트랩 버전(버전4)과 static 에서의 부트스트랩 버전(버전5)을 일치하는지 확인해주세요. 버전이 다르면 동작이 달라질 수 있습니다.

윤해빈님의 프로필 이미지
윤해빈

작성한 질문수

질문하기