211221 TIL

TIL DAY 138

오늘 배운 일

✔️ Django 웹 개발

1. 정적(static)파일 관리하기

앞에서 적용되지 않았던 css 와 이미지를 적용해보겠다.

우선은 정적 파일 (static files) 에 대해 알아보겠다.

• HTML 파일을 제외하고 웹 페이지를 렌더링(Rendering)하는 과정에서 필요한 추가적인 파일

예 ) CSS, JavaScript, 이미지 그리고 폰트

출처 : 코드잇

우선은 터미널에서 코스토랑 디렉토리로 가서 vs 코드를 실행해준다.

foods 디렉토리 안에 정적인 파일도 만들어주겠다.

그리고 static 디렉토리 안에 foods 이라는 디렉토리를 만들어준다.

우리는 한 파일에 모든 정적 파일으 넣어도 되지만, 보통은 css, 자바스크립트, 이미지, 폰트 등의 추가적인 디렉토리를 만들어서 사용한다.

위에처럼 css, fonts, images 라는 디렉토리를 만들어준다.

각각의 디렉토리에 맞고 정적 파일들을 넣어주면 된다.

우리의 정적 파일들은 templates 안에 있다.

이 파일들은 옮겨주면된다.

모두 옮겨졌으면, 원래 있던 templates foods 디렉토리에 있던 폴더들은 지워준다.

그러면 templates 디렉토리 안에는 index 템플릿만 남는다.

이제는 정적 파일을 넣어줬으니까, 이 정적 파일들을 사용하도록 templates 을 수정해준다.

index.html

{% load static %}

파일 맨위에 위에 이러한 코드를 작성해준다.

첫 줄은 템플릿 language 중 템플릿 태그라고 부르는데, static 에 있는 정적 파일을 현재 이 템플릿 파일에서 사용한다고 알려주는 것이다.

이제 정적 파일을 사용한다고 알려줬으니까, templates 에 있는 경로를 정적 파일이 있는 위치로 변경해주면 된다.

먼저, css를 해보겠다.

index.html

위에처럼 코드를 작성해준다.

그러면 서버를 다시 실행해준다.

http://127.0.0.1:8000/foods/index/

다시 돌아가보면...

이렇게 css 가 적용된 것을 볼 수 있다.

이미지가 나오지 않아서 이미지 또한 수정해준다.

정적 파일이 있는 경로로 바꾸어주었다.

결과는...

나머지 이미지들도 경로를 바꾸어보겠다.

2. Templates 과 static 의 폴더 구조

우리가 장고의 templates 파일을 만들려면 앱 디렉토리 아래에 templates 라는 디렉토리를 만들고 그 아래에 앱 디렉토리를 생성해주면 된다.

출처 : 코드잇

정적 파일도 templates 과 비슷한 구조이다.

앱 디렉토리 아래에 static 이라는 디렉토리를 만들어주고, 다시 앱 이름으로 된 foods 라는 디렉토리를 만든 다음 그 아래에 이미지같은 파일들을 만들어줬다.

왜 templates 이랑 static 아래에 같은 이름의 디렉토리가 존재할까?

우리가 지금까지는 앱을 하나만 생성했지만, 사이트가 점점 복잡해지면 여러개의 앱이 존재할 수 있다.

이 때, 샌드위치 구조로 폴더를 정리하지 않으면, 문제가 발생한다.

만약에 두 개의 앱을 두고 각각의 앱에 index templates 을 만들것인데, 이 때 샌드위치 구조가 아니라 templates 아래에 templates 넣는 문제에 알아보겠다.

출처 : 코드잇

우선 위에처럼 실행할려면 새로운 장고 프로젝트를 만들어서 실험해본다.

터미널로 가서...

django-admin startproject {프로젝트 이름}

새롭게 프로젝트를 생성해주고...

해당 디렉토리로 가서

cd {프로젝트 이름}

A 이라는 앱을 만들고...

python3 manage.py startapp A

B 이라는 앱도 만들어준다...

python3 manage.py startapp B

그 다음으로 비주얼 스튜디오를 켜준다

code .

이 두개의 앱을 등록해주겠다.

settings.py

프로젝트 앱에 urls 파일에...

A 와 B url 에 따라서 각각의 앱에 urls.py 로 가도록 적어보겠다.

urls.py

위에처럼 각 앱 주소를 새롭게 추가해준다.

각각의 앱 안에 urls 파일이 없어서 새롭게 생성해준다.

그리고 위의 urls 코드를 복사해서 A urls 파일에 붙여넣는다.

필요없는 코드들은 지워서 수정해준다.

A/urls.py

위에처럼 수정해주고 views 로 넘어가서 index 라는 함수를 만들어준다.

A/views.py

index template 을 렌더링해서 돌려주도록 한다.

아직 index template 을 만들어주지 않아서, templates 디렉토리를 생성해준다.

A 앱에서 templates 을 만들어준다.

출처 : 코드잇

원래는 위에 이미지처럼 templates 안에 A 이라는 디렉토리를 만들어고 그 디렉토리 안에 index template 을 만든다.

하지만 이번에는 샌드위치 구조 없이 바로 index.html 을 만들겠다.

이 index template 에서는 어떤 앱에 있는 index templates 인지만 간단하게 적어준다.

index.html

이번에는 B 앱에도 A 앱이 했던것처럼 똑같이 작성해준다.

B/templates/index.html

코드가 완성됐으면, 서버를 실행해준다.

우선 A 로 접근해보면...
http://127.0.0.1:8000/A/index/

화면에 잘 출력되었다.

이번에는 B index 로 접근해보면...

http://127.0.0.1:8000/B/index/

A app 에 있는 index template 이 렌더링되었다.

이 것이 샌드위치 구조를 따라하지 않은 문제다.

그 이유는...

우선 프로젝트 앱에 settings 파일을 확인해보자!

settings.py

위에 코드에서 APP_DIRS 항목이 true 로 설정되어있다.

이 의미는 각각의 앱에 templates 디렉토리가 있으니까, templates 을 찾을 때 거기서 찾으라고 설정해둔 것 이다.

우리는 A 와 B 두 개의 앱이 존재하니까 이 상태에서 index.html 을 찾을려고 하면...

위에 코드처럼 등록된 앱 순서대로 index template 을 찾게된다.

장고에서는 순새대로 index template 이 있는 앱 디렉토리를 찾는다.

이렇게 이름이 겹치는 문제를 해결하기 위해서 샌드위치 구조를 사용하는 것 이다.

templates 디렉토리 안에 바로 index.html 을 두는게 아니라, 이 사이에 앱 이름을 생성함으로써 서로 겹치는 것을 방지해준다.

그리하여 각 앱의 views 디렉토리에서...

위에처럼 작성해주는 것을 추천한다.

끝으로 :

• 오늘은 static (정적) 파일에 대해 알아보고 templates 과 이 static 파일의 구조에 대해 공부를해봤다.
• 왜 프로젝트에 샌드위치 구조를 사용하는지 다시 한 번 아는 시간이었다.