Front end and back end

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

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

Software definitions

In content management systems, the front end refers to views facing end users, and the back end refers to views facing administrative users.

In speech synthesis, the front end refers to the part of the synthesis system that converts the input text into a symbolic phonetic representation, and the back end converts the symbolic phonetic representation into actual sounds.

In compilers, the front end translates computer source code into an intermediate representation, and the back end produces executable code from the intermediate representation. The back end usually optimizes to produce code that runs faster. The front end/back end distinction can also separate a parser that deals with source code from a compiler that generates and optimizes executable code. Some designs, such as GCC, offer multiple front end options (parsing different source languages) and multiple back end options (generating code for different target processors).

Some graphical user interface (GUI) applications act as a thin front end for underlying command-line interface (CLI) programs, to save users from having to learn the CLI terminology and commands.

Web development as an example

Another way to understand the differences between the front end and back end is to consider the knowledge that each requires of a software developer. The example lists below focus on web development.

Front end

Markup and web languages such as HTML, CSS, and JavaScript, as well as ancillary libraries commonly used in those languages, such as Sass or jQuery
Asynchronous request handling and AJAX
Single-page applications with frameworks like React, Angular or Vue.js
Web performance (optimization of things like largest contentful paint, time to interactive, animation FPS, and memory usage)
Responsive web design
Cross-browser compatibility issues and workarounds
End-to-end testing with a headless browser
Build automation to transform and bundle JavaScript files, reduce image sizes, and handle other processes using tools such as Webpack and Gulp.js
Search engine optimization
Accessibility concerns
Image editing tools such as GIMP or Photoshop
User interface design and creation

Back end

Scripting languages like PHP, Python, Ruby, Perl, and Node.js
Compiled languages like C#, Java, and Go
Data access layer
Business logic
Database administration
Scalability
High availability
Security concerns, such as authentication and authorization
Software architecture
Data transformation
Backup methods and software