[장고] 웹 개발 개요

게시일: 24. 06. 03. 수정일: 24. 12. 24.

소요 시간: 3분 조회수: 62

웹 개발은 인터넷을 통해 사용자에게 서비스를 제공하는 웹 애플리케이션을 만드는 과정을 의미합니다. 웹 애플리케이션은 다양한 기술과 도구를 사용하여 개발되며, 이는 백엔드와 프론트엔드로 나뉩니다. 다음은 웹 개발의 기본 개념과 웹 애플리케이션의 주요 구성 요소에 대한 소개입니다.

1 웹 개발의 기본 개념

클라이언트-서버 아키텍처
- 클라이언트: 웹 브라우저나 모바일 앱 등 사용자가 직접 상호작용하는 부분입니다. 클라이언트는 사용자 요청을 서버로 전송하고, 서버로부터 받은 응답을 사용자에게 표시합니다.
  - 예시: 사용자가 웹 브라우저에서 www.example.com을 입력하면, 브라우저(클라이언트)는 서버에 페이지 요청을 보냅니다.
- 서버: 클라이언트로부터 요청을 받아 이를 처리하고 응답을 반환하는 컴퓨터 시스템입니다. 서버는 데이터베이스와 연동하여 데이터를 처리하고 저장합니다.
  - 예시: www.example.com의 서버는 사용자의 요청을 받아 해당 페이지의 HTML, CSS, JavaScript 파일을 클라이언트에게 반환합니다.
HTTP/HTTPS 프로토콜
- HTTP: HyperText Transfer Protocol의 약자로, 클라이언트와 서버 간에 데이터를 주고받기 위한 프로토콜입니다.
  - 예시: 사용자가 www.example.com을 방문하면, 브라우저는 서버에 HTTP 요청을 보내고, 서버는 HTML 페이지를 HTTP 응답으로 보냅니다.
- HTTPS: HTTP에 보안 기능을 추가한 프로토콜로, 데이터를 암호화하여 안전하게 전송합니다.
  - 예시: 사용자가 온라인 쇼핑몰에서 결제를 할 때, HTTPS를 사용하여 결제 정보를 안전하게 전송합니다.
프론트엔드와 백엔드
- 프론트엔드: 사용자가 직접 보는 웹 페이지와 상호작용하는 부분을 개발하는 영역입니다. HTML, CSS, JavaScript 등의 기술을 사용합니다.
  - 예시: 웹 페이지의 레이아웃, 색상, 버튼, 폼 등의 디자인과 사용자 인터랙션을 구현합니다.
- 백엔드: 서버에서 데이터를 처리하고 클라이언트에 응답을 제공하는 부분입니다. 데이터베이스 관리, 서버 로직, 인증 및 권한 관리 등을 포함합니다. Python, Ruby, PHP, Node.js 등이 백엔드 개발에 사용됩니다.
  - 예시: 사용자가 로그인할 때 입력한 아이디와 비밀번호를 확인하고, 데이터베이스에서 사용자의 정보를 조회하여 인증하는 작업을 수행합니다.

2 웹 애플리케이션의 구성 요소

HTML (HyperText Markup Language)

웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어입니다. 웹 페이지의 제목, 본문, 이미지, 링크 등을 설정합니다.

예시

<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <p>This is a paragraph of text on my web page.</p>
    </body>
</html>

CSS (Cascading Style Sheets)
- HTML로 작성된 웹 페이지를 스타일링하는 언어입니다. 레이아웃, 색상, 폰트, 간격 등을 정의하여 웹 페이지의 시각적 표현을 관리합니다.
  - 예시:
```
css코드 복사
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
h1 {
    color: #333;
}
p {
    color: #666;
}
```
JavaScript
- 웹 페이지에 동적 기능을 추가하는 스크립팅 언어입니다. 사용자 이벤트 처리, DOM 조작, 비동기 요청(AJAX) 등을 통해 웹 페이지를 상호작용 가능하게 만듭니다.
  - 예시:
```
javascript코드 복사
document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('h1').addEventListener('click', function() {
        alert('You clicked the heading!');
    });
});
```
서버 사이드 언어
- 백엔드 로직을 구현하기 위해 사용되는 언어입니다. Python(Django, Flask), Ruby(Ruby on Rails), PHP, Java, Node.js 등이 있으며, 서버에서 데이터를 처리하고 클라이언트에 응답을 제공합니다.
  - 예시 (Python/Django):
```
python코드 복사
from django.shortcuts import render
from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, world! This is my first Django app.")
```
데이터베이스
- 데이터를 저장하고 관리하는 시스템입니다. 관계형 데이터베이스(MySQL, PostgreSQL)와 비관계형 데이터베이스(MongoDB, Redis)로 나뉩니다. 데이터베이스는 백엔드 서버와 연동하여 데이터를 효율적으로 관리합니다.
  - 예시: 온라인 쇼핑몰에서 상품 정보, 사용자 계정, 주문 내역 등을 데이터베이스에 저장하고 관리합니다.
프레임워크
- 웹 애플리케이션 개발을 효율적으로 도와주는 도구 모음입니다. 프레임워크는 코드 구조를 표준화하고, 반복적인 작업을 자동화하여 개발 생산성을 높입니다. 장고(Django)는 Python 기반의 대표적인 웹 프레임워크입니다.
  - 예시 (Django): 장고는 프로젝트 구조를 자동으로 생성하고, 데이터베이스와의 연동, URL 라우팅, 템플릿 시스템 등을 기본 제공하여 개발 시간을 단축시킵니다.

3 웹 애플리케이션의 작동 원리

클라이언트 요청
- 사용자가 웹 브라우저를 통해 특정 웹 페이지에 접속하려고 할 때, 클라이언트는 서버에 HTTP 요청을 보냅니다.
  - 예시: 사용자가 브라우저 주소창에 www.example.com을 입력하면, 브라우저는 서버에 GET 요청을 보냅니다.
서버 처리
- 서버는 클라이언트로부터 받은 요청을 처리합니다. 요청된 데이터를 데이터베이스에서 조회하거나, 특정 로직을 수행한 후, HTML 페이지나 JSON 데이터를 생성합니다.
  - 예시: www.example.com의 서버는 요청을 받아 데이터베이스에서 사용자 정보를 조회하고, 이를 포함한 HTML 페이지를 생성하여 응답합니다.
클라이언트 응답
- 서버가 처리 결과를 HTTP 응답으로 클라이언트에 반환합니다. 클라이언트는 받은 응답을 사용자에게 표시합니다.
  - 예시: 브라우저는 서버로부터 받은 HTML, CSS, JavaScript 파일을 렌더링하여 사용자에게 웹 페이지를 보여줍니다.

이와 같은 기본 개념과 구성 요소를 이해하면, 웹 개발의 전반적인 흐름과 각 부분이 어떻게 상호작용하는지를 파악할 수 있습니다. 다음 장에서는 장고를 설치하고 첫 번째 프로젝트를 생성하는 과정을 단계별로 알아보겠습니다.

[장고] 웹 개발 개요

1 웹 개발의 기본 개념

2 웹 애플리케이션의 구성 요소

3 웹 애플리케이션의 작동 원리

인기글