본문 바로가기
○ WEB/19.03 FastCampus_HTML

[Boost Web] 2. 웹 Front-End 와 웹 Back-End

by 0ver-grow 2019. 7. 4.
반응형

웹은 프론트엔드(FE)와 백엔드(BE)로 나눠집니다.

우리가 인터넷을 하기 위해서 브라우저에서 웹을 탐색하곤 하는데요.

브라우저를 프론트엔드 또는 클라이언트라고도 합니다.

웹백엔드는 인터넷 사용자에게는 보이지 않는 것이죠. 

 

프론트엔드

 

웹프론트엔드?

사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)를 제공합니다.

또한, 사용자의 요청(요구사항)에 반응해서 동작합니다.

다른 말로 클라이언트 사이드라고 한다.

클라이언트의 입장에서 개발 진행

 

웹프론트엔드의 역할

  • 웹콘텐츠를 잘 보여주기 위해 구조를 만들어야 합니다.(신문,책등과 같이) - HTML
  • 적절한 배치와 일관된 디자인 등을 제공해야 합니다.(보기 좋게) - CSS
  • 사용자 요청을 잘 반영해야 합니다.(소통하듯이) - Javascript

HTML 코드 예시

원하는 문서의 구조를 프로그래밍 언어로 표현해야 합니다.

HTML이라는 것은 그 구조를 잘 표현해 줍니다.

 

스타일 - CSS 코드예시

웹페이지를 꾸미기 위해서는 각각의 HTML 태그(문서의 구조를 표현한 각 조각 단위)를 꾸미기 위한 규칙이 필요합니다

CSS는 이를 표현할 수 있는 프로그래밍 언어입니다.

 

동작 - JavaScript 코드예시

HTML,CSS를 이리저리 움직이고 변경할 필요가 있을 거예요.

JavaScript가 그걸 해줍니다.

 

백엔드

 

백 엔드(Back-End)란?

backend는 정보를 처리하고 저장하며, 요청에 따라 정보를 내려주는 역할을 한다. 가령 쇼핑몰이라면, 상품 정보를 가지고 있고, 주문을 받아서 저장하고, 사용자가 관심있어 하는 상품을 골라주는 역할이 back-End의 역할이다

다른 말로 서버 사이드라고 한다.

서버 입장에서 개발이 진행

 

백 엔드 개발자가 알아야 할 것들 (클라이언트의 요청을 해결하기위해.)

  • 프로그래밍 언어(JAVA,  Python, PHP, Javascript 등)
  • 웹의 동작 원리
  • 알고리즘(algorithm), 자료구조 등 프로그래밍 기반 지식
  • 운영체제, 네트워크 등에 대한 이해
  • 프레임워크에 대한 이해(예: Spring)
  • DBMS에 대한 이해와 사용방법(예: MySQL, Oracle 등)

 

 

반응형