현실적인 개발자 로드맵 - 무엇부터 배워야 할까요?

# 포스팅에서 사용된 코드의 전체 코드는 https://github.com/ITVillage-Kevin/roadmap-jsp 에서 다운로드 받으실 수 있습니다.

# 해당 포스팅은 IT Village 유튜브 채널(https://www.youtube.com/channel/UCSIvsntWA8aJ3Apoc7kTxig)에서도 시청하실 수 있습니다.



안녕하세요, Kevin입니다. 지난 시리즈에 이어 오늘은 개발자가 되려면 무얼 배워야 하는지에 대한 이야기부터 하겠습니다. 당연한 이야기이겠지만 개발자가 되기위해서 배워야 할 기술들은 상당히 다양하고 많습니다. 그리고 여기서 말하는 개발자는 주로 웹 개발자입니다. 아래 로드맵을 먼저 살펴보시면 "우와, 이걸 언제 다 배워??" 라고 한숨부터 나올지도 모르겠네요. ^^ 그래도 일단 스크롤을 내려서 끝까지 주욱 살펴보시길 권해드립니다.ㅎ

 

2018 웹 개발자 로드맵

웹 개발자 Intro

프론트엔드 로드맵

백엔드 로드맵

데브옵스 로드맵

[출처: https://github.com/devJang/developer-roadmap]


현실적인 개발자 로드맵

쭈욱 살펴 보셨나요? 참고로 위에서 보셨던 로드맵은 번역본이고 실제 작성자는 해외에서 활동하시는분으로 추정되며(작성하신분은 현재 독일 베를린에서 활동하시는 개발자인것 같습니다.), 해외에서 개발자로 일을 하고 싶으신 분에게 추천 드리고 싶은 좋은 로드맵이라고 생각됩니다. 물론 이 로드맵의 작성자분도 필수적으로 알아야 할 부분과 선택적으로 배우길 추천하는 부분을 색깔로 잘 표시해놨지만 저는 일단 이 로드맵 안에 있는 항목들 중에서 웹 개발자로써 취업을 하기 위해서 최소한으로 배워야 할 기술들만 추스려서 말씀을 드릴생각입니다. 특히나 한국의 특수한 상황을 고려해서 한국에서 취업하기에 조금이라도 더 용이한 기술들 위주로 말씀드리겠습니다. 이건 어디까지나 저의 개인적인 의견일 뿐이니 다른 의견을 가지시는 분이 있으시면 언제든지 댓글로 남겨주시면 감사드리겠습니다.^^

여러분들의 이해를 쉽게 하기 위해서 우선 간단한 코드를 먼저 보여드리고, 해당 코드에서 저희가 배워야 할 기술들을 추출해서 간단하게 로드맵을 한번 그려보겠습니다.

클라이언트 + 서버(JSP Model 1)

먼저 아래의 구성도를 한번 보도록 하겠습니다. 아래 구성도는 JSP Model1 방식의 아키텍처인데요. 웹 애플리케이션을 만들기 위한 서버측 언어로는 JSP, PHP, ASP 등이 있는데, 제가 Java 개발자이기때문에 JSP를 기준으로 우선 설명을 드리도록 하겠습니다. 

JSP 모델 1 구성도

[JSP 모델1 구성도]


JSP Model1 방식은 아주 오래된 개발 방식인데 이를 설명하는 이유는 오래된 기술을 간단하게 리뷰함으로 인해서 오늘날 사용하고 있는 최신 기술들이 얼마나 잘 발전되어 왔는지를 조금 더 체감을 할 수 있지 않을까라고 생각하기때문입니다. 이 기술을 어떻게 사용하는지도 중요하지만 이 기술을 왜 사용해야 하는지에 대해서 알고 난 후에 해당 기술을 사용하는것이 훨씬 중요하다는 생각때문에 JSP 까지 설명을 하고 있네요. ^^

구성도를 보시면 웹 브라우저에서 요청을 받은 서버에서 JSP를 통해 해당 요청을 가공한 후, HTML 페이지를 응답으로 돌려줍니다. 실제로 JSP 코드를 보시면 HTML 코드와 JSP 코드가 뒤섞여있는것을 보실 수 있습니다.

여러분들의 이해를 조금 더 돕기 위해서 초간단 TODO 애플리케이션을 만들었습니다. 아래 화면을 보시죠.

TO DO 웹 애플리케이션

[TO DO 웹 애플리케이션]


할일과 날짜를 입력하고 서버측으로 전송하는 간단한 애플리케이션인데요. 이 애플리케이션의 소스 코드를 보면서 저희가 배워야 할 기술들을 한번 추출해보도록 하겠습니다. 

그럼, JSP Model1 방식으로 구성된 TO DO 애플리케이션의 소스 코드를 보시죠.

==== todo_model1.jsp ====

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<head>
<meta http-equiv="Content-Language" content="ko"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title>TODO 등록</title>
<style>
#todoList {
border: 1px solid #8F8F8F;
width: 500px;
border-collapse: collapse;
}

th, td {
padding: 5px;
border: 1px solid #8F8F8F;
}
</style>
<script>
function registerTodo(){
var todoName = document.getElementById("todoName").value;
var todoDate = document.getElementById("todoDate").value;

if(!todoName){
alert("할일을 입력해주세요..");
return false;
}
if(!todoDate){
alert("날짜를 입력해주세요.");
return false;
}

var form = document.getElementById("todoForm");
form.submit();

}
</script>
</head>
<body>
<h3>TO DO 등록</h3>
<div>
<form id="todoForm" method="POST" action="/result_model1.jsp">
<input type="text" name="todoName" id="todoName" value=""/>
<input type="date" name="todoDate" id="todoDate" value=""/>
<input type="button" id="btnReg" value="등록" onclick="registerTodo()"/>
</form>
</div>
<div>
<h4>TO DO List</h4>
<table id="todoList">
<thead>
<tr>
<td align="center">todo name</td>
<td align="center">todo date</td>
</tr>
</thead>

<tbody>
<c:choose>
<c:when test="${fn:length(todoList) == 0}">
<tr>
<td align="center" colspan="2">할 일이 없습니다.</td>
</tr>
</c:when>
<c:otherwise>
<c:forEach items="${todoList}" var="todo">
<tr>
<td>${todo.todoName}</td>
<td align="center">${todo.todoDate}</td>
</tr>
</c:forEach>
</c:otherwise>
</c:choose>
</tbody>
</table>
</div>
</body>
</html>

할일과 날짜를 입력 받아서 리스트로 표시하는 뷰 페이지입니다. 앞에서 말씀드린대로 <tbody></tbody> 부분에 보면 HTML 코드와 JSP 코드가 뒤섞여 있는것이 보이시나요?

==== result_model1.jsp ====
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page import="com.itvillage.vo.ToDo" %>

<%
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");

System.out.println("Hello Servlet doPost!");

String todoName = request.getParameter("todoName");
String todoDate = request.getParameter("todoDate");

ToDo.todoList.add(new ToDo(todoName, todoDate));

RequestDispatcher dispatcher = request.getRequestDispatcher("/todo_model1.jsp");
request.setAttribute("todoList", ToDo.todoList);

dispatcher.forward(request, response);
%>
<html>
<head>
<meta http-equiv="Content-Language" content="ko"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title>TODO 등록</title>

<script>

</script>
</head>
<body>

</body>
</html>
todo_model1.jsp에서 랜더링된 뷰 페이지, 즉 할 일 등록 폼에서 사용자가 할 일을 입력하면 result_model1.jsp에서 해당 데이터를 저장 한 후에 다시 todo_model1.jsp로 포워딩 시킵니다. 여기서는 간단한 애플리케이션인지라 DB를 사용하지 않고, ArrayList에 할 일 데이터를 저장했습니다.

==== ToDo.java ====
package com.itvillage.vo;

import java.util.ArrayList;
import java.util.List;

public class ToDo {
private String todoName;
private String todoDate;
public static List todoList = new ArrayList<>();

public ToDo(String todoName, String todoDate) {
this.todoName = todoName;
this.todoDate = todoDate;
}

public String getTodoName() {
return todoName;
}

public String getTodoDate() {
return todoDate;
}
}
사용자가 입력한 할 일 데이터를 저장하는 Java Bean 클래스입니다. 이 Java Bean에 담아서 DB에 저장하는것이 일반적이나 여기서는 ArrayList에 담아서 메모리에서 가지고 있습니다. 물론 서버를 restart 시키면 해당 데이터는 사라지겠죠.


자, 그럼 이 JSP 모델 1 방식의 소스 코드로부터 저희가 배워야 할 기술들이 뭐가 있는지 한번 추출 해 볼까요?

JSP 모델1 방식에서 추출한 기술

[JSP 모델1 방식에서 추출한 기술]


짜잔~ 여러가지 기술들이 추출 되었습니다. ^^ 웹 브라우저에서 사용자들에게 보여지는 부분은 HTML로 구성이 됩니다. 그리고 HTML로 구성된 화면을 조금 더 예쁘게 보여주기 위해서 CSS가 사용되며, 폼을 전송하는 부분에서는 Javascript가 사용이 됩니다. 

사실 Javascript를 TODO 애플리케이션에서 사용하지 않고, 데이터를 전송할 수 있으나 실무에서는 폼 데이터를 전송하기 전에 클라이언트측에서 데이터를 전송하기 전에 해당 데이터가 올바른 데이터인지 검사를 하는데 그 검사를 Javascript가 맡아서 하게 되는겁니다. 물론 Javascript로 검사한다고 해서 그 검사를 우회해서 데이터를 변조하는 방법이 있기때문에 서버측에서 반드시 유효성 검사를 다시 해야되나 이런 부분은 주제를 벗어나기때문에 우선은 생략하도록 하겠습니다.


HTML과 Javascript, CSS는 개발자가 되기 위한 필수 기술이기때문에 꼭 학습을 해야되는 부분입니다. 다만 Javascript를 공부하다보면 굉장히 방대하고 공부하면 할수록 점점 어려워진다는 사실을 알 수 있을텐데 Javascript를 많이 알고 능숙하게 사용하실 수 있다면 그만큼 자신의 경쟁력을 향상시키는것이라고 보시면 될것 같네요. ^^


그럼 JSP는 배워야 할까요 배우지 말아야 할까요? 이건 어떤 기업에 입사를 하느냐에 많이 좌우되는데 Ajax 기술이 발달함으로 인해서 JSP의 사용 빈도는 점점 줄어들고 있는 추세입니다. 기술 트렌드를 잘 따라가는 기업일수록 JSP 사용 빈도가 작지 않을까 생각합니다. 


Java는 Java 개발자가 되기위해서는 반드시 알아야 될 기술이기에 따로 설명을 드리지 않아도 되겠죠? ^^


데이터베이스의 경우 클라이언트 측으로부터 전달 받은 데이터를 저장하는 가장 범용적인 방법이기때문에 반드시 배우셔야 하는데 MySQL(또는 MariaDB) 등의 오픈 소스 DB에 대한 사용법과 SQL 쿼리 작성에 대한 학습을 꾸준히 하시는게 좋을것 같습니다. 데이터베이스 종류가 다양하지만 한국에서 가장 많이 사용되는 데이터베이스는 MySQL(또는 MariaDB)과 Oracle + MSSQL 이지 않을까 하는데요. 기업에서는 PHP + MySQL(또는 MariaDB), JSP + Oracle, ASP + MSSQL 의 조합으로 많이들 사용해왔습니다.


마지막으로 말씀드릴게 IDE(Integrated Development Enviroment)인데요. 

코딩, 디버깅, 테스트, 컴파일, 배포를 하나의 환경에서 할 수 있도록 제작된 한마디로 말해서 맥가이버 같은 개발 도구라고 보시면 됩니다. 자바 개발에 있어서 오픈 소스 IDE인 이클립스가 전통적으로 가장 많이 사용되고 있을것으로 생각됩니다. 저는 개인적으로 몇년전부터 IntelliJ를 사용하고 있는데 현재까지는 최고의 IDE라는 생각이 듭니다. 기업에서 사용하려면 유료라는게 단점이긴 하지만 개인이 사용 가능한 커뮤니티 버전이나 학생용 라이센스를 잘 활용할 수 있으니 참고하시길 바랍니다. IDE 이외에 서브라임텍스트, Atom 등의 Editor가 있으니 참고하시길요. 


이번 시간에는 JSP Model1 방식을 통해 웹 개발자로 입문하기 위해서 무엇부터 배워야 할지를 알아보았는데요. 제가 Java 개발자인 관계로 서버측 언어로 Java를 사용하고 있으니 이 점 염두에 두시고 읽어주시면 감사드리겠습니다.

다음 시간에는 JSP Model1 방식의 문제점을 살펴보고 이를 개선한 방식에서 저희가 알아야 할 기술에는 어떤게 있는지 살펴보도록 하겠습니다. 

그럼 좋은 하루 보내시길 바라면서..


[참고 사이트]

https://github.com/kamranahmedse/developer-roadmap

https://github.com/devJang/developer-roadmap

https://namu.wiki/w/JSP

https://ko.wikipedia.org/wiki/PHP

https://ko.wikipedia.org/wiki/%EC%95%A1%ED%8B%B0%EB%B8%8C_%EC%84%9C%EB%B2%84_%ED%8E%98%EC%9D%B4%EC%A7%80

https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EB%B9%88%EC%A6%88

https://www.w3schools.com/html/default.asp

https://www.w3schools.com/css/default.asp

https://www.w3schools.com/js/default.asp

https://ko.wikipedia.org/wiki/Ajax

https://www.eclipse.org/

https://www.jetbrains.com/idea/

https://www.sublimetext.com/

https://atom.io/

+ Recent posts

출처: http://large.tistory.com/23 [Large]