프론트엔드

기본 정보

명칭: 프론트엔드 (Frontend)
분류: 웹 개발 분야
주요 역할: 사용자 인터페이스(UI) 및 사용자 경험(UX) 구현
관련 주제: #프론트엔드 #웹개발 #UI #UX #JavaScript

개요

프론트엔드는 사용자가 직접 보고 상호작용하는 웹사이트 또는 애플리케이션의 화면을 개발하는 분야이다.

웹 브라우저에서 실행되며, HTML로 구조를 만들고 CSS로 디자인을 적용하며 JavaScript로 동적인 기능을 구현한다.

최근에는 React, Vue.js, Angular와 같은 프레임워크를 활용하여 SPA(Single Page Application) 형태의 서비스를 많이 개발한다.

프론트엔드 구조

사용자

↓

웹 브라우저

↓

HTML

↓

CSS

↓

JavaScript

↓

REST API

↓

백엔드 서버

↓

Database

주요 역할

화면(UI) 개발
사용자 경험(UX) 개선
반응형 웹 구현
API 연동
데이터 표시
입력값 검증
애니메이션 구현
성능 최적화

핵심 기술

HTML

웹페이지의 구조를 정의한다.

예시

제목
문단
버튼
입력창
이미지

CSS

웹페이지의 디자인과 레이아웃을 담당한다.

예시

색상
글꼴
여백
Flexbox
Grid
애니메이션

JavaScript

동적인 기능을 구현한다.

예시

클릭 이벤트
AJAX
API 통신
슬라이드
모달
실시간 갱신

대표 프레임워크

React

Meta에서 개발한 UI 라이브러리

특징

Component 기반
Virtual DOM
SPA 개발

Vue.js

배우기 쉽고 가벼운 프레임워크

특징

양방향 데이터 바인딩
쉬운 문법
빠른 개발

Angular

Google에서 개발한 프레임워크

특징

TypeScript 기반
대규모 프로젝트 적합
DI 지원

CSS 프레임워크

Bootstrap
Tailwind CSS
Bulma
Material UI

상태 관리

대표 라이브러리

Redux
Zustand
Pinia
Vuex
Context API

API 통신

대표 방식

REST API
GraphQL

사용 라이브러리

Fetch API
Axios

빌드 도구

Vite
Webpack
Parcel
Rollup

현재는 Vite 사용 비중이 높아지고 있다.

패키지 관리자

npm
Yarn
pnpm

반응형 웹

Media Query를 사용하여 다양한 화면 크기에 대응한다.

@media(max-width:768px){

}

SPA

Single Page Application

특징

페이지 새로고침 최소화
빠른 사용자 경험
API 기반 개발

대표 기술

React
Vue
Angular

SSR

Server Side Rendering

장점

SEO 향상
초기 로딩 속도 개선