프런트엔드에 대해서 알아봅시다.

 

여기를 검색해서 들어오신 분이라면 대부분 웹 개발에 대해서 입문하셨다고 생각합니다.

그래서 먼저 웹 개발을 위한 환경 세팅을 하기 전에 웹개발에는 무엇이 있는지부터 알아보겠습니다.

웹 개발은 크게 두 개로 구분지을 수 있습니다.

 

프런트엔드와 백엔드

 

바로 프런트엔드와 백엔드입니다. 프론트엔드 개발은 지금 여러분이 보고있는 화면 구성의 전체적인 부분을 담당합니다.

어려운 말로는 '사용자가 보는 인터페이스 구성을 개발한다'고 할수 있겠습니다. 네이버 홈페이지로 설명하자면 눈에 보이는 모든 요소를 개발한다고 생각하면 됩니다. 저는 프론트엔드 개발을 하고 있기 때문에 앞으로 백엔드 설명을 제외하고 프론트엔드 설명만 할 예정입니다.

 

제가 임의로 네이버 홈페이지의 영역을 나눠봤습니다. 위의 이미지 사진과 같이 홈페이지를 개발할 때 각가의 영역을 구분하여 개발하게 됩니다. 모든 홈페이지가 비슷하게 되어있습니다.

홈페이지 영역 : header, nav, aside, article, section, footerd 등등

이처럼 홈페이 개발을 할때 영역을 나누는 이유는 구분하기 위한것도 있지만 개발할 때 편리하기 때문입니다. 더 나아가서 HTML에서는 class 또는 id를 통해 각각의 태그요소에 원하는 이름을 붙여줄 수 있습니다. 아래에 있는 HTML소스는 네이버 홈페이지의 일부 입니다. 요소들을 확인해보면

<div class="logo_area"> 
<h1 class="logo_default"> 
<a href="/" class="logo_naver" data-clk="top.logo"><span class="blind">네이버</span></a> 
</h1> 
</div>

div태그에 class, h1태그에 class가 있는 것을 알 수 있습니다. 또 다른 것을 살펴 보겠습니다.

 

<div id="u_skip"> 
	<a href="#newsstand"><span>뉴스스탠드 바로가기</span></a> 
	<a href="#themecast"><span>주제별캐스트 바로가기</span></a> 
	<a href="#timesquare"><span>타임스퀘어 바로가기</span></a> 
	<a href="#shopcast"><span>쇼핑캐스트 바로가기</span></a> 
	<a href="#account"><span>로그인 바로가기</span></a> 
</div>

이번에는 div태그에 id가 있습니다. 이런식으로 id와 class를 붙여 구분하기 더 쉽게 개발할 수 있습니다.

 

다시 본론으로 넘어오면 프론트엔드는 웹의 모든 인터페이스를 개발하는 것을 말합니다. 그래서 프론트엔드 개발자는 웹의 모든 인터페이스를 구성하고 개발하기 위해서 'HTML, CSS, Javscript'를 다룰 줄 알아야 합니다.

 

그 후에 백엔드 개발자분들이 서버, 데이터관리, 관련 개발까지 담당하게 됩니다. 백엔드 개발자분들은 프론트엔드 개발보다 폭 넓은 기술을 가지고 있고 그만큼 높은 개발역량이 요구됩니다. 사실 웹개발 관련 취업을 할 때 백엔드 개발이 더욱 더 높은 개발역량을 필요하기 때문에 연봉도 프론트엔드보다 백엔드개발이 높은 편입니다.

 

다음 글부터는 본격적으로 예제를 만들어보고 그 예제를 살펴보면서 HTML, CSS, Javascript를 설명하는 글을 계속해서 쓸 계획입니다.