웹 프론트엔드 기초
웹 프론트엔드를 위한 3가지 언어
- HTML: 웹페이지의 내용 및 구조
- CSS: 웹페이지의 스타일
- JavaScript: 웹페이지의 로직
일반적으로 CSS/JavaScript 파일을 별도의 파일로 분리한다. 그 이유는 HTML 응답 body 크기를 줄일 수 있고 브라우저 캐싱 기능을 통해 같은 파일을 서버로부터 다시 읽어들이지 않아서 응답 속도를 향상시킬 수 있기 때문이다.
웹 요청 및 응답
- 웹은 HTTP 프로토콜로 동작한다.
- 하나의 요청은 클라이언트가 웹서버로 요청하며 웹서버는 요청에 맞게 응답을 해야한다.
- 웹서버에서 응답을 만들 때 요청의 종류를 구분하는 기준은 일반적으로 URL, 그 외에 요청헤더, 세션, 쿠키 등이 있다.
- 웹 서버 구성에 따라, 특정 요청에 대한 응답을 Apache/Nginx 웹서버에서도 할 수도 있고 뷰에서 응답을 할 수도 있다.
- 하나의 HTTP 요청에 대해, 하나의 응답을 받는다.
HTML UI 응답성을 높이는 방법
- 실서비스시에 CSS/JavaScript파일은 Minify시켜서 다운로드 용량을 줄인다.
- 대개 CSS를 HTML컨텐츠보다 앞에 위치시킨다.
- JS를 HTML컨텐츠보다 뒤에 위치시킨다.
장고 Forms 활용
1. HTML Form (클라이언트 측)
클라이언트에서 사용자에게 입력폼을 제공하고, 이를 서버로 전송하고자 할 때 사용
HTML 웹페이제에서는 <form></form> 태그를 통해 입력폼을 구성하고 submit시에 지정한 action URL로 데이터 전송을 시도한다.
<form action="" method="POST">
<input type="text" />
<textarea></textarea>
<select></select>
<input type="checkbox">
<input type="radio">
</form>HTML
<form>태그 필수 속성!
action: 요청을 보낼 주소method: 전송 방식 (GET, POST)enctype: 인코딩 방식 (POST요청에서만 유효)
Form 요청에서 인자를 보내는 2가지 방법
1) 요청 URL 뒤에 ?를 붙이고, 인자를 실어서 보내기
- 이 인자를 Query String 인자라고 부른다.
- GET요청에서 주로 사용하기에 GET 인자라고도 한다.
2) 요청 Body에 모든 인코딩의 인자를 실어서 보내기
장고 뷰에서 Form으로 전달받은 인자 접근하기
-
request.GET
- 모든 QueryString 인자 목록
- GET/POST 요청에서 모두 가능
-
request.POST
- POST 요청에서만 가능.
- 파일 내역은 제외한 모든 POST인자 목록
-
request.FILES
- POST 요청에서만 가능.
- request BODY에서 파일내역만 파싱한 MultiValueDict 객체
2. Django Form (서버 측)
클라이언트로부터 전달받은 값들에 대한 유효성 검사를 수행하고, 이를 데이터베이스에 저장하는 등의 처리. HTML Form을 생성하는 기능을 제공.
주요 역할
1. 입력폼 HTML 생성
2. 입력폼 값에 대한 유효성 검증 및 값 변환
3. 검증을 통과한 값들을 dict형태로 제공
# myapp/forms.py
from django import forms
class PostForm(forms.Form):
title = forms.CharField()
content = forms.CharField(widget=form.Textarea)Django Style의 Form 처리
하나의 URL (하나의 View)에서 빈 폼을 보여주는 역할과 폼을 통해 입력된 값을 검증하고 저장하는 역할 두가지를 모두 수행
- GET 방식으로 요청받있을 때 : New/Edit 입력폼을 보여준다.
- POST 방식으로 요청받았을 때: 데이터를 입력받아 유효성 검증 수행
- 검증 성공 시: 해당 데이터를 저장하고 SUCCESS URL로 이동- 검증 실패 시: 오류메세지와 함께 입력폼을 다시 보여준다.
hi