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

현실적인 개발자 로드맵(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 로드맵 이야기] 인프런 강의 바로가기