Web Front-End & Back-End 구분 정리

web front-end & back-end

Web Front-End & Back-End 구분 정리 포스트입니다.

다양한 IT 회사의 채용 페이지나 기술 자료들을 보게되면 거의 대부분 언급되고 있는 용어입니다.
대부분 알고 계시는 내용이지만, IT 영역을 갓 접하신 분들을 위해 준비했습니다.
제가 게시한 내용은 기본적인 개념에 대해서만 다룰 예정입니다만, 오기입되어 있는 부분이 있다면 댓글로 알려주시기 바랍니다.

Front-End & Back-End

web front-end & back-end

위 그림은 Front-End와 Back-End를 간략하게 구분해서 볼 수 있게끔 도식화한 개념도입니다.

프론트엔드(Front-End)

Front-End의 영역은 사용자(User)웹 브라우저(Web Browser) 간의 영역으로 생각하면 됩니다.
Web Browser로 보여지는 부분이라고 보시면 됩니다.
디자인적 요소들이 많이 포함되어 있으며, 자료 처리와 같은 복잡한 로직이 필요한 요소는 없습니다.
실제로는 동적 처리 등이 필요하여 코드가 아에 빠지진 않습니다만, 그러한 부분까지 모두 Back-End라고 설명할 예정입니다.

위에서 말씀드렸다시피 프로그래밍 언어를 제외하고 여기에 포함되는 요소를 말씀드리자면, HTML(Hypertext Mark-Up Language)와 CSS 등이 포함되겠습니다.
참고로 HTML은 언어이긴 하지만 로직 처리의 목적이 아닌 이름 그대로 ‘Mark-Up’을 한 언어이기 때문에 프로그래밍 언어로 보긴 어렵습니다.

백엔드(Back-End)

Back-End의 영역은 사용자가 보고자 하는 내용을 처리하기 위한 요소들이 포함되어 있습니다.
위 그림에서 볼 수 있듯이 웹 브라우저는 내용을 보여주기 위해 웹서버에 요청(Request)를 보내고, 웹서버는 그것에 대한 처리를 마친 결과물을 응답(Response)해주는 구조입니다.

벡엔드에 포함되는 요소로는 서버(OS), 데이터베이스(Database), Web Framework(Spring 등), Programming Language(Java 등)가 포함됩니다.
대부분의 요소는 백엔드에 포함되어 있는데, 제가 다루는 Infra 영역이 대부분 이 영역에 포함되는 요소입니다.

정리(Review)

간단하게 프론트엔드와 백엔드의 개념에 대해 다뤄보았습니다.
많은 업체에서 이 영역들을 구분하는 이유는 워낙 규모가 방대해진 서비스를 다루다 보니 풀스택(Full Stack)으로 다루기에는 버거운 사항들이 있기 때문입니다.

위와 같이 구분을 하여 각 요소별 전문가를 채용하여 각 업무를 수행하기 위해 위와 같은 개념이 발생되었고, 업무 협업을 위해서는 자신의 업무영역이 아니더라도 어느정도는 알고 있어야합니다.

지금까지 Web Front-End & Back-End 구분 정리 포스트였습니다.
Web과 관련된 다른 포스트를 보고 싶으시다면 여기를 클릭해주세요.

Updated by 19.08.18 Web Front-End & Back-End 구분 정리
Site : @ThinkGround
Instagram : @thinkground_official
Facebook : @ThinkGround
Twitter : @ThinkG_Flature

Leave a Reply