웹 Front-End와 웹 Back-End

• 들어가기 전에
  

웹은 프론트엔드(FE)와 백엔드(BE)로 나눠진다. 우리가 인터넷을 하기 위해서 브라우저에서 웹을 탐색하곤 하는데, 이 때 사용자에게 보여지는 브라우저를 프론트엔드 또는 클라이언트라고 한다. 백엔드는 인터넷 사용자에게는 보이지 않는 것이다. 프론트는 물 위에 떠있는 백조의 몸, 백엔드는 물 아래에서 열심히 물갈퀴질을 하고 있는 백조의 발 쯤

• 학습 목표

1. 웹 프론트엔드에 대한 역할과 기술적 구성

2. 웹 백엔드에 대한 역할과 기술적 구성

• 핵심 개념

- HTML

- CSS

- JavaScript

- 클라이언트

- 서버

• 웹 프론트엔드

사용자에게 웹을 통해 다양한 컨텐츠(=리소스 : 문서, 동영상, 사진 등)을 제공한다. 또한 사용자가 마우스로 클릭하는, 키보드로 작성하는 요청(요구사항)에 반응해서 동작한다. 웹 브라우저는 이런 것들을 잘 처리할 수 있어야한다.

• 웹 프론트엔드의 역할

- HTML(Hypertext Markup Language) : 웹 컨텐츠를 잘 보여주기 위해 구조를 만들어야 한다. 

- CSS(Cascading Style Sheets) : 적절한 배치와 일관된 디자인등을 보기좋게 제공해야 한다.(스타일)

- JavaScript : 사용자의 키보드나 마우스등의 어떤 요청을 소통하듯이 부드럽고 빠르게 잘 반영해야 한다.(동작)

- Chrome 브라우저의 개발자 도구 : 개발자들이 개발 단계에서 확인을 위한 도구

· Elements 패널 : HTML 코드를 나타냄. HTML은 구조를 계층적인 형태로 표현한다.

· 픽셀 : 화면에 보이는 가장 작은 화소

· Network 패널 : 동적인 부분을 담당하는 JS 코드를 나타냄. 동적인 부분을 담당하기 때문에 소스코드 역시 복잡한 interactive한 요소들을 많이 담고있다. 

• 백 엔드(Back-End)

- 프론트 엔드(Front-End)가 프로그램의 앞 쪽, 클라이언트의 입장에서 개발이 진행된다면 백엔드(Back-End)는 프로그램의 뒷 부분쪽, 즉 서버 입장에서의 개발이 진행

- 프론트 엔드를 다른 말로 클라이언트 사이드(Client side)라고 말한다면, 백 엔드는 서버 사이드(Server side)라고 말한다.

• 백 엔드 개발자가 알아야 할 것들

- 백엔드 개발자는 클라이언트의 요청을 받아서 일을 처리한 후, 그 결과를 다시 클라이언트에게 넘겨주는 부분을 개발해야 한다. 그러려면?

· 프로그래밍 언어(Java, Python, PHP, JavaScript 등)

* JavaScript : 프론트 쪽에서 굉장히 많이 쓰던 언어. 거기에 여러 기술들이 추가되면서 백엔드에서도 처리할 수 있는 부분들을 가지고 있다.

· 웹의 동작 원리

· 알고리즘(Algorithm), 자료구조 등 프로그래밍 기반 지식

· 운영체제(ex. 서버로 자주 사용되는 리눅스 등), 네트워크 등에 대한 이해

· 프레임워크(전반적인 것들을 쉽게 사용할 수 있도록 반제품이라고 불리는)에 대한 이해(ex. Spring 등)

· DBMS(데이터를 쉽게 관리하기 위한)에 대한 이해와 사용방법(ex. MySQL, Orcale 등)