웹 프로그래밍의 구조
네트워크는 Client(서비스를 요청하는 쪽)-Server(서비스를 제공하는 쪽) 구조와 P2P(Peer to Peer) 구조(서로가 동등한 위치로써 어느 한쪽이 서비스를 제공하면 그 순간 서버가 되고, 반대로 서비스를 요청하면 그 순간 클라이언트가 되는 구조)인데
웹 서비스를 제공하기 위해서는 서버 컴퓨터와 서버에서 동작하는 여러 프로그램들이 필요하다. 이런 서버를 Thick Network라고 부른다.
서버에서 동작하는 프로그램 영역을 백엔드(웹 서버 소프트웨어, 웹 프레임워크, 데이터베이스 등)라고 한다. 그리고 서비스를 이용하는 쪽은 클라이언트라고 하는데 클라이언트는 스마트폰, 데스크탑 등이 될 수 있고 최근에는 자동차, TV, 냉장고(Embeded System) 등에서도 인터넷과 웹 사용이 가능하기 때문에 이런 기기까지 클라이언트로 볼 수 있다. 클라이언트에서 웹 서비스를 이용하려면 웹브라우저가 있어야 하는데 클라이언트에서 동작하는 프로그램 영역을 프론트엔드(HTML, CSS, JavaScript 등 프로그램이 필요하다)라고 한다
HTML, CSS, 그리고 JavaScript는 클라이언트 쪽인 프론트엔드 영역의 핵심 프로그램 기술이다.
HTML은 웹 문서의 구조를 정의하고 콘텐츠를 표현하는 기본 마크업 언어(Markup language)로써 웹을 통해서 콘텐츠를 표현하려면 반드시 HTML을 사용해야 한다.
CSS는 HTML 문서에 레이아웃과 디자인을 포함한 시각적 요소를 정의하기 위한 규격이다. HTML은 콘텐츠의 내용과 구조(레이아웃)만 정의하고 CSS에서 콘텐츠의 위치, 정렬, 글자크기, 여백, 배경 색상 등을 정의한다. 따라서 디자인을 적용할 HTML 요소를 셀렉터로 지정해서 원하는 디자인 속성을 부여한다.
JavaScript는 HTML 문서에서 동적으로 변하는 콘텐츠를 표현하기 위해서 이벤트를 처리하거나 서버와 연결해서 데이터를 가져오는 등의 역할을 하는 프로그래밍 언어이다. HTML은 단순한 텍스트 파일이기 때문에 한번 작성되면 수정하기 전까지는 내용이 동일하므로(정적이라고 함) 웹에서 새로운 뉴스, 날씨, 실시간 검색, 상품 정보, 환율 정보 등 접속할 때마다 데이터가 변하는 것을 처리하기 위해서 일반적으로 서버에서 데이터베이스와 연동, 처리 등을 수행해서 백엔드 프로그램이 이를 사용하게 한다. 자바스크립트는 HTML 문서에서 이벤트(버튼 등을 클릭)를 서버 연결없이 동적으로 처리해주는 기술이다.
서버에 새로 접속하지 않고도 화면 정보가 변하는 기능을 구현하기 위해서 Angular, Vue, 그리고 React와 같은 프론트엔드 개발을 위한 대표적인 자바스크립트 라이브러리(프레임워크)도 있다.
백엔드 개발과 프론트엔드 개발
예전에는 웹 개발이 주로 서버에서 이뤄지는 백엔드 프로그래밍이 대부분이었지만, 점차 클라이언트 유형 중에서 스마트 폰의 비중이 커지고 REST API와 MSA(Micro Service Architecture) 등의 새로운 서버 구현 기법이 확산되면서 프론트엔드 개발이 점차 인기를 얻고 있다.
1. 백엔드 중심 개발
백엔드 중심 개발은 전통적인 웹 개발 모델이며 서버에서 모든 것을 담당하는 방식으로 자바 Servlet/JSP, Node.js가 가장 인기 있는 백엔드 개발 기술이다. 하지만 백엔드에서의 가장 큰 문제점은 모바일 네트워크에서 속도가 느리고 이용에 많은 비용이 든다는 점이다. 서버에서 가져와야하는 HTML은 데이터 이외에 화면 구성에 필요한 각종 태그와 속성, CSS, 자바스크립트 코드, 이미지 등이 모두 포함되므로 서버에 화면 갱신을 요청할 경우 모든 데이터가 재전송되어져야 하기 때문에 모바일에서는 부적절하다고 볼 수 있다. 또한 REST와 API와 클라우드 인프라가 보편화되면서 기존의 대규모로 서버를 구축하는 모놀리식(Monolithic) 아키텍처 방식(프로그램 운영을 위해서 모든 필요한 구성 요소 하나로 통합해서 실행)보다는 소규모로 서버를 연동하는 MSA(Micro Service Architecture)(하나하나를 각각 실행해서 통합해서 실행) 방식이 확산되어서 백엔드 개발도 다양화가 이뤄지고 있다.
=>클라이언트가 서버의 URL로 연결하면 > 서버는 서블릿, 자바, Node.js 등을 조합(Rendering)해서 페이지를 구성하고 JSP 등의 실행 결과를 HTML에 넣는 과정을 거쳐서 완성된 웹 페이지를 구성(SSR:Server Side Rendering) 한뒤 > 서버가 클라이언트에게 브라우저가 HTML만 이해할 수 있기 때문에 HTML 포맷으로 전송 > 클라이언트는 HTML로 표시함
*** 프론트엔트(클라이언트), 백엔드(서버) ***
백엔드 개발 환경
대규모 상용 서비스 개발에 필수로 인식되던 자바 엔터프라이즈 에디션(JEE)의 방대한 스펙과 구현의 복잡함으로 인해서 스프링 프레임워크가 등장하게 되었다. 또한 클라우드 기반의 서버 운영이 보편화 되면서 전통적인 모놀리씩 아키텍처 중심의 서버 운영에서 이제 소규모 분산 서비스 방식인 MSA로 보편화되고 있다(Hadoop, Docker+Kubernetes).
클라이언트쪽 프론트엔드 중심의 개발이 가속화 되면서 서버쪽 백엔드 프로그램보다 간단한 형태의 Node.js, Python을 이용한 서버 프로그램이 늘어나고 있다. 특히 REST API 형태의 개발이 주를 이루면서 백엔드에서 화면 다루는 비중이 점차 줄어들고 있다. 구굴의 Firebase를 비롯한 클라우드 기반의 서비스 인프라가 본격화되면서 모바일 앱, 웹에서 자체적으로 서버를 두지 않고 필요한 데이터를 REST API 형태로 손쉽게 제공받을 수 있는 Serverless 환경도 보편화될 예정이다. 따라서 백엔드 개발이 필수적이지 않은 시대가 도래하고 있다.
2. 프론트엔드 중심 개발
프론트엔드 중심 개발은 클라이언트가 HTML을 가지고 있거나 혹은 서버에서 HTML과 화면 구성에 필요한 데이터만 자바스크립트로 받아와서 클라이언트에서 이들 데이터와 웹 화면을 조합하는 CSR(Client Side Rendering) 방식을 사용한다. 하지만 데이터를 제공하는 서버는 반드시 필요하다. 데이터를 제공하는 서버는 주로 REST API로 개발되기 때문에 백엔드 작업도 당연히 존재해야 한다. 또한 프론트 엔드 중심 개발을 한다고 해도 콘텐츠가 검색 엔진에 노출될 우려가 있으므로 검색 엔진 최적화를 위해서 SSR(Server Side Rendering)을 접목하기도 한다.
=>클라이언트가 서버의 URL로 연결하면 > 서버는 서블릿, 자바, JAX-RSm, Node.js 등과 데이터베이스와 연동해서 페이지를 구성해서 JSON으로 만들어서 전송 > 클라이언트는 전송받은 JSON 데이터를 HTML 화면과 조합(Rendering)해서 표시함
프론트 중심 개발로의 이동
데이터를 서버에서 조합(binding) 해서 화면을 구성(rendering)하는 서버측 렌더링은 과거 데스크탑 중심의 시대에서는 문제가 없었지만 스마트폰 앱이나 모바일 앱을 통한 서비스 확대에서는 여러 문제가 대두되기 시작했다. 대표적으로 모바일에서 인터넷을 사용하려면 요금이 부가되고 유선에 비해서 느리고 인터넷 접속도 보장되지 않는 문제, 그리고 실시간 데이터 갱신 등이 필요하다. 이런 면으로 인해서 서버로부터 데이터만 수신하고 클라이언트 웹 브라우저에서 데이터를 조합한 다음 화면을 구성하는 클라이언트 측 렌더링 방식으로 개발을 전환할 필요가 있는데 이를 프론트엔드 중심 개발이라고 하고 자바스크립트에서 Angular.js, React.js, 그리고 Vue.js가 있다.
자바와 코틀린
이제 자바도 25년이 되었는데 구굴과 오라클에서 자바에 대한 판권 싸움에서 오라클이 이기자 구굴은 안드로이드 개발 언어로 JetBrains에서 개발한 Kotlin 언어를 추가하면서 안드로이드 개발 언어는 점차 코틀린으로 이전되고 있다. 코클린은 최신 프로그래밍 언어의 특징을 모두 가지고 있으며 오픈 소스(무료:copy left) 프로젝트로 자바 가상머신 JVM에서 돌아가기 때문에 자바와 완벽히 호환된다. 대표적인 자바 오픈 프레임워크인 스프링에서도 코틀린 사용을 확대하고 있다.
스프링 프레임워크와 JSP
스프링 프레임워크는 상용화할 수 있는 수준의 대규모 서비스를 누구나 쉽게 개발하게 도와주는 시스템으로 현재 자바 기반의 대표적인 백엔드 개발 프레임워크로 자리잡고 있다. 전자정부의 프레임워크가 스프링기반이며 국내에서는 JSP를 주로 스프링과 함께 사용하고 있다. 하지만 스프링에서 기본적으로 권장하는 뷰 템플릿 엔진은 Tymeleaf이다. 물론 JSP, FreeMarker도 사용될 수 있지만 스프링을 쉽게 사용하게 하는 Spring Boot의 경우 JSP 사용에 제약이 있어서 권장되지 않고 있다. 또한 JSP를 비롯해서 핵심 구성요소인 JSTL, EL 등의 업데이트가 없는 것도 약간의 문제가 된다.
데브옵스(DevOps)
데브옵스란 Development(개발)과 Operation(운영)의 합성어로써 소프트웨어 개발 규모가 커지고 협업이 보편화 되면서 신속한 개발과 즉각적인 유지보수, 배포 등의 운영을 병행하기 위한 노력을 통칭해서 부르는 말이다. 예를 들어 서비스 개선을 위해서 몇 달간 작업 한 뒤 배포하던 전통적인 방식과 달리 지금은 개발과 동시에 수시로 서비스를 배포해서 운영하는 형태가 되었다. 또한 설치 기반이 대부분 웹 기반으로 변화했고 MSA와 같은 클라우드 인프라를 활용하면서 서비스의 빈번한 배포가 필수 요소가 되었다. 이러한 전략을 위해서 개발 팀과 운영 팀이 병합되어 개발, 테스트, 배포, 운영에 이르는 어플리케이션 생명주기(Life Cycle)를 개발하게 되었는데 이를 데브옵스라고 한다.
데브옵스는 빠른 속도, 빠른 배포, 안정성, 확장 가능성, 협업 강화 등이 특징이다.
데브옵스에는 SCM(Source Code Mangement:팀 단위의 소스코드 버전 관리, GitHub, SVN 등의 도구를 사용), CI(Continuous Integration:빌드와 테스트의 통합, Jenkins, Travis CI 등 이용), CD(Continuous Deploy:지속적인 배포, 원하는 시점에서 바로 배포 가능한 설정 필요), 그리고 CM(Configuration Management:서비스 설정의 통합관리, 운영 서버의 OS, 라이브러리 버전, 컴파일 등을 포함) 등이 있다.