프론트엔드(Front-end) 백엔드(Back-end) 그리고 개발자코드 보기(F12)

후후 참고로 내 블로그에 있는 컴퓨터 관련글은 정말 컴퓨터를 모르는 사람 대상이다.

특히 한 45세이상 되신분들이 컴퓨터에 관심을 가져 보고자 한다면 딱 좋은 글 같다. 흠흠...

​

먼저도 말했듯이

이제는 나만의 사이트를 가지고 소소한 나의 생활이나 남기고 싶은 글들을 내 홈페이지에 업데이트 한다면 그것 또한 컴퓨터를 배우는 동기부여가 되리라 확신한다.

​

특히, 어디서 들어보면 내 홈페이지를 가지려면 홈페이지 이름(주소)도 있어야 하고 홈페이지가 작동할 저장소도 있어야 온라인상에서 볼 수 있다. 하지만 이 모든 것을 처음부터 알려고 하고 차근차근 배우고자 한다면 젊은이도 아니고 시간도 없고 머리도 아프고 특히 적은 돈이라도 든다면 흥미는 아주 떨어지게 마련...

​

이 모든것을 해결하는게 나의 목적!!

 

프론트엔드 (Front-end)니 백엔드 (Back-end)니 듣도보도 못한 말이 지금부터 나오는데 타이틀은 거창하지만 가만히 보면 아무것도 아닌듯 하다. 물론 아주 심오하겠지만 우선 개념을 이해하면 좀 더 쉬워진다. 

 

우리가 매일 인터넷 특히 네이버를 보면서 검색외에 많이 보는 것이 아마도 뉴스사이트 일 것이다. (물론, 다른 항목도 있겠지만 나는 그렇다)

​

네이버를 예로 들면,

주소창에 네이버를 치거나 이미 자동으로 기본 홈페이지 주소가 등록이 되어 있으면 인터넷을 클릭하면 네이버 창이 열린다.

 

출처: 네이버

여기서 우리가 네이버 화면을 보고 있는 것은 전문용어로 'Frontend'라는 영역이다. 즉, 겉모습이라는 이야기! 겉모습을 나타내기 위해서는 무언가 컴퓨터 프로그래밍같은게 작동해서 화면으로 보여진다는 말이다.

그런데, 그러한 프로그래밍이 작동해서 화면으로 보여질려면 어딘가에서 신호를 보내줘야 화면으로 보여지는데, 그 신호를 보내주는 곳이 'Backend'라고 한다.

​

TV를 예로 들면 방송국이 Backend고 가정의 TV 화면이 Frontend이다. 이런 용어는 뭐 누군가 자기들끼리 지었으니 일단 인정하고 아니꼽지만 넘어가자. 괜히 영어로 만들어서 있는척이다. 흠...

​

좀 더 이해를 돕기위해 도식화 해보면

 

출처: 구글 위키미디어

 

화면(Frontend)에서 보여지도록 어딘가 저장소(Backend 흔히 서버라고도 하는데)에서 상호 작동을 하는 개념이다. 물론, Backend의 모든 내용들이 Frontend에 보여지는것은 아니다. 화면에는 우리가 보여지도록만 만들어지는 내용들이 있고 이를 위해 복잡한 컴퓨터 프로그래밍으로 Backend에서 많은 일들이 벌어지고 있는 것이다.

Frontend에서 보여지는 것들은 아주 잘 정리되서 보기좋게 보여준다고 보면 될 듯 하다. 재미있는 그림하나 소개하면 인어공주를 예로들면 우리가 Frontend에서 보는 그림은 우리가 알고 있는 그모습 그대로이다. 하지만 그 뒷면 Backend에는 원래 인어공주의 상상못할 모습도 가능하다는 이야기이다. 훗

 

출처: https://www.geeksforgeeks.org/what-is-the-difference-between-front-end-and-back-end-web-development/

각설하고 더 들어갔다간 흥미를 다시 잃기 때문에 다시 네이버로 가서 뉴스사이트를 한번 보자.

요즘 워낙 코로나가 심각하다. 특히 다음과 같은 뉴스가 실렸다.

 

출처: 네이버, 서울신문

이 뉴스가 바로 우리 화면에 뜨는 Frontend 영역이다. Frontend의 기본은 뉴스의 내용을 입력하고 Backend로 보내서 저장하고 그 저장된 내용이 Fronend에 반영이 되는 원리다.

기사를 입력하는 과정에서 보면 기사가 계속 쓰여지고 있고 수정하고 최종적으로 승인받고 해야 서버인 Backend로 보내서 최종 기사 송출할 수 있다. 

 

그럼 다음 시간부터 조금씩 구조에 대해 이야기 해보자.