-
웹 프론트엔드 기초 및 장고에서 static 파일을 처리는 방법카테고리 없음 2021. 10. 28. 13:08
<Overview>
HTML(웹페이지 내용 및 구조), CSS(웹페이지의 스타일), JavaScript(웹페이지의 로직)
주로, HTML과 CSS/JS는 분리하는 경우가 많다.
1. HTML 응답 body 크기를 줄일 수 있다.
2. 여러번 새로고침하더라도, 브라우저 캐싱기능을 통해 같은 파일을 서버로부터 다시 읽어들이지 않는다.
3. 웹페이지 응답성을 높여줄 수 있다.
CSS -> Sass, Less 를 써보도록 하자.
JS -> TypeScript를 써보도록 하자.
웹은 HTTP(S) 프로토콜로 동작한다.
하나의 요청은 클라이언트가 웹서버로 요청하며, 웹서버는 요청에 맞게 응답을 해야합니다.
단지 하나의 HTTP 요청에 대해, 하나의 응답을 받습니다.
1. 브라우저에서 서버로 HTTP 요청
2. 서버에서는 해당 HTTP 요청에 대한 처리: 장고에서는 관련 뷰 함수가 호출
3. 뷰함수에서 리턴해야만 비로소 HTTP 응답이 시작되며, 그 HTTP 응답을 받기 전까지는 하얀 화면만 보여진다.
4. 브라우저는 서버로부터 HTTP 문자열 응답(HTML)을 1줄씩 해석하여, 그래픽적으로 표현!
보통은 CSS -> HTML -> JS 순으로 노출되는 것이 좋다.
## 구글맵이 나오면서 웹 문서의 시대에서 웹 어플리케이션 시대를 도래했다!
## 기존에는 JS가 단지 단순 효과에 불과한 UI를 만드는 것에 불과하였지만, 위성사진, 현재 위치 사진 등등 다양한 기능으로도 구현 가능한 시대를 열였다.
<CSS(Layout)>
반응형 웹
@media() {} 사용
CDN: 최적화된 전세계적으로 촘촘히 분산된 서버로 이루어진 플랫폼. 전 세계의 유저에게 빠르고 안전한 정적 파일 전송
bootstrap 이용하기
=> html <head>에 bootstrap CDN, jQuery CDN 넣어주기
<JS와 jQuery>
nodeJS: 범용 JavaScript 소프트웨어 플랫폼. 주로 웹서비스 개발에 많이 사용.
jQuery는 단일 API로 Ajax요청과 DOM조작을 편리하게 해준다. 하나의 프레임워크
<script>
$( function() {
console.log("웹페이지 로딩 완료");
});
</script>
Ajax GET/POST 요청
브라우저의 동일 도메인 참조 정책 (Same-Origin Policy)
- 같은 프로토콜/호스트명/포트 내에서만 Ajax 요청이 가능
- 초기에는 웹사이트 보안을 위한 좋은 방법이었으나, 최근 여러 도메인에 걸쳐서 구성되는 웹서비스가 늘어나는 시점에서는 번거로워짐.
- 그래서 Cross Domain Request를 허용하기 위해 CORS (Cross Origin Resource Sharing) 지원.
- Django 뷰에서는 POST를 받을 때 CSRF Token 값을 체크
JSONP: '<script/>' 태그는 SOP정책에 속하지 않음을 이용하여, 서로 다른 도메인/포트 간에 JSON GET 통신을 할 수 있는 방법
<휴대폰 망을 통해 로컬 개발서버에 접속하는 방법>
같은 네트워크가 아닌, 외부망의 휴대폰으로 내부망의 개발서버에 접속하려면?
방법1) 휴대폰을 같은 네트워크에 물린다.
방법2) 개발서버에 외부망을 연결한다
a) 공인 아이피를 할당 -> 불가능...
b) 아이피 공유기에 포트포워딩이나 DMZ 세팅 -> 불가능...
c) ngrok 나 localtunnel을 쓰자. => 이는 순수히 개발/테스트 목적!! 실서비스 목적 배포는 아니다. 작은 서비스에서만 가능
<ngrok 다운로드/실행>
Ngrok: 외부에서 로컬에 접속할 수 있게 도와주는 터널링 프로그램
ngrok.com에서 OS에 맞게, 실행파일 다운로드/압축해제 실행
Mac: shell>> ./ngrok http 개발서버_구동포트
<프로젝트> / settings.py / ALLOWED_HOSTS/ 에 ngrok url을 추가해주면 접속할 수 있다.
view port: 모바일 앱으로 바꾸었을 때, 글자크기가 화면크기에 맞게 조정할 수 있고, 휴대폰 drag로 확대 축소를 적당하게 막는것
<meta name='view port' content= '이것저것,,,' >
<장고가 static 파일을 다루는 방법>
Static 파일
- 개발 리소스로서의 정적인 파일 (js, css, image)
- 앱/프로젝트 단위로 저장/서빙
장고의 static 파일 경로: app/static/app
프로젝트 전반적으로 사용되는 static파일은 settings.STATICFILES_DIRS에 지정된 경로에 둔다.
<프로젝트> / settings.py /
STATIC_URL = '/static'
- 각 static 파일에 대한 URL Prefix
STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'askdjango', 'static'), ]
- File System Loader에 의해 참조되는 설정, 뒤에는 BASE_DIR에서 'static'까지 가는 경로를 의미
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
- python manage.py collectstatic 명령이 참조되는 설정
- 여러 디렉토리로 나눠진 static 파일들을 이 경로의 디렉토리로 복사하여, 서빙배포에서만 의미가 있는 설정
Static Files Finders : 디렉토리 목록에서 지정 상대경로를 가지는 static 파일 찾기
대표적인 2가지 Static File Finders
- App Directories Finder : '장고앱/static/' 경로를 '디렉토리 목록'에 추가
- File System Finder : settings.STATICFILES_DIRS 설정값을 '디렉토리 목록'에 추가
static 서빙을 하는 여러가지 방법
1, 클라우드 정적 스토리지나 CDN 서비스를 활용
2. apache/nginx 웹서버 등을 통한 서빙
3. 장고를 통한 서빙. whitenoise 라이브러리를 활용해서 가능.
collectstatic 명령: 실 서비스 배포 전에는 필히 본 명령을 통해, 여러 디렉토리에 나눠져 있는 static 파일들을 한곳으로 복사하는 명령
- 복사하는 대상 디렉토리: settings.STATIC_ROOT
- python manage.py collectstatic 를 실행하면 staticfiles에 모두 모여있는 것을 확인할 수 있다.