{{위키데이터 속성 추적}}
일반적으로 '''프론트엔드'''(front-end)와 '''백엔드'''(back-end)라는 용어는 프로세스의 처음과 마지막 단계를 가리킨다. ‘프론트엔드’는 사용자로부터 다양한 형태의 입력을 받아 ‘백엔드’가 사용할 수 있는 규격을 따라 처리해야 한다. ‘프론트엔드’를 ‘백엔드’로 연결하는 것은 [[인터페이스]]의 일종이다.

[[소프트웨어 공학]]에서 프론트엔드와 백엔드라는 용어는 소프트웨어의 presentation layer(프론트엔드)과 data access layer(백엔드) 또는 물리 구조 또는 [[하드웨어]] 사이의 관심사를 분리하는 것을 의미한다. [[클라이언트]] - [[서버]] 모델에서 클라이언트는 일반적으로 프론트엔드로 간주되며 서버에서 실제로 presentation 작업이 수행되는 경우에도 일반적으로 서버가 백엔드로 간주된다.

== 소프트웨어의 정의 ==
* [[콘텐츠 관리 시스템]](CMS)에서 프론트엔드와 백엔드는 CMS의 최종 사용자가 보는 뷰와 관리 뷰를 각각 가리킬 수 있다.<ref name=":0">{{웹 인용|url=http://joomlatuts.net/joomla-2-5/87-how-backend-model-view-controller-mvc-works-in-joomla/98-difference-between-frontend-and-backend-mvc|title=Difference Between Frontend and Backend MVC – Joomlatuts|last=Thapliyal|first=Vimal|website=joomlatuts.net|access-date=2016-12-30|보존url=https://web.archive.org/web/20161230230237/http://joomlatuts.net/joomla-2-5/87-how-backend-model-view-controller-mvc-works-in-joomla/98-difference-between-frontend-and-backend-mvc#|보존날짜=2016-12-30|url-status=dead}}</ref>
* [[음성 합성]]에서 프론트엔드는 입력 텍스트를 [[심볼]] 음운 표현으로 변환하는 합성 시스템의 일부를, 백엔드는 음운 표현을 실제 소리로 변환(convert)하는 것을 가리킨다.<ref>{{웹 인용|url=http://research.cs.tamu.edu/prism/lectures/sp/l18.pdf|title=L18: Speech synthesis (back end)|last=Gutierrez-Osuna|first=Ricardo|date=|website=tamu.edu|publisher=Texas A&M University|access-date=2016-12-29|archive-date=2019-02-14|archive-url=https://web.archive.org/web/20190214183352/http://research.cs.tamu.edu/prism/lectures/sp/l18.pdf}}</ref>
* 주요 컴퓨터 하위 시스템에서 그래픽 [[파일 관리자]]는 컴퓨터의 [[파일 시스템]]의 프론트엔드이고 [[셸]]은 [[운영 체제]]와 통신한다. 프론트엔드는 사용자와 마주하며 백엔드는 응답 시 운영 체제의 프로그램의 실행을 종료한다.
* [[컴파일러]]에서 프론트엔드는 컴퓨터 프로그래밍 [[소스 코드]]를 [[중간 표현]]으로 변환하며 백엔드는 컴퓨터 출력 언어의 코드로 생성하기 위해 중간 표현을 가지고 작업한다.<ref>{{웹 인용|url=http://www.personal.kent.edu/~rmuhamma/Compilers/MyCompiler/phase.htm|title=Operating Systems Notes|last=Bin Muhammad|first=Rashid|date=|website=www.personal.kent.edu|publisher=Kent State University|access-date=2016-12-30}}</ref>

=== 웹에서의 프론트엔드와 백엔드 ===
흔히 웹에서 프론트엔드는 사용자에게 시각적으로 보여지는 부분, 백엔드는 사용자에게 드러나지 않는 DB 공간(회원가입, 로그인)을 의미한다. 프론트엔드쪽에서는 주로 [[HTML]], [[CSS]], [[자바스크립트]]가 쓰이며, 요즘은 [[페이스북]]에서 개발한 자바스크립트에서 파생된 [[싱글 페이지 애플리케이션]] 형태의 [[리액트 (자바스크립트 라이브러리)|리액트]]가 많이 사용되며, 백엔드쪽에서는 예전의 경우에 [[PHP]]가 널리 사용되었지만, 요즘은 [[Node.js]]가 주로 사용된다.

==== 프론트엔드 지향 ====
* [[HTML]], [[CSS]], [[자바스크립트]] 등의 마크업 및 웹 언어 (+ [[Sass (스타일시트 언어)]], [[JQuery]])
* [[비동기 입출력]] 요청 관리 및 [[Ajax]]
* [[싱글 페이지 애플리케이션]]([[리액트 (자바스크립트 라이브러리)]], [[앵귤러 (애플리케이션 플랫폼)]], [[Vue.js]] 등의 프레임워크 포함)
* [[웹 성능]](60 [[프레임 레이트|FPS]] 애니메이션 및 상호작용, 메모리 사용량 등)
* [[반응형 웹 디자인]]
* [[크로스 브라우저]] 호환 이슈 및 우회 처리
* [[헤드리스 브라우저]]의 [[소프트웨어 테스트|단대단 테스트]]
*  자바스크립트 파일의 변환 및 번들링, 이미지 크기 축소 등을 위한 [[빌드 자동화]] ([[웹팩]], [[Gulp.js]] 사용)
* [[검색 엔진 최적화]]
* [[웹 접근성]] 문제
* [[김프]], [[어도비 포토샵]] 등의 이미지 편집 도구의 기본 사용
* [[사용자 인터페이스]]
==== 백엔드 지향 ====
* [[스크립트 언어]]([[PHP]], [[파이썬]], [[루비 (프로그래밍 언어)]], [[펄]], [[Node.js]], 그리고 [[C 샤프]], [[자바 (프로그래밍 언어)]], [[Go (프로그래밍 언어)]] 등의 [[컴파일 언어]])
* 사용되는 언어를 위한 [[자동화 테스트 프레임워크]]
* 애플리케이션 데이터 액세스
* 애플리케이션 비즈니스 로직
* [[데이터베이스 관리자|데이터베이스 관리]]
* [[스케일러빌리티]]
* [[고가용성]]
* 보안 문제, [[인증]], [[허가 (컴퓨터 과학)]]
* [[소프트웨어 구조]]
* [[데이터 변환]]
* [[백업]] 방식 및 소프트웨어

=== API ===
프론트엔드는 [[API]]를 통해 백엔드와 통신한다. [[웹]]과 모바일 프론트엔드의 경우 API는 [[HTTP]] 요청/응답에 기반을 둔다. API는 백엔드 포 프론트엔드(Backend for Frontend, BFF) 패턴을 사용하여 설계되며 프론트엔트측에서의 처리를 용이하게 하기 위해 응답을 처리한다.<ref>{{웹 인용| last=Wickramarachchi | first=Viduni | title=The BFF Pattern (Backend for Frontend): An Introduction | website=Bits and pieces | date=24 February 2021 | url=https://blog.bitsrc.io/bff-pattern-backend-for-frontend-an-introduction-e4fa965128bf | access-date=13 November 2021}}</ref>

== 하드웨어의 정의 ==
[[컴퓨터 네트워크]]에서 프론트엔드는 [[네트워크 트래픽]]을 최적화하거나 보호하는 모든 하드웨어를 지칭할 수 있다.<ref>{{웹 인용|url=http://cacm.acm.org/magazines/2009/6/28494-network-front-end-processors-yet-again/fulltext|title=Network Front-End Processors, Yet Again {{!}} June 2009 {{!}} Communications of the ACM|last=O'Dell|first=Mike|website=cacm.acm.org|access-date=2016-12-30}}</ref> 이를 [[서비스 거부 공격|애플리케이션 프론트엔드 하드웨어]]로 부르는데 그 이유는 네트워크의 [[비무장지대 (컴퓨팅)|아웃바운드측 프론트엔드나 경계]]에 위치하기 때문이다. 네트워크 트래픽은 네트워크 진입 전 프론트엔드 하드웨어를 통과한다.

== 같이 보기 ==
* [[클라이언트 서버 시스템]]
* [[다층 구조]]
* [[모듈성 (프로그래밍)]]
* [[옵서버 패턴]]
* [[발행-구독 모델]]
* [[푸시 기법]]
* [[원격 프로시저 호출]]

== 각주 ==
{{각주}}

[[분류:소프트웨어 구조]]
[[분류:웹 개발]]