0202 / k_digital 39일차 / 웹 프로그래밍(Django)

0. 웹 프로그래밍 시간이다.

   여태 배운 것들을 웹에 구현하기 위한 준비 작업이다.

   프론트엔드와 백엔드를 대강 구분할 줄 알았을뿐 생각보다 더 컴퓨터 개발 환경에 대한 이해가 없었구나 하고 느낀다.

   다만 여태 해 온 작업보다 더 직관적으로 웹에서 살펴볼 수 있어 흥미롭게 다가갈 수 있을 듯 하다.

 

 

프레임워크

개발 효율성을 위해 프로그래밍 코드, Logic, 프로그램 구현 방법론 등을 최적화해둔 것
   

ㅇ웹 프레임워크 : 이미 만들어진 흐름을 따라 구현/수정하면 웹 사이트가 만들어지도록 기본적인 것을 제공

    Java 기반 Spring, Python 기반 Django/Flask, JavaScript 기반 React/Angular/Vue.js 등등

 

#웹 프레임워크가 설정해주는 패턴 영역

Original Design Pattern MVC pattern Model : 데이터베이스 조작 View : UI 구현(프론트엔드 영역) Controller : 내부 계산 & 데이터 처리 로직

Django MTV Pattern Model : 데이터베이스 조작(models.py) Template : UI 구현(template.py) View : 내부 계산 & 데이터 처리 로직(view.py) ; 핵심

 

Django

 

 

이론 : 웹 사이트 작동 흐름

 

 1) 웹 브라우저Web Browser에서 요칭Request을 받게 한다

 

 2) 웹 서버Web Server(Apache/Nginx)와 WSGI를 거쳐 요청이Request 흘러가는 길을 만든다
  2-1 settings.py에서 웹 사이트 세팅을 설정한다 #사용 국가, DB ...

 

 3) urls.py에서 요청이 들어온 URL에 대응할 views.py 함수와 연결해준다

 

 4) views.py에서는 URL로 요청받은 함수를 설정, 실행하고 응답을 준다 ; 핵심 컨트롤러
  4-1 models.py에서는 데이터베이스 테이블의 구조를 설정한다

    #실제로 데이터를 불러오거나 입력하는 것은 views.py #기본 DB는 sqlite
  4-2 forms.py으로 유저 입력값을 받는다

 

 5) template.py를 거쳐 반환 값을 표현한다 #template.py = HTML
  5-1 Static files(CSS, JS, images ...)에 다른 효과를 저장한다

 

 

실전 : 웹 사이트 만들기

 

 1) 가상환경 만들기
:가상환경을 만드는 이유 : 라이브러리 양을 줄여 속도를 높이거나, 버전을 다르게 써 라이브러리를 실험할 수 있다
:최소한의 라이브러리만 넣어둔 상태이므로 장고를 설치해준다 #서버 Break는 ctrl+C

명령프롬프트(cmd)에서 가상환경을 구축하고 프로젝트(웹 사이트)를 만들었다

 2) 프로젝트 만들기

프로젝트(하나의 웹사이트) 생성
  $ django-admin startproject Project_name

   

   Atom으로 옮겨가 settings.py 손보기 #Atom 역시 관리자 권한으로

settings.py를 간단히 수정하고 난 뒤 웹사이트 모습.(django 프로젝트 생성 후 기본 화면이다)

 

 3) 앱 만들기

앱(웹사이트 내 기능들-회원가입, 관련 기능...) 생성
 $ Project_name/python manage.py startapp App_name1

 

1) 여러 기능들의 혼선을 막자(생성 후에는 settings.py INSTALLED_APPS에 추가)
2) urls.py로 앱 views.py와 연결 ; url을 갈라낸다
3) views.py에서 함수를 만들어 동작 설정

 

웹 사이트에 url을 입력해 들어가기만 해도 요청이 들어간다. logic에서 url로 들어온 유저 요청을 받아내 사이트가 수행할 동작을 설정해줘야 한다. 위에서부터 전체 프로젝트 urls.py, 새로 만든 앱의 views.py, 새로 적용한 도메인 화면 

 

#심부름꾼 manage.py

앱 만들기startapp

모델과 DB 변경makemigrations / migrate
static 파일 모으기collectstatic
관리자 계정 만들기createsuperuser

 

 

 

오늘의 TML

 

여러번 봤지만 여전히 쉽지 않음

 

인터넷 환경

 

ㅇ서버 : Server. 특정한 서비스를 제공하는 컴퓨터 / 클라이언트 : Client. 서비스를 쓰는 사용자와 단말기(web browser)

 

ㅇ서버 주소

"protocol :// (인터넷 호스트 주소)IP : Port / 경로 이름"

ex. "http:// 123.456.789.00 : 80" == "www.dkanfjgrpsk.com" (도메인)

 

ㅇ자주 만날 수 있는 서버 종류(Port 종류)

 일반 웹서버(80), DB서버(3306, ...), FTP서버(21), 임의 서버(81, 88, 888, 8888 ...))

 

ㅇHTTP

  WWW에서 정보를 주고받는 통신 프로토콜 ; 응답request과 요청response 프로토콜로 이뤄진다

   HTTP 메소드들

    GET : 정보를 가져온다 
    POST : 정보를 입력해 요청한다

  #동작 수행할 때 URL이 바뀌지 않으면 대부분 POST #클라이언트는 request를 보내 보통 JSON 데이터를 돌려받는다.

    PUT, DELETE, ...   

 

 

프론트엔드와 백엔드

 

 ㅇ프론트엔드 Front-end

.유저에게 보이는 부분 ; UI

 

  .골격의 HTML, 디자인의 CSS, 동작의 JavaScript(중요)

 

 ㅇ백엔드 Back-end

.보이지 않는 부분 : 데이터 처리, 연산 등을 결정 : Business Logic 

 

  .Logic & Data
   -Server : Java, Python, Javascript, Ruby, PHP ...
   -DB : MySQL, Oracle DB, SQLite, MongoDB, MariaDB, PostgreSQL ...
   -서버와 DB를 담는 그릇 : Local server, AWS, GCP, MS Azure ...

 

 ㅇ모바일 앱

 

  .네이티브 앱(Native apps) : Android OS(java 기반->코틀린), iOS(C++ 기반)로 만들어져 디바이스에 최적화
  #프론트엔드, 백엔드를 나눠 구분하지 않는다(UI + logic) #Firebase 모바일 앱에서 가볍게 서버를 이용할 수 있는 도구

  .웹앱(Webapp) : 웹사이트를 기반으로 운영되는 앱

  #쉽고 싸다 #모바일 자체 기능은 X #웹 연결이 느려지면 답답