웹 개발(Web development)이란?

웹 개발의 의미

웹사이트를 만드는 것
과거처럼 정보를 보여주기만 하는 Static site에서 현재는 친구추가, 좋아요, 댓글 등 이용자와 상호 소통하는 Dynamic site의 형태로 발전했기 때문에 웹 사이트를 개발한다고 표현하는 것.

Server와 Client

Web site를 담고 있는 컴퓨터를 server라 하며, 이를 브라우저로 읽는 PC, 태블릿, 스마트폰 등의 기기를 Client라 한다.

Front-end와 Back-end

• Front-end : 웹 사이트. 웹 브라우저에서 읽어지는 site를 만든다. 주로 HTML, CSS, JavaScript가 사용된다.
• Back-end : 회원정보나 게시글 같은 Database를 다룬다. JAVA, PHP, Python 등이 사용된다.
  (예) SpaceX 우주 탐사선 시뮬레이션 사이트 HTML, CSS, JavaScript로 제작됨.

Front-end 개발을 위해 배워야 하는 것들

기본 (필수)

• HTML
• CSS
• JavaScript
• Git/GithubFront-end 영역
• 다양한 라이브러리
• JQuery
• D3.js
• 부트스트랩Framework
• 리액트
• 앵귤러
• 뷰Back-end 영역서버 언어
• 리눅스 서버, 네트워크, 데이터베이스 구축 기술
• 파이썬
• 자바
• PHP
• 닷넷Framework
• Node.js
• 스프링
• 장고
• 코드이그나이터라이브러리나 Framework를 배워야 하는 이유JavaScript 만으로 코딩하는 것을 Vanila JavaScript라 한다. 하지만 이는 매우 어려운 일이고, 미리 만들어진 라이브러리나 프레임워크를 적절하게 이용하면 대규모 웹사이트를 개발하기에도 편리하다. 단 이러한 서비스를 이용하려면 JavaScript에 대한 기초가 있어야 쉽다.자바스크립트의 라이브러리와 프레임워크의 종류
• 제이쿼리 : DOM을 활용해 웹 요소를 조작하기 쉽고 사용하기 편리한 라이브러리 도구. 하지만 최근에는 웹앱 개발에 적합한 다른 라이브러리에 비해 사용률이 떨어짐.
• D3.js 웹 브라우저에서 실시간으로 변하는 정보를 시각적으로 표시하기에 적합한 라이브러리 도구. 이 외에도 라파엘, Three.js가 비슷한 라이브러리로 존재한다.
• 부트스트랩 : 웹 사이트 디자인을 쉽게 만들어주는 라이브러리이다. CSS로 PC나 태블릿 등에도 반응형으로 제작하기 쉽게 만들어준다.
• 리액트 : 페이스북처럼 한 화면에서 모든 내용을 볼 수 있는 사이트를 SPA(single page application)이라 하는데 SPA나 복잡한 사이트를 개발할 때 주로 사용되는 프레임워크이다. 페이스북에서 개발하였다.
• 앵귤러 : 구글에서 개발했다. 웹앱을 제작할 때 사용하며 프로젝트 성격에 따라 리액트와 앵귤러 중 프레임워크를 선택하여 사용하기도 한다.
• 뷰(Vue) : 화면에 보이는 부분에만 초점을 맞추기 떄문에 다른 라이브러리나 프레임워크와 함꼐 사용할 수 있다.
  ※ 라이브러리와 프레임워크의 차이 : 개발 주도권의 유무.
• 프레임워크 : 주도권이 프레임워크에 있다. 웹 개발을 시작하는 방법부터 기능을 구현하는 모든 것을 프레임워크에서 정해둔 대로 따라야 한다.
• 라이브러리 : 개발의 주도권이 개발자에게 있다.

출처 : 웹 표준의 정석 (고경희 저)