13.3 프론트엔드 학습

웹이 처음 등장하고 상당 기간 동안 한 명의 개발자가 프론트엔드부터 백엔드까지 전체 영역을 담당했다. 그런데 프론트엔드 기술이 빠르게 발전하면서 한 명의 개발자가 프론트엔드와 백엔드 전체를 감당할 수 없는 상태에 이르러 프론트엔드 개발자와 백엔드 개발자로 전문화되어 가고 있는 상태이다. 하지만 최근의 경향은 수많은 스타트업이 생기면서 두 영역을 모두 개발 가능한 풀 스택 개발자를 찾는 곳이 많아지고 있다.

프론트엔드와 백엔드 영역이 빠르게 발전하고 있기 때문에 두 영역에 대한 역량을 쌓는 것이 쉽지 않다. 하지만 각 영역에 대해 이해하고 있을 때 좀 더 효과적인 웹 애플리케이션 개발이 가능하다. 따라서 백엔드 개발자라도 최소한의 프론트엔드 지식은 학습하는 것이 좋다. 프론트엔드 개발자 또한 마찬가지다. 그런 측면에서 프론트엔드 학습을 높은 우선순위에 두었다.

프론트엔드의 경우 HTML, CSS, 자바스크립트 3개의 영역으로 나뉜다. 이 중에서도 백엔드 개발자가 반드시 학습해야 할 부분은 자바스크립트이다. 자바스크립트는 최근 백엔드 영역에서도 사용되고 있고, 데스크탑 애플리케이션이나 모바일 앱 개발 등 다양한 영역에서 활용 가능하기 때문에 충분히 투자할 만 하다. 백엔드 아키텍처를 구성할 때 서비스 요구사항에 따라 자바 백엔드와 자바스크립트 백엔드를 같이 사용하는 경우도 있다.

프론트엔드와 관련해 다음 단계의 학습은 웹 브라우저에서 동작하는 간단하지만 동적인 웹 페이지를 만들어 보는 것이다. 특히 Event, AJAX, DOM을 많이 다뤄볼 수 있는 기능을 구현해 보면 좋다. 대표적인 예로 탭(Tab) UI 나, "더 보기" 버튼과 같은 UI 구현을 통해 이벤트가 발생하면 AJAX를 통해 데이터를 요청하고 받은 데이터를 웹 페이지에 동적으로 추가하는 것과 같은 것이 있다.

자바스크립트와 관련해 더 깊이있는 학습을 하고 싶다면 "자바스크립트 프로그래밍 : 프론트엔드 개발자를 위한"(니콜라스 C. 자카스 저/한선용 역, 인사이트/2013년)과 "자바스크립트 완벽 가이드"(데이비드 플래너건 저/구경택, 박경욱, 변치훈, 이의호 공역, 인사이트/2016년) 두 권의 책 중 한 권을 활용해 학습할 수 있다. 이 책들은 모두 두껍기 때문에 웹 사이트 개발을 하면서 궁금한 부분을 찾아서 학습하는 방법이 좋다.

동적인 웹 페이지 개발을 완료하는 단계가 끝나면 다음 단계는 좀 더 복잡한 웹 페이지를 개발하는 경험을 해본다. 이 때 jQuery 만을 활용해보거나, react.js, angular.js 와 같은 자바스크립트 프레임워크를 활용하는 경험을 해볼 것을 추천한다.

참고도서 : https://roadbook.co.kr/169

[신간안내] 자바 웹 프로그래밍 Next Step