01. DOIT- 웹 개발이란?(백엔드, 프런트엔드)

 

✅ 00. 웹 개발이란?

웹 개발(Web development)이란? 

웹사이트를 만들고, 구축하고 유지 관리하는 것을 말합니다 .

취업을 위한 포트폴리오 사이트나 기업 홍보 사이트처럼 방문자에게 정보를 보여주기만 하는 웹사이트를 정적 사이트(Static site)라고 하고, 페이스북과 같은 사이트를 개발한다면 웹 브라우저 화면에 보이는 모습뿐 아니라 '친구 추가, 좋아요, 공유하기' 등의 서비스도 제공해야 합니다. 또한, 쇼핑몰이나 예매 사이트를 개발한다면 사용자에게 상품을 보여 주고 결제하는 기능까지 포함해야하는데 이러한 웹 사이트를 동적 사이트(dynamic site)라고 합니다.

 

 

 

 

 

✅ 01. 서버와 클라이언트란?

서버(Server)와 클라이언트(Client)란?

사용자는 웹 브라우저에서 정보를 입력하거나 링크를 클릭하면 웹 사이트는 인터넷에 연결된 컴퓨터에서 정보를 가져와서 웹 브라우저를 보여줍니다.

이때 인터넷에 연결된 컴퓨터를 서버(Server)라고 합니다.

그리고 사용자가 웹 사이트에 접근하려고 사용하는 pc 나 태블릿 pc, 스마트폰 등을 클라이언트(Client)라고 합니다.

 

 

✅ 02. 프런트엔드와 백엔드란?

프런트엔드(Front-end)와 백엔드(back-end)란?

웹 사이트가 동작하려면 서버와 클라이언트가 필요한 것처럼 웹 개발도 크게 2가지 영역으로 나눌 수 있습니다.

프런트엔드(Front-end)는 사용자 앞에 보이는 영역으로, 웹 브라우저 화면에 보이는 것을 다룹니다. 웹 사이트를 디자인하거나 사용자 동작에 반응하는 기능을 만들 수 있다. 특히 다양한 웹 브라우저의 종류와 버전에 따라 작동할 수 있게 만드는 것이 중요합니다.

백엔드(back-end)는 사용자 뒤에서 보이지 않는 영역을 뜻합니다. 웹 사이트의 회원 정보나 게시판 글 등은 서버에 데이터베이스 형태로 저장된다. 이러한 데이터베이스를 설계하거나 데이터를 처리하는 것이 백엔드 개발의 영역입니다. 백엔드 개발에는 자바, PHP, 파이썬 등의 다양한 프로그래밍 언어를 사용합니다.

 

 

 

 

 

✅ 03. 웹 개발의 기본 (HTML, CSS, 자바스크립트)

 

 

웹 문서의 뼈대를 만드는 HTML

HTML은 웹 브라우저의 여러 내용 중에서 제목과 본문, 이미지, 표와 같은 웹 요소를 알려 주는 역할을 합니다. 웹개발을 하면서 웹 브라우저에 보여주고 싶은 내용이 있다면 HTML에 맞는 표기법을 사용해야합니다.

 

웹 문서를 꾸미는 CSS

CSS는 HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때 사용합니다. 규격이 정해진 PC나, 모바일 화면에 여러내용을 보여줘야 하므로 CSS를 이용해서 웹 요소를 적절하게 배치하고 필요한 곳을 강조할 수 있습니다.

 

사용자 동작에 반응하는 자바스크립트

웹 사이트는 단순히 내용을 보여 주는 것에 그치지 않고 사용자가 클릭하거나 스크롤하는 동작에 따라 반응합니다. 예를 들어 팝업 창을 보여 주거나 상품 목록을 자동으로 스크롤하는 것처럼 동적인 효과를 사용하려면 자바스크립트가 필요합니다.

규모가 큰 웹 사이트 개발에서는 리액트나 뷰같은 자바스크립트 프레임워크를 사용하는데, 자바스크립트 기본 문법을 알고 있다면 이러한 프레임워크를 배우기가 훨씬 쉬워집니다.