티스토리 뷰
1. 서버사이드 렌더링(SSR), 클라이언트사이드 렌더링(CSR)
gyulee0220 2019. 11. 3. 14:02서버와 클라이언트 기술은 프로그래밍에 있어 가장 근간이 된다. 전세계에 존재하는 거의 모든 프로그램은 서버와 클라이언트가 존재해 네트워크 상에서 데이터를 주고 받기 떄문이다. 프로그램엔 다양한 플랫폼이 생겨났지만 가장 많이 사용하게 되는 환경은 웹이다. 우리가 원하는 서비스를 구현하기 위해 웹을 모르고는 이야기 하기 어렵다.
그리고 이번 시간에는 웹을 구축하기 위해선 클라이언트와 서버를 만들어야 한다. 하나의 건물을 짓기 위해서는 설계도가 반드시 필요하다. 그리고 이 건물 설계를 하는 데 있어 기본적으로 지켜야할 룰이있다. 사람이 들어가야 할 문이라던지, 지하 주차랑이라던지 건물에 필요한 필수 요소라는 것들이 존재한다. 이번 시간에는 이처럼 소프트웨어 설계를 위한 기초적인 패턴에 대해 알아보도록하자.
1. MVC 패턴
MVC(Model-View-Controller) 패턴은 소프트웨어 공학의 기본적인 개발 모델이다. 소프트웨어 설계를 함에 있어 우리는 디자인 패턴을 사용하게 된다. 디자인 패턴이란 소프트웨어 설계를 하는데 있어 필요한 방법론의 기능을 수행한다. 앞서 말한대로 소프트웨어에 필요한 필수 요소들을 정하고, 향후 소프트웨어 유지보수를 위한 일종의 규약이 반드시 필요하다. 이 기능을 수행하는 것이 바로 MVC 패턴이다.
- Model
모델은 데이터베이스나 파일을 담는다. 사용자가 컨트롤러를 통해 데이터를 바꾸고자 한다면 이 요청을 모델이 듣고 컨트롤러의 제어에 맞게 데이터베이스의 데이터가 수정되게 된다.
- View
뷰는 사용자에게 데이터를 보여주는 기능을 수행한다. 사용자가 데이터를 조회하기 위해서는 뷰를 통해 보게 된다. 요청을 받은 뷰는 모델에 데어티 질의를 수행한다. 뷰는 데이터를 제어할 권한이 없다.
- Controller
컨트롤러는 사용자의 요청을 들어주는 역할을 한다. 웹 환경이라면 우리는 URL을 통해 요청을 제어하게 되는데, URL이 역할이 바로 컨트롤러이다. 요청을 들은 컨트롤러는 모델에 질의를 하고, 모델의 답변을 받아 뷰에 데이터를 제정하게 된다.
<Web에서의 MVC 패턴 적용>
1) Controller - 사용자가 웹브라우저를 통해 데이터를 조회/수정 요청을 지시한다. 컨트롤러가 이를 듣고 해당 파일을 찾기 위해 모델을 확인한다.
2) Model - 컨트롤러가 요청에 맞게 모델 안에 있는 데이터를 찾아 조회/수정 작업을 수행한다.
3) View - 바뀐 데이터를 반영하에 저장하고 결과를 사용자에게 보여준다.
워낙 보편적으로 많이 사용되는 기술이다 보니 현재 사용되는 많은 프레임워크들은 MVC 모델을 채택하여 사용되고 있다. 최근에 가장 핫한 프레임워크인 구글의 Angular.js가 대표적이고, Python Django역시 MVC 모델을 채택하여 사용하고 있다.
2. 서버사이드 렌더링 (Server-side Rendering)
기존의 웹 구조에서는 클라이언트에서 데이터 수정이 불가능하다. 클라이언트와 서버의 구분이 명확하게 나뉘어 클라이언트 사이드에서는 데이터 수정이 전혀 불가능하다. 전통적으로 하는 개발 방식에서는 HTML에서는 데이터 수정이 불가능하다. 클라이언트의 기능은 단순히 데이터 조회와 요청을 보내는 기능만 수행을 간다.
여기서 말하는 렌더링이란 우리가 현재 작성해놓은 HTML 코드를 사용자가 볼 수 있는 화면으로 바꾸는 것을 의미한다. 즉, 서버사이드 렌더링에서는 HTML을 보게 만들어 주는 작업을 서버에서 수행한다고 생각하면 된다. 서버사이드 렌더링 방식에서는 라디오 버튼 하나를 눌러 웹 페이지 상의 데이터를 교체한다고 하더라도 서버의 수행작업을 거치게 되는 방식이다. (물론, 최근의 기술 발전으로 SSR에서도 간단한 데이터 변경 정도는 충분히 가능하다.)
- SSR의 장점
- 초기 렌더링 속도가 매우 빠르다.
- 검색 엔진 최적화 (SEO)를 사용할 수 있다.
- SSR의 단점
- 간단한 데이터 수정에도 서버를 거쳐하하는 불편함이 따른다.
- 초기 렌더링 수행은 빠르지만 연속적으로 렌더링 수행을 할 경우 서버에 과부화가 올 수 있다.
3. 클라이언트사이드 렌더링 (Client-Side Rendering)
네트워크 기술이 발전됨에 따라 사용자들은 실시간으로 브라우저를 통해 데이터를 빠르게 확인 하고 싶어지는 요구가 발생한다. 특히 모바일로 환경이 등장함에 따라 해당 요구는 더욱 커졌다. 모바일 환경에서 기존의 서버사이드 렌더링을 사용하게 된다면 서버에 엄청난 과부화가 생기게 되는 불편함이 발생하게 된 것이다. 이로 인해 클라이언트에 모델-뷰-컨트롤러를 장착하는 클라이언트사이드 렌더링 기술이 발달하게 된다.
클라이언트사이드 렌더링에서는 사용자가 필요한 부분만 서버에서부터 로딩하기 때문에 주고 받게 되는 데이터의 양이 현저히 줄어든다. 과거엔 작은 데이터 수정을 위해서도 HTML을 통으로 내려 받아야 하는 불편함이 존재 했다. 다양한 프레임워크에서 클라이언트사이드 렌더링 방식을 채택하면서 좀더 간편하게 사용자들의 데이터를 주고 받게 되는 이점이 생기게 된 것이다.
- CSR의 장점
- 서버와 클라이언트 사이의 데이터 양과 트래픽이 현저하게 감소된다.
- 연속된 렌더링으로 인한 과부화를 줄일 수 있다.
- CSR의 단점
- 검색 엔진 최적화 사용이 불가능하다.
- 렌더링을 위해 필요한 작업이 많아진다. (즉, 개발과 유지보수에 필요한 작업이 많다.)
CSR의 간편한 개발을 위해서 현재 다양한 프레임워크에서 CSR 방식이 개발을 제공하고 있다. 앞으로 배울 다양한 프레임워크를 통해 어떤 방식으로 클라이언트와 서버가 구성되는지 알아보도록하자.
4. 왜 JavaScript를 사용하는가?
앞으로 진행할 서버와 클라이언트 개발을 위해 우리는 자바스크립트 언어를 주로 사용하게 될 것이다. 대표적인 서버 사이드 언어인 Node.js를 비롯해 클라이언트사이드 렌더링 방식의 Vue.js, 최근 구글의 적용으로 각광받고 있는 Angular.js와 같이 뒤어 전부 js(Java Script)가 붙어있다. 이것들을 배워보기 이전에 왜 그렇게 다들 javaScript 언어로 개발을 진행하는 지 궁금증이 생긴다.
JavaScript 언어가 생기게 된 첫번 째 요구는 동적인 웹사이트 개발이다. HTML은 프로그래밍 언어가 아니다. 동적 기능을 수행하지 않기 떄문이다. 동적으로 작용하는 프로그래밍 언어를 만들기 위해 JavaScript가 생겨나게 된 것이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Main Page</title> <script type="text/javascript" > function select_system() { var name = document.getElementById('system'); var selectValue = name.options[name.selectedIndex].value; if(selectValue == 'Webpage') document.getElementById('input_program').innerHTML = "URL : "; else if(selectValue == 'android') document.getElementById('input_program').innerHTML = "Android Project : "; if(selectValue == 'apple') document.getElementById('input_program').innerHTML = "IOS Project : "; document.getElementById('program_name').style.display = "inline"; }; function getProgram(){ var name = document.getElementById('system'); var selectValue = name.options[name.selectedIndex].value; var temp = document.getElementById('program_name').value; var f = document.createElement("Form"); f.setAttribute("method","post"); if(selectValue == 'Webpage'){ f.setAttribute("action","webScreen.html"); } else if (selectValue == 'sap') { f.setAttribute("action","sapScreen.html"); } document.body.appendChild(f); var i = document.createElement("input"); i.setAttribute("type","hidden"); i.setAttribute("name","programName"); i.setAttribute("value",temp); f.appendChild(i); f.submit(); }; </script> </head> <body> <h1>프로그램 선택</h1> <h4>System</h4> <select id="system" name="System" onchange="select_system()"> <option value='' selected>-- 선택 --</option> <option value='Webpage'>Web</option> <option value='android'>Mobile</option> <option value='apple'>IOS</option> </select> <br></br> <span> <div id="input_program"></div> <input id="program_name" type="text" style="display:none" ></input> </span> <br></br> <input type="button" value="view" onclick="getProgram()"></input> </body> </html> | cs |
위는 동적으로 작용하는 기본적은 웹 페이지 예시이다. HTML에서 option으로 선택하는 정보에 따라 웹페이지 내용이 동적으로 변환된다. 이처럼 JavaScirpt는 동적인 프로그램 개발을 위해 만들어졌다.
이처럼 놀라운 기능과 유용함을 통해 javaScript는 빠르게 퍼져나갔다. 클라이언트 언어 출신인 javaScirpt는 이에 그치지 않고 서버까지 장악하며 웹의 필수 문법으로 성장하게 된다. 기본적인 JavaScipt 언어보단 우리가 원하는 서버/클라이언트 프로그램을 적용하는 방법에 대해 다음 시간부터 쭉 알아보도록 하자.
'Skill > Programming - Server & Client' 카테고리의 다른 글
| 6.[Vue.js] method, computed, watch (0) | 2019.12.07 |
|---|---|
| 5. [Vue.js] 데이터 바인딩 응용 (0) | 2019.12.01 |
| 4. Vue.js 인스턴스, 데이터 바인딩 (0) | 2019.11.24 |
| 3. Angular.js를 이용한 웹 사이트 (0) | 2019.11.14 |
| 2. 클라이언트 구축 개요 (0) | 2019.11.08 |