[Web Applicateion]서버 사이드와 클라이언트 사이드,백앤드와 프론트앤드

웹 어플리케이션을 만들거나 그 정도 까진아니더라도 웹을 손을 대다보면 서버 사이드(Server Side)와 클라이언트 사이드(Client Side),

백엔드(Back End)와 프론트엔드(Front End)라는 이야기를 주로 듣는다.

일단 백엔드와 서버사이드는 같은말이고 클라이언트사이드와 프론트엔드는 서로 같은 뜻이다. 이를 숙지하고 진행하는것이 필요하겠다.

처음 들으면 이게 뭘 의미하는지 모를것이다. 백엔드가 뭐고 프론트엔드가 뭔가?

그래서 인터넷을 검색해보면 보통 이렇게 설명한다.

백엔드는 로직, 시스템, 기능이며 프론트엔드는 화면에 보여주는 뷰이다.

근데 이말이 뭐 틀린말은 아닐수 있지만 정말 애매모호한 말이라고 할 수 있다.

이 설명이 틀린것은 아니지만 저게 틀린말이 아니려면 웹을 이해하고있다는 전제가 필요하다.

한편 내부적으로 설명하지않고 그냥 언어적으로 설명한다면 이런 설명역시 가능하다.

백엔드는 PHP,JSP,ASP,ASP.Net,NodeJs,Flask등으로 이루어져있고 프론트엔드는 html, css,자바스크립트로 되어있다.

이 설명은 정말 여지없이 정답이라고 할 수 있다만 이는 sin90이 1이라는걸 이야기해주지만 왜 1인지 이야기하지않는것과 똑같다.

즉 결론은이렇다고 알려주는거지만 왜 얘들이 프론트라고 불리는지는 모르는 것이다.

근데 인터넷을 어디를 뒤져봐도 제대로 설명되었는곳이 별로 없는거같다.

사실 설명하기 어렵다기보단 어짜피 쓰다보면 차이를 알게되서 그런것일 수 있다.

그러나 필자는 여기서 이 들에 대한 설명을 살짝 하고 넘어가려한다.

프론트엔드(클라이언트 사이드)란?

프론트엔드와 백엔드에 대한 설명을 하기전에 먼저 알아야할것은 프론트엔드이다.

프론트엔드를 이해해야 백엔드를 이해하기가 쉬워진다.

일단 웹브라우저에 대해서 알야한다. 웹브라우저를 모르는 사람이 없을것이다.

근데 여러분의 입장에서 도대체 웹브라우저라는 것은 뭔가? 그냥 인터넷을 하는 도구인가?

여러분이 개발자라면 이 웹브라우저는 "인터프리터"라는것을 확실히 알 필요가있다.

인터프리터는 코드를 읽어서 실행시켜주는 프로그램이다.

웹브라우저는 인터프리터로 html+css+js로 이루어진 코드를 읽어내에서 화면에 뿌려준다.

이제 이게 왜 프론트엔드(클라이언트 사이드)라고부르는지 이해가되야한다.

그래도 이해가 안된다면 좀더 풀어서 설명을 하겠다.

왜 이들이 클라이언트 사이드(사용자 측)이자 프론트엔드(앞단의 끝)라고 불리냐면 이들 실행되는 곳이 웹브라우저이기 때문이다.

이 까지 말해도 잘 모르겠는가? 퀴즈같은데 다시 잘 생각해보자.

웹브라우저는 어디에도 아니라 바로 "여러분"의 컴퓨터에 깔려있다.

즉 저 코드들이 실행되는 곳은 바로 "여러분의 컴퓨터"라는 것이다.

여러분은 사용자이다. 즉 사용자의 컴퓨터에서 사용되기에 클라이언트 사이드(사용자 측)이라고 불리며

프론트 엔드(앞단의 끝)이라고 불리는 이유도 "여러분들에게 보여주는 단"이기 때문이다.

웹어플리케이션의 경우 서버에서 사용자에게 html,css,js로 만든 하나의 페이지를 여러분에게 전송을 해준다.

여러분은 그 페이지를 받아서 웹브라우저라는 인터프리터를 돌려서 페이지를 화면에 뿌려주는것이다.

그러면 서버에서는 이 html,css,js로 이루어진 페이지를 여러분에게 제공하면된다.

백엔드(서버 사이드)란?

클라이언트 사이드가 사용자의 컴퓨터에서 실행되는 파일들(html,css,js)를 만드는 작업이라면

서버 사이드의 역활은 이 파일들을 만들어주는 역활을 하는 것이다.

위의 기술들은 html,css,js로 만든 파일을 생성할 수 있다. 그걸 만들고 화면에 뿌려주는 것이다.

근데 이게 프론트엔드와 뭐가 다르지라고 생각할 수 있는데 프론트엔드는 결국 완성된 결과물이라고 생각하면된다.

즉 프론트엔드 프로그래밍이라는 것은 완성된 결과물, 즉 도면을 만드는 프로그래밍이라고 생각하면된다는 것이다.

실제로 동적인 페이지를 만들 필요가 없다면, html,css,js를 그냥 론칭하면된다.

이경우 도면 = 결과물이므로 프론트엔드 프로그래밍만으로 페이지를 만들 수 있다.

그러나 페이지의 경우 경우에 따라서 코드가 달라질수 있다는 것이다.

예를들어서 html안에 a태그가 4개가 있다면 확장자가 html인 폴더의 경우 죽었다 깨어나도 a태그는 4개일 뿐이다.

이를 도식화하면 아래와 같다.

즉 html은 서버에서 손을 대제않고 바로 클라이언트측에 뿌려준다. 즉 서버에있는 도면 = 클라이언트에 뿌려줄 화면인것이다.

그러나 백엔드는 다르다. 왜냐하면 백엔드는 도면을 이용해서 뿌려줄 화면을 만들고 그것에 맞춰서 클라이언트에 전달하기 때문이다.

백엔드프로그래밍에서 jsp예로들면 jsp에서 페이지를 만든 도면은 프론트에 뿌려줄 화면과 일치하지않는다.

아직 서버에 코드상태로 있을때는 어떤 화면이 나올지 알 수 없다.

그러나 사용자의 입력이 있다면(어떤 형태로든) 거기에 맞춰서 프론트페이지로 변형되서 뿌려준다.

즉 프론트엔드 프로그래밍은 보여줄 화면을 어떻게 만들어질지 만들어주는것이며 따라서 특이 케이스만 만들면된다.

따라서 순수 마크업 언어인 html,css와 웹브라우저에서 동작할 기능을 담은 js만 만들면 되는 것이다.

그러나 백엔드는 코드가 존재하고 그 코드를 서버에서 프론트로 뿌려줄 코드로 번역한 후 사용자측에게 보낸다.

이 과정에서 백엔드는 서버를 사용할 수 있으며 연속성이 서버는 항상 켜져있으므로 영속성이 있는 데이터를 다룰수 있으며

서버에 DB가 있으므로 DB역시 사용할 수 있게된다.

프론트엔드 개발과 백엔드 개발은 무엇인가

사실 프론트엔드와 백엔드로 나누지면 통틀어서 말하기에는 무리가 있다.

프론트엔드의 경우 웹 퍼블리셔와 프론트 엔드 개발자로 나뉜다.

웹 퍼블리셔라는것은 개발자 범주에 속할 수도 있고 아닐 수도 있다.

필자 생각에는 개발지식이 옅다면 퍼블리셔로의 수준도 명확해지기 때문에 웹퍼블리셔는 꽤 많은 개발지식을 요한다.

웹 퍼블리셔는 순수하게 html, css를 이용한 템플릿을 만드는 작업을 하는 사람이다.

현재 아무 웹페이지나 열어서 소스를 뜯어보면 웹은 생각보다 아주 복잡하게 되어있다.

그리고 이는 성능, 그리고 파싱등에 여러가지 영향을 미친다.

즉 간결하게 짜며 성능이 좋게 짜기 위해서는 좋은 html정의가 필요하며 이 작업을 마크업이라고 한다.

그리고 세상엔 반드시 html, css로만 동작하는 기능이 아니라 js로 동작해야하는 기능들도 있다.

요즘 html은 동적인 화면이 많기 때문에 애니메이션 구성이나 js로직등이 동봉되어야 한다.

이 때 최소 banila js(아무것도 안 쓴 순수 js)나 jquery등은 사용할줄 알아야한다.

jQuery와 frontend 삼대장(React, Angular Vue)

프론트 엔드 개발자는 보통 두종류로 나뉘는데 웹 퍼블리셔 + 프론트엔드개발자와 순수 프론트엔드 개발자로 나뉜다.

뭐 전자가 특급개발자고 후자가 그저그런개발자라는 의미는 절대아니다. 그냥 작은 회사에서는 웹퍼블리셔를 고용할 돈이 없으므로

웹 퍼블리셔와 프론트 엔드 개발을 동시에 진행할 뿐이다.

여러분이 생각하는것 보다 현대 프론트엔드는 많은 동적인 화면을 요하기 때문에 이를 전문적으로 하는 사람이 필요하다.

그리고 이를 전문적으로 할 수 있는 프레임워크 역시 등장 하였다.

과거에는 jQuery의 기능으로 이를 만들었으나 점점 커지면서 jQuery구조로 만드는건 C언어로 GUI프로그램 짜는거 마냥 매우 어려운 일이 되었다.

그래서 이를 해결해 줄 수 있게 만들어진게 바로 React, Angular, Vue등의 프레임워크이다.

요즘에 프론트 엔드 개발자라고 하면 보통의 경우 이 React, Angular, Vue를 다룰 줄 아는 개발자를 뜻한다.

물론 이 의미는 훗날에는 바뀔 것이다.

백 엔드의 경우 너무 범위가 광범위 하기 때문에(사실 뒷단은 모두 백이라고 할 수 있으므로) 그냥 범용적으로 설명하겠다.

백엔드의 경우 과거와 옛날의 역활의 롤이 조금은 달라졌다.

과거의 경우에는 그냥 통합해서 back end서버였는데 이 경우 front end개발자는 사실상 들러리에 가까웠고,

전문적인 개발자라 보지않는 시선이 있었다(이러한 인식은 지금까지 내려온다.)

사실 현재의 웹퍼블리셔가 과거에는 프론트엔드 개발자의 위치에 있었다.

그래서 back end는 아주 많은걸 관리해야했다. 유저들 인증도 관리해야했고 session도 관리해야했다.

그러면서 뒤에 돌아가는 로직도 관리하면서 경우에 따라서 html소스를 읽어야할 필요도 있었다.(많았다)

그리고 이 화면을 어떻게 뿌려줄것인거에 대한 고민도 상당히 했었던 시대였다.

현재는 front end 서버(통칭 view서버)와 back end서버(통칭 api서버)가 분리 되어 있다.

인증과 관련되어서는 오히려 front end와 db개발자에게 역활이 넘어가버렸다(api서버는 인증을 관리하지 않는다.)

html소스도 이제 읽을 필요가 없고 화면에대한 고민도 할 필요가 없어졌다.

back end는 이제 api만 던져주면 되는 서버거 되어버렸으므로 

데이터를 어떻게 가공하며 이를 어떻게 의미있게 보여주는가가 주 목적이 되었다.

아직도 과거의 방식과 현재의 방식이 혼재되어 있다.

그래서 백엔드 개발자의 포지션이 딱 어떻다고 이야기하기는 힘들다.

이제 프론트 엔드와 백엔드의 차이를 알겠는가? 이래도 모른다면 사실 할말은 없다.

그러나 여러분들이 이해하길바라는 마음에 이 글을 작성했다는 것만 알아주길 바랄뿐이다.