프론트엔드 백엔드란 매우 자세히!

안녕하세요 마무입니다. 오늘은 거의 모든 회사가 반드시 운영해야 하는 "웹 서버"란, "HTML이란", "페이지란", "포털 사이트란", "CGI란", "프론트엔드 백엔드 차이"에 대해 자세히 설명하려고 합니다!

이 포스트를 읽으셔야 다음에 리눅스 웹 서버를 자연스러운 이해를 가지고 구축할 수 있을겁니다!

당연하지만 이 포스트부터는 서버를 구축하고 운영할 줄 아느냐는 리눅스마스터 1급 범위이기 때문에, '네트워크에 대한 기초 지식'과 '리눅스 기초지식'은 알고 있다 가정하고 포스트할 것입니다.

그러니 만약 밑에 쓴 개념을 모르신다면, 반드시 보고오시길 바랍니다 

네트워크, 인터넷, 브라우저, URL란 그리고 1~4계층의 개념

OSI 7계층, 프로토콜, 포트, TCP/UDP, 1계층~7계층

서버, 클라이언트란(마인크래프트 멀티 하는 법으로 설명)

-----목차-----

1. 하이퍼텍스트, HTML이란

2. 페이지란

3. 웹 서버 프로그램과 웹 브라우저란

i) 포털 사이트란

ii) 웹 서버 프로그램 구동 원리

4. CGI란

i) 프론트 엔드 백엔드 개발자 차이

5. 총 정리

--------------

여기서 못 찾은 정보는

리눅스 독학 페이지 : https://mamu2830.blogspot.com/p/blog-page_13.html

네트워크 독학 페이지 : https://mamu2830.blogspot.com/p/blog-page_15.html

에서 찾아보시면 있을 수 있습니다!

---

1. 하이퍼텍스트, HTML이란

우선 웹에서 다루는 파일의 기본 단위 언어인 HTML(HyperText Markup Language)이란 웹페이지의 뼈대를 구성하고 만들게 해주는 언어입니다. 

여기서 'Hypertext'란 Hyper(기존보다 훨씬 많은 것을 가진)Text(글)이란 뜻대로 뭔가 특별한 기능을 가진 글을 말합니다.

예시를 들자면 '리눅스 독학' 이란 '글'은 평범한 글이지만, '리눅스 독학' 이것은 클릭시 글자가 갖고 있는 주소로 이동되는 '특별한 글'인 것처럼 말이죠.

이러한 '특별한 글'이 바로 특별한 기능을 가진 '하이퍼텍스트(Hypertext)'라는 겁니다.(물론 정확히 말하자면 이건 하이퍼링크이며, 당연히 하이퍼링크도 하이퍼텍스트 안에 포함되는 개념입니다.)

그리고 전 'Markup'이란 Mark(기호, 눈에 잘 띄기위에 표시하는 것)up(눈에 보이게 나타남을 의미하는 'up')을 합친 단어라고 생각합니다.

그래서 이런 mark와 up을 합친 Markup이란 단어는 기호들(Mark)을 이용해 모니터에 시각적으로 나타나게하는(up)이라는 의미라고 말이죠.

왜 그렇게 생각을 했냐면 'HTML'은 대표적으로 "<button>버튼임</button>" 이런 식으로  '<', '>', '/' 와 같은 기호들을 이용해 문자를 감싸가지고, 모니터에 시각적인 어떤 기능을 구현하는 언어이기 때문이라 그렇게 생각을 했습니다.

실제로 "<button>버튼임</button>"이란 문자를 HTML로 해석해 웹브라우저로 열어보시면

이처럼 button이란 의미대로, 실제 클릭이 가능한 이미지가 생기는 걸 볼 수 있습니다! 

물론 저 코드는 기능은 구현하지 않았기에 눌러도 아무런 반응이 없지만 말이죠 ㅎㅎ 

그래서 이러한 Hyper와 markup, Language 뜻을 합쳐서 다시 정리하자면 'HTML'이란 어떠한 의미를 가진 글을 기호를 이용해서 볼 수 있게 만드는 언어라고 할 수 있는 것이죠!

아쉽지만 지금 HTML에 대해서 알려드린 이유는 웹 서버와 웹 클라이언트 상호작용을 이해하기 위해 설명한 것이라, 더 자세한 HTML 코드나 더 자세한 웹 개발 기술들은 '네트워크 독학 페이지'에서 다루도록 하겠습니다!

---

2. 페이지란

인터넷 공부를 첨 하신분들이라면 이 '페이지(page)'란 개념이 헷갈리는 분들이 있을 수 있다고 생각합니다. 왜냐면 저도 그랬었거든요 ㅎㅎ

이 '페이지(page)'란 어렵게 생각할 필요 없습니다. 우리가 책에서 "글들이 적혀있는 종이 면"을 '페이지'라 그러지 않습니까? 마찬가지로 웹 상에서 '글들이 적혀있는 면'이기 때문에 똑같이 '페이지'라고 하는 겁니다.

여러분들이 지금 보고 있는 이 포스트도 '웹 브라우저와 웹 서버 매우 자세히!'란 제목의 '페이지'죠

물론 좀 더 정확히 말하자면 이 '페이지'란 위에서 배운 HTML이란 것으로 확장자가 끝나는 파일(example.html)을 말합니다.

우리가 서버에 접속하면, 서버의 웹 프로그램이 이러한 ".html"로 끝나는 파일들을 클라이언트(우리)에게 전송을 하며, 이 때 전송받은 ".html'로 끝나는 파일을 우리가 쓰는 브라우저(크롬, 익스플로러, 오페라, 사파리 등등)가 해석 및 구현해 우리에게 시각적인 페이지 형태로 보여주는 것이죠!

아~ 압니다 압니다~ 갑자기 뭔가 엄청난 정보를 축약해서 말해서 이해가 안되죠? 차례차례 다시 설명해보겠습니다!

---

3. 웹 브라우저와 웹 서버 구조

우리가 인터넷에 접속하고 쉽게 상호작용하기 위해 사용하는 대표적인 프로그램이 있습니다. 바로 '브라우저(Browser)'라고 불리는 크롬, 익스플로러, 오페라, 파이어뿩스, 사파리 등등이죠!

이러한 브라우저의 기능은 사실 컴퓨터에서 포트 번호를 할당 받아, 프로토콜을 이용해 인터넷에 있는 수많은 웹 서버에 쉽게 접속하게 해주고, 웹 서버로부터 받은 데이터를 우리가 쉽게 볼 수 있게 그래픽 형태로 나타내주는 것입니다.

우리는 이런 편리한 브라우저의 기능 덕분에 복잡한 컴퓨터 공학 지식이나 수 많은 프로토콜 지식 없이도, 웹 서버(인터넷)을 이용할 수 있던 것이죠.

i) 포털 사이트란 

물론 여기서 이런 의문이 드실 수 있을 겁니다.

그럼 네이버나 구글은 뭐지??? 얘네도 브라우저인줄 알았는데...

음 정확히 말하자면 네이버나 구글은 '포털 사이트'며 말 그대로 우리가 검색 창에 적은 정보를 인터넷에 있는 수 많은 웹 서버에서 찾아 보여주는 웹 서버입니다.

그러니 정확히 말하자면 우리는 

웹 브라우저 접속-> 네이버란 웹 서버에 접속 -> 네이버 웹 서버에서 만들어 놓은 검색창 기능을 사용 -> 검색 결과로 나온 페이지가 있는 웹 서버로 또 다시 접속

이러한 과정을 통해 인터넷 서핑을 한다는 것이죠!

ii) 웹 서버 프로그램 구동 원리

자 그럼 이번엔 한번 수 많은 사람들이 브라우저를 이용해 접속하는 '서버'측에선 무슨 일이 일어나는지 봐봅시다.

자 한번 모르는 사람이 당신 개인 컴퓨터에 접속해 당신 컴퓨터를 같이 쓴다고 생각해봅시다, 상상만으로도 뭔가 화가 나고 소름 돋지 않습니까? 마치 우리 집에 모르는 사람이 무단으로 침범한 것 같죠.

그런데 이러한 해킹 같은 행위가 사실 우리가 특정 웹 사이트를 이용하는 행위와 다르지 않습니다. 

무슨 말이냐? 우리가 인터넷을 통해 웹 사이트를 이용하는 건, 회사 입장에선 모르는 사람이 회사 컴퓨터에 무단으로 침입하는 행위라는 것이죠.

그치만 다들 아시다시피 웹 사이트에서 제공하는 서비스를 이용하려면 당연히 그 웹 사이트 컴퓨터에 접속해야 합니다. 

바로! 여기서 발생하는 문제, 즉 그럼 "어떻게 허용한 범위 내에서만 클라이언트가 서버를 이용하게 만들 것인가"를 해결하기 위해 나온 프로그램이 바로 

'웹 서버 프로그램(Apache, Nginx, Google web server, IIS)'라는 것이죠.

우리는 이 웹 서버 프로그램을 이용해 클라이언트가 HTML 파일을 전송하는 기능인 HTTP(80), HTTPS(443) 프로토콜을 사용할 때만 서버에 접속할 수 있게 제한할 수 있고.

또 클라이언트가 서버 컴퓨터의 특정 지역(디렉토리를)을 벗어나지 못하게 제한할 수 있고

클라이언트에게 제공할 파일들을 설정할 수 있습니다.

그 외에도 더 세부적으로 클라이언트에게 보내거나 받을 데이터 범위를 제한하던가, HTTP의 헤더를 변경하거나, 특정 IP는 차단하는 등등 '웹 서버 프로그램'은 클라이언트가 웹 서비스만 이용할 수 있게 도와주는 프로그램이라는 것이죠.

---

4. CGI란

자 웹 서버 프로그램(아파치 등등)은 위에서 설명한 대로 주 목적이 클라이언트가 서버에서 웹 관련 서비스만 이용할 수 있게 제한이라고 했습니다.

당연히 이러한 웹 서버 프로그램은 본 목적에 맞게 프로그래밍 됐기에 그 이상의 기능은 당연히 못합니다.

그렇기에 웹 서버 프로그램에서 제공하는 기능 외 다른 기능을 해줄 프로그램이 필요하게 되죠.

그래서 우리는 무한한 가능성을 가진 프로그래밍 언어(C, JAVA, Python, javascript, Ruby, php 등등)을 이용해 웹 서버 프로그램이 하지 못하는 기능을 개발해 사용합니다.

그리고 이렇게 개발된 프로그램을 이제 웹 서버 프로그램과 연동해서 같이 사용하는 것이죠.

이렇게 말하면 이해가 잘 안되시죠? 한번 예를 들어 설명해보겠습니다.

예를 들어 우리(클라이언트)가 쿠팡이란 사이트에 들어가서 "닭 가슴살"을 검색하는 걸 생각해봅시다.

당연히 여기서 우리는 '닭 가슴살'에 관련된 모든 상품들이 화면에 출력되는 걸 기대하죠.

그런데 이러한 작업이 과연 웹 서버 프로그램만으로 가능할까요?

이러한 검색 및 관련된 데이터들의 출력 과정은 사실 간단히 보자면

우리(클라이언트)가 적은 "닭 가슴살" 글 포함 HTML이 서버로 전송 --> 클라에게 받은 데이터 중 "닭 가슴살" 글만 따로 분리 --> 분리한 "닭 가슴살"이란 글을 데이터베이스에서 검색 --> 검색된 데이터들 중 관련성 높은 데이터들만 따로 추려내기 --> 추려낸 데이터를 묶고 HTML에 포함 --> 검색 결과 HTML을 클라이언트에게 전송

이렇게 됩니다만, 웹 서버 프로그램이 가능한 영역은 변화가 없는 정적 요소들로, 사실상 초록색 영역뿐 입니다.

나머지 실시간 변화가 있는 요소, 즉 동적 기능들인 보라색 영역은 모두 서버에서 따로 개발한 프로그램 영역이라는 것이죠.

이렇듯 웹 서버 프로그램만으로 부족한 기능을 해주는 프로그램을 만들 때 쓰는 프로그래밍 언어를 우리는 "CGI(Common Gateway Interface)"라고 합니다.

그리고 이러한 CGI 언어로 주로 쓰이는 언어는 유명한 'PHP', 'Java', 'Python', 'Perl' 등등이 있습니다.  

i) 프론트 엔드 백엔드 개발자 차이

자 위에서 쿠팡을 예시로 들었던 

우리(클라이언트)가 적은 "닭 가슴살" 글 포함 HTML이 서버로 전송 --> 클라에게 받은 데이터 중 "닭 가슴살" 글만 따로 분리 --> 분리한 "닭 가슴살"이란 글을 데이터베이스에서 검색 --> 검색된 데이터들 중 관련성 높은 데이터들만 따로 추려내기 --> 추려낸 데이터를 묶고 HTML에 포함 --> 검색 결과 HTML을 클라이언트에게 전송

이 과정에서 맨 앞 "닭 가슴살 포함 HTML을 서버로 전송"을 제외한 나머지는 주로 '백엔드 개발자'가 하는 일입니다.

여기서 이런 생각이 드실 겁니다. 

왜 저 과정을 '백엔드(Backend)'라고 하는 거지? 라고 말이죠.

왜냐면 저 위에서 적은 과정은 클라이언트, 즉 우리에겐 보이지 않기 때문입니다.

우리에게 보이는 것은 그저 검색 창이 있는 쿠팡 홈페이지, 그리고 그곳에 "닭 가슴살"을 적었을 때 관련 검색어가 보이고, 검색을 눌렀을 때 "닭 가슴살" 관련 상품들이 보이는 페이지뿐이니까요.

아마 웹 개발에 대해서 잘 모르는 분들은 제가 위에서 적은 초록색과 보라색 글을 읽고 상당히 충격을 먹었을 겁니다 ㅎㅎ 왜냐면 지금까지 볼 수가 없었으니 당연히 몰랐기 때문이죠.

이처럼 클라이언트에게 안 보이는 뒷 단(backend) 영역을 프로그래밍을 한다고 하여, 이러한 개발자를 백엔드(Backend) 개발자라고 하는 겁니다.

자 그러면 반대로 우리(클라이언트)에게 보이는 것들을 개발하는 개발자는? 당연히 클라이언트에게 보이는 앞 단(Frontend) 영역을 개발한다 하여 '프론트엔드(Frontend) 개발자'라고 하는 겁니다.

물론~~~~ 웹 개발을 배우고 싶은 분 입장에서 볼 때 이렇게만 설명하면 너무나 아쉽죠~~(저도 옛날에 그랬거든요 ㅎㅎ)

그래서 좀 더 구체적으로 프론트엔드가 만드는 것들도 설명해보겠습니다.

자 제일 먼저! 제일 중요한 우리가 보는 페이지 골격, 즉 'HTML', 누가 만들까요? 주로 프론트엔드 개발자가 만듭니다.

HTML로 만든 페이지를 쉽게 알록달록 꾸미거나 위치를 조정하게 해주는 'CSS' 누가 사용할까요? 당연히 프론트엔드 개발자입니다.

아~~ 당연히 프론트엔드 개발자가 하는 개발은 이것 뿐만이 아니죠.

우리가 특정 사이트 회원가입을 한다고 해봅시다

회원 가입에서 당연히 기본적으로 '아이디', '패스워드', '이메일', 거주 지역', 등등을 적는 칸이 있을 겁니다.

여기서 패스워드는 최소 12 문자 이상 영문과 숫자, 특수 문자를 섞어야 한다고 합시다.

여기서 클라이언트가 패스워드에 겨우 "abc" 이렇게 조건에 맞지 않게 끔 적었다고 치죠 

이 때 클라이언트가 적은 패스워드가 12개 미만이며, 영문, 숫자, 특수 문자가 섞이지 않았다는 것을 어떻게 체크할 까요?

이 때 입력된 패스워드가 조건에 맞는지 체크하는 기능이 필요할 것이고, 이 때 사용하는 프로그래밍 언어가 '자바스크립트(Javascript)' 입니다.

또 패스워드가 조건에 안 맞을 시 클라이언트에게 빨간 글씨로 "패스워드는 최소 12 글자 이상, 영문과 숫자, 특수 문자가 섞여야 합니다."

라는 걸 띄우는 기능 어떻게 만들까요? 당연히 "자바스크립트"입니다.

이러한 패스워드 체크 기능 외에도 클라이언트가 보고 있는 브라우저에서 실시간으로 필요한(동적) 기능들은 모두 자바스크립트로 만듭니다.

그리고 앞에서 설명한 이러한 "HTML, CSS, Javascript"들을 이용해 클라이언트에게 보이는 대부분의 것을 개발하는 개발자가 "프론트엔드 개발자"라는 것이죠.

단순히 정리하자면 

클라이언트에게 보여지는 것, 실행되는 것들과, 서버에 데이터를 어떻게 전달할 지를 담당하는 것이 "프론트엔드 개발자"이며

클라이언트에게 전달 받은 데이터를 서버에서 처리해서, 필요한 형태로 다시 클라리언트에게 제공하는 역할이 "백엔드 개발자"라는 것이죠. 

물론 이건 웹 개발에서의 프론트엔드 개발자이고, 저희들이 즐겨하는 서버를 이용한 온라인 게임인 경우 클라이언트 개발자가 사용하는 언어는 C++, C#, JAVA 등등 될 수 있겠죠.

다시 말해서 저희가 게임을 실행하기 위해 각자의 컴퓨터에 설치하고, 더블 클릭해 실행하는 '게임'이 바로 '클라이언트 프로그램'이고 이런 게임을 만드는 클라이언트 프로그래머도 '프론트엔드 개발자'라 볼 수 있다는 것이죠.

---

 5. 총 정리

a) 'HTML(Hypertext Markup Language)'이란 기존 글자를 초월한 하이퍼텍스트와 기호를 통해 웹에서 시각적으로 표현하게 해주는 언어

b) '페이지(Page)'란 웹상에서 글이 적혀 있는 면이라서 '페이지'라 부르며, 브라우저가 실행한 ".html"이란 확장자를 가진 파일

c) '브라우저'란 서버와 손쉽게 연결할 수 있게 해주는 프로그램이며, 서버로부터 받은 html파일들을 해석해 페이지 형태로 우리에게 보여주는 역할

d) '포털사이트'란 우리가 원하는 정보를 가진 웹서버의 페이지를 광할한 인터넷에서 찾아서 보여주는 또 하나의 웹서버

e) '웹서버 프로그램'이란 클라이언트가 웹 관련 서비스만 이용할 수 있게 해주는 프로그램

d) 'CGI(Common Gateway Interface)'란 웹 서버 프로그램만으로 할 수 없는 기능을 구현하기 위해 연동하는 프로그래밍 언어며, 이러한 CGI에는 자바, 파이썬, PHP 등등이 있다

f) '프론트 엔드(클라이언트) 개발자'란 클라이언트에게 보여지는 화면(컴퓨터, 웹페이지)에서 작동하는 프로그램을 만드는 개발자

e) '백엔드(서버) 개발자'란 클라이언트로부터 받은 데이터를 서버 내에서 처리하고, 다시 클라이언트에게 보내는 기능, 프로그램을 만드는 개발자

---

오늘은 리눅스마스터 1급 범위인 웹서버를 구성하기 전 필요한 개념들을 다뤄봤습니다.

후.. 이 포스트도 작성하는데 2일이 걸렸네요...혹시나 틀린 정보가 있다면 댓글로 알려주세요! 바로 수정하겠습니다! 

다음은 어떻게 보면 재밌는? 서버 관리인이나 백엔드 개발자의 첫 걸음인 웹 서버를 설치하고 실행하는 것을 배워보도록 하겠습니다!

오늘 이 포스트가 도움이 되셨다면 따뜻한 댓글 및 팔로우 클릭은 저에게 큰 힘을 주어 포스트 퀄리티 향상 및 작성 속도 향상에 큰 도움을 줍니다!

그럼 다음에 더 좋은 포스트로 찾아뵙겠습니다!