프론트엔드(Frontend): 사용자 인터페이스(UI) 구축

프론트엔드(Frontend)는 Web App의 사용자 인터페이스(UI, User Interface)를 구성하며, 사용자의 웹 브라우저에서 직접 실행됩니다. 웹 페이지의 시각적인 요소와 사용자 상호작용을 담당하는 핵심 영역입니다.

주요 언어

프론트엔드(Frontend) 개발의 세 가지 핵심 언어는 다음과 같습니다.

  • HTML (HyperText Markup Language)
  • CSS (Cascading Style Sheets)
  • JavaScript (JS)

HTML, CSS, JavaScript 활용 예제

아래 코드는 버튼을 클릭하면 자바스크립트(JavaScript)가 실행되어 <h1> 태그의 내용을 변경하는 간단한 웹 페이지 예제입니다.

html
<!DOCTYPE html>
<html>
<head>
  <title>HTML, CSS, JavaScript 차이</title>
  <style>
    h1 { color: blue; } /* CSS: <h1> 태그의 글자색을 파란색으로 설정 */
  </style>
</head>
<body>
  <h1>안녕하세요!</h1> <button onclick="changeText()">변경</button> <script>
    function changeText() {
      // JavaScript: <h1> 태그를 찾아 텍스트 내용을 "Hello, World!"로 변경
      document.querySelector("h1").innerText = "Hello, World!"; 
    }
  </script>
</body>
</html>

주요 프레임워크

웹 앱(Web App) 개발을 효율적이고 체계적으로 만들어주는 대표적인 프론트엔드(Frontend) 프레임워크들은 다음과 같습니다.

프레임워크 설명
React (리액트) **페이스북(Facebook)**이 개발한 UI (User Interface) 라이브러리로, 컴포넌트(Component) 기반 구조를 통해 재사용성 높은 UI 구축에 강점
Vue.js (뷰.js) 가볍고 배우기 쉬우며, 점진적인 채택이 가능한 프레임워크로 높은 유연성 제공
Angular (앵귤러) **구글(Google)**이 개발한 대규모 프로젝트용 프레임워크로, 강력한 기능과 엄격한 구조를 통해 안정적인 개발 환경 제공

API: 프론트엔드(Frontend)와 백엔드(Backend) 간의 통신

프론트엔드(Frontend)는 사용자로부터의 요청을 받아 필요한 데이터를 백엔드(Backend) 서버에 요청하고, 백엔드(Backend)는 요청된 데이터를 처리하거나 가공하여 다시 프론트엔드(Frontend)로 전달합니다. 이 통신은 API (Application Programming Interface)를 통해 이루어집니다.

주요 데이터 통신 기술

클라이언트(프론트엔드)와 서버(백엔드) 간에 데이터를 주고받는 주요 기술은 RESTful API와 GraphQL

API 방식 주요 사용 사례 특징
RESTful API 일반적인 웹 및 모바일 앱, 다양한 서비스 간 데이터 연동 HTTP (Hypertext Transfer Protocol) 기반의 전통적인 API 방식으로, **URL (Uniform Resource Locator)**을 통해 자원(resource)에 접근합니다.
GraphQL 대규모 데이터 서비스, 실시간 앱, 복잡한 데이터 요구사항 클라이언트가 필요한 데이터만 선택적으로 요청할 수 있는 쿼리(query) 언어 및 런타임(runtime)입니다.

통신 프로토콜: HTTP

HTTP는 웹에서 데이터를 주고받는 데 사용되는 핵심 통신 프로토콜입니다. 클라이언트(브라우저)가 서버에 요청을 보내고, 서버가 요청에 대한 응답을 반환하는 방식으로 작동합니다.

백엔드(Backend): 서버 로직 & 데이터 처리

백엔드(Backend)는 웹 앱(Web App)의 데이터 처리, 복잡한 비즈니스 로직 실행, 보안 관리, 그리고 데이터베이스(Database) 관리를 담당하는 서버 측 영역입니다. 사용자의 눈에는 보이지 않지만, 웹 앱(Web App)의 핵심 기능을 수행합니다.

주요 언어

백엔드(Backend) 개발에 사용되는 주요 프로그래밍 언어들은 다음과 같습니다.

언어 설명
Node.js 프론트엔드(Frontend)와 동일한 자바스크립트(JavaScript) 기반으로 백엔드 환경을 제공하여, 풀스택(Full-stack) 개발에 유리합니다.
Python 데이터 분석, 인공지능(AI, Artificial Intelligence), 머신러닝(ML, Machine Learning) 분야에서 강력한 지원을 받으며, 웹 개발에서도 널리 사용됩니다.
Java 안정성과 확장성이 뛰어나 대규모 엔터프라이즈 환경 및 대기업에서 널리 사용됩니다.
PHP 전통적인 웹 개발 언어로, 주로 **MySQL (마이에스큐엘)**과 같은 관계형 데이터베이스와 함께 사용됩니다.
C# 마이크로소프트(Microsoft) 환경에서 주로 사용되며, ASP.NET 프레임워크를 통해 웹 앱(Web App) 개발에 활용됩니다.

주요 프레임워크

각 언어별로 백엔드(Backend) 개발을 위한 다양한 프레임워크들이 존재하며, 이는 개발 생산성과 효율성을 높여줍니다.

프레임워크 언어 기반 주요 사용 사례 특화 기능 및 설명
Express.js JavaScript (Node.js) 실시간 채팅, 싱글 페이지 애플리케이션(SPA)의 백엔드, JavaScript 기반 풀스택 개발 Node.js 생태계 기반에서 가장 널리 쓰이는 비동기 처리에 강한 서버 프레임워크. 미들웨어 구조가 직관적입니다.
FastAPI Python 고성능 REST API, 비동기 처리 백엔드, 마이크로서비스, AI 서비스용 API 서버 비동기 처리와 자동 문서화 기능(OpenAPI)을 제공하는 고성능 비동기 API 프레임워크. 타입 힌트 기반 설계로 코드 가독성과 유지보수성이 높습니다.
Flask Python 스타트업 MVP, 단일 기능 REST API 서버, 데이터 분석 도구의 백엔드 경량화된 구조로 유연한 설계가 가능한 마이크로 프레임워크. 초기 설계의 자유도가 높아 빠른 개발에 적합합니다.
Streamlit Python AI 모델 시연용 앱, 연구자용 대시보드, 데이터 시각화 앱, 비즈니스 리포팅 도구 데이터 시각화와 머신러닝 결과를 웹 앱으로 즉시 배포할 수 있는 특화 프레임워크. 인터랙티브한 대시보드 구성에 강점이 있습니다.
Django Python 기업 웹사이트, 콘텐츠 관리 시스템(CMS), 교육 플랫폼, 커뮤니티 포털 등 풀스택 프레임워크로서, ORM, 인증, 관리자 페이지 등 웹 개발의 전 기능을 포괄. 대규모 데이터베이스 중심의 앱에 적합합니다.