개발 블로그

[AI SCHOOL 5기] 웹개발 시작 본문

Django

[AI SCHOOL 5기] 웹개발 시작

draidev 2022. 5. 13. 00:16

Django를 배우기에 앞서 웹 개발에 대한 간단한 상식들을 정리했습니다.

목차>

01. Front-end VS Back-end

웹개발에서 사용하는 용어로

프론트엔드는 사용자에게 시각적으로 보여지는 부분에 대한 개발을 나타내고

백엔드는 웹사이트의 뒷 부분에서 이루어지는 서버, 데이터베이스 등에 관련된 개발을 의미합니다.

 

01_01. Front-end

Visualization : 사용자가 볼 수 있는 화면, 사용자 인터페이스(UI, User Interface)

프론트엔드의 언어

  • 전체 골격 : HTML(Hypertext Markup Language)
    - Hypertext : 참조(하이퍼링크)를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트
<!-- HTML example -->

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

<!-- https://www.w3schools.com/html/html_intro.asp -->

HTML example

 

  • 디자인 or 애니메이션 : CSS(Cascading Style Sheets)
    - Cascading(폭포수 같은) : 여러 CSS 속성들이 동일한 HTML태그에 차례대로 위에서부터 아래로 중첩되어 적용됨
<!-- CSS example-->

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

<!-- https://www.w3schools.com/css/default.asp -->

CSS&nbsp; example

 

  • 혼자서 or 상호작용으로 움직이거나 변하는 부분 : JavaScript
<!-- JavaScript example -->

<!DOCTYPE html>
<html>
<body>

<h2>My First JavaScript</h2>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html> 

<!-- https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst -->

JavaScript example

 

01_02 Back-end

웹의 보이지 않는 서버(의 API구현), DB 구현, 데이터 처리/연산 등을 처리를 담당하는 개발입니다.

프론트엔드로부터 요청을 받아 데이터를 처리하고 되톨려 보내주는 역할을 합니다.

백엔드의 언어, 프레임워크

프레임워크에 대해서 알고 싶다면 : 라이브러리 vs 프레임워크
  • Server(Server-side scripts) :
    - Java : Spring, Springboot
    - Python : Django, Flask, FastAPI
    - Node.js(JavaScript)
    - Ruby : Ruby on Rails
    - PHP : Laravel
  • DB :
    - MySQL
    - OracleDB
    - MariaDB
    - SQLite
    - PostreSQL
    - MongoDB

 

서버와 DB를 담는 그릇

- Local server
- AWS
- GCP
- MS Azure

 

02 HTTP

HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 클라이언트-서버 프로토콜이란 (보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미합니다. 하나의 완전한 문서는 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등 불러온(fetched) 하위 문서들로 재구성됩니다.

( 출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/Overview)

  • Server : 특정한 서비스를 제공하는 컴퓨터
  • Client : 서비스를 사용하는 사용자 혹은 사용자의 단말기

 

02_01 Server

서버의 주소 (URL : Uniform Resouce Locator)

URL(Uniform Resource Locator)은 인터넷에서 웹 페이지, 이미지, 비디오 등 리소스의 위치를 가리키는 문자열입니다.

HTTP 맥락에서 URL은 "웹 주소" 또는 "링크"라고 불립니다. 브라우저는 https://developer.mozilla.org 등 URL을 주소창에 표시합니다. 일부 브라우저는 URL에서 "//" 뒤의 일부분, 즉 도메인 이름만 표시합니다.

(출처 : https://developer.mozilla.org/ko/docs/Glossary/URL)

URL에 구조에 대한 자세한 설명 : What is a URL?

 

서버의 종류

  • Web server : 80 (http port)
  • Database server : 3306, etc.
  • FTP server : 21
  • etc. : 81,88,888,8888,8080 : 소프트웨어들이 임의의 포트 지정을 할 때 많이 사용하는 포트 번호
TCP/UDP의 포트 목록 : https://ko.wikipedia.org/wiki/TCP/UDP의_포트_목록

 

02_02 Request/Response

  • Request : 서버로의 요청
    - GET (method) : 정보를 가져오는 역할
    - POST (method) : 정보를 입력(및 수정)하는 역할
GET : https://developer.mozilla.org/ko/docs/Web/HTTP/Methods/GET
POST : https://developer.mozilla.org/ko/docs/Web/HTTP/Methods/POST
  • Response : 서버로부터의 응답
    - 응답 코드 : 200(정상적인 응답), 400(Bad request), 404(Not found), etc.
    - 응답에 담긴 데이터 : HTML/JS/CSS/image files, JSON, XML, etc.
응답 상태 코드 : https://developer.mozilla.org/ko/docs/Web/HTTP/Status/200
JSON에 대해 더 알고싶다면? : https://jeonjoon.tistory.com/17?category=546276

'Django' 카테고리의 다른 글

[Django] lotto 번호 자동생성 웹 서비스 (02. 웹 구현하기)  (0) 2022.05.17
[Django] 관리자(admin)페이지 모델객체 추가 안될 때(settings.py / INSTALLED_APPS)  (0) 2022.05.17
[Django] lotto 번호 자동생성 웹 서비스 (01. MTV패턴, 환경구축)  (0) 2022.05.16
'Django' Related Articles more
Comments