[웹] 1. 웹 개발 시작하기

*해당 내용은 고경희 저자님의 <HTML+CSS+자바스크립트 웹 표준의 정석>을 보고 정리한 내용입니다.

 

웹 사이트는 '웹 사이트를 만드는 것'으로 생각하지만 요즘 웹 사이트를 보면 그리 간단해 보이지 않는다.

 

정적 사이트

방문자에게 정보를 보여주기만 하는 웹사이트로 비교적 간단하다.

 

동적 사이트

사용자에게 제공할 기능과 서비스까지 담는 웹사이트이다.

 

서버

사용자는 웹 브라우저에서 정보를 입력하거나 링크를 클릭하면 웹 사이트는 인터넷에 연결된 컴퓨터에서 정보를 가져와서 웹 브라우저에 보여 준다. 이때 인터넷에 연결된 컴퓨터를 서버라고 한다.서버에는 웹 사이트에 접속하면 보이는 텍스트, 이미지, 동영상 등의 웹 요소와 사용자 정보, 상품 정보 등의 여러 정보가 저장된다.

 

클라이언트

사용자가 웹 사이트에 접근하려고 사용하는 PC나 태블릿 PC, 스마트폰 등을 클라이언트라고 한다.

(좁은 의미로 웹 브라우저를 클라이언트라고 한다.)

 

웹 사이트에서 정보를 검색하거나 처리하는 일은 서버가, 사용자의 요청을 받아 처리한 결과는 클라이언트에서 보여준다.

 

웹 개발의 2가지 영역

1. 프론트 엔드: 사용자 앞에 보이는 영역, 즉 웹 브라우저 화면에 보이는 것을 다룬다. 다양한 웹 브라우저의 종류와 버전에 따라 작동할 수 있게 만드는 것이 중요하다. 개발에는 HTML, CSS, 자바스크립트를 사용한다.
2. 백엔드: 사용자 뒤에 보이지 않는 영역이다. 데이터베이스를 설계하거나 데이터를 처리하는 것이 백엔드 개발의 영역으로 개발에는 자바, PHP, 파이썬 등 다양한 프로그래밍 언어를 사용한다.

 

프론트엔드 개발, 백엔드 개발 모두 HTML, CSS, 자바스크립트를 먼저 공부해야 한다.

1. 웹 문서의 뼈대를 만드는 HTML: 웹 브라우저의 여러 내용 중 제목과 본문, 이미지, 표와 같은 웹 요소를 알려주는 역할을 한다.
2. 웹 문서를 꾸미는 CSS: HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하게 배치할 때 사용한다. 다양한 디바이스에 따라 화면이 자동으로 바뀌는 반응형 웹 디자인을 만들려면 CSS를 공부해야 한다.
3. 사용자 동작에 반응하는 자바스크립트: 단순히 내용을 보여 주는 것에 그치지 않고 동적인 효과를 사용할 수 있다. 규모가 큰 웹 사이트 개발에서는 리액트나 뷰 같은 자바스크립트 프레임워크를 사용하는데 자바스크립트 문법을 알면 이러한 프레임워크를 배우기가 쉽다.

프론트엔드 개발을 위한 기술

자바스크립트로 처음부터 끝까지 프로그램을 코딩해 개발하는 것은 어려우므로 미리 만들어진 자바스크립트의 라이브러리와 프레임워크를 알아 두면 좋다.

(자바스크립트 라이브러리와 프레임 워크: 제이쿼리, D3.js, 부트스트랩, 리액트, 앵귤러, 뷰)

 

백엔드 개발을 위한 기술

백엔드 개발자는 서버뿐만 아니라 클라이언트와 서버 사이의 정보를 저장/관리하는 데이터베이스 등의 기본 개념을 알아야 한다. 그리고 백엔드 개발 언어와 관련 프레임워크도 선택해서 공부해야 한다.

(백엔드 개발의 언어와 프레임워크: 노드제이에스&익스프레스, 자바&스프링, 파이썬 & 장고, PHP&코드이그나이터, 루비&루비 온 레일즈, 고&레벨)