알아두면 좋은 개발용어 1 (서버, 클라이언트, HTML, CSS, JavaScript)

기획업무를 하다보면, 개발 회의를 들어갈 때가 있는데, 모르는 용어들이 나올 때가 종종 있습니다. 물론 경력의 짬이 있어 몰라도 감으로 대충 알아듣긴 하는데, 정확하게 모를 경우가 많지요. 그럼 오늘은 개발 용어를 정리해보는 시간을 가져보겠습니다. 

 

이 글 쓰느라 저 역시 공부를 다시 하는 느낌이랍니다. 

 

회사에 서버팀도 있고, 클라이언트팀도 있는데, 서버랑 클라이언트에 대해서 기본적인 것은 알아야 하니까요. 

가장 기본적인 서버-클라이언트부터 설명드릴게요.

 

• 서버(Server) : 네트워크를 통해 클라이언트의 요청에 따라 정보를 제공하는 시스템
• 클라이언트(Client) :  네트워크를 통해 서버에게 정보를 제공 받는 응용 프로그램

 

 

 

 

우리가 식당에 가면 음식을 시키잖아요. 그 때 서버는 식당 주인이라고 생각하면 되고 클라이언트는 식당에 온 손님이라고 생각하면 됩니다. 식당이라는 네트워크 공간에서 식당 주인과 손님이 만나죠. 보통 식당 주인은 1명이지만, 손님은 여러 명이잖아요. 마찬가지로 하나의 서버에 여러 개의 클라이언트가 연결될 수 있습니다. 그리고 손님은 음식을 주문하고 식당 주인은 요리를 하고 전달해주잖아요. 클라이언트는 서버에게 요청을 하고 서버는 응답을 하는 구조로 되어 있습니다. 

 

서버와 클라이언트를 알았으니 웹페이지의 동작을 살펴볼까요?

우리는 크롬(Chrome), 사파리(Safari), 인터넷 익스플로러(Internet Explorer) 등 웹브라우저로 불리는 웹클라이언트를 이용하여 다양한 웹서버에 접속해서 원하는 정보를 얻습니다.

 

 

웹브라우저와 웹서버 간 플로우

 

 

예를 들어 크롬에서 웹사이트의 네이버 주소(http://www.naver.com)를 입력하면 네이버 메인 페이지가 나타납니다. 이 때 네이버 웹서버에서는 뉴스, 연예 등 다양한 정보를 전달해줄텐데, 웹브라우저와 웹서버가 보여주는 방식이 서로 약속되어있지 않았다면 어떻게 될까요? 뒤죽박죽 보여주거나 아예 화면에 나타날 수 없겠죠.  

 

그래서 나타난 언어가 바로 HTML(HyperText Markup Language)입니다. 

 

• HTML(HyperText Markup Language) : 웹 페이지에서 화면에 표시되는 제목, 단락, 표 등과 같은 정보 구조뿐만 아니라 동영상, 링크 등의 정보 형식까지 표시하는 방법을 나타낸 언어.  

 

 

위키백과 HTML 형식 일부

 

 

웹브라우저는 웹서버가 전달해준 데이터 형식과 구조가 적힌 HTML 문서를 읽어 사용자가 볼 수 있게 표시를 해주는 것입니다. HTML은 데이터 구조 및 형식에 초점이 맞추어 있습니다. 그렇기 때문에 제목은 본문보다 크게 표시되는 정도로 밖에 표시되지 않았고 텍스트는 검은색으로 밖에 표시되지 않았어요. 사람들은 웹페이지를 좀 더 예쁘게 만들고 싶다, 라는 생각을 합니다. 그래서 HTML에 Tag가 조금씩 늘어나기 시작했는데, 어느 순간 걷잡을 수 많아지니 따로 언어를 만들기로 결정합니다. 그것이 바로 CSS죠.

 

• CSS (Cascading Style Sheets) : 마크업 언어인 HTML, XHTML, XML에서 색상, 폰트, 크기, 레이아웃 등으로 표시하는 방법을 나타낸 언어 

그래서 CSS는 단독으로 쓰일 수는 없고 반드시 마크업 언어인 HTML 등 과 함께 사용을 해야합니다. 보통 회사에서 마크업을 작업해주시는 웹퍼블리셔분들이 따로 있을 거예요. 

 

HTML는 웹페이지만 이동할 수 있을 뿐, 웹페이지에서 마우스 클릭을 하면 다른 이미지로 바뀐다거나 그런 건 할 수 없었습니다. HTML의 한계였죠. 그래서 나타난 것이 바로 자바스크립트(JavaScript)입니다. 

 

• JavaScript : 웹에서 동적 처리를 위해 사용되는 객체지향 기반의 스크립트 언어. (Java와는 연관성이 없다.)

아무튼 위의 내용들을 정리해보면, 

• HTML : 웹 정보의 구조 및 형식
• CSS : 웹 디자인 요소
• JavaScript : 웹 동작 처리 

이렇게 되는데요. 웹브라우저가 웹서버에게 화면을 보여줘라고 요청을 하면 HTML, CSS, JavaScript로 짜여진 코드를 전달하면 웹브라우저는 해석해서 우리에게 익숙한 웹페이지를 보여주는 거예요. 

 

그리고 거의 필요는 없으시겠지만, JavaScript 라이브러리 그냥 이름만이라도 알아두면 좋지 않을까,해서 적어봅니다. 

• jQuery: HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리. 
• AngularJS: 구글에서 제작한 자바스크립트 기반의 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크
• React: Facebook에서 만든 프론트엔드용 오픈소스 프레임워크
• Node.js: 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼
• Express.js: Node.js를 위한 웹 애플리케이션 프레임워크. 주로 백엔드에서 사용

다음 시간에 또 만나요! 

 

참고자료

서버 : https://ko.wikipedia.org/wiki/%EC%84%9C%EB%B2%84

클라이언트 : https://ko.wikipedia.org/wiki/%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8_(%EC%BB%B4%ED%93%A8%ED%8C%85)

HTML : https://ko.wikipedia.org/wiki/HTML

CSS : https://ko.wikipedia.org/wiki/%EC%A2%85%EC%86%8D%ED%98%95_%EC%8B%9C%ED%8A%B8

JavaScript : https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

자바스크립트 라이브러리 : https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC_%EB%AA%A9%EB%A1%9D