[네트워크 기초] 5. 웹 프론트엔드, 백엔드

이전글

[네트워크 기초] 4. 라우터

 

웹 프론트엔드, 백엔드

 

 이번 글에서는 웹 프론트엔드와 백엔드가 무엇인지에 대해 알아보겠습니다.

 

1. 웹 정리

 먼저 웹에 대해 정리하고 시작하겠습니다.

 

 웹은 인터넷 기술을 활용한 정보 공유 시스템입니다. HTTP, HTTPS 프로토콜을 사용합니다. 프로토콜을 이용해 정보를 받아오려면 받아오려는 데이터가 있는 주소인 URL이 필요합니다. URL로 데이터를 요청하면 문서를 받아올 수 있는데 이 문서를 웹 페이지라고 합니다.

 

 웹 페이지는 HTML이라는 마크업 언어로 작성되어 있습니다. 그리고 CSS라고 하는 언어를 사용해 디자인을 하고, 자바스크립트라는 프로그래밍 언어를 사용해 사이트를 동적으로 동작하게 만듭니다.

 

 이제 이 내용을 바탕으로 본격적인 내용을 시작해 보겠습니다.

 

2. 웹 환경의 변화

 초창기의 웹은 HTML을 중심으로 이뤄져 있었습니다. HTML만으로도 불러온 내용을 읽는 것은 문제가 없었지만, 복잡한 형태의 상호작용은 불가능했습니다. 보다 정확히는 동적으로 동작하지는 못했습니다.

 

 조금 더 풀어서 설명해 보겠습니다. 웹 사이트는 HTML이라고 하는 마크업 언어로 작성된 문서입니다. 웹 사이트를 서버에 요청해 받아오게 되면 웹 브라우저가 HTML 문서 내용을 읽어 보기 좋게 출력해 줍니다.

 

 만약 불러온 HTML 문서를 수정해야 한다면 어떻게 해야 할까요? 예를 들어 어떤 버튼을 누르면 문서에 있는 내용이 변경되게 만들려면 어떻게 해야할까요? 안타깝지만 HTML만으로는 불러온 문서를 수정하는 것이 불가능합니다. 즉, 사이트가 동적으로 동작하는 것이 불가능합니다.

 

 그래서 등장한 것이 바로 자바스크립트입니다. 1995년 자바스크립트가 등장하면서 웹 사이트가 드디어 동적으로 동작할 수 있게 되었습니다. 예를 들어 HTML에 있는 버튼을 누르면 웹 브라우저가 버튼과 연결된 자바스크립트 코드를 읽고 실행하여 코드에 적힌 내용을 실행하는 식으로 동작할 수 있게 된 것입니다.

 

 다음 해인 1996년에는 CSS가 등장하여 HTML 문서 내에 작성하던 스타일 속성을 외부 파일로 분리할 수 있게 되었습니다. 이제 페이지가 동적으로 동작하면서 조금 더 다채로운 디자인 작업이 가능해진 것입니다.

 

 웹 사이트가 더 많은 일을 할 수 있게 되면서 웹은 점점 더 복잡해져 갔습니다. 초기에는 자신을 소개하는 정적 페이지를 하나 띄우는 정도였다면 이제는 로그인을 하고, 사용자 정보를 불러오고, 결제정보를 처리해야 하는 수준까지 복잡해졌습니다. 따라서 웹 개발도 조금 더 고도화할 필요가 생겼습니다.

 

 이때 등장한 것이 프론트엔드와 백엔드입니다. 사용자가 웹 페이지와 직접 소통하는 UI 부분은 프론트엔드로, 사용자 데이터 등 각종 데이터를 가공하고 처리하여 사용자의 요청을 처리하는 부분은 백엔드로 분리하는 시대가 온 것입니다.

 

 

3. 프론트엔드

 사용자가 직접 접하는 사이트와 UI 등을 웹 프론트엔드라고 합니다. 실제로 사용자가 웹 브라우저에서 보고 조작하는 부분이 프론트엔드이기 때문에, 프론트엔드 개발에는 웹 사이트를 구성하는 기본 단위라고 할 수 있는 HTML, CSS, 자바스크립트 등이 사용됩니다.

 

 

4. 백엔드

 사용자가 직접 접하는 사이트가 아닌 뒤에서 데이터 등을 처리하는 부분을 백엔드라고 합니다. 예를 들어 보겠습니다. 프론트엔드만 존재하던 웹 세상에 자바 스크립트가 도입되고 로그인 기능을 추가할 수 있게 되었습니다. 이제 회원가입 기능도 추가되고 사용자 정보를 불러오고 저장할 수 있게 되었는데 이 데이터를 어떻게 저장하고 처리해야 할까요? 이때 필요한 것이 바로 웹 백엔드입니다.

 

 자바스크립트가 등장하고 웹 사이트를 동적으로 조작할 수 있게 되면서 특정 서버로 원하는 데이터를 불러오는 것도 가능해졌습니다. 회원가입이나 로그인을 위해서는 서버에게 추가적인 요청을 보내야 하는데 이것이 가능해진 것입니다. 서버는 이러한 추가적인 요청을 받아서 처리해야 합니다. 이때 필요한 것이 웹 서버 프로그램이나 데이터를 저장할 수 있는 데이터베이스입니다.

 

 결론적으로 현재의 웹은 사용자 - 웹 프론트엔드 - 웹 백엔드 - 데이터베이스 순으로 동작합니다. 사용자는 웹 프론트엔드 단의 UI를 조작하고 로그인이나 회원가입 등을 진행합니다. 이때 발생하는 서버 요청은 웹 백엔드에서 처리하게 됩니다.