1-3. HTML + CSS + JS 개념 , JS 프레임워크와 라이브러리 소개

정말 기초이긴 하지만 그냥 개념을 정리하자는 의미에서~,, 

 

1. HTML 

Hyper Text Markup Language 로 웹 브라우저 창에 웹 문서의 내용을 보여주는데 필요한 약속이라고 할 수 있다. 

HTML은 웹 브라우저에서 어디가 헤더이고, 어디가 이미지이며, 어디가 제목인지에 대한 웹 요소를 알려주는 역할을 한다. 

즉, HTML은 웹 브라우저의 뼈대?를 만드는 역할이라고 생각하면 된다. 

 

2. CSS

HTML로 웹 요소를 만들고, 사용자가 보기 편하도록 꾸미고, 배치할 때 사용하는 것이 CSS이다. 

CSS로 반응형 웹을 만들기도 하고, 필요한 곳을 강조할 수 있다.

 

3. JavaScript

웹 사이트는 정적사이트와 동적사이트로 나눌 수 있는데, 기업용 홍보 페이지와 같이 사용자에게 단순히 정보만 제공하는 사이트보다는 요즘은 사용자가 클릭하면 그에 대한 반응이 있어야 하는 동적사이트가 많이 이용된다. 

이때 동작에 따라 반응하도록 구현할 때 사용하는 것이 JS이다. 

JS 문법을 익히고 나면, 리액트나 뷰와 같은 자바스크립트 프레임워크를 배우는데 훨씬 쉽다고한다. 

 

 

 

* 프레임워크란? 

프로그램을 만들 때 필요한 여러 기능을 쉽게 구현할 수 있도록 도와주는 도구이다. 

(이때 라이브러리랑 헷갈릴 수도 있는데 라이브러리는 개발자가 자신이 필요한 기능만 사용해도 되지만, 프레임워크는 프레임워크가 정해둔 대로 따라야 하기 때문에 조금 차이가 있다. )

 

* JS 라이브러리와 프레임워크 

제이쿼리 (jQuery) : DOM을 활용해 웹 요소를 조작하기 쉽고 사용하기 편리한 라이브러리이다.  (요즘은 조금 다른 프레임워크에 밀리는 추세) 

D3.js : 웹 브라우저에서 실시간으로 변하는 정보를 시각적으로 표시하기에 적합한 라이브러리 도구

부트스트랩 (Bootstrap) : 웹 사이트 디자인을 쉽게 만들어주는 라이브러리 도구이다. 

리액트 (React) : 페이스북처럼 한 화면에서 모든 내용을 볼 수 있는 사이트를 SPA(Single Page Application)이라고 한다. SPA처럼 복잡한 사이트를 개발할 때 프레임워크를 사용한다. (페이스북이 개발) 

앵귤러 (Angular) : 구글에서 개발한 언어로 웹 애플리케이션을 제작하는 프레임워크 

뷰 (Vue) : 웹 애플리케이션에서 사용자 인터페이스를 만드는 프레임워크 (화면에 보이는 부분에 중점을 두고 있어서 다른 라이브러리나 프레임워크를 함께 사용 ) 

 

 

* 백엔드 개발 언어와 프레임워크 

Node.js , Express : node.js는 서버에서 자바스크립트를 실행할 수 있는 환경, 즉 플랫폼이라고 생각하면 된다. 

node.js에서 주로 사용하는 웹 개발 프레임워크가 express이다. 

 

Java, Spring : 백엔드 개발로 많이 사용하던 언어 중 하나였던 자바이다. 자바의 웹 개발 프레임워크로는 스프링을 많이 사용한다. 

 

python, Django:  데이터를 많이 다뤄야하는 분야에서 더 유리하고, 좀 더 배우기 쉬워 많은 사용자들이 입문하기하는 파이썬이고, 파이썬 프레임워크로는 장고를 사용한다. 

 

php, CodeIgniter : php7 버전부터는 그냥 백엔드 개발을 위한 프레임워크로 변했다고는 한다. php 의 웹 프레임워크는 코드이그나이터이다.