개발 블로그

[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