[Web] 기본 지식 익히기
✏️ 웹 개발이란?(Web Develop)
단순하게 말해서 웹사이트를 개발하는 것
웹사이트란 단순한 것들이 아니라 사용자에게 제공할 기능이나 서비스 등도 함께 제공할 수 있어야 함
정적 사이트(Static Site) : 방문자에게 정보를 보여주기만 하는 사이트(취업을 위한 포토폴리오 사이트 등)
동적 사이트(Dynamic Site) : 사용자 상호작용에 따라서 변경되는 사이트(페이스북, 인스타그램 등)
✏️ 서버(Server)
인터넷과 연결된 컴퓨터를 칭함
쉽게 생각하면 웹 사이트에서 정보를 검색하고 처리하는 일들을 한다고 생각하면 됨
✏️ 클라이언트(Client)
사용자가 웹 사이트에 접근하려고 사용하는 PC나 태블릿 PC등
웹 사이트에서 사용자의 요청을 받아 처리한 결과를 클라이언트에서 보여준다
즉, 사용자와 서버 사이에서 화면으로 보여 주는 역할을 한다
✏️ 프런트엔드(Front-end)
사용자 앞에 보이는 영역으로, 웹 브라우저 화면에 보이는 것을 다룸
웹 사이트를 디자인하거나 사용자 동작에 반응하는 기능을 만듦
HTML, CSS, JavScript를 사용함
✏️ 백엔드(Back-end)
사용자 뒤에서 보이지 않는 영역으로, 웹 사이트의 회원 정보나 게시판 글 등은 데이터 베이스에 저장됨
이런 데이터베이스를 설계하거나 데이터를 처리하는 것을 다룸
Java, PHP, Python 등을 사용함
백엔드 개발의 언어와 프레임워크
Node.js / Express : Node.js는 서버에서 JS를 실행할 수 있는 환경(플랫폼)이고 Node.js에서 주로 사용하는
웹 개발 프레임워크는 Express
Java / Spring : Java는 백엔드 개발 언어이고, 안드로이드 앱을 개발하거나 셋톱 박스나 하드웨어용 애플
리케이션을 만드는데 사용/ Java는 웹 개발 프레임워크는 주로 Spring을 사용
Python / Django : Python은 입문자가 처음 공부할 때 선택하는 언어로, 데이터를 많이 다뤄야 하는 분야에서는
Python이 유리함/ Python의 프레임워크로는 Django를 사용
PHP / 코드이그나이터 : PHP는 백엔드 개발에서 오랫동안 사용된 개발 언어/ 코드이그나티어는 PHP의 대표적인
웹 프레임워크
✏️ HTML(Hyper Text Markup Language)
웹 브라우저 창에 웹 문서의 내용을 보여 주는데 필요한 약속이라고 할 수 있음
웹 상에서 주로 제목, 이미지, 표와 같은 웹 요소를 알려주는 역할을 함
✏️ CSS(Cascading Style Sheet)
HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때 사용
규격이 정해진 PC, 모바일 화면에 여러 내용을 보여줘야 하므로 CSS를 이용해서 웹 요소를 적절하게 배치해야함
반응형 웹 디자인을 만들기 위해서는 CSS가 필수적임
✏️ 자바스크립트(Java Script)
요즘 웹 사이트들은 사용자가 클릭하거나 스크롤하는 동작에 따라서 반응함
이런 웹 사이트에서 동적인 효과를 사용하게 위해서는 자바스크립트가 필요함
규모가 큰 웹 사이트 개발에서는 React나 Vue같은 JS 프레임워크를 사용함
자바스크립트의 라이브러리와 프레임워크
제이쿼리(jQuery) => DOM을 활용해 웹 요소를 조작하기 쉽고 사용하기 편리한 라이브러리 도구
D3.js => 웹 브라우저에서 실시간으로 변하는 정보를 시각적으로 표시하기에 적합한 라이브러리 도구
부트스트랩(Bootstrap) => 웹 사이트 디자인을 쉽게 만들어 주는 라이브러리 도구
리액트(React) => SPA나 복잡한 사이트를 개발할 때 사용하는 프레임워크
앵귤러(Angular) => 웹 애플리케이션을 제작하는 프레임워크
뷰(Vue) => 웹 애플리케이션에서 사용자 인터페이스를 만드는 프레임워크