웹개발 시작하기

Do it! 한권으로 끝내는 웹 기본 교과서

HTML+CSS+JS 웹표준의 정석

 

으로 웹개발 공부 시작함.

---

웹개발?

정적 사이트	동적 사이트
정보를 보여주는 방식의 웹사이트	이용자를 위한 다양한 서비스가 제공되는 웹사이트
포폴 사이트, 기업 홍보 사이트 등	영화관, 쇼핑몰 등의 사이트

웹개발의 목적은 주로 동적 사이트를 제작하기 위함이며, 사용자에게 제공할 기능과 서비스를 모두 담아야 함

서버와 클라이언트

서버	<---------------상호작용-------------->	클라이언트
클라이언트 측에서 원하는 정보를 서버에서 찾아냄	<--------------------------------------	웹브라우저에서 정보 검색 또는 링크 클릭
찾은 정보를 클라이언트에게 전달	-------------------------------------->	전달받은 정보 시각화

프론트엔드와 백엔드

프론트 엔드	백 엔드
웹브라우저 화면에 보이는 것을 다룸	DB 설계 및 데이터 처리
모바일 웹 브라우저용 사이트 개발을 위해서는 필수	자바, PHP, 파이썬 등 다양한 언어 사용
HTML, CSS, JS 사용

웹개발을 위해 공부해야 하는 기술

기본 영역
HTML, CSS, JS, Git/Github
프론트엔드	백엔드
다양한 라이브러리 (제이쿼리, D3.js, 부트스트랩 등)	리눅스 서버, 네트워크, DB 기술 구축
프레임워크 (리액트, 앵귤러, 뷰 등)	서버 언어 (파이썬, 자바, PHP, 닷넷 등)
	프레임워크 (노드제이에스, 스프링, 장고, 코드이그나이터 등)

웹개발의 기본

HTML	제목, 본문, 이미지, 표 등과 같은 웹 요소를 알려주는 역할 웹브라우저에 보여주고 싶은 내용이 있을 때 HTML에 맞는 표기법 이용해야 함
CSS	HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때 이용 클라이언트의 규격에 맞춰 웹 요소를 적절하게 배치하고 필요한 곳을 강조
JS	팝업창을 띄우거나 스크롤에 반응하는 등 동적 효과를 사용하기 위해서 이용 규모가 큰 웹사이트 개발의 경우 프레임워크 이용

프론트엔드 개발기술

제이쿼리	DOM을 활용해 웹 요소를 조작하기 쉽고 사용하기 편리한 라이브러리 웹 애플리케이션 개발에 적합한 다른 라이브러리나 프레임워크에 자리를 내줌
D3.js	실시간으로 변하는 정보를 시각적으로 표시하기에 적합한 라이브러리 도구 데이터를 시각화해주는 js 라이브러리는 라파엘, Three.js 등이 있음
부트스트랩	웹사이트 디자인을 쉽게 만들어주는 라이브러리 반응형 디자인 만들 수 있음
리액트	한 화면에서 모든 내용을 볼 수 있는 사이트(SPA: Single Page Application)나 복잡한 사이트를 개발할 때사용하는 프레임워크 페이스북에서 개발
앵귤러	구글에서 개발한 웹 애플리케이션 제작을 위한 프레임워크
뷰	사용자 인터페이스를 만드는 프레임 워크 화면에 보이는 부분만 초엄을 맞춰 다른 라이브러리나 프레임워크와 함께 사용할 수 있음

백엔드 개발기술

서버 운영체제에 따라 사용하는 언어와 프레임워크가 달라짐
노드제이에스 - 익스프레스	노드제이에스: 서버에서 자바스크립트를 실행할 수 있는 환경 익스프레스: 노드제이에스에서 주로 사용하는 웹개발 프레임워크
자바 - 스프링	자바: 사랑받는 백엔드 언어 안드로이드 앱, 셋톱박스나 하드웨어용 애플리케이션 개발도 가능 스프링: 자바에서 주로 사용하는 웹개발 프레임워크
파이썬 - 장고	파이썬: 데이터를 많이 다루는 분야에서 유리 장고: 파이썬에서 주로 사용하는 프레임워크
PHP - 코드이그나이터	PHP: 백엔드 개발에서 오래 사용해옴 코드이그나이터: PHP의 대표적인 웹프레임워크