1. 웹 프로그래밍 기초 - #1. 웹 개발의 이해, FE/BE (2)

본 게시물의 내용은 edwith 부스트코스 - 웹 프로그래밍 강의를 수강한 내용을 바탕으로 한다. 들은 내용을 정리하고, 복습에 용이하도록 정리해놓은 게시물이다.

이번 차시의 강의는 다음과 같다. 배경색이 들어간 부분이 이번 게시글에서 다룰 내용이다. 

1. 웹 프로그래밍 기초 - #1. 웹 개발의 이해, FE/BE

1). 웹 프로그래밍을 위한 프로그램 언어들

2). 웹의 동작(HTTP 프로토콜 이해)

3). 웹 FE와 웹 BE

4). Browser의 동작

5). Browser에서의 웹 개발

6). 웹 서버

7). WAS(Web Application Server)

 

 

3). 웹 FE와 웹 BE

필자는 과거에 A모 뷔페식 식당에서 홀 서빙 아르바이트를 한 적이 있다. 처음 출근을 해보니, 직원들이 FE/BE로 나누어져 있었고, 그때 나는 이 뜻이 무엇인지 알지 못했다. 아르바이트를 하다 보니, FE 직무는 홀 서빙과 고객 안내, 주문, 결제 등을 하는 아르바이트생 및 직원이었고, BE 직무는 주방에서 음식을 조리하는 아르바이트와 직원이었다. 즉, FE는 사용자와 접촉하는 것을 의미하고, BE는 사용자와 직접 대면하지는 않고, 조리실 내부에서 일어나는 맡은 직무를 수행하는 것이었다. 

 

웹 프론트엔드

이와 마찬가지로, 웹 Front-End라는 것은, 웹을 통해서 사용자가 제공받는 부분을 말한다. 단순하게 생각해보면, 우리가 웹 브라우저(크롬, 사파리, 인터넷 익스플로러 등)을 사용해서 웹 서핑을 할 때 보는 화면을 말한다. 웹 프론트엔드는 그냥 만드는 것이 아니라, 주어진 역할을 잘 수행해야 한다.

 

웹 프론트엔드의 역할

• 웹 콘텐츠를 잘 보여주기 위해서, 구조를 만들어야 한다. 신문이나 책이 일정한 구조나 개요 없이 줄글로 쭉 써져있다면 사용자는 서비스를 사용하기 힘들다. 이러한 부분은 HTML로 구현한다
• 적절한 배치와 디자인을 통해서 보기 좋게 만들어야 한다(미적 감각이 없는 필자는 이러한 부분을 경시하는 경향이 있었으나, 디자인이 좋은 서비스는 구린 서비스보다 훨씬 더 많은 관심을 받는 것을 보고 이 부분도 굉장히 중요하다고 생각하게 되었다). 이는 CSS로 구현한다
• 사용자의 요청을 반영해야 한다. 학부 수업에서, 프로그래밍 과제를 할 때에도 사용자로부터 입력을 받아서 그 입력에 대한 결과를 출력하는 것이 보통이다. 마찬가지로 웹 서비스를 만들 때에도 사용자가 입력하는 요청에 맞는 결과를 출력해야 한다. 이는 Javascript로 구현한다. 

 

웹 백엔드

웹 백엔드란 사용자와 직접 접촉하지는 않지만, 프론트엔드에서 정보를 처리 또는 저장하고, 요청에 따라 정보를 내려주는 역할을 한다. 상대적으로 프론트엔드보다 자료구조, 알고리즘 등의 프로그래밍적인 사고가 필요하다. 또한 웹의 동작 원리, DBMS, 네트워크 등에 대한 포괄적인 지식이 필요하다고 할 수 있다. 

 

 

여기까지 사용자와 직접 접촉하는지를 기준으로 웹을 FE, BE로 나누고 각각의 기능과 역할에 대해 정리해보았다. 이해를 돕기위해 이런저런 예시를 들었는데, 저런 식당알바에서 봤던 단어들이 웹 프로그래밍을 공부하는데 나와서 놀랐따. 아무튼 다음 게시물에서는 브라우저에 대해 정리를 하도록 하겠다.