HTML, CSS, JavaScript - 1. 웹 개발

1. 웹 개발

1-1. 웹 개발이란?

• 웹 개발(Web development)
  • 웹 사이트에서 사용자에게 제공할 기능과 서비스까지 모두 담을 수 있어야 함.
• 정적 사이트(static site)
  • HTML, CSS, JavaScript와 같은 고정된 파일로 구성.
  • 모든 사용자가 동일한 콘텐츠를 볼 수 있음.
  • 고정된 콘텐츠, 적은 서버 처리, 빠른 로딩.
  • 방문자에게 정보를 보여주기만 하는 웹 사이트.
  • 미리 작성한 내용을 웹 사이트에 올려 놓으면 방문자는 그 정보를 확인하는 방식.
    • Ex)포트폴리오 사이트, 기업 홍보 사이트
• 동적 사이트(dynamic site)
  • 데이터베이스나 API를 통해 동적으로 생성된 콘텐츠를 사용자에게 보여줌.
  • 사용자가 요청할 때마다 서버에서 새로운 데이터를 가져오거나 처리해서 보냄.
    • Ex) 전자상거래 사이트, 소셜 네트워크, 웹 애플리케이션.

1-2. 서버와 클라이언트.

서버는 정보를 제공해주는 쪽, 클라이언트는 정보를 요청하는 쪽.

• 사용자는 웹 브라우저에서 정보를 입력하거나 링크를 클릭하면 웹 사이트는 인터넷에 연결된 컴퓨터에서 정보를 가져와서 웹 브라우저에 보여줌.
  • 인터넷에 연결된 컴퓨터 : 서버(Server)
  • 사용자가 웹사이트에 접근 하려고 사용하는 PC나 태블릿PC, 스마트폰 등을 클라이언트(Client)
    • 좁은 의미로 웹 브라우저를 클라이언트라 함.
• 웹사이트에서 정보를 검색하거나 처리하는 일은 서버에서 하고 사용자의 요청을 받아 처리한 결과를 클라이언트에서 보여줌.
• 클라이언트는 사용자와 서버 사이에서 화면으로 보여주는 역할을 함.

1-3. 프런트엔드 개발과 백엔드 개발

• 웹 사이트가 동작하려면 서버와 클라이언트가 필요한 것처럼 웹 개발도 크게 2가지 영역으로 나눔.
  • 프론트엔드(Front-end)는 사용자 앞(Front)에 보이는 영역.
    • 웹 브라우저 화면에 보이는 것을 다룸.
    • HTML, CSS, JavaScript를 사용.
  • 백엔드(Back-end)는 사용자 뒤(Back)에서 보이지 않는 영역.
    • 데이터베이스를 설계하거나 데이터를 처리하는 것이 백엔드 개발의 영역.
    • Java, Python 등

1-4. 웹 개발의 기본 HTML, CSS, JavaScript

• 웹 문서의 뼈대를 만드는 HTML
  • HTML은 웹 브라우저 창에 웹 문서의 내용을 보여 주는 데 필요한 약속.
  • HTML은 웹 브라우저의 여러 내용 중에서 제복과 본문, 이미지, 표와 같은 웹 요소를 알려주는 역할.
• 웹 문서를 꾸미는 CSS
  • CSS는 HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때 사용.
  • 화면이 자동으로 바뀌는 반응형 웹 디자인은 CSS로 처리.
• 사용자 동작에 반응하는 JavaScript
  • 동적인 효과를 사용하려면 JavaScript가 필요.

프레임워크란 프로그램을 만들 때 필요한 여러 기능을 쉽게 구현하도록 도와주는 도구.

1-5. 프런트엔드 개발을 위한 기술.

• 프런트엔드 개발을 할 때는 소스를 작성하고 결과를 즉시 웹 브라우저 화면에서 빠르게 확인할 수 있음.
• 라이브러리나 프레임워크를 사용하지 않고 자바스크립트로만 처음~끝까지 개발하는 것을 바닐라 자바스크립트(Vanila JavaScript)라 함.

종류	특징	관련 사이트
제이쿼리(jQuery)	DOM을 활용해 웹 요소를 조작하기 쉽고 사용하기 편리한 라이브러리 도구.	jquery.com
D3.js	웹 브라우저에서 실시간으로 변한느 정보를 시각적으로 표시하기에 적합한 라이브러리 도구. 그 외에 Three.js 등이 있음	d3js.org
부트스트랩(Bootstrap)	웹 사이트 디자인을 쉽게 만들어주는 라이브러리 도구. 반응형 디자인을 만들 수 있게 해줌.	getbootstrap.com
리액트(React)	페이스북처럼 한 화면에서 모든 내용을 볼 수 있는 사이트를 SPA(single page application)이라 함. SPA나 복잡한 사이트를 개발할 때 프레임워크를 사용하는데 이때 가장 많이 사용하는 프레임워크가 리액트.	ko.reactjs.org
앵귤러(Angular)	앵귤러는 구글에서 개발한 언어. 웹 애플리케이션을 제작하는 프레임워크.	angular.io
뷰(Vue)	웹 애플리케이션에서 사용자 인터페이스를 만드는 프레임워크. 화면에 보이는 부분에만 초점을 맞추기 때문에 다른 라이브러리나 프레임워크와 함께 사용할 수 있음.	vuejs.org

• 라이브러리 도구와 프레임 워크의 차이점
• 가장 큰 차이는 개발 흐름의 주도권을 누가 가지고 있는 가.
  • 라이브러리는 자신에게 필요한 기능만 사용해도 됨.
    • 개발 주도권은 개발에게 있음.
  • 웹 개발을 시작하는 방법부터 기능을 구현하는 모든 것을 프레임워크에서 정해 놓은 대로 따라야 함.
    • 프레임워크는 개발 주도권이 프레임워크에게 있음.

1-6. 백엔드 개발을 위한 기술.

• 프런트엔드 영역에서는 웹 브라우저 화면에서 보이는 내용을 개발하지만 백엔드 영역에서는 사용자가 볼 수 없는 서버의 동작을 개발함.
  • 화면에서 보이는 영역 외에는 모두 백엔드 영역이므로 개발 분야가 다양함.
  • 서버뿐만 아니라 클라이언트와 서버 사이의 정보를 저장,관리하는 데이터베이스 등의 기본 개념을 알아야 함.
  • 백엔드 개발을 서버 운영체제에 따라 사용하는 언어도 프레임워크도 달라짐.

종류	특징	관련 사이트
노드제이에스(Node.js), 익스프레스(Express)	자바스크립트가 익숙하다면 Node.js로 백엔드 개발에 사용할 수 있음. Node.js는 서버에서 자바스크립트를 실행할 수 있는 환경, 즉 플랫폼이라고 생각. Node.js에서 주로 사용하는 웹 개발 프레임워크는 익스프레스.	nodejs.org/ko, expressjs.com
자바(Java), 스프링(Spring)	자바는 오랫동안 개발용으로 사용된 언어이고 그만큼 관련 커뮤니티나 오픈 소스가 많음. 자바를 사용하면 안드로이드 앱을 개발할 수 있고 셋톱 박스나 하드웨어용 애플리케이션을 만들 수 있음. 자바의 웹 개발 프레임워크로는 스프링을 많이 사용함.	java.com, spring.io
파이썬(Python), 장고(Django)	파이썬은 배우기도, 사용하기도 쉬움. 특히 데이터를 많이 다뤄야 하는 분야에서는 파이썬이 매우 유리함. 백엔드 개발을 할 때 파이썬의 프레임워크로는 장고를 사용.	python.org, djangoproject.com