웹 개발자 학습 로드맵(feat. 유투브 뉴렉처)

본 게시글은 유투브 뉴렉처의 <웹 개발자가 되기 위한 학습 로드맵> 영상을 보고 개인학습 메모용으로 남기는 글이다.

유투브 링크 https://youtu.be/md1-g-n-pag

 

 

페이지 만드는 사람을 웹 퍼블리셔, 프론트엔드 개발자, 백엔드 개발자 세 부류로 나눠볼 수 있다. 

웹 클라이언트와 웹 서버 사이에서 클라이언트에게는 브라우저가 있고 웹 서버에게는 웹 서버가 있다.

클라이언트가 문서를 요청하면 웹 서버는 요청받은 문서를 찾아서 돌려준다. 문서는 브라우저와 웹 서버에서 다뤄진다. 문서는 웹 퍼블리셔가 만든다. 때로는 문서가 서버쪽의 프로그램으로 만들어지기도 한다. 그것을 동적인 문서라고 한다. 

그 동적인 문서를 클라이언트 쪽에서 다루면 프론트엔드 개발자이고, 서버쪽에서 다루면 백엔드 개발자가 된다. 

 

 

먼저 프론트엔드 개발자로서 웹 퍼블리셔가 되고 싶다면, 브라우저에서 볼 수 있는 문서를 만들면 되는데 그게 HTML과 CSS다. 두 가지 기술만 있으면 퍼블리셔가 될 수 있다. 그러나 CSS가 가진 제한적인 문제 때문에 SASS, LESS 같은 CSS 프레임워크를 배우면 좀 더 도움을 받을 수 있다. 그리고 Bootstrap이나 Material을 배우면 CSS를 만들지 않아도 기본적으로 남이 만든걸로 기본 바탕을 만들 수 있다. 관리자 페이지를 만들거나 디자이너가 없을 때 이용하면 좋다. 

 

 

프론트엔드 개발자로서 퍼블리셔가 아니라 프론트엔드 딴에서 웹 문서를 동적으로 바꿀 수 있는 자바스크립트 개발자가 되고 싶다면 알아야할 게 좀 더 있다. HTML과 CSS가 객체화 된다. 문서가 객체화되면 Document Object라고 하는데, 문서 객체들이 어떻게 만들어졌는지 설계문서들이 나와 있는 DOM(Document Object Model)이 있다. 그 객체를 제어하기 위해서 Javascript를 배운다. DOM과 Javascript를 이용해서 문서를 다이나믹하게 만들 수 있다. DOM으로만 가지고 문서를 만들 수도 있다. 

좀더 강력한 기능이 필요하다면 HTML5 API에서 지원하는 기능들을 이용한다. 그리고 지금까지는 jQuery를 많이 썼다. jQuery는 DOM을 사용할 때 브라우저마다 차이점이 있는 것들을 단일화된 인터페이스를 제공해준다. 개발자들이 DOM을 직접 쓸 때 인터넷 익스플로러의 경우와 그렇지 않을 경우를 나눠서 종류와 버전을 체크해가는 if문을 많이 사용했다. 그땐 웹 표준이 없었다. 그래서 jQuery의 도움을 받고 Javascript로 문서객체DOM를 직접 사용하지 않고 jQuery로 문서객체를 접근하는 방법을 사용했다. 요즘엔 문서객체를 제어하는 기능을 직접 다루지 않는 경우가 많아서 jQuery를 많이 배우진 않는다.

Angular나 React.js 그리고 View.js 같은 것을 이용하게 되면 MVVM 패턴을 이용해서 모델을 기반으로 해서 뷰를 자동 업데이트 해주는 양방향 바인딩 기법을 쓴다. 스크립트를 가지고 DOM을 직접 조작하는 일을 최소화시킬 수 있어서 많이 쓴다. 스크립트를 가지고 HTML5 API의 막강한 기능을 사용하면서 DOM을 조작할 땐 Angular나 React.js를 사용하면 막강한 프론트엔드 개발자가 될 수 있다. 

Javascript 버전이 올라가서 ES6, ES7, ES8 등이 나왔다. 6버전 이후는 공부해두면 좋다. 기업용 어플리케이션 만들 때 Javascript 과거버전만 가지고는 문제가 발생할 수 있다. 그리고 6버전 이후의 내용을 배울 때 여유가 된다면 Typescript까지 배워도 좋다.

 

 

백에서는 데이터 서비스를 담당하고 있다. 백엔드 개발자는 여러 서버 스택 중에 하나를 이용한다. 먼저 LAMP 스택은 Linux 운영체제에 Apache 웹 서버 올리고 MySQL 디비를 사용해서 PHP를 개발하는 스택이다. 전세계적으로 많이 사용하지만 PHP가 사라지고 있는 추세다. 

Windows 운영체제에 IIS라는 웹 서버 올리고 디비로 MS-SQL 서버를 쓰면서 ASP를 개발하는 WISA 스택도 있다.

Java 플랫폼에 WAS 웹 서버겸 어플리케이션 서버를 올리고 Oracle 서버를 쓰면서 JSP를 개발하는 Java 스택.

그리고 요즘에는 Javascript를 가지고 서버 스택을 구현할 수 있다. MongoDB 디비와 Express 웹 서버를 두고 Angular(PHP같은 페이지 기술)를 이용해서 Node.js 실행환경을 이용하는 MEAN 스택도 있다. 기본 언어가 Javascript이기 때문에 언어 하나만으로 서버 스택과 클라이언트 스택을 다 담당한다고 해서 풀스택이라고도 할 수 있다. 

이 중에서 Java 스택이 가장 많이 사용되고 기업형에서 가장 적절하다. 

 

 

Java 스택을 자세히 보자면 일단 실행환경 JVM이 있어야 한다. WAS라는 웹 서버겸 어플리케이션 서버가 있어야 하고, 데이터베이스가 있어야 한다. 그래서 기술적으로 JDK, Servlet, JSP, JDBC는 기본적으로 할 줄 알아야한다. JDK는 기본 자바프로그램이고 웹 개발하기에 필요한 Servlet과 JSP. 데이터 연동에 필요한 JDBC를 알게 되면 웹 서비스를 만들 수 있다. Java WEB API와 Java를 배워서 백엔드에서 웹 개발할 수 있다. 이게 최소조건이다. 

Java WEB API보다 쉽게 만들고 코드의 양을 줄일 수 있는게 Spring 프레임워크다. 그리고 JDBC를 도와줄 수 있는 ORM 라이브러리를 배워두면 좋다. JDBC를 직접 쓰는 것보다 라이브러리를 쓰면 좋다. 그리고 JSP를 개발하다보면 화면이 중복되는 부분이 있는데, 중복되는 화면을 분리해서 집중할 수 있는 Tiles 라이브러리가 있다. 

추가적으로 서버 스택과 상관없이 공통분모가 있다. Linux를 알아두면 좋고 Maven과 같은 빌드트리, Git 같은 형성관리툴을 아는게 서버 개발자의 기본이다. 

 

 

전체를 한꺼번에 하는 것보다 최소부터 시작해야한다. 필수적인 것은 색칠된 부분이다.