1. 인터넷 발전 과정
-
cf. 1.2. 네트워크의 역사
-
네트워크: 컴퓨터를 연결하는 망의 개념
-
TCP/IP: 1982년 제정된 하드웨어/OS에 관계없이 통신 가능한 인터넷 표준 프로토콜이다.
-
인터넷의 시초: 1969년 미국 국방부의 알파넷(ARPANET)에서 시작되었다.
-
발전 요인
- TCP/IP 도입
- WWW(World Wide Web) 개발(CERN의 팀 버너스리)
- 상업화를 통해 대중화되었다.
-
WWW (World Wide Web): 하이퍼텍스트를 통해 정보를 공유하는 서비스로, HTML(언어), HTTP(프로토콜), URL(주소)이라는 3가지 표준 기술을 기반으로 한다.
2. 브라우저 종류
-
역사
- 모자익(1993) → 넷스케이프(1994) → 인터넷 익스플로러(1995) 순으로 등장했다.
-
현황
- 구글 크롬(Chrome)이 압도적인 점유율을 보인다.
- 애플 기기에서는 사파리(Safari)가 강세이다.
- (엣지와 파이어폭스는 5% 미만)
-
주요 브라우저
- Chrome: 2008년 출시, 오픈소스, 웹 표준 준수 우수
- Safari: 2003년 애플 개발, 애플 기기 전용
- Firefox: 2004년 모질라 재단 개발, 비영리/자유 소프트웨어
-
개발자 도구
- 브라우저에서
F12또는우클릭 -> 검사를 통해 HTML/CSS/JS 코드를 확인하고 디버깅할 수 있는 기능을 제공한다.
- 브라우저에서
3. 인터넷 기본 개념
-
동작 원리
- 클라이언트(웹 브라우저)가 웹 서버에 HTTP 프로토콜로 요청을 보내면,
- 서버가 HTML을 응답하고 브라우저가 이를 해석하여 화면에 표시한다.
-
소프트웨어 아키텍처: 클라이언트-서버 모델
- (자원을 관리하는 서버 vs 서비스를 요청하는 클라이언트)
-
상세 설명
- 클라이언트와 공통 서비스를 제공하는 서버 시스템들과 상호 작용하는 구조
- 서버: 자원을 관리하며 클라이언트가 요청하는 기능이나 자원을 제공
- 아파치 톰캣(Apache Tomcat) 웹 서버 프로그램
- 클라이언트: 서버가 제공하는 서비스를 요청(호출)하는 서브시스템
- 크롬(Chrome)이나 사파리(Safari)와 같은 웹 브라우저
-
주소 체계
- URL: 자원의 위치를 나타내는 규약 (프로토콜, 호스트, 포트, 경로로 구성)
- 도메인(Domain): 기억하기 힘든 IP 주소를 문자로 대체한 것 (DNS 서버가 IP로 변환)
4. 웹 프로그래밍 주요 기술
- 기본 구조
- 프로그램은 서버에서 실행되고, 실행 결과만 컴퓨터의 브라우저를 통해 보여짐
- 백엔드(Server): 서버 구성, DB, 프레임워크 등
- 프론트엔드(Client): 화면 구성(HTML), 스타일(CSS), 동적 처리(JavaScript)
4.1. 프론트엔드 기본 언어
-
언어별 역할
- HTML (HyperText Markup Language)
- 문서의 구조를 정의하는 마크업 언어
- 계층적인 태그로 요소를 표시
- CSS (Cascading Style Sheet)
- 디자인 요소 정의 (색상, 배치 등)
- CSS 프레임워크: 부트스트랩, Tailwind CSS
- JavaScript
- 사용자 상호작용 및 동적 처리
- (최신 버전 ES6+, TypeScript 등 활용)
- HTML (HyperText Markup Language)
-
마크업 언어(Markup Language)
- 문서의 속성을 설정하기 위한 마크업을 태그의 형태로 표시
- SGML(Standard Generalized Markup Language)
- 다양한 형식의 전자문서들의 구조와 내용을 기술하는 국제표준(1986, ISO)
- HTML(HyperText Markup Language)
- SGML로 정의된 문서 형식으로 주로 웹 문서 작성에 사용
- XML(eXtensible Markup Language)
- 문서나 자료의 교환이 필요한 경우 새로운 언어가 필요
-
HTML5 특징
- 시맨틱 태그, 멀티미디어(Video/Audio), 캔버스, 오프라인 웹, 드래그 앤 드롭, 웹 스토리지, 위치 정보, 웹 소켓 등 지원
-
JavaScript 특징
- 인터프리터 언어
- 동적 타이핑 지원
- 객체 기반의 스크립트 언어
- 함수형 프로그래밍 지원
- 프론트앤드 개발, 서버 개발, 데스크탑 개발에 활용
-
ECMAScript
- 1997년 ECMA(European Computer Manufactures Association)에서 제정한 ECMA-262 기술 표준에 의해 정의된 스크립트 사양
- JavaScript는 ECMAScript 사양을 준수하는 범용 스크립트 언어
- ECMAScript 2016(ES6): 화살표 함수, 클래스 ,모듈, 비동기 처리(Promise, Async/Await)
- ECMAScript 2024: 최신 버전
4.1. 프론트엔드 프레임워크
-
프론트엔드 프레임워크
- React: Meta(Facebook) 개발, Virtual DOM 사용
- Vue: 간결함, Virtual DOM 사용
- Angular: Google 개발, 엔터프라이즈급, Incremental DOM
- Svelte: 컴파일러 방식, Real DOM
- HTMX: JS 없이 HTML 속성만으로 동적 기능 구현
-
cf. Back-end Framework
- JSP
- Spring Framework
- Python: Django, Flask, FastAPI
- Nest.js
4.3. 프론트엔드 중심 개발
-
프론트엔드 중심 개발
- 사용자 인터페이스(UI)가 중심이 되는 개발 방식이다.
- 이때 렌더링 방식은 CSR(Client-Side Rendering) 등이 있다.
- CSR은 서버로부터 필요한 데이터를 API로 받아와, JS로 화면을 구성한다.
-
CSR(Client-Side Rendering)
- 서버는 데이터만 주고 브라우저가 화면을 구성하는 방식
- (SPA, PWA 등)
-
프론트엔드 중심 개발의 특징
- 사용자 경험(UX), 사용자 인터페이스(UI) 그리고 웹 성능과 웹 접근성이 중요
- SPA(Single Page App), PWA(Progressive Web App) 등의 구현에 적용 가능
- 필요한 실시간 데이터만 갱신 가능(REST API) 형태
-
최근 특징
- 인공지능(AI) 기술 연동을 통한 향상된 UX 지원
- 서버리스 아키텍처(serverless architecture): 클라우드가 인프라 제공
- JAMstack(JavaScript, APIs, Makup) 아키텍처: SSR 의존성 축소
- 동적 처리 JavaScript, 정적 컨텐츠, 재사용 가능한 API를 기반으로 웹 구축하는 방식
4.4. 모바일 앱 종류
-
네이티브 앱(Native App)
- 플랫폼별 언어(Swift, Kotlin)로 개발, 성능 우수
-
웹 앱(Web App)
- 웹 기술로 개발, 설치 불필요, 성능은 상대적으로 느림
-
하이브리드/PWA
- 둘의 장점을 결합
5. 웹 프로그래밍 개발 도구
실습 환경을 구축하는 과정이다.
-
Node.js 설치
- 자바스크립트 런타임 환경 (
node -v로 설치 확인)
- 자바스크립트 런타임 환경 (
-
VS Code (Visual Studio Code) 설치
- MS에서 만든 소스 코드 편집기
-
VS Code 필수 확장 프로그램 설치
- Korean Language Pack (한국어 지원)
- HTML CSS Support (자동 완성)
- Live Server (실시간 코드 확인 서버)
- Code Runner (코드 실행)
-
프로젝트 실습
- 폴더 생성 및
hello.html파일 생성 - 기본 HTML 코드 작성 (
<title>,<body>태그 등) - Live Server를 통해 브라우저에서 실행 결과 확인
- 폴더 생성 및