SMS처리 도우미
E-mail
  ldwin@naver.com
제목
  프로그래머 종류: 프론트엔드와 백엔드의 현실적인 면모와 학습 기간은? (From. 소스놀이터)


친구가 홈페이지를 만들어달라고 하는데, 동아리 소개 내용과 게시판만 있으면 된다고 합니다.
그럼 이 경우 어떤 언어로 홈페이지를 작성해야 할까요?
대부분 소개 페이지이니 html 만 배우면 될까요?
실제로는 HTML, CSS, 자바스크립트, 파이썬, 데이터베이스등이 필요합니다.
간단한 홈페이지에도 많은 언어가 필요한거죠.

 
그럼 각 언어를 어느 정도나 알아야하고 학습 기간은 얼마나 걸릴까요?
웹프로그래머로 입사하려면 모두 알아야 할까요? 아니면 하나만 알아도 될까요?

 
이 글에서는, 각 언어가 홈페이지에서 어떤 역할을 하는지..
백엔드 언어를 반드시 써야하는 경우는 어떤 것인지 설명합니다.
또한 프로그래머로 취업하기까지 걸리는 시간, 학습 기간등도 설명하고 있습니다.
​
​
​
먼저 홈페이지를 이해하기 쉽게 프론트엔드와 백엔드로 나눠보겠습니다.
프론트엔드(Front-end)는 사용자가 직접 보고 상호 작용하는 웹사이트 부분입니다
"사용자가 직접 보는 것"은 HTML + CSS로 구성되고
"상호 작용"하는 것은 자바스크립트가 담당합니다.
그럼 HTML과 CSS는 어떤 식으로 작동할까요?
HTML은 웹페이지의 "골격"을 형성하고, CSS는 이 골격에 "피부"와 "옷"을 입혀
디자인을 완성하게 됩니다 
예를 들어 볼까요?

<!DOCTYPE html>
​
 
<html>
<head>
   <title>나의 웹 페이지</title>
</head>
<body>

​
<h1>환영합니다!</h1>
<p>이곳은 나의 첫 웹 페이지입니다.</p>
<button>클릭하세요</button>

​
</body>
</html>
​
 
위 코드는 HTML로만 구성되었습니다
이러한 html은 크롬과 같은 웹브라우저에서 시각화하여 구동됩니다
h1 태그로 감싼 "환영합니다!" 문구는 다른 글보다 더 크게 표시됩니다.
핵심 내용인 셈이죠. 그래서 검색 엔진도 h1 태그를 중요하게 인식합니다
p 태그는 하나의 단락을 의미합니다. 그래서 줄바꿈으로 다른 요소와 구분되죠.
button 태그는 버튼을 의미해서 버튼을 그려줍니다.

​
이곳에 다음과 같은 CSS 코드를 추가하면..

​
h1 {
   color: navy;
}
​
p {
   color: gray;
}
​
 
button {
   background-color: blue;
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
}

​
h1 태그와 p 태그에 색깔이 지정되었죠.
button의 배경색깔과, 글색깔이 바뀌고, 테두리도 바뀌었습니다.
​
 
이처럼 HTML은 골격을 구성하고 CSS는 그 골격에 옷을 입히는 것과 같습니다.

​
프론트엔드가 "사용자가 직접 보고 상호작용하는 부분"이라고 했죠
여기서 "직접 보고"에 해당하는 HTML과 CSS를 설명했습니다.
그럼 자바스크립트 부분인 상호작용이란 어떤 것일까요?

​
상호작용은 사용자가 HTML과 CSS로 이루어진 웹페이지와 상호작용한다는 말입니다.
예를 들어, 무언가를 마우스로 클릭하거나
텍스트를 입력하거나... 하단의 내용을 보기 위해 스크롤하거나..
하나의 HTML 객체를 마우스로 드래그 앤 드롭하거나 하는 작용을 의미합니다.
이러한 상호 작용을 자바스크립트에서는 이벤트라고 부릅니다.
예를 들어, 마우스 클릭 이벤트는 click 이벤트라고 부르고..
텍스트 입력 이벤트로는 keypress 이벤트가 있습니다.

​
그럼 자바스크립트를 통해 웹페이지와 상호작용해볼까요?
버튼을 클릭했을때, p 태그의 색깔을 바꿔보겠습니다.

<!DOCTYPE html>
<html>
<head>
   <title>나의 웹 페이지</title>
   <style>
h1 {
    color: navy;
}
​
 
p {
    color: gray;
}

​
button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
   </style>
</head>
<body>

​
<h1>환영합니다!</h1>
<p id="myParagraph">이곳은 나의 첫 웹 페이지입니다.</p>
<button onclick="document.getElementById('myParagraph').style.color = 'blue';">
클릭하세요</button>

​
</body>
</html>

 
이 기능은 onclick 이벤트의 자바스크립트로 처리되었습니다
그리고 이것은 color를 blue로 바꾸어라는 명령이죠.
​
 
자바스크립트가 이벤트를 활용해 사용자와 상호작용하는 하나의 예를 보셨는데..
이것 외에 자바스크립트는 HTML과 CSS의 모든 요소에 접근 가능합니다.
버튼 클릭시에 p 태그의 내용을 바꿀 수도 있고.. p 태그를 없앨 수도 있고..
다른 웹페이지로 이동할 수도 있으며, canvas 태그를 삽입해 그림을 그릴 수도 있습니다.
혹은 음악을 재생할 수도 있습니다.
심지어 자바스크립트를 통한 HTML과 CSS 조작만으로 게임도 만들 수 있죠.
 
​
​
여기까지가 프론트엔드입니다. 즉, HTML, CSS, 자바스크립트 언어가 이에 해당하죠.
프론트엔드는 웹브라우저 단독으로 구동됩니다.
특정 사이트가 오프라인 모드로 구동되는 걸 보신적 있나요? 

 
이게 가능한 이유가 프론트엔드를 과거에 미리 다운로드해 두었고 
웹브라우저만으로 다운로드된 파일을 보여주는 것이기 때문입니다.

 
그래서 프론트엔드는 웹서버가 없더라도 누구나 손쉽게 코딩할수 있습니다.
단지 웹브라우저와 텍스트에디터만 있으면 돼죠.

 
이러한 프론트엔드는 하나의 직업을 형성합니다.
프로그래머로 입사하게 되면, 혼자서 웹사이트 전체를 만들지 않아요.
해야할 게 무척 많기에 파트별로 작업을 나누며
프론트엔드 부분 역시 웹사이트 작업의 일부로서 하나의 직업이 됩니다

 
프론트엔드만 제대로 다루면 프로그래머로 취업이 가능하고 능숙하면 대우도 잘 받습니다.
심지어 프론트엔드의 한 부분인 자바스크립트 하나만 아주 능숙하게 다룬다면
그것만으로도 수익 창출이 가능합니다.
자바스크립트로 만들어진 수많은 플러그인들은 자바스크립트 만으로 수익을 내고 있죠.
자바스크립트 언어 하나만이라도 매우 능숙하다면 이미 높은 수준에 이르렀다고 볼 수 있습니다.
물론 프론트엔드 개발자로 입사하는 경우, 어느 정도의 레벨만 달해도 충분합니다.
​
 
그럼 프론트엔드를 어느 정도 원활히 다룰려면 어느 정도의 기간이 필요할까요?
여러 달에서 1년 정도의 시간이 필요합니다.

 
HTML, CSS, 자바스크립트 각각에 1달의 기간을 배정하면 총 3개월이 되는데
사실 그 기간에 제대로 이해하려면 시험공부하듯 열심히 해야 합니다.
아울러 실전 프로젝트도 반드시 해야하는데 1~2개월의 기간이 걸리고
실전을 통해 배우는 양도 상당합니다. 프로젝트가 꼭 필요한거죠.

 
왜 프론트엔드만으로도 하나의 직업을 형성하는지 짐작이 갑니다.

​
 
이번에는 백엔드입니다.
백엔드는 사용자가 볼 수 없는 웹사이트의 "서버 측" 부분입니다.
백엔드는 프론트엔드만으로 커버할 수 없는 기능을 제공합니다

 
예를 들어, 대량의 데이터를 다루는 데이터베이스를 사용한다면
반드시 백엔드를 통해 구현해야 합니다.
백엔드 언어들은 데이터베이스를 접속해서 데이터를 가지고 오거나 데이터를 저장할 수 있죠.
그럼 데이터베이스에 보관해야 하는 데이터로는 뭐가 있죠?

 
회원 데이터와 게시판 데이터가 대표적입니다.
회원 데이터가 있어야 로그인 서비스가 가능합니다
널리 쓰이는 기본 기능인 로그인, 게시판을 구현하는 데에도
백엔드가 반드시 필요한 것입니다.
이런 백엔드 언어로는 무엇이 있을까요?
파이썬, 자바, PHP, Node.Js, C# 등이 있습니다.

 
사용자가 프론트엔드를 통해 데이터를 백엔드로 보내면 백엔드는 이것을 가공해서 데이터베이스에 보관합니다.
그리고 필요할때는 매우 빠른 속도로 저장된 데이터를 가지고 오죠.

사실 백엔드가 제공하는 기능 중, 데이터베이스 관리의 기능이 가장 많이 사용됩니다.
그 외에도 로그인 기능, 파일 다루기, 이미지 편집, 크롤링, 메일 발송등 다양한 기능을 제공하며
이는 프론트엔드와 달리 백엔드로만 구현 가능한 기능입니다.

 
아울러 백엔드는 인터넷 상에 노출된 웹서버에서 구동됩니다
사용자는 백엔드에서 처리한 결과만 프론트엔드를 통해 볼 뿐이죠
그래서 백엔드 소스는 다른 누군가에게 보여지지 않습니다.
어떤 웹페이지가 한참 로딩 중이라면 그 웹페이지를 처리하는 웹서버가 계속 처리중인거죠

 
이해를 높이기 위해 소스 코드를 준비했습니다

 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>Sum from 1 to 1000</title>
</head>
<body>
    <%
        int sum = 0;
        for (int i = 1; i <= 1000; i++) {
            sum += i;
        }
    %>
    <h1>1부터 1000까지의 합: <%= sum %></h1>
</body>
</html>
 
 1부터 1000까지의 합을 구하는 내용인데...
여기서  이 부분은 백엔드언어인 jsp입니다.
1~1000까지의 합을 계산해서 sum 변수에 저장하는 내용이죠.
이 부분은 백엔드라 웹서버에서 100% 구동됩니다
처리가 끝나면 그 결과를 사용자 웹브라우저에게 보내줍니다

 
<!DOCTYPE html>
<html>
<head>
    <title>Sum from 1 to 1000</title>
</head>
<body>
    <h1>1부터 1000까지의 합: 500500</h1>
</body>
</html>

 
이 내용만 사용자는 보게 되죠
사용자는 백엔드가 어떤 작업을 했는지 알수없습니다
이런 프론트엔드와 백엔드의 구동 원리를 알면 매우 유용합니다
예를 들어, 웹서버에 부하가 걸리면 백엔드 내용을 프론트엔드로 바꿔줄 수 있습니다. 
웹서버가 아닌 사용자 컴퓨터의 자원을 쓰는거죠.
한번 해볼까요?

 
<!DOCTYPE html>
<html>
<head>
    <title>Sum from 1 to 1000</title>
</head>
<body>
    <h1>1부터 1000까지의 합: <span id="sumResult"></span></h1>
    
    <script>
        var sum = 0;
        for (var i = 1; i <= 1000; i++) {
            sum += i;
        }
        document.getElementById("sumResult").textContent = sum;
    </script>
</body>
</html>

 
이 소스 역시 동일한 결과를 보여주는데 html과 자바스크립트만으로 작성하였기에
사용자 컴퓨터의 자원을 활용하게 됩니다 
 
​
그럼 백엔드를 입사 관점으로 바라보겠습니다
백엔드는 커다란 직업군을 형성합니다
구인 시장에서 프론트엔드 개발자로서 HTML,CSS, 자바스크립트를 묶어 구인을 하는 반면
백엔드 부분은 파이썬 가능자, 자바 가능자, PHP 가능자 등 언어 단위로 구인을 하죠.
즉 하나의 백엔드 언어를 제대로 구사하는 것만으로도 상당한 시간이 걸림을 알 수 있습니다.

 
다음 내용은 PHP를 배운다고 가정할때 스케쥴입니다
기초 공부 (2-4 주): PHP의 기본 문법, 변수, 연산자, 제어 구조 등을 배웁니다.
중급 학습 (1-2 개월): 데이터베이스와의 상호작용, 폼 데이터 처리, 세션 관리 등을 배웁니다.
실전 프로젝트 (1-3 개월): 실제 웹 애플리케이션을 구축하면서 배운 내용을 실습합니다.
고급 주제 (변동적): 객체 지향 PHP, 보안, 프레임워크 등 고급 주제를 학습합니다.
 

 
기초, 중급, 프로젝트까지 수행하면  상당한 시간이 걸리죠
​
 
이에 더해 백엔드의 주작업이 데이테베이스 처리이기에 데이터베이스 학습도 필요합니다

​
그러면 언제 백엔드를 써야하는지 생각해 볼까요?
단순히 기업 정보만 보여주는 웹페이지라면, 프론트엔드만으로도 가능합니다.
단순 홍보형 홈페이지인거죠.
다른 경우로 기업 정보에 더불어 게시판이 들어간다면 백엔드를 써야합니다.
게시판은 웹서버의 데이터베이스에 저장되기 때문입니다.

 
회원 가입을 받는다면 역시 백엔드가 필요합니다.
메일 발송하기, 파일 저장하기 등의 추가 기능이 요구된다면 백엔드가 필요합니다.

​
 
프론트엔드와 백엔드로 나누어 차이를 설명하면서 웹사이트가 어떻게 구성되는지 설명드렸습니다.
이런 기본 개념을 잘 이해하면 웹개발 프로그래머를 위한 학습에 상당한 도움이 됩니다.

 
​​
트위터, 페이스북 공유 부탁드립니다~!
트위터   페이스북


  • 패스워드
           
X