프론트엔드 (frontend) 와 백엔드 (backend) ??

안녕하세요. 먼데이리스입니다. 

 

오늘은 앱 개발시 사용되는 용어 중 프론트엔드와 백엔드의 정의 및 차이점에 대해 설명드려볼까 합니다.

 

1. 프론트엔드 (HTML, CSS, JAVASCRIPT)

: 프론트엔드(Front-end) 는 말그대로 맨앞쪽(?) 고객과 가장 가까이 접하는 위치에 있다고 보시면 이해가 쉬우실 겁니다.

예를 들어, 쿠팡 랜딩페이지를 보면 로고나 이미지/버튼/텍스트 이렇게 화면상 이벤트를 발생시키는 3가지 요소가 바로 프론트엔드입니다

 

- HTML : 웹문서를 만들기위해 사용하는 언어의 한 종류로, 사이트들의 배치와 구성을 이루게되며, 글자크기, 색깔, 모양, 그래픽, 하이퍼링크 등을 정의합니다. 

 1) 컨텐츠 레이아웃 control 

 2) web page를 위한 structure 제공

 3) web page 의 핵심적인 building block 

 

- CSS : 웹문서의 template을 미리 저정해둔 스타일시트로, html 웹문서의 설계시 수시변경에 따른 제약사항을 극복하기위한 스타일 시트입니다.

 1) web page 구성요소에 스타일 적용

 2) 다양한 스크린 사이즈를 대상으로 가공 

 3) 주로 web page 의 look and feel 핸들링  

 

- JAVASCRIPT : html 의 정적이고 단조로움을 극복하기 위해 브라우저 자체 내장된 기능을 이용한 클라이언트 기반의 일종 스크립트 언어로 웹문서를 동적으로 만들때 가장 보편적으로 사용합니다. 

 1) web page에 interactivity 추가 

 2) 복잡한 기능 handling

 3) 기능 강화를 하는 coding 

 

2. 백엔드 (서버, 서버개발언어, DB)

: 백엔드는 프론트엔드의 반대되는 개념으로 생각하시면 쉽습니다. 프론트엔드 에서 넘어온 데이터를 저장하고 컨트롤하는 공간으로 일반 사용자는 볼 수 없는 Area인 서버에서 실행되며, UI없이 프로세스 형태만 존재하여 프론트엔드와 직접 상호 작용할 수 있지만, 보다 일반적인 것은 중간에 또 다른 프로그램이 개입되어 프론트엔드와 백엔드의 활동을 컨트롤합니다. 

- 서버 : 밴엔드의 프로세스를 처리하고, 프론트엔드에서 넘어온 데이터 저장되며 On-Premise(자체 관리/독립적인 물리적서버) 와 SaaS (Cloud 환경) 등이 있습니다.

 

- 서버개발언어 : 프론트엔드에서 넘어오는 데이터를 처리하기 위한 프로그래밍으로, 사용하는 언어로는 PHP, 파이썬(Python), 노드(Node,js), 루비(Ruby), .NET 등이 있으며, 서버에 위치하고 있어 안전성이 뛰어납니다

 

- DB(Database) : 프론트엔드에서 넘어온 데이터를 저장하는 장소로, 관리시스템으로 MySQL, MongoDB 등이 있습니다.

 

오늘은 프론트엔드와 백엔드에 대해 알아보았습니다. 도움이되셨길 바랍니다. 

 

감사합니다.