프론트엔드와 백엔드
일반적으로 프론트엔드(front-end)와 백엔드(back-end)라는 용어는 프로세스의 처음과 마지막 단계를 가리킨다. ‘프론트엔드’는 사용자로부터 다양한 형태의 입력을 받아 ‘백엔드’가 사용할 수 있는 규격을 따라 처리해야 한다. ‘프론트엔드’를 ‘백엔드’로 연결하는 것은 인터페이스의 일종이다.
소프트웨어 공학에서 프론트엔드와 백엔드라는 용어는 소프트웨어의 presentation layer(프론트엔드)과 data access layer(백엔드) 또는 물리 구조 또는 하드웨어 사이의 관심사를 분리하는 것을 의미한다. 클라이언트 - 서버 모델에서 클라이언트는 일반적으로 프론트엔드로 간주되며 서버에서 실제로 presentation 작업이 수행되는 경우에도 일반적으로 서버가 백엔드로 간주된다.
소프트웨어의 정의 편집
- 콘텐츠 관리 시스템(CMS)에서 프론트엔드와 백엔드는 CMS의 최종 사용자가 보는 뷰와 관리 뷰를 각각 가리킬 수 있다.[1]
- 음성 합성에서 프론트엔드는 입력 텍스트를 심볼 음운 표현으로 변환하는 합성 시스템의 일부를, 백엔드는 음운 표현을 실제 소리로 변환(convert)하는 것을 가리킨다.[2]
- 주요 컴퓨터 하위 시스템에서 그래픽 파일 관리자는 컴퓨터의 파일 시스템의 프론트엔드이고 셸은 운영 체제와 통신한다. 프론트엔드는 사용자와 마주하며 백엔드는 응답 시 운영 체제의 프로그램의 실행을 종료한다.
- 컴파일러에서 프론트엔드는 컴퓨터 프로그래밍 소스 코드를 중간 표현으로 변환하며 백엔드는 컴퓨터 출력 언어의 코드로 생성하기 위해 중간 표현을 가지고 작업한다.[3]
웹에서의 프론트엔드와 백엔드 편집
흔히 웹에서 프론트엔드는 사용자에게 시각적으로 보여지는 부분, 백엔드는 사용자에게 드러나지 않는 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) 패턴을 사용하여 설계되며 프론트엔트측에서의 처리를 용이하게 하기 위해 응답을 처리한다.[4]
하드웨어의 정의 편집
컴퓨터 네트워크에서 프론트엔드는 네트워크 트래픽을 최적화하거나 보호하는 모든 하드웨어를 지칭할 수 있다.[5] 이를 애플리케이션 프론트엔드 하드웨어로 부르는데 그 이유는 네트워크의 아웃바운드측 프론트엔드나 경계에 위치하기 때문이다. 네트워크 트래픽은 네트워크 진입 전 프론트엔드 하드웨어를 통과한다.
같이 보기 편집
각주 편집
- ↑ Thapliyal, Vimal. “Difference Between Frontend and Backend MVC – Joomlatuts”. 《joomlatuts.net》. 2016년 12월 30일에 원본 문서에서 보존된 문서. 2016년 12월 30일에 확인함.
- ↑ Gutierrez-Osuna, Ricardo. “L18: Speech synthesis (back end)” (PDF). 《tamu.edu》. Texas A&M University. 2019년 2월 14일에 원본 문서 (PDF)에서 보존된 문서. 2016년 12월 29일에 확인함.
- ↑ Bin Muhammad, Rashid. “Operating Systems Notes”. 《www.personal.kent.edu》. Kent State University. 2016년 12월 30일에 확인함.
- ↑ Wickramarachchi, Viduni (2021년 2월 24일). “The BFF Pattern (Backend for Frontend): An Introduction”. 《Bits and pieces》. 2021년 11월 13일에 확인함.
- ↑ O'Dell, Mike. “Network Front-End Processors, Yet Again | June 2009 | Communications of the ACM”. 《cacm.acm.org》. 2016년 12월 30일에 확인함.