현실적인 개발자 로드맵(8) - Angular 그리고 최종 로드맵

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

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


안녕하세요, Kevin입니다. 계속되는 육아로 인해서 포스팅을 짧은 주기로 할수는 없는 상황이 반복이 되고 있네요. ㅡ,.ㅡ 그래도 여전히 짬을 내어 최선을 다해보도록하겠습니다. 

자, 이번 시간은 개발자 로드맵 시리즈의 마지막 시간입니다. 사실 로드맵 시리즈를 진행을 하고자한다면 얼마든지 더 시리즈를 만들어낼 수 있는데요. 8회에서 마무리 하려는 이유는.. 로드맵은 단지 로드맵일 뿐이기때문에 어떤 언어나 기술, 방법론 등에 대해서 구체적인 지식을 전하기가 힘이 들죠. 구체적인 지식을 전하는것이 주목적이 아니기때문에 로드맵인것이기도 하구요. 결론은 전하고 싶은 지식들이 많이 있는데 언제까지 로드맵 시리즈만 이야기하고싶지 않기때문입니다.^^;

그렇기때문에 이번 시간에는 Front-end쪽 이야기를 살짝하고 이때까지 마인드맵으로 그려온 자바 개발자 로드맵을 최종적으로 정리하는 시간을 가져보겠습니다.

자, 그럼 먼저 Front-end쪽 기술을 로드맵에 추가하기 위한 이야기를 먼저 해보도록 하겠습니다.


SPA란?

Front-end 쪽 개발을 하시는 분이라면 SPA라는 용어를 들어보셨을겁니다. 아직 들어보지 못하신분은 당연히 SPA 방식으로 개발을 해본적이 없으신 개발자분들이실테구요. SPA란 Single Page Application의 약자인데요. 우리말로 하면 단일 페이지 방식의 애플리케이션 정도로 해석을 할 수 있을텐데요. 초보 분들에게는 단일 페이지 방식이라는게 선뜻 와닿지 않을수도 있습니다. 

더 이해하기 쉽게 얘기하자면 한마디로 웹브라우저에서 보여지는 화면들이 바뀔때 웹브라우저 자체가 refresh가 되지 않는 애플리케이션이라고 말할 수 있겠습니다. 

refresh 되지 않는다.. 즉, 화면이 새로고침하지 않는다라는 것인데 개발자 로드맵 시리즈에서 Ajax에 대한 이야기를 한적이 있는데 Ajax 기술이 바로 화면이 새로고침 되지 않는 방식이라고 말씀을 드렸더랬습니다. 그렇기때문에 SPA 방식의 애플리케이션에 필수적인 통신 기술이 바로 Ajax라고 할 수 있겠습니다.

JSP, ASP, PHP 같은 웹 애플리케이션은 기본적으로 서버와 통신하면서 화면이 바뀔때 화면이 새로고침되는 방식입니다. 웹브라우저에 보이는 화면 전체에 대한 HTML 코드들을 서버로부터 한번에 내려받기때문인데요. 

물론 이전 로드맵 포스팅에서도 말씀드린적 있지만 JSP 같은 서버사이드 언어에서도 jQuery의 Ajax 통신을 사용해서 화면의 일부분만 갱신되도록 할 수 있습니다. 개발자 로드맵 jQuery 편에서 실제로 TODO 애플리케이션 전체 화면에서 할일을 등록하면 화면의 새로고침 없이 할일 목록만 바뀌도록 했으니까요.

하지만 jQuery만 사용을 해서 SPA를 구현한다는것은 사실 무리가 있습니다. SPA를 구현하는것에 무리가 있다는것이지 jQuery에 문제점이 아주 많아서 사용하지 말아야한다는것은 아닙니다. 현재까지 Front-end 기술의 트렌드는 SPA로 바뀌고 있는 추세이긴하지만 여전히 심플하고 작은 애플리케이션을 만드는데는 jQuery가 많이 사용되고 있고 성능상으로도 큰 무리가 없는게 사실이니까요.

그렇긴하지만 기술 트렌드를 따라가다보면 필연적으로 SPA라는 용어를 만나게될것이고 꼭 익혀야되는 개발 방식이기도합니다. 기술 트렌드를 쫓아서 끊임없이 시도하고 시행착오를 거치는 기업은 그렇지 않은 기업보다 개발자가 일하기 더 좋은 기업일 가능성이 높다는 사실 꼭 염두에 두시면 좋으실것 같네요.


SPA 구현을 위한 프레임워크 또는 라이브러리 선택

자, 그럼 SPA를 구현하기 위한 자바스크립트 프레임워크나 라이브러리를 선택하여 TODO 애플리케이션을 SPA로 바꿔보도록 하겠는데요. 현재 가장 많이 사용하고 있는 기술은 Angular, Vue.js, React 라고 볼 수 있겠습니다. 이 중에서 Angular와 Vue.js는 프레임워크이고, React는 라이브러리입니다. 세가지 기술 모두다 각각의 장점과 단점을 가지고 있는데요. 이 세가지 기술에 대한 비교 설명이 다음 링크에 잘 나와있습니다. 

Angular vs Vue.js vs React 비교 : https://kr.vuejs.org/v2/guide/comparison.html#Angular-Formerly-known-as-Angular-2

그중에서 저는 Angular를 사용하여 TODO 애플리케이션을 구현하였습니다. Angular를 선택한 이유는 많은 개발자들이 Angular는 Vue.js나 React보다 유연성이 떨어진다고들 얘기들하시는데요. 그 떨어지는 유연성이 오히려 생산성 측면에서는 도움이 될 수도 있다는 사실. ^^ (사실 Angular 말고 Vue.js와 React는 사용을 해본적이 없다는것도 큰 이유중에 하나입니다. ^^;) 여기서 말하는 유연성은 애플리케이션의 구조와도 관계가 있는데요. Angular의 경우 애플리케이션의 구조가 자바스크립트 class를 통해서 구조화가 잘되어 있습니다. 그렇기때문에 생산성이나 유지보수 측면에서 더 나은 결과를 가져다 준다는게 개인적인 생각이기도 합니다.

그리고 Angular의 단점 중에 하나가 가파른 학습곡선이다라고 말씀을 하시기도 하는데요. 학습에 대한 시간을 일정 부분 투자를 해야하는건 사실이긴하지만 이건 개개인마다 약간씩 틀리지 않을까 싶네요. 설령 학습 곡선이 가파르다고 하더라도 학습 자체가 상당히 재미있다는게 제 개인적인 생각이며 또한 Google에서 주도하는 오픈 소스이기때문에 학습을 위한 컨텐츠도 상당히 많이 제공되고 있는편입니다.

혹시 시간이 되시는 분들은 Vue.js나 React까지 공부하셔서 이 세가지 기술을 비교해보는것 역시 개인적인 성장에 도움이 되지 않을까 싶네요.

자, 그럼 Angular를 사용하여 이전 시간에 jQuery로 만든 TODO 애플리케이션을 SPA 방식으로 바꾸어 볼까요?


jQuery vs Angular 구현 방식 비교

jQuery와 Angular는 구현방식이 근본적으로 다릅니다. 어떻게 다른지 소스코드를 통해서 간단히 살펴보도록 하겠습니다.

먼저 아래는 jQuery로 구현한 TODO 애플리케이션의 소스 코드인데 Angular 구현 코드와 어떻게 다른지 보시겠습니다.

==== front_jquery.js ====

jQuery 구현 코드에서는 하나의 화면에 할일 등록 폼과 할일 목록이 같이 표시되기때문에 할일을 등록하는 기능과 할일을 서버로부터 조회해서 목록으로 표시하는 기능을 하나의 자바스크립트 파일에서 함수화 하여 구현하였는데 할일을 등록하고, 조회하기 위해서 서버와 통신을 하기도 하고 가져온 할일 데이터를 화면에 렌더링하기도 합니다. 

이 말은 달리 표현하면 하나의 자바스크립트 파일 안에서 너무 많은 일을 한다라고 말씀 드릴 수 있겠습니다. 

또한 서버로부터 가져온 할 일 데이터를 목록으로 화면에 표시하기 위해서 HTML DOM을 조작하기때문에 jQuery 코드에 HTML 코드가 뒤섞여 있는것을 보실 수 있습니다. 


자, 그럼 Angular에서는 할일을 등록하고 등록한 할일을 조회하여 표시하는 기능을 어떻게 구현했을까요? 아래는 Angular로 구현한 TODO 애플리케이션의 디렉토리 구조인데요.

Angular 애플리케이션에서 하나의 화면은 기본적으로 여러개의 컴포넌트의 조합으로 구성이 되어있습니다. 이말의 의미는 구현해야할 코드가 기능 단위로 각각 분리가 되어있다고도 말할 수 있습니다. 

TODO 애플리케이션의 디렉토리 구조에서 todo 디렉토리 하위에  todo-list 디렉토리와 todo-register 디렉토리로 분리되어 있는 것을 보실 수가 있습니다. 할일을 등록하는 기능과 할일을 조회하는 기능을 각각 컴포넌트화하여 분리한것이죠. 

그렇기때문에 Angular에서는 하나의 컴포넌트에서는 대부분 하나의 기능에 대해서만 구현하므로 소스코드도 매우 간결하게구성할 수 있고, 컴포넌트라는 정해진 구조내에서 코드를 구현하기 때문에 유지 보수측면에서도 매우 뛰어나다고 볼수있습니다.


자, 그럼 Angular로 구현된 TODO 애플리케이션의 컴포넌트의 소스코드는 어떻게 구성되어있는지 간단하게 살펴보도록 하겠습니다.

==== todo.component.html ====

TODO 컴포넌트는 위와 같이 크게 할일을 등록하는 컴포넌트와 할일을 조회하여 목록으로 표시하는 컴포넌트로 나누어져있습니다. 이 각각의 하위 컴포넌트들이 HTML로 렌더링되어 화면에 보여지게 되는것입니다. 이렇게 해놓으니까 코드가 무척 단순해 보이지 않나요? 실제로 복잡한 코드들 즉, 해당 컴포넌트들의 기능들에 대한 코드는 각각의 컴포넌트안에서 독립적으로 구현이 됩니다. 다시 말하면 컴포넌트들간의 관계가 느슨해진다라고도 할 수 있습니다.


그럼 하위 컴포넌트들은 어떻게 구현되어있는지 한번 볼까요?

==== todo-register.component.ts ====

할일을 등록하는 컴포넌트인데요. Angular의 컴포넌트들은 위와 같이 @Component 애노테이션을 가지는 클래스로 구성이 되어 있으며, 특정 이벤트가 발생했을때 클래스내의 함수(또는 메서드)를 호출 하도록 구성이 되어있습니다. 

위의 TodoRegisterComponent 클래스에서는 할일을 등록하는 버튼 이벤트가 발생했을 때 registerTodo() 함수가 호출이 되어 서버측에 할일 데이터를 전송하게됩니다.

TodoRegisterComponent는 할일 등록에 대한 부분에 대해서만 처리하는데 해당 클래스내에서 서버쪽에 할일 데이터를 전송하는 로직은 포함하고 있지 않으며 서버측으로의 전송 자체는 자신의 일이 아니기때문에 TodoService 에 서버쪽으로의 전송을 위임을 합니다.

Angular를 사용하면 각각의 기능들을 Component 단위로 쪼개서 각자의 할일만 처리하도록 구현을 할 수 있습니다. 이와 더불어 컴포넌트간의 관계는 느슨하기때문에 컴포넌트들은 서로가 무슨 일을 하는지 알지 못하며 알필요가 없습니다.

할일을 등록하고난 후, 등록된 할일 데이터를 할일 목록에 갱신을 하게 되는데요. 이 경우 등록된 할일 데이터를 할일 목록을 표시하는 컴포넌트에 넘겨주는데 그 부분이 바로 코드 24번 라인에 나와 있습니다.

TodoRegisterComponent는 TodoListComponent라는 존재를 알지 못한채 그저 등록된 할일 데이터를 이벤트에 담아TodoService에게 전달하기만 하고, 누가 그 데이터를 전달받아서 사용하는지에 대해서는 관심이 없습니다. 

TodoListComponent는 등록된 할일 데이터를 담고 있는 이벤트가 발생하는지 귀 기울이고 있다가 이벤트가 발생하면 할일 데이터를 전달받아서 할일 목록을 갱신하게 됩니다.


어떠신가요? 제가 Angular 문법 자체를 강의하는게 아니라서 어렵게 느껴지실수 있겠지만 Angular가 각각의 컴포넌트들을 클래스화 하여 객체지향적인 코드를 쉽게 구현할 수 있도록 해주고 있다는 사실을 조금만 더 학습해보시면 충분히 느끼실 수 있을것입니다.


자, 다음으로 앞서 말씀드린것처럼 TodoRegisterComponent에서 등록된 할일 데이터를 이벤트에 담아 내보냈을 때, 이를 받아서 할일 목록을 갱신하는 기능을 하는 TodoListComponent의 코드를 간단히 살펴보도록 하겠습니다. 

==== todo-list.component.ts ====

TodoListComponent 의 코드는 복잡하지 않습니다. 단순히 할일 데이터를 전달 받아서 화면에 표시하는 기능만 담당하기때문에 코드가 복잡할래야 복잡할수가 없는것이죠. 

Angular의 컴포넌트들은 대부분 한가지 기능에 대해서만 독립적으로 구현을 하기때문에 코드 자체가 단순해질 수 밖에 없으며, 만약 하나의 컴포넌트내에서 코드가 복잡해진다면 무언가 잘못 구현을 하고 있으며 이럴 경우 컴포넌트를 세분화 하는 등의 리팩토링이 필요할 것입니다.

19 - 23 라인의 ngOnInit() 함수에서는 Angular 애플리케이션의 구성이 완료되었을 때 초기화 작업을 진행할 수 있는데 여기서는 서버측으로부터 할일 데이터를 가져와서 할일 목록을 표시하는 작업을 처리합니다.


11 - 16라인의 생성자에서는 TodoRegisterComponent 에서 할일을 등록하고 이벤트를 내보내면 이 이벤트가 발생했는지에 대해서 귀 기울이고 있다가 이벤트가 발생하면 등록된 할일 데이터를 받아서 할일 목록을 갱신하는 작업을 처리합니다.

제가 이벤트 발생 여부에 대해서 귀 기울인다고 쉽게 표현을 했지만 더 정확하게는 해당 이벤트를 구독한다라고 할 수 있습니다. 이벤트 발행/구독에 대한 부분은 Reactive프로그래밍과 관련이 있으므로 더 자세한 내용은 관련 자료를 확인하시기 바랍니다.

그런데 신기한건 jQuery 처럼 DOM을 조작하여 등록된 할일 데이터를 화면에 추가하는것이 아닌 단순히 todoData라는 배열에 등록된 할일 데이터를 추가하는것 뿐인데 화면에서는 할일 목록이 자동으로 갱신이 됩니다. 이는 Angular의 컴포넌트 내에서 모델 데이터와 Template간에 데이터가 동기화 되는것인데 이를 바인딩이라고 합니다.


Angular로 구현한 Todo 애플리케이션에 대해서 대략적으로나마 설명을 드렸는데 어떠신가요? 물론 Angular에 대한 학습 곡선이 조금 있는 편이기때문에 처음에는 어렵게 느껴지실수도 있습니다. 하지만 그만큼 학습 자체가 상당히 재미있기때문에 코딩하는 재미도 그만큼 크다는것이 제 개인적인 생각입니다. ^^;


자.. 이제 웹 개발자(Java 개발자) 로드맵 시리즈를 슬슬 마무리 할 시간인데요. 이때까지 로드맵 시리즈를 진행하면서 그려왔던 로드맵을 마지막으로 한번 정리해보는 시간을 가지고 이번 포스팅을 마무리 하도록 하겠습니다.


최종 로드맵

웹 개발자(Java 개발자) 로드맵 시리즈를 시작한지 5개월만에 이제야 마무리를 할 시간이 다가왔네요. ^^; 5개월이면 매일 하나씩 포스팅을 할 수 있다고 쳐도 100개가 넘는 포스팅을 할 수 있었을텐데 겨우 7개밖에 할 수 없었던 이유는 직장 + 유부남 + 아기 탄생 + 육아때문이라고 볼 수 있겠습니다. ^^ 아무튼 늦게나마 최종 로드맵을 올릴 수 있어서 개인적으로는 보람이 있습니다. 

첫번째 시간에서도 말씀을 드린바 있지만 웹 개발자(Java 개발자)가 되기 위해서, 그리고 되고난 후에 배워야할 것들은 상당히 많습니다. 하지만 대한민국에서 웹 개발자(Java 개발자)로써 현실적으로 필요한 것들만 제가 경험한 기술들을 바탕으로 말씀을 드리고 싶었더랬습니다. 

여기서 현실적이라는 말은 이 글을 읽으시는 분들이 한국에서 생활하기 괜찮은 직장(연봉, 복지, 기업문화)에서 좋은 개발자로써 일을할 수 있었으면 하는 제 바램이 담겨있다고 보시면 되겠는데요. 개발자 입문자들에게 부디 조금이라도 도움이 될 수 있길 바래보면서 그럼 최종 로드맵을 소개하도록 하겠습니다.

짜잔!

[Angular + 추가 기술 포함 최종 로드맵]

색깔이 채워져 있지 않은 놈들은 이미 이전시간까지 소개를 해드렸던 기술들이며, 노란색으로 채워져 있는 기술은 오늘 말씀드린 Angular가 추가 되었습니다. Angular 이외에 Vue.js나 React는 Angular 대신에 학습하면 되는 기술들이기에 같이 적어놓았는데요. 시간이 되신다면 Angular나 Vue.js 둘중에 하나를 학습하시고, React를 추가적으로 학습하시면 좋을듯 하네요. Angular와 Vue.js는 상대적으로 학습할 내용이 비슷한 부분이 있다고 생각되지만 React는 개발 방식이 많이 다른걸로 알고 있습니다.(저도 안써봐서 어떻게 다른지에 대해서는 말씀을 못드리겠네요. ^^;)

자, 그리고 녹색으로 채워져 있는 부분은 개발자 로드맵에서 추가적으로 설명을 하고 싶지만 시간 관계상 모두 설명하기 힘든 녀석들을 모아봤습니다. 하지만 언젠가 꼭 학습을 하게된다면 개발자로써 한단계 더 성장할 수 있는 기술들만 추려보았으므로 가급적이면 시간과 계획을 세워서 꼭 학습해보길 바래봅니다.


이로써 5개월 동안의 웹 개발자(Java 개발자) 로드맵 시리즈는 이렇게 마무리를 짓도록하겠습니다. 다음 시간부터는 조금 구체적인 특정 내용들로 육아 후, 짬나는대로 찾아뵙도록 할게요.

그럼 전 이만.. 새해 복 많이 받으세요~


[Kevin의 알기 쉬운 Java 로드맵 이야기] 인프런 강의 바로가기


현실적인 개발자 로드맵(7) - Spring Boot으로 Spring을 더욱 편리하게..

# 포스팅에서 사용된 코드의 전체 코드는 https://github.com/ITVillage-Kevin/roadmap-springboot 에서 다운로드 받으실 수 있습니다.
 
# 해당 포스팅은 IT Village 유튜브 채널(https://www.youtube.com/channel/UCSIvsntWA8aJ3Apoc7kTxig)에서도 시청하실 수 있습니다.
 
 
 
안녕하세요, 오랜만에 찾아뵙게 되었네요. Kevin이라고 합니다. ^^
 
거의 석 달만에 올리는 글이 되겠습니다. 저희 아기가 탄생하시는 바램에 석 달 동안 참 바빴고 여러가지 많은 일이 있었더랬습니다. 새 생명이 탄생하는 경이로움을 경험했다고나 할까요. 아무튼 직장 다니랴 아기 돌보느라 이래 저래 바빠서 포스팅 한다는것은 꿈에도 생각하지 못했네요. 다만 짬짬이 유튜브 강의 영상만 녹화 하면서 간간히 소식을 전해드렸는데요. 포스팅 한 내용만큼 유튜브 영상 업로드가 끝나서 다시 포스팅을 진행하게 되었네요. Term이 조금 길긴했지만 그래도 이 다음 이야기를 궁금해 하실 초보 개발자분들이 있을거라고 생각하기에 다시 이야기를 진행해보도록 하겠습니다.
 
지난 시간에는 Spring 프레임워크에 대한 얘기를 나누어보았는데요. 앞서 보셨듯이 Spring은 그야말로 자바 개발자들에게는 없어서는 안될 그런 대세가 되어버렸습니다. 하지만 그 대단한 Spring 프레임워크에도 개발자들이 아주 난색을 표하는 단점이 하나 있었는데요. 그것은 바로 Spring 프레임워크를 사용하기 위한 설정의 어려움이었습니다. 프레임워크라는 편리한 도구를 사용해서 비즈니스 로직의 개발에 집중을 해야될 판에 정작 Spring Framework를 사용하기 위한 설정에 개발자들이 꽤나 상당한 시간을 투자해야하는 아이러니한 상황이 발생하게 되었던 것입니다.
 
물론 Spring이 버전업되면서 이런 문제들이 개선이 되긴했지만 여전히 설정의 복잡함은 남아 있었는데요. 
 
이러한 문제를 해결하기 위해서 등장한것이 바로 Spring Boot 이라는 놈입니다. 이 Spring Boot이 등장함으로 인해서 개발자들은 더이상 Spring의 설정을 위해 머리 싸매면서 고민하던 시간을 접고 비즈니스 로직을 구현하는데 집중할 수 있게 해주었습니다. 
 
그럼, Spring Boot 이라는 놈은 어떤 놈인지 지금부터 한번 살펴 볼까요?
 
우리가 Spring을 사용하여 웹 애플리케이션을 만들기위해서는 어떤 것들이 필요할까요? 
우선 메이븐이나 그레이들을 사용하는 프로젝트 구조를 사용하기 위해서 Spring에 필요한 의존 관계 라이브러리들을 지정해야합니다.
그리고 DispatcherServlet 설정을 위한 web.xml 설정도 해야하구요.
또한 Spring MVC를 사용하기 위해서는 핸들러 매핑이나 핸들러 어댑터, 뷰 리졸버 등의 설정을 최소한 해주어야합니다.
마지막으로 웹 애플리케이션을 배포하기 위한 Tomcat 등의 웹 애플리케이션 서버가 필요하겠죠.
 
이러한 준비 작업들이 끝나고나면 자 드디어 컨트롤러 클래스를 작성하면서 개발을 시작하면 되겠습니다.
자, 어떻게 된게 개발을 시작하기도 전에 해야할 일이 너무 많다는 생각이 들지 않으신가요? ^^; 개발자가 개발에 집중해야함에도 불구하고 개발을 하기 위한 사전 작업을 너무나 많이 하게되는 셈이 되는데요.
 
Spring Boot의 자동 구성과 스타터 의존성이라는 방법으로 이러한 문제들을 해결 해주게되었습니다. 짝!짝!짝! 자 그럼 Spring Boot의 자동 구성과 스타터 의존성이 무엇인지 잠깐 알아볼까요?
 

자동 구성

우선 Spring Boot은 Tomcat을 내장하고 있기때문에 별도의 웹 애플리케이션 서버를 설치할 필요가 없습니다. 내장된 Tomcat에 빠르게 웹 애플리케이션을 배포할 수 있습니다. 
그리고 자동 구성 덕택에 DispatcherServlet이나 핸들러 매핑, 핸들러 어댑터 등의 Spring MVC 설정도 따로 필요가 없습니다. Spring Boot이 애플리케이션의 클래스 패스에서 관련 클래스들을 발견하고는 알아서 척척 구성을 해주는 것이죠. 또한 H2 같은 특정 데이터베이스 라이브러리를 발견한다면 해당 라이브러리를 사용하기위한 데이터베이스 설정을 자동으로 구성합니다. JPA를 사용하고 싶다면? 네, 맞습니다. Spring Boot이 JPA를 사용하기 위한 설정을 역시 자동으로 구성해줍니다. 웹 애플리케이션의 보안 설정을 하고 싶다면? 네, 역시 Spring Boot이 Spring Security를 사용하기 위한 설정을 자동으로 구성해줍니다. 
Spring Boot을 통해 Spring이 더 똑똑해졌다는 생각이 드시죠?
 

스타터 의존성

하나의 애플리케이션을 만들기 위해서 의존 관계에 있는 라이브러리들을 정확하게 추가하는일은 쉽지가 않습니다. JSON 형식의 응답 데이터를 반환하는 Spring MVC 애플리케이션을 만들어서 내장된 Tomcat으로 애플리케이션을 실행해야 한다면 대략 다음과 같은 라이브러리들을 직접 메이븐이나 그레이들 설정에 추가해주어야 합니다.
spring-core, spring-web, spring-webmvc, jackson-databind, tomcat-embed-core, tomcat-embed-el
하지만 스타터 의존성을 이용하면 개발자가 이런 의존관계에 있는 라이브러리들을 일일이 추가할 필요가 없습니다. 단순히 spring-boot-starter-web 스타터를 추가해주면 알아서 의존 위에 열거한 라이브러리들을 자동으로 추가해줍니다. 개발자들이 어떤 스타터를 추가해야 되는지도 직관적으로 알 수 있습니다. 
웹 애플리케이션을 개발하기 위해서는 spring-boot-starter-web 스타터를 추가하면 되고, JPA 영속성을 사용하려면 spring-boot-starter-jpa를, 애플리케이션 보안이 필요하다면 spring-boot-starter-security를 추가하면 됩니다.
 
말로 설명하면 Spring Boot의 장점이 직접적으로 와닿지 않을수도 있으니 코드를 한번 살펴보도록 하겠습니다.
 
지난 시간의 Spring MVC 프로젝트의 구조에서는 설정해야되는 부분이 엄청 많았습니다. 아래 이미지를 보시죠.

[전통적인 Spring MVC 설정]

스프링 MVC 프로젝트에 필요한 라이브러리들을 설정해놓은 pom.xml, 웹 애플리케이션 개발을 위한 dispatcher-servlet.xml과 web.xml 설정을 개발자가 직접 해주어야 했습니다.

 

물론 Spring Boot에서도 설정을 하긴합니다. 아래와 같이 말이죠.

 

[Spring Boot의 설정]

build.gradle 파일에서 Spring MVC 웹 애플리케이션 설정을 위해서 dependencies 항목에 필요한 라이브러리들을 설정하는데 단 5줄밖에 되지 않습니다. web.xml이나 dispatcher-servlet.xml 같은 설정은 아예 사라져버린것이죠.

이게 끝입니다. 더 이상 설정할게 없으며, 이 5줄만으로 기존의 Spring MVC 웹 애플리케이션에 JPA와 H2 데이터베이스 기능까지 포함한 설정이 자동으로 구성이 되는것입니다. 엄청나지 않나요? 저만 그렇게 느끼는건 아닌지.ㅎ ^^;

 

그리고 추가적으로 기존의 Spring MVC 기반의 Todo 애플리케이션을 Spring Boot 기반으로 변경하면서 구현 코드는 어떻게 변경이 되었는지 잠깐 살펴보도록 하겠습니다.

 

이번 Spring Boot 기반 Todo 애플리케이션에는 할일 목록을 DB에 저장하기 위한 기술로 JPA(Java Persistence API)를 사용하였습니다. JPA는 데이터베이스의 테이블과 자바의 Entity 객체를 매핑하여 데이터를 손쉽게 DB에 저장하는 ORM(Object Relational Mapping) 기술중에 하나로써 Spring을 사용하여 JPA를 손쉽게 사용할 수 있습니다.

아래 코드를 잠깐 보시겠습니다.

==== Todo.java ====

DB의 todo 테이블과 매핑되는 Todo 엔티티 클래스인데요. @Entity 애노테이션을 붙여서 엔티티 클래스라는것을 명시했고, @Id 애노테이션을 붙여서 기본키를 설정했습니다. 그리고 10번 라인에 @Data 애노테이션을 추가해서 Todo 클래스의 멤버 변수들에 대한 getter/setter 메서드를 간편하게 추가하였습니다. 

참고로 Lombok이라는 라이브러리를 사용하여 클래스의 생성자, toString(), getter/setter 등의 다양한 설정을 간편하게 할 수 있기때문에 Lombok은 개발자들이 많이 사용하는 라이브러리중의 하나입니다.

 

==== TodoRepository.java ====

이 클래스는 Todo 클래스의 객체를 DB에 저장해주는 기능을 하는 Repository 클래스입니다. JpaRepository를 상속받고 있는 인터페이스인데요. 구현된게 아무것도 없음에도 불구하고 할일을 저장해주고 조회해주는 CRUD 기능을 모두 다 할 수 있습니다.

 

마지막으로 할일에 대한 요청을 받아들이는 TodoController 클래스를 한번 보실까요?

==== TodoController.java ====

이전 포스팅에서는 @RequestParam 애노테이션을 사용하여 할일 데이터를 register()의 파라미터로 받았는데 이번에는 todoName과 todoDate 파라미터의 값이 Todo 객체에 바로 매핑이 되도록 한 후, TodoRepository 클래스의 save()를 사용하여 DB에 저장하는 로직으로 변경되었습니다.

28번 라인에서는 TodoRepository 클래스의 findAll()을 사용하여 저장된 모든 할일 데이터를 조회하도록 변경되었습니다.

실제 DB에 저장을 하는 로직으로 변경되었지만 여전히 소스코드가 필요한 비즈니스 로직만 포함하는 깔끔함을 유지하는것을 보실 수 있습니다.

 

자, 간단하게나마 Spring Boot의 편리함에 대해서 살펴보았는데요. Spring Boot이 개발자가 비즈니스 로직 개발에 집중하도록 얼마나 많은 노력을 하였는지 여전히 현실적으로 와닿지 않는 분들께서는 저처럼 Spring Boot을 사용하지 않고 Spring MVC 애플리케이션 구성을 해보신다음 Spring Boot으로 개선해보는 작업을 한번쯤 해보셨으면 하는 바램을 가져보겠습니다.

 

자, 그럼 이번 시간에 새롭게 추출해야 될 기술들에는 무엇이 있는지 살펴보겠습니다.

[Spring Boot이 추가된 로드맵]

개발자 로드맵에 새롭게 추가된 기술입니다. ^^ Spring Boot은 당연히 추가가 되었구요. 그 외에 JPA와 H2를 추가하였는데요. 

JPA는 데이터베이스에 데이터를 추가하는 대표적인 ORM 기술로써 괜찮은 회사(여기서 괜찮은 회사라함은 기술 트렌드를 적극적으로 받아들이는 회사로 칭하겠습니다.^^;)에서 일을 하고 싶다면 꼭 알아두셨으면 하는 기술중에 하나입니다.

H2는 그 자체로는 단순히 데이터베이스의 한 종류입니다. 일반적인 데이터베이스와의 차이점이라면 In memory DB 즉, 애플리케이션 실행을 종료하면 저장된 데이터는 사라지는 내장 DB라는것입니다. 제가 말씀드리고 싶은것은 H2 자체를 배우라기보다는 In memory DB를 활용할 줄 알아야한다는 것입니다. 나중에 Spring으로 개발을 진행하다보면 단위 테스트 코드를 짜야 되는 경우가 많은데 이 경우에 H2 같은 In memory DB를 활용하면 편리하게 단위 테스트 코드를 DB와 연계할 수 있습니다. 

 

자, 이번 시간에는 Java 개발자(웹 개발자) 로드맵에 Spring Boot을 추가를 해보았는데요. 다음 시간에는 '현실적인 개발자 로드맵 시리즈'의 마지막 편을 포스팅 해보도록 하겠습니다. 시리즈로 계속해서 포스팅을 할 수 있지만 다른 기술들에 대해서 구체적인 얘기들을 많이 해야되겠기에 어쨌든 다음 시간에 '현실적인 개발자 로드맵 시리즈'를 마무리 하겠습니다. ^^;

 

오늘이 2019년의 첫날인데 다들 새해에 목표하신바를 잘 이룰 수 있도록 좋은 출발하시기를 바래보겠습니다. 저도 올 한해 열심히 열심히 살아보도록 하겠습니다.

그럼 다음 시간에 다시 뵐게요~ 새해 복 많이 받으세요!(Happy New Year!)

 

[Kevin의 알기 쉬운 Java 로드맵 이야기] 인프런 강의 바로 가기

 

 

 

 

현실적인 개발자 로드맵(6) - Spring의 탄생

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

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


안녕하세요, Kevin입니다. 

지난 시간까지 Ajax와 jQuery가 등장함으로 인해서 웹 애플리케이션 개발이 Front-end와 Back-end로 나누어 지기 시작했다고 말씀을 드렸는데요. 지난 시간에 Front-end쪽을 잠깐 살펴보았으니 이번 시간에는 Servlet에서 멈춰 있는 Back-end 쪽의 기술의 변화를 다시 살펴 보도록 하겠습니다.

Servlet을 사용하여 Back-end쪽을 불편하고 복잡하게 개발을 하던 시절의 무렵, 혜성 같이 등장한 구원투수가 있었으니 그것은 바로 Spring이라는 놈이었습니다. 마치 야근을 밥 먹듯이 하는 개발자들에게 봄날이 오길 바라는 마음에서 였을까 아무튼 자바 개발자들에게 Spring은 봄(spring)이 오듯이 찾아왔습니다. ^^;

Java 웹 개발의 이전과 이후는 Spring을 기준으로 나뉘어 진다고해도 과언이 아니라고 볼 수 있습니다. 마치 예능 프로그램이 무한도전 이전과 이후로 나뉜다고 볼 수 있는것 처럼 말이죠. ^^

아무튼 Spring이라는 프레임워크가 등장한 이후로 웹 애플리케이션을 개발에 있어서 커다란 변화가 생겼음은 Java 개발자라면 누구나 부정할 수 없을것이라고 봅니다. 

Spring 1.0 버전이 2004년에 나온것으로 알고 있는데 저는 개인적으로 2009년에 Spring 2.5를 처음 접하게 되었습니다.

2018년 10월 현재 Spring 5 버전이 나오면서 Spring 프레임워크의 기술에도 많은 변화가 있었으나 IOC, DI, AOP 같은 Spring의 근본 기술들은 Spring의 핵심 기술로 변함없이 자리를 지키고 있습니다.

이 포스팅은 Spring에 대한 구체적인 사용방법 등에 대해서 이야기를 하는것이 아니기때문에 Spring에 대한 이야기들은 추후에 다시 포스팅할 수 있는 기회가 있었으면 좋겠습니다.

Java 개발자 로드맵에 이미 Spring이 추가가 될 것이라는 결론은 난 셈이 되지만 그래도 이대로 글을 마치게되면 너무 싱거우니 여태까지 해온대로 이전 포스팅에서 Servlet 기반으로 구현했던 TODO 애플리케이션을 Spring 프레임워크를 사용하여 개선을 해보도록 하겠습니다. Servlet 기반의 TODO 애플리케이션 구현에 대한 상세한 내용은 아래 포스팅을 참고해주세요.

2018/09/07 - [현실적인 개발자 로드맵] - 현실적인 개발자 로드맵(3) - JSP 모델2


자, 그럼 결론적으로 Servlet으로 구현한 TODO 애플리케이션의 Servlet 코드와 Spring으로 구현한 Spring Controller의 코드를 비교해서 잠깐 살펴보겠습니다. 아래는 TodoAjaxServlet의 코드입니다.

==== ToDoAjaxServlet.java ====

package com.itvillage.servlet;

import com.google.gson.Gson;
import com.itvillage.vo.ToDo;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@WebServlet(name = "ToDoAjaxServlet", value = "/todoAjax")
public class ToDoAjaxServlet extends HttpServlet {
// Database를 대신한다.
private List<ToDo> todoList;

@Override
public void init() throws ServletException {
super.init();
this.todoList = new ArrayList<>();
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");

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

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

Gson gson = new Gson();
String json = gson.toJson(todoList);

response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.setHeader("Access-Control-Allow-Origin", "*");
response.getWriter().write(json);

}
}


다음은 Spring으로 구현한 ToDoController입니다.

==== ToDoController.java ====

package com.itvillage;

import com.itvillage.vo.ToDo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;

@Controller
public class ToDoController {
@RequestMapping(value = "/todoAjax", method = RequestMethod.POST)
@ResponseBody
public List<ToDo> todoAjax(@RequestParam("todoName")String todoName,
@RequestParam("todoDate")String todoDate) {
ToDo.todoList.add(new ToDo(todoName, todoDate));
return ToDo.todoList;
}
}


ToDoAjaxServlet 클래스의 doPost() 메서드와 ToDoController 클래스의 todoAjax() 메서드는 클라이언트측으로부터 Ajax 요청을 처리하는 메서드인데요. 일단 눈으로 보이는 소스 코드의 길이만 봐도 ToDoController의 todoAjax() 메서드가 확연히 짧고 간결한것이 보이시죠?

ToDoAjaxSevlet의 doPost()에서는 캐릭터 셋 설정이나 JSON으로의 포맷팅 설정, response의 설정까지 직접 해주어야 했으나 ToDoController의 todoAjax() 메서드에는 그런 설정들이 전혀 없습니다. 

Spring 설정파일에 별도의 설정을 하긴 하지만 구현 코드상에서는 모두 제거되어 Servlet 보다 실제로 깔끔한 소스 코드를 유지하는것이 가능해졌습니다.

사실 왜 Spring을 사용하여야 되는지에 대해서 구체적으로 설명하려면 저는 내일 출근을 못합니다.^^; 

Spring에 대해서는 다음에 더 많은 얘기를 나눌 수 있는 기회가 있을것이라고 생각을 하고, 우선 지금은 이것 하나만 기억하시면 되겠습니다.

Spring은 Java 개발자가 되기 위해서 반드시 알아야되는 핵심 기술중에 하나이다 라는것을 말이죠.


자, 이미 앞에서 이미 다 결론이 난 상태이지만 그래도 로드맵을 정리하는 차원에서 다시 한번 로드맵을 그려보면 다음과 같습니다.

[Spring 프레임워크가 추가된 개발자 로드맵]


짠~ 예상했던대로 Spring 프레임워크가 개발자 로드맵에 추가가 되었습니다.^^;


Spring에 대해서는 몇십번을 강조해도 지나치지 않을만큼 Java 개발자가 되기위해서 필수적으로 알아야 되는 기술입니다. 

더 정확하게 말하자면 Spring을 몰라도 당연히 Java 개발자가 될 수 있지만 조금 더 스마트하고 미래지향적인 Java 개발자가 되기위해서는 배워야 될 기술입니다.


이렇게 Spring에 대한 칭찬만 하다가 끝나도 사실 상관은 없지만 그래도 Spring에 대한 단점에 대해서 언급은 하고 가는것이 맞는거 같아 제가 Spring을 처음 접하면서 겪었던 불편함을 잠시 말씀드리겠습니다.

처음 Spring을 접하면서 가장 불편했던점은 바로 Spring의 개발 환경을 구축하는것이었습니다. 

Spring의 기술을 사용하기 위해서 해야되는 설정이 생각보다 복잡했고, Spring에 대한 근본 지식이 없는 상태에서 설정을 하다가 에러를 만나게 되면 해결하는것이 그리 만만치 않았다는 것입니다.

이번 포스팅을 위해서 오랜만에 Spring 개발 환경 설정을 해보았는데 역시나 설정하는데 오래 걸리더군요. 보통 밤 12시 전에 잠을 자는데 설정하고 정상적으로 동작하는지 확인하느라 12시를 넘겨버리고 말았습니다. ^^;


그럼 Spring 프레임워크를 사용하여 개발하는데 있어서 어떤 설정을 해주어야 하는지에 대해서 간단하게만 말씀 드리고 이번 포스팅을 마치도록 하겠습니다.

==== dispatcher-servlet.xml ===



    
        
            
        
    
    


    
        
        
    

dispatcher-servlet.xml에는 웹 프리젠테이션 계층의 빈(Bean)을 등록하는 설정 파일입니다. ToDo 애플리케이션의 경우 샘플 애플리케이션이다 보니 많은 빈(Bean)이 등록되지 않았으나 애플리케이션의 기능이 늘어날수록 빈 설정의 수는 늘어날 것입니다. 현재는 응답 데이터를 JSON으로 변환해주는 Converter와 JSP 뷰를 리졸빙해주는 Resolver만 설정되어 있습니다.

==== web.xml ====



    
        contextConfigLocation
        /WEB-INF/spring-config/applicationContext.xml
    
    
        org.springframework.web.context.ContextLoaderListener
    
    
        dispatcher
        org.springframework.web.servlet.DispatcherServlet
        
            contextConfigLocation
            /WEB-INF/spring-config/dispatcher-servlet.xml
        
        1
    
    
        dispatcher
        /
    
    
        CORSFilter
        com.itvillage.filter.CORSFilter
    
    
        CORSFilter
        /*
    


Servlet 사용 시 필요한 web.xml 파일에 Spring 연동을 위한 설정들이 추가로 포함되었습니다. ContextLoaderListener를 통해 Root Web Application Context를 등록하고, 앞서 보았던 dispatcher-servlet.xml 파일의 경로를 추가함으로써 Servlet Web Application Context를 등록하였습니다. 그리고 추가적으로 CORS(Cross Origin Resource Sharing) 문제를 해결하기 위해서 Filter 설정이 포함되었습니다. 

이 포스팅에서는 이런 설정들이 정확하게 무엇을 하는지 몰라도 상관없습니다. 이런 설정들을 해야지만 Spring을 사용할 수 있다라는 정도만 알고 계시면 될것 같습니다.


설정이 간단해 보이지만 직접 한번 해보시면 다양한 에러를 만나실 수 도 있을것입니다. ^^; 제 경우는 Spring 설정 + IDE 설정 + CORS 문제 등등으로 시간이 좀 걸렸습니다.


아무튼 Spring의 이런 설정상의 불편함때문에 개발자들이 정작 핵심 개발에 집중을 하지 못하고 Spring 설정에서부터 벽에 부딪치는 경우도 종종 있다고 알고 있는데요. 아시는 분들은 아시겠지만 이런 불편함이 추후에 개선이 되었더랬죠.

이 부분에 대해서는 다음 시간에 말씀을 드리도록하고, 오늘은 이만 여기서 포스팅을 마무리해야겠습니다. 그럼 다음 시간에 다시 찾아뵐게요~


[Kevin의 알기 쉬운 Java 개발자 로드맵 이야기] 인프런 강의 바로가기


현실적인 개발자 로드맵 - jQuery의 등장

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

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



안녕하세요, Kevin입니다. 추석을 앞두고 비가 오더니 집에 올때 쯤 그쳤네요. 오늘은 조금 일찍 퇴근해서 이렇게 글을 적고 있습니다. 오늘도 아직 끝나지 않은 개발자 로드맵에 관한 이야기를 해볼까 합니다.
지난 시간에는 Ajax 기술이 등장함으로 인해서 Front-end와 Back-end가 나누어지는 기술의 추세를 잠깐 언급을 했었는데요.

제가 Ajax 기술을 처음으로 접했던게 2007년이었던가 2008년 이었던가 아무튼 오래되서 기억이 가물 가물한데 아무튼 제 기억으로는 Ajax 기술을 처음 접한 이후, 오래지 않아서 순수 자바스크립트 Ajax 기술의 복잡함을 단순화 시킬 수 있는 기술이 등장을 하게됩니다. 

그것은 바로.. jQuery입니다. 두둥~ 

처음 jQuery를 접했을땐 조금 충격적이었습니다. 그 당시만해도 자바스크립트는 이해하기 쉽지 않은 언어였었고, 자바스크립트 Ajax 통신을 통해서 가져온 데이터를 이용하여 DOM을 조작해서 UI를 업데이트 하는것이 결코 쉬운 작업이 아니었습니다. 자바스크립트로 그런 복잡한 작업을 하다가 jQuery를 사용하여 똑같은 작업을 하면서 어떻게 이렇게 간결하게 작성할 수 있을까라며 놀라움을 금하지 못하던 때가 분명히 있었네요. ^^;

그럼 지난 시간에 순수 자바 스크립트 Ajax 기술을 사용해서 서버와 통신을 하던 부분을 jQuery로 똑같은 기능을 하도록 작성을 해보겠습니다.

먼저 순수 자바 스크립트로 작성한 것을 다시 한번 보도록 하겠습니다.

        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 xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:8080/todoAjax', true);
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

            xhr.onload = function(){
                if(xhr.status == 200 || xhr.status == 201){

                    // 화면에 반영
                    var todoList = JSON.parse(xhr.responseText);
                    var html = "";
                    for (var i in todoList) {
                        var todo = todoList[i];
                        html += '' + todo.todoName + '' + todo.todoDate + '';
                    }
                    var todoContents = document.getElementById("todoContents");
                    todoContents.innerHTML = '';
                    todoContents.innerHTML = html;
                }else{
                    // 에러 처리
                }
            };
            xhr.send('todoName=' + todoName + '&todoDate=' + todoDate);
        }


15번 라인에서 36번 라인까지가 자바스크립트 Ajax 기술을 사용하여 서버와 데이터를 주고 받는 부분인데요. 소스 코드 자체가 복잡해보이는건 어쩔 수 없습니다. 
그럼 이제 위 소스코드를 jQuery로 다시 한번 구현을 해보도록 하겠습니다. jQuery로 구현한 코드는 아래와 같습니다.
$(document).ready(function(){
   $("#btnReg").click(function(){
       var todoName = $("#todoName").val();
       var todoDate = $("#todoDate").val();

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

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

       $.post("http://localhost:8080/todoAjax", {
           todoName: todoName,
           todoDate: todoDate
       }, function(todoList) {
           var contents = "";
           for (var i in todoList) {
               var todo = todoList[i];
               contents += '' + todo.todoName + '' + todo.todoDate + '';
           }

           $("#todoContents").html(contents);
       }, 'json');
   });
});

저희의 TODO 프로젝트 UI가 단순하다보니 UI쪽 코드는 코드 길이도 그렇게 차이나지 않고 복잡함에 있어서도 별 차이가 나지 않네요. 하지만 Ajax 통신하는 부분을 한번 보십시요. 소스 코드 길이도 물론 반으로 줄었고, 한눈에 봐도 되게 단순해 보이지 않나요?

하지만 이렇게 승승장구 할것만 같았던 jQuery도 세월이 흐르면서 서서히 한계를 드러내기 시작을 했더랬습니다. 그 이야기는 나중에 다시 하도록하고, 어쨌든 오늘은 보시면 아시겠지만 저희가 개선한 코드를 통해 추출할 수 있는 기술은 딱 한가지입니다. 

바로 jQuery이지요. jQuery의 사용 빈도가 점점 줄어들고 있는건 사실이긴하지만 그래도 한국에서는 여전히 많이 사용되고 있는 기술중에 하나이기때문에 익혀두는것이 결코 나쁘지는 않습니다. jQuery 자체가 간결함을 지향하는 기술이기 때문에 학습 곡선 역시도 크게 가파르지 않으므로 조금만 시간 투자를 하시면 금방 익숙하게 사용하실 수 있을거라고 생각합니다.


자, 그럼 오늘 추출한 기술을 포함한 지금까지의 로드맵을 마인드 맵으로 한번 그려 볼까요?

[jQuery 기술이 추가된 개발자 로드맵]


기술이 점점 늘어가고 있군요. ^^

이번 시간까지는 Front-end쪽의 기술의 변화를 살펴봤으니 다음 시간에는 다시  Back-end쪽의 기술의 변화를 살펴보도록 하겠습니다. 

선선한 가을 바람이 부는 금요일 밤인데 저는 잠깐 조깅을 하러 나가봐야겠습니다. 추석 연휴 잘들 보내시길 Kevin이 진심으로 기원하겠습니다. 다음 시간에 뵐게요~



현실적인 개발자 로드맵 - Ajax의 등장

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

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


안녕하세요, 오늘도 여전히 금요일 저녁에 찾아뵙네요. 평일엔 일 하느라 바빠서 포스팅을 할 수 없어서 금요일만 되면 포스팅 할 수 있다는 설레는 마음으로 이렇게 컴퓨터 앞에 앉아있습니다. ^^;

자, 그럼 지난 시간에 이어서 개발자 로드맵에 대해서 계속 이야기 해볼까요?

지난 시간에는 JSP 모델1을 개선한 모델2까지에서 추출한 로드맵을 그려보았습니다. 바로 아래와 같죠?


[JSP 모델2 방식에서 추가된 개발자 로드맵]


자, 그런데 JSP를 사용해보신 분들이라면 다들 알고 계시겠지만 JSP에는 한가지 문제점이 있습니다. 사실 문제점이라기 보다는 JSP 등의 서버 사이드 언어를 사용하면 당연시 여기던 것이었는데요. 저희는 아래와 같은 TODO 애플리케이션을 만들고 있습니다.


[TODO 애플리케이션]


그림과 같이 할일과 날짜를 입력한 후 [등록] 버튼을 클릭하게 되면 할일 데이터를 서버로 전송하게 되는데요. 이때 화면이 깜빡 거리는것을 볼 수 있습니다. 깜빡임의 이유는 [등록] 버튼을 클릭하게 되면 서버에 데이터를 전송한 후, 서버에서 todo_model1.jsp로 다시 포워딩을 시키면서 화면이 바뀌게 되기 때문입니다. 이해 되셨죠? 

TODO 애플리케이션의 경우 서버에서 처리하는 시간이 얼마 되지 않기 때문에 잠시 깜빡거리겠지만 실무에서 많은 데이터를 처리할 경우에는 [등록] 버튼을 누른후에도 한참을 화면이 바뀌지 않거나 화면이 바뀌고 난 후에 서버에서 처리가 끝날때까지 브라우저에서 한참 동안 흰색 화면만 표시되는 경우도 있다는걸 아시는분들은 아실겁니다.

이렇게 페이지 전체를 refresh 하게되면 사용자들은 서버의 처리가 끝날때까지 아무것도 하지 못한채 기다려야 하죠. 이런 문제점을 개선하기 위해서 나온 기술이 바로 Ajax(Asynchronous Javascript and XML) 기술입니다. 

Ajax 기술을 통해 페이지 전체를 refresh 하지 않고, 페이지의 일부분에 표시되는 데이터를 서버측으로 부터 받아서 화면의 깜빡임 없이 데이터를 갱신하는것이죠. Ajax 기술로 인해 페이지의 특정 부분의 데이터 또는 UI만 갱신 되므로 페이지 전체가 refresh 될때까지 기다릴 필요가 없게 되었습니다. 

JSP가 처음 등장할 당시 클라이언트측에 표시되는 UI 화면을 구성하는 HTML + Javascript + CSS 소스코드들이 서버측 소스들과 함께 서버측에 위치하는 경우가 많았는데 Ajax 기술이 등장함으로 인해서 슬슬 HTML + Javascript + CSS 등의 소스 코드들은 웹서버에 위치시키고 서버측에는 순수하게 서버측 언어로 구성된 소스 코드들만 위치 시키는 소위 말하는 Front-end와 Back-end로 역할 구분을 하게됩니다.

자기 역할에 충실할 수 있도록 구성되는것은 어찌보면 너무나 당연한것이라고 볼 수 있는건데 말이죠. 

자, 그럼  HTML + Javascript + CSS로 구성된 Front-end 의 소스 코드를 보시겠습니다. Back-end 소스 코드는 여전히 서블릿으로 구성되어 있으므로 손대지 않겠습니다.

 
    
    Todo List
    
    


    

TO DO 등록

TO DO List

todo nametodo date
할 일이 없습니다.

[front_javascript.html]

26번 라인부터 45번 라인까지가 Ajax 기술을 이용해 Back-end 쪽에 할일 데이터를 전송하고 응답으로 할일 목록 데이터를 전송 받는 부분입니다. 조금 복잡해 보이지 않나요? 

어쨌든 여기서 저희는 로드맵에 하나의 기술을 더 추가할 수 있게되었네요.^^ 바로 아래와 같겠죠?

[Ajax 기술이 추가된 개발자 로드맵]


개발자 로드맵에 Ajax 기술이 추가되었습니다. ^^; 

사실 요즘에는 Javascript로 Ajax 기술을 직접적으로 사용하는일은 많지 않습니다. 소스 코드를 보시면 아시겠지만 처음 보는 분들한테는 소스코드가 결코 단순하지는 않습니다. 

그럼에도 불구하고 Ajax 기술을 로드맵에 포함시킨것은 순수 Javascript의 Ajax 기술을 사용하라는 의미는 아니고 최소한 Ajax의 원리는 이해를 해야한다는 의미에서 로드맵에 포함을 시킨거였습니다.

그럼, 다음 시간에는 순수 Javascript의 Ajax 기술의 복잡함을 극복하도록 Front-end 측 소스 코드를 개선해 보도록 하겠습니다.

모두들 즐거운 불금 보내시고 저는 이만 다른 공부를 좀 해야겠습니다. 그럼 다음시간에 뵐게요~






현실적인 개발자 로드맵 - JSP 모델2

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

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


안녕하세요, Kevin입니다. 지난 시리즈에 이어 개발자 로드맵 이야기를 계속 해보겠습니다. 지난 시간에 어떤 이야기를 했는지 기억나시나요?^^ 지난 시간에는 Java 개발자로 입문하면서 필수적으로 배워야 할 것들이 무엇인지 JSP Model1 방식으로 구현한 TO DO 애플리케이션을 통해서 알아보았습니다. 지난 시간까지 알아본 바로는 아래와 같은 기술들을 배워야 한다고 했죠?


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


자, 그럼 오늘은 JSP Model1 방식으로 만든 TODO 애플리케이션을 조금 더 개선 해보면서 어떤 기술들을 더 알아야하는지 알아보겠습니다.


클라이언트 + 서버 통합(JSP 모델2)

지난 시간과 비슷하게 오늘은 JSP 모델2 방식의 구성도를 먼저 보도록 하겠습니다.

[JSP 모델2 구성도]


JSP 모델1의 구성도와 어떤 차이가 있는지 느껴지시나요? 모델1의 경우 JSP에서 클라이언트의 요청을 직접 받고 클라이언트에게 응답으로 돌려줄 View 까지 생성했더랬습니다. 그야말로 JSP가 모든 일을 다 하는거라고 보시면 됩니다. 그렇기 때문에 소스 코드 상에서도 요청을 처리하는 Java 코드가 뷰를 구성하는 JSP 코드에 구현 되어 있는것을 보실 수 있었는데요.


모델1에서 요청을 처리하는 코드와 뷰를 구성하는 코드가 JSP에 모두 구성되어 있는 반면에 JSP 모델2 방식은  Servlet이라는 자바 클래스가 요청을 받아서 뷰에 표시될 데이터들만 JSP에게 넘겨 주고, JSP는 이 데이터들을 HTML 코드에 잘 보이도록 적절하게 랜더링한 후, 클라이언트에게 넘겨줍니다. 


한마디로 말해서 각자의 할 일은 각자 하자는 구성 방식이라고 볼 수 있습니다. 요청을 처리하는 역할은 Servlet이 맡고 , JSP는 뷰로써의 역할만 하자는 역할 분리가 이루어진셈입니다.


실제 코드를 보면 조금 더 이해 하시기 쉬울겁니다. 소스 코드를 한번 볼까요?

==== web.xml ====

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<display-name>To Do JSP</display-name>

<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>

<servlet>
<servlet-name>Todo</servlet-name>
<servlet-class>com.itvillage.servlet.TodoServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Todo</servlet-name>
<url-pattern>/todo</url-pattern>
</servlet-mapping>
</web-app>

모델2 방식에서는 클라이언트의 요청을 처리하게 되는 Servlet 설정 정보를 위와 같이 web.xml에 설정해주어야합니다. 이렇게 Servlet 클래스와 URL의 매핑을 해주어야지만 클라이언트에서 /todo URL로 요청을 보냈을때 /todo URL에 매핑되는 TodoServlet 클래스가 요청을 처리할 수 있습니다.


==== ToDoServlet ====

package com.itvillage.servlet;

import com.itvillage.vo.ToDo;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet(name = "TodoServlet")
public class TodoServlet extends HttpServlet {
// Database를 대신한다.
private List<ToDo> todoList;

@Override
public void init() throws ServletException {
super.init();
this.todoList = new ArrayList<>();
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
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");

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

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

dispatcher.forward(request, response);
}

protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("Hello Servlet doGet!");

RequestDispatcher dispatcher =
request.getRequestDispatcher("/todo_model2.jsp");
request.setAttribute("todoList", todoList);
dispatcher.forward(request, response);
}
}

클라이언트에게서 받은 요청을 처리하는 TodoServlet 클래스입니다. doPost()에서 할 일을 등록한 후, 등록된 할 일 데이터를 JSP로 넘겨주고 doGet()에서는 단순히 등록된 할일을 JSP로 넘겨줍니다. 

doPost() 안에 있는 소스 코드들은 이전 시간에 봤던 모델1 방식에서 result_model1.jsp 안에 포함되어 있던 코드들인데 이렇게 TodoServlet 클래스 안으로 분리되었습니다.


==== todo_model2.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="/todo">
<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>

todo_model2.jsp는 todo_model1.jsp와 변한게 없으므로 넘어가겠습니다.


자, 그럼 지난 시간과 마찬가지로 이번에도 우리가 배워야 할 기술들을 추출해 보겠습니다. 눈치채신 분도 계시겠지만 이번 시간에 변화 된것은 딱 한가지 밖에 없습니다. 바로 Servlet입니다. 저희가 배워야 될 기술에 Servlet만 포함시키면 됩니다. 

"오래된 방식인데 꼭 배워야 해?"라고 말씀하시는 분들이 많겠지만 일단 포함을 시켜보겠습니다. Servlet이 포함된 추가된 로드맵은 다음과 같겠죠?


[JSP 모델2 방식에서 추가된 개발자 로드맵]



자, 그럼 Servlet은 과연 배워야 할까요? Servlet을 사용하고 있는 회사라면 당연히 배워야됩니다. 하지만 아직도 Servlet을 사용하고 있는 기업이라면.. 음.. 저 멀리 아주 멀리, 시대에 동 떨어진 회사라고 봐도 될 것 같습니다. 

Servlet을 여전히 메인 방식으로 사용하고 있는 회사라면 과감하게 입사를 포기하든가 아니면 입사하셔서 여러분이 직접 회사를 바꾸시면 되겠습니다. ^^; 


오늘은 이쯤에서 포스팅을 마치기로 하고, 다음 시간에는 오늘 포스팅 한 소스 코드를 살짝만 더 개선해보도록 하겠습니다.


그럼 좋은 주말 보내세요~




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

# 포스팅에서 사용된 코드의 전체 코드는 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/

안녕하세요? Kevin 이라고 합니다.

블로그 개설한지 4년이나 지났는데 바쁘다는 핑계로 거의 방치하다시피 했네요. 아주 아주 새로운 마음으로 이제 다시 시작하려 합니다. ^^

제 소개를 잠깐 드리자면, 저는 올해로 개발 10년차가 되는 자바 개발자로 대한민국에서 꿋꿋하게 개발자로 버티고 살아가고 있는 평범한(?) 40대 현업 개발자입니다. ㅡ.,ㅡ;

개발자로 억지로 버티면서 살아가고 싶은 마음은 눈꼽만큼도 없지만 주위에서 저를 버티고 살아가게 만들더군요. 개발자로 즐겁게 살아갈 수 있는 날이 올 수 있으려나 모르겠지만 저 나름대로 개발을 천직으로 알고 즐겁게 살아가기 위해 노력중이죠. 아무튼 제 얘기는 글을 쓰면서 종종 들려드리도록 하구요.

IT Village 라는 블로그를 시작하게 된 계기, 그리고 앞으로 블로그를 어떤식으로 운영할 것인가에 대해서 짤막하게 나마 말씀을 드리는것이 제 블로그를 찾아주시는 분들이 조금 더 관심을 가지고 제가 올린 글들을 흥미롭게 읽어주시고 그 분들에게 작은 도움이나마 드릴 수 있지 않을까 하네요.

 

블로그 시작 계기

그럼 먼저 이 블로그를 시작하게 된 계기를 짤막하게 얘기 드려볼까요? ^^;

사실 이 블로그 이전에 제가 10년전부터 운영을 했던 IT Village 카페(http://cafe.daum.net/ITVillage)가 현재도 존재합니다. 회원수가 무려 500명이 넘는다는.. ^^; 회원수가 너무 작죠?

뭐 어쨌든간에 이 카페에 나름 제가 10년동안 개발자 생활을 해오면서 나름 개발 입문자분들에게 도움을 주고자 많은 글들을 포스팅했는데,

기술이 하루가 다르게 변해가는데도 불구하고 이직, 결혼 등등으로 인해 3년전부터 거의 관리를 못하게 되었더랬습니다. 이렇게 관리를 못하고 방치를 할 바에는 차라리

카페를 폐쇄할까라는 생각도 했었는데 그러기에는 가끔씩 찾아주시는 회원분들의 “좋은 정보 알게되어서 감사합니다”라는 한마디에 차마 그럴 수 없었네요. ㅠㅠ

결론은 여전히 카페에 남아 있는 단 하나의 유용한 정보라도 찾아주시는 분들에게 제공할 수 있기때문에 카페는 회원제가 아닌 누구나 정보를 확인할 수 있도록 오픈할 예정입니다.

그리고 카페에 남기지 못했던 나날이 변해가는 기술들에 대한 이야기는 이곳 IT Village 블로그에서 모두 하려합니다. 부디 이곳에서도 많은 분들에게서 도움이 되었다는 한마디를 들을 수 있길 바래보겠습니다. 

 

블로그 포스팅 방식 및 순서

어제, 오늘 한강 시민 공원을 뛰면서 블로그를 어떤 식으로 운영하는것이 좋을까라고 숨을 헐떡헐떡 거리면서 생각을 해봤었는데요.ㅎ

기존의 카페와 블로그에 포스팅한 글들은 거의 대부분이 독자들을 배려했다기 보다는 제 위주의 글들이었고, 소프트웨어 개발에 처음 입문하는분들에 대한 배려가 거의 없었다고 생각합니다.

의도된건 아니지만 아무튼 그랬습니다. 어쨌거나 이 블로그에서는 소프트웨어 개발 입문자들이나 초급 개발자분들한테 실질적으로 도움을 줄 수 있는 현실적인 이야기들을 많이 하려고합니다.

블로그도 블로그이지만 블로그로 나누기에 부족한 내용들의 경우 다른 SNS나 유튜브를 통해서 소통을 할 수 있도록 노력할 생각입니다.

 

현재까지 생각한 포스팅 순서는 다음과 같습니다.

Intro

Intro에서는 소프트웨어 개발 입문자들이 현시점에서 알아야하는 기술들이 어떤것들이 있는지 간단한 프로젝트를 같이 수행해보면서 입문자분들이 개발자로서 바른길을 걸어갈 수 있는 방향을 제시할 수 있는 로드맵을 그려보는것을 위주로 포스팅을 할까 합니다.

그 외에 입문자들이 실무에서 반드시 알았으면 좋겠다 싶은 내용이 있으면 제가 알고 있는것들은 모두 알려드려볼까 합니다. 회사 생활하면서 겪은 내용들이 많으니 작은 도움이라도 드릴 수 있지 않을까 생각하게 되네요.

제가 자바 개발자이다 보니 주로 자바 개발 위주로 알려드리긴 하겠지만 프로그래밍 언어와 상관없는 공통 부분도 존재한다는것 또한 미리 말씀을 드리겠습니다.

 

40대 개발자 생존 전략

말씀 드렸다시피 저는 현재 40대 초중반을 바라보는 현업 자바 개발자입니다. ^^;

대한민국에서 40대 개발자로 살아간다는게 흔한 일인지 드문 일인지 솔직히 잘은 모르겠지만 다만, 제 주위의 현실을 객관적으로 들여다보면 40대 개발자가 그리 많지 않은것 같다가 제 결론입니다.

저희 회사만 해도 저랑 비슷한 나이대 분들중에 개발하시는 분들은 한분도 못봤습니다.  저빼고 모두 팀장, 부서장, 임원급이라는.. ㅡ.ㅡ; 한마디로 관리직이나 영업직이라는 얘기죠.

여러분들은 어떠세요? 40대가 되어서도 여전히 개발을 하고 싶으신가요? 아니면 개발을 하고 싶은데 어쩔 수 없이 관리직이나 영업직으로 전환하고 싶으신가요? 저는 백발이 희끗해도(물론 지금도 흰머리가 셀 수 없이 많긴하지만..ㅎ) 여전히 개발이 하고 싶기때문에 저와 같은 생각을 가지고 계신분들에게 어떻게 하면 40대에도 여전히 개발을 할 수 있는지에 대해 제 경험과 생각을 들려드릴까합니다.

저와 비슷한 생각을 가지는 분들에게 조금이나마 도움이 될 수 있길 바라면서 조심스럽게 글을 써 볼 예정이니 조금만 기다려주시길 부탁드려볼게요.

 

프로그래밍 강좌 

현업에 종사하시는 많은 분들, 그리고 현업에 종사하지 않더라도 프로그래밍에 관심있는 멋진 분들이 프로그래밍 강좌를 많이들 올려주셔서 저도 그런 강좌들을 보면서 많은 것을 배워왔더랬습니다. 그렇기때문에 저 역시도 제가 알고 있는 프로그래밍 언어들에 대한 강좌를 진행해볼까 합니다.

Intro 섹션에서 나중에 말씀드리겠지만 거기서 만든 로드맵에 있는 기술들중에서 제가 알고 있는 기술들에 한해서 강좌를 진행해볼 생각입니다. 10년차 개발자이지만 여전히 부족한것이 많은 놈이니 강좌를 보시고 부족한 부분이 보이면 언제든지 말씀해주시면 감사드리겠습니다. 그래야 저도 더 배우고 성장할 수 있으니까요.

 

이게 끝나면 뭘 할까요?  끝날리가 없죠. ^^ 저 3가지만해도 많은 시간이 흘러갈테고, 그때가 되면 또 새로운 이야기들을 할 수 있는 기회가 계속 생길꺼라고 봐요. ^^

개인적으로 맥주를 사랑하는 저이기때문에 기회가 되면 맥주에 대한 포스팅도 번외로 진행을 해볼까 합니다.

그럼 다음 시간에는 간단한 프로젝트를 진행 해보면서 개발 입문자들을 위한 앞으로의 로드맵을 그려보도록 하겠습니다.

그럼 다음 시간에 뵙도록 하겠습니다. Coming soon..



+ Recent posts

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