서버, 클라이언트, 그리고 프레임워크 1탄 | 코드스테이츠 PMB 17기 W7D1
오늘은 서버와 클라이언트의 구조와 역할,
그리고 현대의 개발에서 프레임워크를 사용해야 하는 이유에 대해 공부했다.
그럼 7주차 공부도 힘내보자!
.
.
IT 서비스란?
IT 서비스는 기본적으로 정보를 어떻게 다루느냐를 바탕으로 서비스를 구성한다.
IT 서비스의 기본적인 구조로는 클라이언트와 서버가 있다. 클라이언트는 서비스에 접근한 사용자의 디바이스이고, 서버는 클라이언트의 요청을 처리하는 주체로 서버를 제공하는 컴퓨터를 의미한다. 그리고 클라이언트와 서버는 인터넷으로 연결되고, 서로 통신을 주고받으면서 서비스를 구성한다.
사용자는 웹이나 모바일 등 다양한 경로로 클라이언트에 접속하고, 서비스를 만난다. 이때 접점은 서비스의 UI가 된다. 사용자는 UI를 인식하고는 곧 여러 기능을 조작한다. 클라이언트는 그런 사용자의 조작을 받아 서버로 정보를 요청하는 것이고, 서버는 DB와 소통하며 필요한 정보를 확인해 다시 클라이언트에 전달한다. 서로 데이터를 주고 받으며 과정을 수행하는 것이다. 이때 사용자가 접하는 클라이언트 부분을 묶어서 '프로트엔드'라고 부르고, 서버 부분은 '백엔드'라고 부른다. 프론트엔드 개발자는 사용자단과 클라이언트단의 개발을 하는 것이고, 백엔드 개발자는 이어서 서버와 DB가 차지하는 영역을 개발한다. 세부적으로 더 살펴보면, 사용자단과 클라이언트단을 연결하는 퍼블리셔가 있고, DB와 데이터를 전문적으로 다루는 데이터 엔지니어도 있다.
웹 서비스와 모바일 서비스로 구분하자면,
웹서비스에서는 사용자는 키보드, 마우스, 모니터, 스피커를 활용하고, PC와 웹 브라우저가 클라이언트가 된다. 그리고 클라이언트는 웹 서버와 통신하고, 웹 서버는 또 데이터 서버와 통신한다.
반면 앱 서비스의 경우, 사용자는 손가락, 터치패널, 센서, 디스플레이로 접근하고, 스마트폰과 태블릿, 앱 등 클라이언트가 앱 서버, 데이터 서버와 통신한다.
PC와 모바일의 제일 큰 차이는 주로 클라이언트 부분에서 발생한다는 것이다. 어떤 플랫폼을 정하느냐에 따라 클라이언트 개발자가 사용하는 기술 스택이 달라진다.
웹 기반 서비스와 프론트엔드
웹 프론트엔드의 기술 스택으로 크게 JavaScript, HTML, CSS 세 가지만 기억하면 된다고 한다. HTML은 마크업 언어로, 뼈대 역할을 하여, 웹 페이지 기반인 구조를 만든다. CSS는 스타일 시트 언어로, 눈에 보이는 요소를 개발할 때 사용된다. JS는 웹 페이지의 상호작용을 개발할 때 사용된다.
HTML은 정보에 구조를 부여하여, 운영체제에 상관없이 브라우저만 있으면 스마트폰에서도, PC에서도, 노트북에서도, 윈도우에서도, 맥에서도, IOS나 안드로이드에서도 모두 웹사이트에 접속해서 동일한 정보를 볼 수 있게 했다. 콘텐츠 레이아웃, 웹 페이지 디자인을 위한 구조, 모든 디자인 빌딩 블록이 HTML로 만들어진다.
CSS는 오직 스타일을 위한 언어로 이해할 수 있다. HTML 코드와 분리해서 정보 코드랑 디자인 코드를 다르게 짤 수 있게 돼서 이 둘은 짝꿍이다.
JavaScript는 웹브라우저상에서 다양한 기능과 알고리즘의 구현이 가능한 언어다. 웹 서비스 개발에 용이한 구조를 갖고 있어, 주로 웹서비스에 사용되는 프로그래밍 언어이고, 최근 프로트엔드 개발에서 가장 많이 쓰이고 있다.
프론트엔드와 관련된 개발 직무로는,
UI 디자이너가 있다. 화면을 구성하지만 구현하지는 않는다. 다만, 구현 과정의 용이함을 위해 기술을 이해할 필요가 있는 직무이다.
또 퍼블리셔가 있다. 퍼블리셔는 화면의 동작을 제외한 구성을 위주로 작업을 하는 사람이다. 화면의 구성은 마크업의 영역이며, JS는 프로그래밍의 영역이다. 프론트엔드 개발자가 프로그래밍에 집중할 수 있도록 마크업 업무 담당자를 따로 두는 경우가 많다. 외주를 통해 진행하는 경우도 많이 있는 것으로 보인다.
프레임워크
개발에도 '키트'가 존재한다. 키트에는 어떤 기능을 만들 때 필요한 부품, 고려해야할 사항, 수정 지점에 대한 규정, 컴포넌트 등으로 이뤄져있다. 이것을 소프트웨어 프레임워크라고 한다.
소프트웨어 프레임워크란 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 제공하는 것을 의미하고, 뼈대, 골조, 틀을 의미한다.
요즘에는 수많은 기능과 동작의 구현을 웹에서 실현해야 하는데, 모든 기능을 개발자가 Javascript로 일일이 계속 만드는 것은 비효율적이기 때문에, 기존의 특정한 소프트웨어 프레임워크 또는 라이브러리를 사용하여 이를 기반으로 다시 만든다. 다만 라이브러리는 개발자가 설계한 코드에 필요한 자원을 연결해 사용하여 개발자가 제어할 수 있다는 점이 있고, 프레임워크는 만들어진 구조와 뼈대 안에서만 개발한다는 점에서 이 둘은 차이가 있다. 프레임워크는 한번 정하면 바꾸기 어려운 특징으로 인해 많이 사용하는 프레임워크를 사용하게 되는 경우가 많다. 예컨대 Vue.js와 Angular.js가 있다.
기본적인 개념들을 살펴봤으니,
그럼 다음 글에서는 과제로 한 번 이해해보자.