728x90
01-1 웹 개발 알아보기
웹 개발이란?
웹 사이트에서 사용자에게 제공할 기능과 서비스까지 모두 담을 수 있어야 함.
서버와 클라이언트
- 서버:정보를 제공. (웹 사이트에서 정보를 검색하거나 처리하고, 사용자의 요청을 받아 처리한 결과는 클라이언트에서 보여줌)
- 클라이언트: 정보를 요청. (사용자와 서버 사이에서 화면으로 보여주는 역할)
프론트엔드 개발과 백엔드 개발
- 프론트엔드: 웹 브라우저 화면에 보이는 것. (HTML, CSS, Java Script)
- 백엔드: 데이터베이스를 설계하거나 데이터를 처리 (Java, PHP, Python)
01-2 웹 개발, 어디서부터 시작할까
웹 개발을 위해 공부해야 할 기술
기본 영역
- HTML
- CSS
- Java Script
- 깃/깃허브
프론트엔드 영역
- 다양한 라이브러리: 제이쿼리, D3.js, 부트스트랩 등
- 프레임워크: 리액트, 앵귤러, 뷰 등
백엔드 영역
- 리눅스 서버, 네트워크, 데이터베이스 구축 기술
- 서버 언어: Python, Java, PHP, 닷넷 등
- 프레임워크: Node.js, 스프링, Django 등
웹 개발의 기본 HTML, CSS, 자바스크립트
웹 문서의 뼈대를 만드는 HTML
- 웹 브라우저의 여러 내용 중에서제목과 본문, 이미지, 표와 같은 웹 요소를 알려주는 역할
웹 문서를 꾸미는 CSS
- HTML로 만든 내용을 사용자가 알아보기 쉽게 꾸미거나 사용하기 편리하도록 배치할 때 사용.
- 규격이 정해진 PC나, 모바일 화면에 여러 내용을 보여줘야 하므로 CSS를 이용해서 웹 요소를 적절하게 배치하고 필요한 곳을 강조할 수 있다.
사용자 동작에 반응하는 Java Script
- 팝업창을 보여주거나 상품 목록을 자동으로 스크롤하는 것처럼 동적인 효과를 사용할 때 필요
프론트엔드 개발을 위한 기술
바닐라 자바스크립트: 라이브러리나 프레임워크를 사용하지 않고 자바스크립트만으로 처음부터 끝까지 직접 개발하는 것.
| 종류 | 특징 | 관련 사이트 |
| 제이쿼리(jQuery) | DOM을 활용해 웹 요소를 조작하기 쉽고 사용하기 편리한 라이브러리 도구. | jquery.com |
| D3.js | 웹 브라우저에서 실시간으로 변하는 정보를 시각적으로 표시하기에 적합한 라이브러리 도구. | d3js.org |
| 부트스트랩(Bootstrap) | 웹 사이트 디자인을 쉽게 만들어주는 라이브러리 도구 | getbootstrap.com |
| 리액트(React) | 복잡한 사이트를 개발할 때 프레임워크를 사용 | ko.reactjs.org |
| 앵귤러(Angular) | 구글에서 개발한 언어로 웹 애플리케이션을 제작하는 프레임워크 | angular.io |
| 뷰(Vue) | 웹 애플리케이션에서 사용자 인터페이스를 만드는 프레임워크 | vuejs.org |
백엔드 개발을 위한 기술
| 종류 | 특징 | 관련 사이트 |
| Node.js, Express | 서버에서 자바스크립트를 실행할 수 있는 환경, 즉 플랫폼. | node.js.org |
| Java, Spring | 오랫동안 백엔드 개발용으로 사랑받은 언어이고, 오픈소스가 많다. | java.com |
| Python, Django | 데이터를 많이 다뤄야하는 분야에서 유리. | python.org |
| PHP, 코드이그나이터 | 백엔드 개발에서 오랫동안 사용된 개발 언어. | php.net |
728x90