웹 프로그래밍의 이해 - 웹 프로그래밍의 구조

클라이언트 - 서버 구조

서비스를 제공하기 위해서는 서버server 컴퓨터와 서버에서 동작하는 여러 프로그램이 필요하다. 이때 서버에서 동작하는 프로그램 영역을 백엔드Back-end라고 한다. 서비스를 이용하는 쪽은 클라이언트Client라고 한다. 클라이언트는 스마트폰, 데스크톱이 될 수 있으며 최근 자동차, TV, 냉장고 등에서도 인터넷과 웹 사용이 가능하기 때문에 이러한 기기까 지도 클라이언트로 볼 수 있다. 클라이언트에서 웹 서비스를 이용하려면 웹 브라우저라고 하는 소프트웨어가 필요하며 클라이언트에서 동작하는 프로그램 영역을 프런트엔드Front-end라고 한다.

• 클라이언트: 웹 서비스를 이용하는 사용자
• 서버: 웹 서비스를 제공하기 위한 서비스 공급자
• 프런트엔드: 클라이언트 중심의 프로그래밍 HTML, CSS, 자바스크립트) 영역
• 백엔드: 서버를 구성하며 서비스를 제공하기 위한 서버 쪽 프로그래밍 웹 서버 소프트웨어, 웹 프레임워크, 데이터베이스) 영역

https://better-together.tistory.com/60

쉽게 이해하는 네트워크 4. 서버, 클라이언트와 웹 서비스 (ft. 비즈니스 로직과 사용자 인터페이

HTML/CSS/자바스크립트

HTML (HyperText Markup Language)

• 역할: 웹 페이지의 기본 구조를 정의합니다.
• 특징:
  • 제목, 단락, 이미지, 링크 등 콘텐츠를 배치하고 구조화합니다.
  • 정적인 언어로, 웹 페이지의 뼈대 역할을 합니다.
• 비유: 건축물에서 기초와 뼈대에 해당합니다.

CSS (Cascading Style Sheets)

• 역할: HTML로 정의된 구조에 스타일과 레이아웃을 적용합니다.
• 특징:
  • 색상, 폰트, 간격, 배경 등 시각적 요소를 디자인합니다.
  • HTML과 분리되어 작성되며, 재사용성과 유지보수성을 높입니다.
• 비유: 건축물의 외관을 꾸미는 인테리어에 해당합니다.

JavaScript

• 역할: 웹 페이지에 동적 기능과 상호작용을 추가합니다.
• 특징:
  • 버튼 클릭, 폼 제출, 애니메이션 등 사용자와의 상호작용을 처리합니다.
  • 프로그래밍 언어로서 브라우저에서 실행되며 HTML 요소를 조작하거나 새 요소를 생성할 수 있습니다.
• 비유: 건축물에 생명을 불어넣는 전기나 기계 장치에 해당합니다

https://blog.naver.com/wishket/223475527047

웹개발 기본, HTML과 CSS, 자바스크립트의 차이 비교

백엔드 vs 프런트 엔드

백엔드 중심 개발

• 역할: 서버, 데이터베이스, 비즈니스 로직 등 웹 애플리케이션의 핵심 기능을 구현하고 관리합니다.
• 주요 특징:
  • 데이터 저장, 처리 및 관리를 담당하며, API를 통해 프런트엔드와 통신합니다
  • 성능 최적화(응답 속도 개선, 서버 자원 효율화)와 보안 강화(데이터 암호화, 인증 시스템 구축)가 중요합니다.
  • 주요 기술: Python, Java, Node.js, SQL 등.
  • 비유: 자동차의 엔진처럼 사용자에게 보이지 않지만 필수적인 기능을 수행합니다.
• 장점:
  • 대규모 데이터 처리와 복잡한 비즈니스 로직 구현에 적합.
  • 확장성과 안정성을 중시.
• 단점:
  • 사용자 인터페이스(UI) 개선에 직접적인 영향을 미치지 않음.

프런트엔드 중심 개발

• 역할: 사용자와 직접 상호작용하는 웹 애플리케이션의 UI/UX를 설계하고 구현합니다.
• 주요 특징:
  • HTML, CSS, JavaScript를 사용하여 시각적 요소와 동적 콘텐츠를 개발합니다.
  • 반응형 디자인과 다양한 디바이스에서 일관된 사용자 경험 제공이 중요합니다.
  • 주요 기술: React, Vue.js, Angular 등의 프레임워크와 라이브러리 활용.
  • 비유: 자동차의 외관과 내부 디자인처럼 사용자 경험을 직접적으로 결정합니다.
• 장점:
  • 직관적이고 사용하기 쉬운 UI/UX 구현.
  • 사용자 피드백을 즉각 반영 가능.
• 단점:
  • 백엔드 지원 없이 복잡한 데이터 처리가 어려움

https://scopicsoftware.com/ko/blog/backend-technologies/

https://blog.naver.com/wishket/223475527047

https://spartacodingclub.kr/blog/2024-frontend-now

---

• 월드 와이드 웹World Wide Web은 줄여서 WWW 또는 웹이라고 한다.
• 웹은 HTMLHyperText Markup Language이라는 간단한 마크업 언어를 통해 정보의 연결이 가능하도록 하이퍼텍스트를 포함한 콘텐츠를 제공하며, HTTPHyperText Transfer Protocol라는 프로토콜을 사용해 TCP/IP 네트워크상에서 서비스를 운영하게 된 것이 웹의 시작이다.
• 네트워크를 구축하려면 컴퓨터 간의 연결 규격인 프로토콜 Protocol이 필요하며 여러 프로토콜 중 가장 널리 쓰이는 프로토콜이 TCP/IP다.
• 인터넷 기반의 대표적인 서비스는 웹 이외에도 이메일, FTP, Telnet, DNS 등이 있지만 일반적 으로 사용하는 서비스로는 웹이 절대적이다.
• HTML, CSS, 자바스크립트JavaScript는 프런트엔드(클라이언트) 영역을 구성하는 핵심 프로그램 기술이다.
• 백엔드 중심의 개발은 전통적인 웹 개발 모델이며, 서버에서 모든 것을 담당하는 방식이다.
• 프런트엔드 중심 개발은 클라이언트에서 HTML을 가지고 있거나 서버에서 HTML만 받아오고 서버로부터 화면 구성에 필요한 데이터만 자바스크립트로 받아와 데이터와 화면을 조합해 보여 주는 방식이다.