웹 프론트엔드와 백엔드

개요

웹 개발을 크게 나누면, 보통 Front-End 와 Back-End 로 나누어지게 됩니다. 이를 알아봅시다. 

 

웹 프론트엔드

사용자에게 웹을 통해 다양한 데이터(문서, 동영상, 사진)를 보기좋게 만들어 제공한다.

사용자의 동작에 따라 반응하며, 실질적으로 눈에 보이는 부분이라고 생각하면 된다.

 

웹 프론트엔드가 하는일

웹 컨텐츠를 어떻게 보여줄 것인지 기본적인 구조를 작성합니다 - HTML

적절한 배치와 디자인을 제공합니다. - CSS

사용자의 요청을 읽고 반응하여 원하는 모양으로 바꾸어줍니다. - Javascript

* Javascript는 Java와 아무련 관련이 없다. 자바의 인기의 편승할려고 비슷하게 이름을 지은건데, 상표권이 문제가 되어 공식 표준이름은 ECMA Script으로 바꾸었지만, 아직까지도 그냥 자바스크립트라고 부릅니다.

​

HTML (HyperText Markup Language)

하이퍼텍스트(= 데이터, 콘텐츠) 제작 언어

원하는 문서의 구조와 데이터를 프로그래밍 언어로 표현합니다.

기본적인 뼈대 작업으로, 이렇게 만들어진 구조를 이용하여 CSS와 Javascript로 완성.

* 기존에는 CSS와 HTML이 통합 되있었지만, 규모가 커질수록 복잡하고 관리하기 더러워서 분리되었습니다.

<!--HTML에서 제공하는 <태그> 를 이용하여 데이터의 뼈대를 만들고 구조화합니다.-->

<h1> 제목입니다. header라는 의미죠 </h1>
<section>
   <h2> header2는 소제목이겠죠? </h2>
    <p> paragraph, 문단을 나타냅니다. 영어 앞글자를 알면 기억하기 쉬워요. </p>
   <h2> 소제목2 </h2>
    <p>  문단2 </p>
</section>
<footer>email : crong@kdd123.com</footer>

 

CSS (Cascading Style Sheets)

계층적으로 작성하는 디자인 시트.

HTML에 만든 뼈대 조각들을 배치하고 꾸미는 언어.

/* HTML 에 이름을 붙이거나 클래스를 지정하여, 해당 부분을 원하는 모양으로 바꿉니다. */

.window-header-icon { /* 윈도우-헤더-아이콘이라는 이름을 가진 부분을*/
left: -28px; /* 위치를 입맛대로 변경합니다. */
position: absolute;
top: 8px
}

.window-header-inline-content {
cursor: default;
display: inline-block;
margin: 4px 6px 0 0
}

 

JavaScript (ECMA Script)

HTML, CSS로 완성된 '정적인' 페이지를

사용자의 요청에 따라 변경하거나, 어떻게 작동할지에 대한 코드를 작성하는 언어.

출시 당시 자바가 인기있기도 했고, 웹 사이트에서 자바처럼 코딩할 수 있는 언어라는 의미로 JavaScript라 지었습니다.

그 외에 점들은 자바와 아무런 관련도 없습니다.

let aCardList = [];

for (var i = 0; i < cardList.length; i++) {
	let str =`${cardList[i]}번째 카드`;
	let id = `list-${cardList[i]}`;
	aCardList.push(<li id={id} key={i} draggable='true' onDragStart={dragStart}> {str} </li>)
}

 

웹 백엔드

사용자에게 보이지않는 실잘적인 작동 부분. HTML, CSS를 제외한 모든 것.

받은 정보들을 처리하고 저장하며 요청에 따라 원하는 데이터를 제공하는 역할을 합니다.

백엔드는 범위가 너무 넓어 보통 파트별로 개발자가 나뉩니다.

​

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

- 프로그래밍 언어(JAVA, Python, PHP, Javascript 등)

- 웹의 동작 원리

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

- 운영체제, 네트워크 등에 대한 이해

- 프레임워크에 대한 이해(예: Spring)

- DBMS에 대한 이해와 사용방법(예: MySQL, Oracle 등)

​

개발자

참고로 대한민국에서 회사 직군으로 대충 나눠보자면 아래와 같습니다.

다만 말 그대로 '이름'을 나눈 것 뿐이지, 꼭 저렇게 나눠서 일을 하는 것은 아니다.

 

기획 : 이름 그대로 웹페이지를 기획하고 도안을 만듬.

웹 디자이너 : 이미지등 소스를 편집하고 만듬 (포토샵, 일러파일)

웹 퍼블리셔 : 받은 이미지를 알맞게 배치하고 HTML, CSS을 편집함. 프론트엔드와 비슷함.

프론트엔드 : HTML, CSS, Javascript등을 이용하여 사용자에게 보이는 UI와 데이터를 처리.

그림 출처 www.emptydream.net