요청(Request)
- GET 방식
-
URL을 통해 서버에 데이터를 요청하는 방식
-
Header : 브라우저 정보, 쿠키, 언어 설정 등 다양한 메타데이터 포함
-
Body : GET 방식에서는 데이터가 URL 쿼리 스트링에 포함되기 때문에 비어 있음
응답(Response)
- Status Line
-
상태 코드 : 200(성공), 404(페이지 없음), 500(서버 오류) 등
-
상태 메시지 : 상태 코드에 대한 설명 메시지
- Header
- 서버 정보 : 서버 소프트웨어, 콘텐트 타입, 쿠키 설정 등
- Body
- HTML 문서 :
<html>태그로 시작하며, 클라이언트에 제공될 웹 페이지의 내용 포함
웹 브라우저 동작
- HTML Parsing
- HTML 해석기가 HTML 내용을 트리 구조로 파싱하여 DOM(Document Object Model) 형성
- Resource Requests
- CSS 파일 및 JS 파일이 HTML 문서에 포함되어 있을 시 추가 요청
- Connection 종료
- 초기 리소스 로딩이 완료되면 서버와의 연결 종료
- DOM 형성
- HTML 문서를 객체화하여 부모와 자식 간의 트리 구조를 형성
- CSS 적용
- CSS를 통해 DOM 요소의 스타일 및 레이아웃 조정
- JS 실행
- JavaScript 코드를 통해 동적인 사용자 인터페이스 및 이벤트 처리
메모리 객체화 및 새로고침
- 객체화
- JavaScript는 함수도 객체로 취급, 일급 객체로 동작
- 새로고침
- 리소스를 다시 요청하여 페이지를 초기화
캐싱 기능
-
동일 리소스를 다시 요청할 때 성능 향상을 위해 캐싱 기능 사용
-
브라우저는 캐시에 저장된 리소스를 사용하여 서버 요청을 줄임
모바일 웹 브라우저
- 화면 크기
- 작은 화면에 맞게 CSS로 레이아웃 조정
- 서버 분리
- 모바일과 데스크톱의 리소스를 분리하여 별도의 서버로 관리 가능
- 예:
m.naver.com(모바일),www.naver.com(데스크톱)
- 예:
- Controller
-
웹 서버 내에 위치하여 클라이언트 요청을 분석하고, 모바일과 데스크톱에 맞는 리소스를 제공하는 역할
-
작동 방식
-
클라이언트가 요청을 보내면 Controller가 해당 요청을 수신
-
요청의 특성(모바일 또는 데스크톱)을 분석
-
적절한 View와 Model을 결합하여 응답을 생성
-
응답을 클라이언트에 반환
-
DOM 초기화 문제 해결
-
작은 변화만 있음에도 전체 DOM을 다시 초기화하여 렌더링 효율성이 떨어지는 문제
-
XHR(XMLHttpRequest) 사용
-
JavaScript의 XHR 객체를 사용하여 서버와 비동기적으로 데이터를 주고받음
-
전체 페이지를 새로고침하지 않고 필요한 부분만 갱신
-
동적 리소스 처리
-
Controller 필요
-
웹 서버가 해석할 수 없는 동적 자원 요청을 Controller가 처리
-
MVC 패턴을 사용하여 Model, View, Controller를 분리하여 코드 가독성 향상
-
비동기 및 동기 처리
-
비동기
- 서버로부터 데이터를 비동기적으로 받아와 화면을 업데이트(AJAX, Fetch API)
-
동기
- 요청에 대해 즉시 응답을 받고 처리
웹의 발전
-
Web 1.0 : 정적 사이트
- 고정된 HTML 문서, 사용자와의 상호작용 최소화
-
Web 2.0 : XHR 객체의 비동기 처리 가능
- 동적인 콘텐츠와 사용자 상호작용 강화
-
Web 3.0 : 블록체인 기반
- 데이터의 분산 저장, 탈중앙화, 스마트 계약 등
Web 3 개요
-
P2P(Peeer-to-Peer)
- 중앙 서버 없이 사용자 간 직접 연결을 통한 데이터 공유
-
Blockchain
-
데이터 무결성을 보장하고, 데이터를 변경할 수 없도록 설계된 분산형 데이터베이스
-
보안성 한계
- 블록체인은 기밀성을 보장하지 않으며, 모든 데이터가 공개적으로 저장됨
-
-
블록 단위 데이터 저장
-
해싱(Hashing)
-
데이터를 고정된 크기의 고유한 문자열로 변환하는 괒어
-
암호화된 형태의 데이터 서명으로, 입력 데이터의 무결성을 확인하는 데 사용
-
해시 함수는 일방향 함수로, 해시 값을 통해 원래 데이터를 역산할 수 없음(복호화 불가)
-
-
블록(Block)
- 각 블록은 데이터를 포함하고 있으며, 블록 헤더에는 현재 블록의 해시 값과 이전 블록의 해시 값이 포함
-
체인(Chain)
-
여러 블록이 연속적으로 연결된 구조를 형성하는 것
-
각 블록은 이전 블록의 해시 값을 포함하여 블록 간의 순서를 보장
-
새로운 블록이 생성될 때마다 이전 블록의 해시 값을 포함하여 체인에 추가됨
-
연결 방식
- 블록 A > 블록 B > 블록 C 순서로 연결되며, 블록 C는 블록 B의 해시 값을, 블록 B는 블록 A의 해시 값을 포함
-
무결성 보장
-
각 블록이 이전 블록의 해시 값을 포함하기 때문에 블록체인은 데이터를 변경할 수 없도록 보호
-
어떤 블록의 데이터가 변경되면 해당 블록의 해시 값이 바뀌고, 이어지는 모든 블록의 해시 값도 바뀌어야 하므로 체인의 무결성이 깨짐
-
-
-
-
Bitcoin
-
P2P 네트워크에서의 디지털 화폐, 송금 기능 중심
-
보상 시스템을 통해 네트워크 유지와 보안을 강화하는 인센티브를 제공, 마이너들이 새로운 블록을 생성하고 트랜잭션을 검증
-
-
이더리움
- 송금 외에도 스마트 계약, 분산 어플리케이션(DApps) 지원
-
Private/Consortium Blockchain
- 특정 조직 내에서 사용되는 블록체인, 권한이 있는 사용자들만 접근 가능
API 사용 시 보안 및 무차별 공격 방지
- 개발자 키(API Key)를 통해 무차별 공격을 방지하고, 초당 요청 회수를 제한하여 서비스 안정성을 유지
- 이러한 보안 조치는 서비스 남용을 방지하고, 안정적인 서비스 제공을 가능하게 함
JavaScript 개요
-
JavaScript
-
동적인 웹 페이지를 만들기 위해 개발된 프로그래밍 언어
-
Netscape에서 처음 개발, 초기 이름은 Mocha
후에 LiveScript로 이름이 바뀌었고, 결국 JavaScript로 변경 -
클라이언트 측 이벤트성 언어로서, 사용자 인터페이스의 동적인 부분을 처리
-
브라우저에서 실행되어 DOM 요소를 조작
-
ES6(ECMAScript 2015)의 도입으로 웹 API와 자바스크립트 언어만으로 웹 어플리케이션을 만들 수 있게 됨
-
자바스크립트의 잠재적 문제들을 해결
-
가독성 및 유지 보수성을 크게 개선
-
바벨(BABEL)과 같은 하위 문법을 따르는 코드로도 쉽게 다운그레이드 할 수 있어 호환성 문제도 해결
-
-
브라우저와 JavaScript
-
브라우저 + LiveScript Interpreter
-
초기에는 브라우저가 LiveScript 인터프리터를 사용하여 DOM(Document Object Model) 요소를 조작.
-
현대 브라우저는 고성능 JavaScript 엔진(V8, SpiderMonkey 등)을 사용하여 빠르고 효율적으로 코드를 실행.
-
JQuery
-
JQuery
-
JavaScript를 쉽게 사용할 수 있도록 해주는 라이브러리
-
다양한 브라우저 호환성을 보장하며, DOM 조작을 간편하게 해줌
-
Node.js
-
Node.js
-
V8 JavaScript 엔진을 사용하여 서버 측에서도 JavaScript를 실행할 수 있는 환경 제공
-
비동기 I/O 처리를 통해 고성능 서버 어플리케이션 개발 가능
-
-
npm(node package manager)
-
Node.js 기반에서 개발된 오픈 소스를 모듈로 올려놓은 일종의 앱스토어 같은 저장소
-
예를 들어, 웹 개발에 필요한 jQuery와 같은 모듈을 사용하고 싶다면 npm 명령어를 통해 쉽게 다운로드하여 사용할 수 있음
-
JQuery vs Node.js
-
용도 및 역할
-
JQuery : 클라이언트 측 라이브러리로서, 웹 브라우저에서 동적인 사용자 인터페이스를 구축하고 DOM을 조작하는 데 사용
-
Node.js : 서버 측 런타임 환경으로서, 서버 애플리케이션과 네트워크 애플리케이션을 개발하고, 파일 시스템, 데이터베이스와 같은 서버 자원을 관리하는 데 사용
-
-
실행 환경
-
JQuery : 웹 브라우저 내에서 실행, 사용자가 웹 페이지를 볼 때 실행되는 자바스크립트 코드
-
Node.js : 서버 또는 로컬 개발 환경에서 실행, 브라우저가 아닌 서버 측에서 동작
-
-
기능 및 사용 사례
-
JQuery
-
DOM 조작 : HTML 요소를 동적으로 추가, 삭제 또는 수정
-
이벤트 처리 : 사용자 인터페이스 이벤트(클릭, 키 입력 등) 처리
-
AJAX : 비동기 요청을 통해 서버와 데이터를 주고받아 페이지 새로고침 없이 업데이트
-
애니메이션 : 간단한 애니메이션 효과 구현
-
브라우저 호환성 : 다양한 브라우저에서 동일한 코드가 작동하도록 호환성 처리
-
-
Node.js
-
서버 개발 : HTTP 서버, 웹 소켓 서버, API 서버 개발
-
파일 시스템 접근 : 파일 읽기, 쓰기, 삭제 등
-
데이터베이스 연결 : 데이터베이스와의 연결 및 데이터 조작
-
비동기 I/O : 비동기 방식으로 많은 동시 연결을 효율적으로 처리
-
npm 사용 : 수많은 모듈과 패키지를 설치하여 다양한 기능 구현
-
-
-
의존성
-
JQuery : 웹 브라우저가 필요, 브라우저 내에서 HTML과 CSS와 함께 동작
-
Node.js : 웹 브라우저가 필요하지 않음, 서버 측에서 자바스크립트를 실행하기 위한 런타임 환경
-
-
JQuery와 Node.js는 상호 보완적인 관계
Node.js 설치
홈페이지에서 다운로드 후 cmd창에서 node -v 입력 시 버전이 나왔으면 설치 성공
node가 실행되면서 자바스크립트 코드를 입력하여 코드를 수행할 수 있는 환경이 됨, 이것을 REPL(Read Eval Print Loop)라고 부르며, 자바스크립트 코드를 한 줄씩 간단하게 테스트하고 실행해볼 수 있는 인터랙티브한 환경
css 스타일 지정
id 선택자
지정 id 앞에 #붙임
<html lang="en">
<head>
<style type="text/css">
#divid, #divpw{
margin : 10px 10px;
}
#lblid{
color : red;
}
#lblpw{
color : blue;
}
#userid, #userpw{
width : 100%;
}
#login{
float : right;
background : red;
color : white;
}
</style>
</head>
<body>
<div id="divid">
<label id="lblid">아이디</label>
<input type="text" id="userid">
</div>
<div id="divpw">
<label id="lblpw">비밀번호</label>
<input type="password" id="userpw">
</div>
<button type="submit" id="login">로그인</button>
</body>
</html>
class 선택자
지정 클래스 앞에 . 붙임
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.account{
margin : 10px 10px;
}
.write{
width : 100%;
}
.login{
float : right;
background : red;
color : white;
}
</style>
</head>
<body>
<div class="account">
<label>아이디</label>
<input type="text" class="write">
</div>
<div class="account">
<label>비밀번호</label>
<input type="password" class="write">
</div>
<button type="submit" class="login">로그인</button>
</body>
</html> 
Bootstrap
-
부트스트랩x
내부 스타일만 적용되어 Source에 test02.html만 존재 -
부트스트랩o
부트스트랩 적용 시 test03.html 내용이 공백이여도 test03.html 외 Source에 요소들 존재
테이블 꾸미기
<table class="table table-striped">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
버튼, 버튼 css 추가
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button> 
Navbar 추가
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav> 
