1. 웹 프론트엔드(Front-End)
웹 프론트엔드는, 쉽게 말하자면 '사용자에게 보여지는 부분' 이라고 할 수 있습니다. 예를 들어, 구글의 검색결과 화면 혹은 네이버 포털의 첫화면, 네이버 뉴스의 기사 화면 등등이 있죠. 아래와 같은 화면을 웹 프론트엔드라고 할 수 있습니다.
부스트 코스 강의에서는 웹 프론트엔드를 이렇게 설명하고 있습니다.
사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)를 제공합니다.
또한, 사용자의 요청(요구사항)에 반응해서 동작합니다.
웹 프론트엔드의 역할을 적절히 수행하기 위해서는 HTML, CSS, Javascript 와 같은 언어를 필요로 합니다.
먼저 HTML은 웹페이지의 구조를 구축하기 위하여 작성됩니다. 크롬 개발자도구 F12를 눌러서 확인해보면
Elements 탭에 적혀 있는 언어가 바로 HTML 인데, 기본적으로 <h1></h1>처럼 여는 태그와 닫는 태그로 이루어져 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS는 HTML로 짜여진 웹페이지를 꾸미는 역할을 합니다. 각각의 HTML태그를 꾸밀 수 있으며, 그것들의 동적인 움직임이나 전환효과등을 표현할 수 있습니다. 보통 CSS는 HTML의 <style></style>태그 사이에 작성되거나, .css파일로 작성하여 HTML문서에서 불러올 수 있습니다.
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
Javascript는 웹페이지의 동적인 부분을 담당합니다. 그렇기 때문에 프로그래밍 하면 떠오르는 언어인 C나 Python, Java와 많은 부분이 닮아 있습니다. HTML과 CSS에 비하면 훨씬 더 이들에 가깝다고 할 수 있죠. Javascript는 HTML 태그, <script></script>에 작성하여 사용하거나, HTML문서에서 .js 파일을 불러오기하여 사용할 수도 있습니다.
let iceCream = 'chocolate';
if(iceCream === 'chocolate') {
alert('Yay, I love chocolate ice cream!');
} else {
alert('Awwww, but chocolate is my favorite...');
}
HTML CSS JavaScript - Tools and Resources
HTML, CSS and JavaScript are the parts of all websites that users directly interact with. Our free online tool collection...
html-css-js.com
2. 웹 백엔드 (Back-End)
웹 백엔드는, 한마디로 정의하자면 웹 프론트엔드에서 보이지 않는 작업들을 수행하는 부분이라고 할 수 있습니다. 아마존을 예로 들자면, 수많은 상품들이 있는데, 그 상품들의 데이터를 저장하고 관리하는 역할을 하는 셈이죠. 회원가입과 로그인에 필요한 로직들을 담당하기도 하며, '프론트엔드'에서 할 수 없는 일들을 처리할 수 있습니다. 그렇기에, 백엔드는 서버가 하는 작업의 전체라고는 할 수 없지만, 거의 대부분을 차지한다 정도로 정의할 수 있겠습니다.
백엔드는 수많은 프로그래밍 지식을 필요로 합니다. 기본적으로 프로그래밍언어인 JAVA, PHP, Javascript에 대해 친숙해야하고, 웹의 동작 원리와 알고리즘에 대해 기초적인 지식을 가지고 잇어야 합니다. 뿐만 아니라, 서버는 DB의 역할이 매우 중요하기 때문에 DBMS에 대해 잘 알아두어야 합니다. 실질적인 서버 하드웨어를 구축하기 위해서 운영체제와 네트워크에 대한 이해도 필요로합니다.
이전의 포스팅에서 Client와 Server에 대해 언급한 적이 있었습니다. 프론트엔드는 Client와 가깝기 때문에 Client-side, 백엔드는 Server와 더 가깝기때문에 Server-side라고 하는 점도 알아두시면 좋을 것 같습니다.
'events > 부스트코스' 카테고리의 다른 글
| [부스트코스] 1. 웹 프로그래밍 기초 | 1. Web개발의 이해 -FE/BE | 5) browser에서의 웹 개발 (0) | 2020.02.06 |
|---|---|
| [부스트코스] 1. 웹 프로그래밍 기초 | 1-4) browser의 동작 (0) | 2020.02.05 |
| [부스트코스] 1. 웹 프로그래밍 기초 | 1-2) 웹의 동작 (HTTP 프로토콜 이해) (0) | 2020.02.05 |
| [부스트코스] 1. 웹 프로그래밍 기초 | 1-1) 웹 프로그래밍을 위한 프로그램 언어들 (0) | 2020.02.05 |
댓글