모든 흐름을 보기 위해서, 간단한 로직 혹은 상속이 필요하지 않는 로직일 경우 함수형 뷰가 간편하다.
상속과 같은 것을 이용할 수 있기 때문에 만들어진 코드를 상속해서 사용한다면 작성해야하는 코드가 줄어든다
함수형 뷰로 작성
URL에서 보내진 요청을 처리하는 index 함수 작성
HTTP 요청을 받고, HTTP 응답을 반환
위의 코드처럼, HTML 코드를 View에 작성하는 것보다 HTML 파일을 따로 만들어, 화면에 보여줄 코드는 따로 정리하는 게 좋을 것 같음.
Template
: Django에서의 Template은 데이터를 보여주는 로직을 작성하는 부분 (화면 상의 로직을 처리함)
뷰에서 템플릿 파일을 반환하기 위해 사용하는 함수는?
render (from django.shortcuts import render)
render 란? : 주어진 template을 context와 결합해서 렌더링을 거친 후 완성된 html을 HttpResponse로 돌려주는 함수
render( reqeust, template_name, context ) 일단 이것만 기억하기!
index.html
html <body> 태그에 내용을 작성한다.
view 파일이 있는 앱 내에 "templates" 폴더를 만들고, html파일만 해당 폴더 안에서 관리한다. 이때, templates 폴더(복수로!) 안에 "앱 이름"의 폴더를 또 생성한 후, html파일을 관리한다. (햄버거 구조)
ex. articles/templates/articles/index.html
주의할 점 : 장고가 template파일을 찾기 위해선 폴더명이 정확히 "templates"로 작성해야 됨. ( Django는 setting.py의 TEMPLATES의 APP_DIRS를 보고 파일을 찾) Tip) VScode에서는 !를 입력하고 Tab 버튼을 누르면 기본적인 HTML파일 구조가 생성되는 자동완성 지원
Django Template System
1. Django Template Language (DTL)
: Django Template에서 사용하는 문법
DTL 문법
변수, Variable
{{ variable }}
view의 context로 넘긴 데이터를 접근할 수 있음
" . " 을 사용하여 변수의 속성값에 접근 가능
render()의 세번째 인자인 context에서, dict형태로 넘겨진 데이터 중 key 값이 template에서 사용 가능한 변수가 됨
API는 응용 프로그램(애플리케이션)에서 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻합니다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공합니다.
🍑 RESTful API
웹 서비스 디자인 아키텍처로, 클라이언트와 서버 간의 상호작용을 정의
RESTful API는 자원을URI로 표현하며,HTTP 메서드(GET, POST, PUT, DELETE)를 사용하여 자원에 대한 작업을 수행
원칙: 무상태성, 캐시 가능성, 계층화된 시스템, 통일된 인터페이스
리소스(HTTP URI로 정의됨)를 어떻게 하겠다(HTTP Method + Payload)를 구조적으로 깔끔하게 표현하는 방법
🌟REST API의 설계 가이드
리소스에 대한 행위는HTTP Method(POST, GET, PUT, DELETE)로 표현해야 합니다.
/(슬래시)는 계층 관계를 나타낼때 사용합니다.
URI 마지막 문자에 /(슬래시)를 사용하지 않습니다.
URI에 _(underscore)는 사용하지 않도록 합니다.또한 영어 대문자보다는소문자를 씁니다. 그리고 가독성을 위해서 긴 단어는 잘 사용하지 않습니다.
URI에동사는 GET, POST와 같은 HTTP Method를 표현하기 때문이다. 동사가 아니라명사를 사용한다.
URI에 파일의 확장자(예를들어 .json , .JPGE)를 포함 시키지 않습니다.
🍑AJAX
AJAX(Asynchronous JavaScript and XML)는 웹 페이지를 새로 고침하지 않고 서버와 비동기적으로 데이터를 주고받는 기술 이를 통해 사용자 경험을 개선하고, 페이지 응답 속도를 향상시킴
사용 예시: 채팅 애플리케이션, 실시간 검색 기능, 비동기 데이터 로딩
🌟자주 쓰이는 설정값
구분
정의
값
url
ajax 요청할 매핑된 url 입력
-
type
HTTP 통신의 종류를 설정. put, delete는 모든 브라우저에서 지원하는 것이 아니기 때문에 주의가 필요. 기본값(default) : get
get, post, delete, put
dataType
ajax를 통해 리턴받을 데이터의 타입을 설정. 생략했을 경우는, jQuery이 MIME 타입 등을 보면서 자동으로 결정
xml,html,json, script,jsonp,text
contentType
기본값을 가장 많이 사용 기본값(default) : application/x-www-form-urlencoded; charset=UTF-8
-
timeout
ajax가 호출된 시점부터 시간을 재서 요청이 초과될 경우 에러 등의 상태로 전환함 $.ajaxSetup()의 global timeout에 의해 override됨.
number(milli secs)
data
URL 파라미터를 통해 보낼 데이터. 종류 :Object or String or Array Object는 key:value set 객체여야 하며 value 영역이 array일 경우 jQuery가 serialize를 해줌. value 영역이 String이 아닌 경우 String으로 변환한 뒤 전송됨
-
beforeSend
ajax 실행 시 요청이 전송되기 전에 실행되는 event 입니다. 반환값을 false 또는 jqXHR.abort();로 설정하면ajax전송을 취소할 수 있습니다.
-
success
ajax 통신이 성공했을 때 실행되는 콜백함수
-
error
request가 실패했을 때 실행되는 콜백함수. cross-domain 요청이나 cross-domain의 jsonp 요청에는 작동하지 않는다.
-
complete
success나 error가 호출된 이후에 호출되는 콜백함수
💡메소드 종류
- GET : 데이터를 읽거나 검색할 때 주로 사용되는 메소드 - POST : 새로운 리소스를 생성할 때 주로 사용되는 메소드 - PUT : 리소스를 생성/업데이트 할 때 주로 사용되는 메소드 - DELTE : 지정된 리소스를 삭제할 때 주로 사용되는 메소드
웹 애플리케이션(Web Application)
: 웹 서버에서 동작하는 소프트웨어로, 사용자의 입력을 처리하고 동적인 웹 페이지를 생성하는 데 사용됨
주로 특정 비즈니스 로직이나 기능을 구현하며, 데이터베이스와 상호 작용하여 정보를 저장하고 불러오는 역할 수행
User Interface, Business Logic, Data Access Layer, API
주요 기능
HTTP 요청 수신, 응답 생성, 캐싱, 로깅, 보안
사용자 상호 작용, 데이터 처리, 비즈니스 로직, 세션 관리
사용 기술
HTTP, HTTPS, SSL/TLS, 캐싱
HTML, CSS, JavaScript, 서버 측 언어 (Python, PHP 등)
작동 방식
클라이언트 요청을 처리하고 정적/동적 콘텐츠 제공
사용자의 입력에 따라 동적으로 콘텐츠 생성, 데이터베이스와 상호 작용
웹 보안
주요 웹 보안 위협 요소
XSS(교차 사이트 스크립팅)
: 악의적인 스크립트를 삽입하여 사용자 정보를 탈취하거나 웹 페이지를 변조
CSRF(교차 사이트 요청 위조)
: 사용자가 의도하지 않은 요청을 보내게 하여 피해를 입힘
SQL Injection(SQL 인젝션)
: SQL 쿼리에 악의적인 코드를 삽입하여 데이터베이스를 조작하거나 데이터를 탈취
Click Jacking(클릭 재킹)
: 사용자가 의도하지 않은 클릭을 하도록 유도하여 악성 사이트로 이동시키거나 악성 행위를 수행하게 함
💡보안을 실천해보자!
비밀번호 관리 : 강력한 비밀번호 생성 규칙(대문자, 소문자, 숫자, 특수 문자 조합)과 2단계 이상의 인증 소프트웨어 업데이트 : 패치 관리와 취약점 관리를 통해 소프트웨어를 최상 상태로 유지 백업 : 정기적인 데이터 백업 전략과 백업 주기 설정 필요 (데이터 손실 시 신속하게 복구 가능)
현대 웹 기술과 트렌드
반응형 웹 디자인
: 반응형 디자인은 다양한 기기와 화면 크기에 적응하는 웹 디자인을 의미
미디어 쿼리, 유동형 그리드 레이아웃, 유연한 이미지
모바일 퍼스트 디자인
: 모바일 환경을 우선적으로 고려한 디자인 접근법
모바일 사용자가 증가함에 따라 중요성이 커짐
🧁프론트엔드 프레임워크
React
Facebook에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용
컴포넌트 기반 아키텍처 제공 → UI를 독립적인 컴포넌트로 나누어 관리할 수 있음
상태 관리 라이브러리(예: Redux)와 함께 사용 가능
가상 DOM을 통해 빠른 렌더링 성능 제공
예시: Facebook, Instagram, Airbnb
Angular
Google이 개발한 프론트엔드 프레임워크로, 모듈화와 양방향 데이터 바인딩을 지원
전체적인 애플리케이션 구조를 제공
TypeScript를 사용하여 더 강력한 타입 검사를 지원
Angular CLI를 이용해 효율적인 개발 환경을 제공
강력한 라우팅과 폼 처리 기능을 갖추고 있음
예시: Googld Ads, Microsoft Office Online
Vue.js
직관적이고 경량화된 프론트엔드 프레임워크로, 컴포넌트 기반 아키텍처와 반응형 데이터 바인딩 제공
학습 곡선이 낮아 빠르게 개발을 시작할 수 있으며 Vue Router와 Vuex를 통해 상태 관리와 라우팅 기능 제공
예시: Alibaba, Xiaomi, Laravel
🧁백엔드 프레임워크
Django
python으로 작성된 고급 웹 프레임워크로, MTV(Model-Template-View) 패턴을 따름
강력한 어드민 인터페이스와 ORM(Object-Relational Mapping)을 제공하여 데이터베이스와의 상호작용을 용이하게 함
서버사이드 렌더링으로 사용자 환경 개선
보안 기능이 내장되어 있어 안전한 웹 애플리케이션을 구축하는 데 적합
예시: Instagram, Pinterest, Mozilla
Node.js
서버 측에서 JavaScript를 실행할 수 있는 런타임 환경으로, 비동기 I/O를 통해 높은 성능을 제공
Express.js와 같은 프레임워크와 함께 사용되며, RESTful API를 쉽게 구축할 수 있음
NPM(Node Package Manage)을 통해 다양한 패키지 활용 가능
예시: LinkedIn, Netflix, Uber
Spring
Java 기반의 엔터프라이즈 애플리케이션 프레임워크로 DI(Dependency Injection)와 AOP(Aspect-Oriented Programming)를 지원
MVC(Model-View-Controller) 패턴을 제공
강력한 보안과 트랜잭션 관리 기능 제공
예시: eBay, Baeldung
Flask
Python으로 작성된 경량 웹 프레임워크로, 간단한 구조와 유연성을 제공
기본적인 웹 서버 기능을 제공하며 필요한 기능을 플러그인 형태로 추가 가능
소규모 애플리케이션이나 프로토타입에 적합
예시: LinkdedIn, Pinterest, Netflix
🍿백엔드 아키텍처
MVC 패턴
MVC(Model-View-Controller) 패턴은 애플리케이션의 구조를 모델, 뷰, 컨트롤러로 나누어 관리하는 디자인 패턴
모델은 데이터와 비지니스 로직을 처리하며, 뷰는 사용자 인터페이스를 구성, 컨트롤러는 모델과 뷰 간의 상호작용을 조정
예시: Spring MVC, ASP.NET MVC
MTV 패턴
MTV(Model-Template-View) 패턴은 Django에서 사용하는 패턴으로, 모델, 템플릿, 뷰로 구성
모델은 데이터베이스와의 상호작용을 담당하고, 템플릿은 HTML과 같은 사용자 인터페이스를 정의하며, 뷰는 요청을 처리하고 모델과 템플릿을 연결
예시: Django 웹 애플리케이션
클라우드와 컴퓨팅과 호스팅
클라우드 컴퓨팅
: 인터넷을 통해 컴퓨팅 자원(서버, 스토리지, 데이터베이스 등)을 제공하는 서비스
서버리스 아키텍처
: 개발자가 서버 인프라를 관리하지 않고 코드를 실행할 수 있는 컴퓨팅 모델
💡 서버리스의 장점 확장성 : 트래픽이 증가하면 자동으로 확장되며, 필요하지 않을 때는 리소스를 줄여 비용 절감 가능 비용 효율성 : 사용한 만큼만 비용을 지불하는 Pay-as-you-go 모델을 사용하여, 리소스를 효율적으로 사용 가능 개발 속도 향상 : 인프라 관리가 필요 없기 때문에 개발자는 비즈니스 로직 구현에 집중이 가능하여 개발 속도 향상 가능
미래 웹 기술
Progressive Web Apps(PWAs)
PWA
웹 애플리케이션과 모바일 애플리케이션의 장점을 결합하여 사용자가 오프라인에서도 앱을 사용할 수 있게 하고, 모바일 장치에서 네이티브 앱처럼 동작
서비스워커, 웹 애플리케이션 매니페스트, HTTPS를 사용
예시: Twitter Lite, Pinterest
서비스 워커
백그라운드에서 실행되는 스크립트로, 네트워크 요청을 가로채고 캐시하여 오프라인에서의 작업을 지원
웹 애플리케이션 매니페스트
웹 애플리케이션의 메타데이터를 포함한 JSON파일로, 홈 화면에 아이콘을 추가하고 전체 화면 모드와 같은 네이티브 앱 기능을 제공하는 데 사용
HTTPS
보안 강화 및 데이터 전송의 무결성을 보장하기 위해 사용
📁추가 내용
Server Engine (Apache, NGINX)
ip주소에게 HTTP 프로토콜 + 메서드 이렇게 합쳐서 http://domain.com/path?query=abc >> 이거를 ur로 보낸다.
하나의 페이지에 대한 리소스를 보내주면 되는 것을 정적페이지라고 한다. 리소스는 변화하지 않는다.
Server Application(weg application) (python, java, django) 이거를 동적 페이지라고 한다
