웹 개발(Web Development)은 무엇인가❓
: 웹 사이트나 웹 애플리케이션을 만드는 과정
웹 개발 단계 🚦
➊ 요구 사항 분석
사용자가 웹사이트를 어떻게 사용할지, 어떤 기능이 필요한지 등을 파악하는 과정
목적과 기능을 이해하고, 사용자의 요구 사항을 분석함
➋ 디자인
요구 사항을 바탕으로 웹 사이트 디자인을 계획함
사용자 경험(UX)과 사용자 인터페이스(UI)를 고려하여 웹사이트의 레이아웃, 색상, 그래픽 등을 디자인함
➌ 프론트엔드 개발
디자인을 바탕으로 사용자와 직접 상호작용하여 프론트엔드 개발을 시작
HTML, CSS, JavaScript를 사용하여 사용자가 실제로 보는 화면을 만듦
| HTML | CSS | JavaScript |
|---|---|---|
| 웹 페이지의 구조 | 스타일과 레이아웃을 지정 | 상호작용과 동적 기능 |
➍ 백엔드 개발
뒤에서 동작하는 서버 측 코드를 작성
데이터베이스와의 통신, 비즈니스 로직 처리, 사용자 인증 등을 담당합니다. 주로 PHP, Python, Ruby, Java, Node.js 등의 언어와 프레임워크를 사용합니다.
➎ 테스트
개발된 웹사이트를 테스트하여 버그 발견 및 수정
기능 테스트, 성능 테스트, 보안 검사 등을 수행하여 안정성과 품질을 보장함
➏ 배포
개발된 웹사이트를 실제 서버에 배포하여 사용자들이 이용 가능하도록 함
서버 설정, 데이터베이스 구축, 도메인 등록 등의 작업이 포함
웹 브라우저, 웹 서버
HTML(구조) + CSS(형태) + JS(유저 이벤트 처리 및 DOM 조작)
프론트엔드에서 웹 개발 🏴
- 사용자가 브라우저를 통해 보는 모든 것을 만드는 프로세스를 가리킴
- 웹사이트 또는 웹 애플리케이션의 시각적 요소와 사용자와의 상호작용을 담당
프론트엔드 개발 언어 및 기술
📕HTML (HyperText Markup Language)
= 웹페이지의 구조를 정의하는 언어
◦ 웹사이트의 각 요소를 정의하고, 텍스트, 이미지, 링크 등을 포함
◦ 웹페이지의 내용을 구조화하여 브라우저가 적절히 해석하고 표시할 수 있도록 합니다.
📗CSS (Cascading Style Sheets)
= 웹페이지의 디자인과 레이아웃을 정의하는 언어
◦ HTML 요소에 스타일을 적용하여 텍스트 스타일, 색상, 폰트, 배경, 레이아웃 등을 설정
◦ 웹사이트의 시각적인 부분을 디자인하여 사용자에게 보기 좋은 환경을 제공
📘JavaScript
= 웹페이지의 동적 기능을 구현하는 언어
◦ 사용자와 상호작용하고, 웹페이지의 내용을 변경하고, 이벤트를 처리하며, 애니메이션을 추가하는 등 다양한 기능을 수행
◦ 웹사이트를 보다 동적이고 사용자 친화적으로 만들어줌
javascript 특징
- 동적인 웹 페이지 제작
- 이벤트 처리
- 웹 애플리케이션 개발
- 브라우저 호환성
- 서버 측 개발
프론트엔드 개발 프레임워크 및 라이브러리
🟡 Angular
- 강력한 명령행 도구와 잘 정돈된 폴더 구조, 프로젝트 생성과 동시에 각종 환경이 한 번에 갖춰지는 등 필요한 기능을 모두 내장한 프레임워크(= Complete Framework)
- Google 2010년 개발 및 출시
- 2016년에는 타입스크립트(TypeScript) 기반 프레임워크인 Angular 2가 출시되면서 실질적인 전환이 이루어짐
- TypeScript를 주로 사용, 정적 타입 검사를 통해 안정성 강화
- 공식적인 문서와 커뮤니티가 풍부 -> 지원 용이
- 대규모 애플리케이션 및 엔터프라이즈 레벨의 프로젝트 적합
- 학습 곡선이 다소 가파르고, 초기 설정과 배우기가 다소 복잡할 수 있음
🟢 React
- 자의 조작에 따라 사용자 인터페이스가 동적으로 변화하는 웹 애플리케이션을 개발할 수 있게 해 주는 프론트엔드 라이브러리
- Facebook이 2013년에 개발 및 출시
- UI를 구축하기 위한 라이브러리
- JSX(JavaScript XML)를 사용하여 JavaScript 코드 안에 마크업 작성 가능
- 가상 DOM(virtual DOM)을 사용하여 성능 향상
- 컴포넌트 기반 아키텍처를 통해 코드의 재사용성과 유지보수성을 높임
- 생태계가 매우 활성화되어 있고, 다양한 라이브러리와 도구 존재
- 학습 곡선은 다소 완만하며, 작은 프로젝트부터 대규모 애플리케이션까지 적용이 가능
🔵 Vue.js
- Google 직원인 Evan You에 의해 2014년 개발
- 경량 프레임워크로서, 가볍고 유연한 설계를 지향
- 프로그레시브 프레임워크로, 점진적으로 적용이 가능
- 단일 파일 컴포넌트(Single File Components)를 지원하여 컴포넌트 기반의 개발 용이
- 가상 DOM을 사용하여 성능을 최적화하고, 반응성 향상
- 간단한 문법과 직관적인 API를 제공 -> 학습 곡선이 낮음
- 빠르고 작은 규모의 프로젝트부터 시작하여 점진적으로 확장 가능
등등..
jQuery
브라우저 호환성을 위한 (크로스 브라우저) 자바스크립트 라이브러리
jQuery 기능
- 요소 선택과 조작
- CSS 선택자를 사용하여 HTML 요소를 선택하고 조작하는 강력한 기능을 제공함
- 선택한 요소에 대해 속성 변경, 클래스 추가/제거, 텍스트 수정 등의 작업을 간단하게 수행 가능
- 이벤트 처리
- 이벤트 핸들러를 등록하고 제거하는 메서드를 제공하여 이벤트 처리를 보다 편리하게 가능
- 애니메이션과 효과
- 요소의 표시, 감춤, 이동, 크기 조절 등의 애니메이션 효과 제공
- 웹 페이지에 다양한 시각적 효과 추가
- AJAX 요청
- 서버로부터 데이터를 비동기적으로 로드하고, 웹 페이지의 내용을 업데이트함
$.ajax() 및 $.get()과 같은 메서드를 사용하여 AJAX 요청을 보내고 응답을 처리할 수 있음
- 크로스 브라우징 지원
- 다양한 브라우저에서 일관된 동작을 보장하는 크로스 브라우징 지원을 제공함 - 브라우저 간의 호환성 문제 해결
웹 개발(Web Development)는 어떻게 동작하는가?
➊ URL 해석 및 요청 전송
사용자가 웹 주소(URL)를 입력 -> 브라우저는 해당 URL을 해석하고 요청을 생성
HTTP 또는 HTTPS 프로토콜을 사용하여 서버에 요청 전송
이 요청에는 사용자가 요청한 페이지를 가져오기 위한 필요한 정보를 포함
➋ 서버 응답 수신 및 데이터 전송
서버는 클라이언트(브라우저)의 요청을 받고, 요청에 대한 응답으로 HTML 문서 및 필요한 리소스(이미지, 스타일 시트, JavaScript 파일 등)를 전송
브라우저는 이러한 리소스들을 다운로드하고 캐시함
➌ HTML 파싱 및 DOM 생성
브라우저는 받은 HTML 문서를 파싱하고, DOM(Document Object Model) 트리 생성
DOM은 HTML 문서의 구조를 표현하는 트리 구조로, 각 HTML 요소를 노드로 표현
➍ CSS 파싱 및 스타일 계산
브라우저는 CSS 파일을 파싱하고, 각 요소에 적용되는 스타일을 계산
스타일 계산은 요소의 크기, 위치, 색상, 폰트 등의 속성을 결정
➎ 레이아웃(Layout)
브라우저는 각 요소의 크기와 위치를 계산하여 화면에 배치
이 과정을 통해 요소들이 화면에 어떻게 배치될지 결정됨
➏ 페인팅(Painting)
브라우저는 각 요소를 화면에 그림
이 때 각 요소의 스타일, 색상, 배경 등이 적용됨
➐ 상호작용 및 이벤트 처리
사용자의 상호작용(클릭, 입력 등)에 따라 브라우저는 이벤트를 처리하고 필요한 작업을 수행
JavaScript를 사용하여 동적으로 내용을 변경하거나 이벤트를 처리 가능
