1. 웹 개발이란?
우리가 사용하는 웹 사이트는 정적 사이트(static site)와 동적 사이트(dynamic site)로 나눌 수 있습니다.
✔ 정적 사이트란,
기업 홍보 사이트나 사용자에게 정보를 보여주기만 하는 웹 사이트를 말합니다.
✔ 동적 사이트란,
예를 들어 쇼핑몰 사이트는 상품을 장바구니에 넣거나, 결제를 하는 등의 서비스를 제공하는 기능을 합니다. 이렇게 사용자의 동작에 따라 작동하는 사이트를 동적 사이트라고 합니다.
이렇게 웹 사이트를 통해 사용자에게 제공할 기능과 서비스를 개발하는 것을 웹 개발(Web Development)이라고 합니다.
2. 서버와 클라이언트
웹 개발을 하기 위해서는 서버와 클라이언트에 대한 이해가 필요합니다.
사용자가 웹 브라우저에서 정보를 입력하거나 링크를 클릭하면
웹 사이트는 인터넷에 연결된 컴퓨터에서 정보를 가져와서 웹 브라우저에 보여줍니다.
이 때 인터넷에 연결된 컴퓨터를 서버(Server)라고 하고,
사용자가 웹 사이트에 접근하려고 사용하는 기기(PC, 스마트폰) 또는 웹 브라우저 등을 클라이언트(Client)라고 합니다.
3. 프론트엔드와 백엔드
웹 개발은 웹 브라우저 화면에 보이는 것을 다루는 프론트엔드(Front-end) 영역과
서버, 데이터베이스를 처리하는 작업을 하는 백엔드(Back-end) 영역으로 구분됩니다.
1) HTML, CSS, JavaScript
웹 개발을 위해서는 웹 브라우저에 정보를 어떻게 표현하는지 알아야 합니다.
웹 브라우저에 정보를 표현하기 위해서는 HTML, CSS, JavaScript를 사용합니다.
(1) HTML
웹 페이지의 구조와 내용을 정의하는 역할을 합니다. 제목, 장, 절, 텍스트, 이미지, 표 등 웹 요소를 알려주는 역할을 합니다.
웹 브라우저에서 보여주고 싶은 내용이 있다면, HTML 구조에 맞게 작성하여 사용할 수 있습니다.
(2) CSS
웹 페이지의 출력 모양과 디자인을 정의합니다.
HTML로 만든 내용을 CSS를 통해 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때 사용합니다.
(3) JavaScript
웹 페이지의 동작과 상호작용을 위해 사용합니다. 클릭, 스크롤 등의 사용자의 동작에 따라 반응하고 이벤트 및 요소에 대한 동적인 처리 등이 가능합니다.
2) 프론트엔드 기술
(1) 자바스크립트의 라이브러리와 프레임워크
- 제이쿼리(jQuery)
DOM을 활용해 웹 요소를 조작하기 쉽고 사용하기 편리한 라이브러리 도구입니다.
- D3.js
웹 브라우저에서 실시간으로 변하는 정보를 시각적으로 표시하기에 적합한 라이브러리 도구입니다.
- 리액트(React)
SNS 웹 사이트처럼 한 화면에서 모든 내용을 볼 수 있는 사이트를 SPA(single page application)라고 합니다. SPA나 복잡한 사이트를 개발할 때 리액트 라이브러리를 사용합니다.
- 앵귤러(Angular)
구글에서 개발한 언어로 웹 애플리케이션을 제작하는 프레임워크입니다.
- 뷰(Vue)
사용자 인터페이스를 만드는 프레임워크입니다. 화면에 보이는 부분에만 초점을 맞추기 때문에 다른 라이브러리나 프레임워크와 함께 사용할 수 있습니다.
- 라이브러리나 프레임워크를 사용하지 않고 자바스크립트만으로 처음부터 끝까지 직접 개발하는 것을 바닐라 자바스크립트(Vanila JavaScript)라고 합니다.
3) 백엔드 기술
(1) 백엔드 개발의 언어와 프레임워크
- 노드제이에스(Node.js), 익스프레스(Express)
Node.js는 서버에서 자바스크립트를 실행할 수 있는 환경입니다. 노드제이에스에서 주로 사용하는 웹 개발 프레임워크는 익스프레스입니다.
- 자바(Java), 스프링(Spring)
Java를 사용하면 안드로이드 앱을 개발할 수 있고, 셋톱 박스나 하드웨어용 애플리케이션을 만들 수 있습니다. 자바의 웹 개발 프레임워크로는 Spring을 많이 사용합니다.
- 파이썬(Python), 장고(Django)
Python은 데이터를 많이 다뤄야하는 분야에서 유리합니다. 백엔드 개발을 할 때 파이썬의 프레임워크로는 Django를 사용합니다.
- PHP, 코드이그나이터(Codeelgniter)
PHP는 백엔드 개발에서 오랫동안 사용한 개발 언어입니다. 코드이그나이터는 PHP의 대표적인 웹 프레임워크 입니다.
4. 웹 브라우저와 웹 편집기
1) 웹 브라우저
웹 브라우저는 웹 사이트를 방문할 때 사용하거나 웹 개발자가 웹 편집기로 작성한 문서를 화면에 나타내는 프로그램을 말합니다.
✔ 웹 브라우저의 종류
| 종류 | 제조업체 | 특징 |
|---|---|---|
| 크롬 | 구글 | HTML5가 등장할 때 가장 빨리 지원한 웹 브라우저로 사용자가 가장 많습니다. 다양한 확장 프로그램으로 필요한 기능을 추가해서 사용할 수 있다는 장점이 있습니다. |
| 엣지 | 마이크로소프트 | 2020년 1월에 출시된 웹 브라우저입니다.크롬 브라우저와 같은 엔진을 사용하여 같은 기능을 대부분 제공합니다. |
| 파이어폭스 | 모질라 | 개발자들이 많이 사용하는 웹 브라우저로 개발 도구와 부가 기능이 뛰어납니다. |
2) 웹 편집기
웹 문서를 만들 HTML 태그를 비롯해 CSS나 자바스크립트 소스를 입력하는 프로그램을 웹 편집기(Web editor) 또는 코드 편집기(code editor)라고 합니다.
✔ 웹 편집기 종류
| 운영체제 | 종류 |
|---|---|
| 윈도우용 | Notepad++, 에디트 플러스 |
| 맥용 | Textmate, Coda |
| 공용 | Visual Studio Cod |
| 웹 기반 | Codepen(codepen.io), JSFiddle(jsfiddle.net), Liveweave(liveweave.com), Plunker(plnkr.co) |
참고 : Doit! HTML+CSS+자바스크립트 웹 표준의 정석
