티스토리 뷰
1. 클라이언트 구축이란?
클라이언트 구축이란 우리가 보는 모든 화면이 전부 클라이언트가 된다. 클라이언트 구축을 위해서는 자신이 사용하게 되는 디바이스나 응용 프로그램에 대한 고려가 반드시 필요하다. 같은 플랫폼이어도 서로 다른 디바이스로 볼 수도 있다. 우리는 웹 페이지를 컴퓨터와 모바일 모두 볼 수 있기 때문이다.
그리는 이 중에서도 웹 환경에 기반하여 설명을 할 것이다. 웹은 가장 보편적으로 사용되면서 여전히 많은 사람들에게 각광받고 있는 기술이다. 웹 환경에서 작동하는 클라이언트를 구축하는 것이 우리의 목표다.
< 웹 클라이언트 예시>
웹의 가능성은 무궁무진하다. 최근들어서 웹의 범용성은 더 커지고 있다. 기업에서 사용하는 다양한 포탈이라던지, 웹이 사용되지 않는 부분이 없을 정도로 사이즈가 더 커지고 있다.
1) 검색 포탈 사이트
우리가 대표적으로 많이 보게 되는 검색 포탈 사이트다. 사이트마다 조금씩 다르지만 대체로 텍스트 검색을 할 수 있는 입력 창은 필수로 존재한다. 그 외에는 광고나 자체 서비스들이 주로 배치되어 있다.
(검색어가 왜 하필...)
2) 기업/단체/시설 소개 웹 사이트
특정 기관이나 단체를 소개하는 목적으로도 쓰인다. 위 사이트는 잉글랜드 프리미어리그 공식 사이트이다. 단체 사이트를 구축할 때는 대부분 단체의 이미지를 담을 수 있는 색상이나 다양한 특징들을 활용하는 것이 주이다.
3) 웹 서비스
위의 이미지는 구글에서 제공하고 있는 다양한 웹 서비스이다. 최근에 들어서 이러한 서비스들이 웹 프로그래밍의 중심으로 떠오르고 있다. 예전같으면 .exe 파일을 인터넷에서 다운받아 별도의 프로그램을 실행했다면, 최근에는 웹 상에서 바로 응용 프로그램 사용이 가능하다. 넷플릭스와 유튜브를 떠올리면 별도의 설치 작업 없이 곧바로 웹 브라우저를 통해 동영상 시청이 가능하다는 점이다.
2. 웹 클라이언트 개발 목표
클라이언트 개발을 위해서는 위에서 살펴본 모든 서비스에 들어가는 기능을 추가하는 것이다. G-mail에서 사용자들에게 어떻게 메일을 보여줄 것인지 사용자는 어떻게 서버와 상호작용을 할지에 대한 규칙을 정해주는 것이다.
웹 서비스가 아니더라도 기본적인 사이트 상에서도 다양한 기능들이 추가된다. 앞서 살펴본 잉글랜드 프리미어리그 사이트를 기준으로 사이트에 있는 여러 기능에 대해 살펴보자.
< 웹 사이트 기능>
1) 상단 하위 메뉴 노출
2) 버튼 색상 변경
3) 글로벌 메뉴 상단 유지
사이트 하나에도 정말 다양한 기능이 들어갈 수 있다. 앞으로 시간을 통해서 우리는 이런 기능들을 사이트에 넣는 사이트를 구축하게 될 것이다.
- HTML과 Java Script
웹 사이트 구축을 위해서는 브라우저가 읽을 수 있는 언어로 작성을 해줘야한다. 브라우저가 읽는 언어는 바로 HTML이다.
아래 사진의 우측은 구글 홈페이지의 HTML 코드이고 좌측은 우리가 실제로 보게되는 사이트 이다.
JavaScript는 웹 사이트의 동적 사용을 위해 쓰인다. JavaScript 코드는 HTML의 헤더 부분에 입력할 수 있다. 사이트에 보이는 키보드 버튼을 동작했을 때 하는 다양한 기능을 JavaScript를 통해 제어하게 된다.
3. 웹 프레임워크 사용
사실 능력만 있다면 프레임워크를 사용하지 않고. 서비스 구현할 수 있다. HTML으로 사이트에 있는 오브젝트들을 만들수 있다. CSS를 통해서는 웹 사이트의 다자인과 레이아웃을 만들 수 있고, JavaScript를 통해서 동적 사이트를 만들 수 있다. 앞으로 배울 모든 것들이 이 세가지기능을 응용한 것이기 때문에, 세가지를 사용할 수 있다면 충분히 웹 사이트 구축은 가능하다.
이제 여러분은 HTML, JavaScript, CSS 문법을 배우면 그 어떤 사이트도 만들 수 있는 능력을 갖췄다. 이것으로 클라이언트 구축에 대한 설명을 마치고 다음 웹 구축 시간에...
가 아니라 아직 갈길이 멀다!
물론 지금 알고 있는 지식만으로 충분히 구축 가능하지만, 좀더 편하고 좀더 빠르게 만들어야 한다. 우리에겐 시간이 많지 않다. 앞서 배운 CSR기반의 웹사이트를 전부 다 javaScript로 언제 한땀한땀 짜고 있을 것인가?
그리고 웹사이트는 대체로 당신 혼자 만들지도 않는다. 여려명이 같이 사이트를 구축하게 될 텐데 혼자만의 개발 습관이나 규칙에 따라 만들게 되면 프로젝트가 산으로 간다. 개발자라면 쉽게 갈 수 있어야 한다.
이를 위해서 우리가 사용하는 것이 바로 웹 프레임워크다.
웹 프레임 워크에는 대표적으로 Angular,js가 있고 이를 기반으로 나온 Vue,js ,Nuxt,js가 있다. 프레임 워크들은 앞서 배운 MVC 모델과 CSR구현을 보다 손쉽게 만들어준다. 각 프레임워크에 대한 원론적인 이야기들은 나중에 하고 일단 이걸 어떻게 쓰고 왜 쓰는지 간단한 예제를 통해 알아보자.
클라이언트 구축을 위해 Angular.js를 사용하는 방법은 간단하다. CDN 방식으로 태그를 추가하는 것이 가장 대표적이다. HTML 헤더에 다음과 같은 코드를 추가해주면 Angular.js를 사용할 준비가 끝난다.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
프로그램 개발은 간단하게 처리해준다는데 썩 감이 오지 않을 것이다. HTML은 꽤나 불편하고 복잡한 언어다. 태그형 언어여서 발생하는 문제가 발생하는데 같은 버튼을 만들어도 사람마다 천차만별의 방식으로 개발하게 된다. 많은사람들과 통합적으로 개발하기 매우 어려운 언어다. 이를 막기 위해서 일정한 프레임워크를 선정하게 된다면 위에 발생한 문제를 해결한다.
- 웹 프레임워크 사용 이유
- 많은 사람들과의 협업이 가능하다.
- 개발 시간이 단축된다.
- MVC, MVVC와 CSR 구현이 가능해진다.
웹 사이트에 버튼 하나를 추가한다고 가정해보자. HTML 태그와 Angular.js로의 개발 방식은 다음과 같다.
<HTML tag>
1 2 3 4 5 6 7 | <html> <head> <meta charset="utf-8"> </head> <body> <input type="text" name="Answer"/> </body> | cs |
<Angular.JS>
1 2 3 4 5 | <html ng-app> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <p><input type="text" ng-model="name"></p> <p>{{name}}</p> </html> | cs |
'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 |
| 1. 서버사이드 렌더링(SSR), 클라이언트사이드 렌더링(CSR) (0) | 2019.11.03 |