1장) Node.js-to-AngularJS 스택 소개

- 웹 개발 프레임워크의 기본 컴포넌트에 초점이 맞춰져 있다

- Node.js-to-AngularJS 스택의 컴포넌트를 설명.

 

[ 기본 웹 개발 프레임워크 이해 ]

주요 컴포넌트 ⇒ 사용자 / 브라우저 / 웹 서버 / 백엔드 서비스

사용자 → 백엔드 서비스에 이르기까지 컴포넌트들은 탑다운 방식으로 설명되어 있다.

---

<브라우저>

• 클라이언트 측 자바스크립트들
• JSON/XML/기타
• HTML/CSS/images
• 사용자 상호작용

[ HTTP GET/PUT/AJAX ]

HTML - CSS - JSON - AJAX - JPG - JS

 

<서버>

• 웹 서버 아파치/IIS/기타
• 서버측 스크립트들 PHP/자바/닷넷/기타
• DB MySQL/오라클/NoSQL/기타

*** 웹 서버 ↔ 서버측 스크립트들

*** 서버측 스크립트들 ↔ 파일들

*** 서버측 스크립트들 ↔ 그 밖의 서비스 ↔ DB

 

 

[ 사용자 ]

 

웹 프레임워크에서 사용자들은 웹 페이지의 시각적인 출력부와 인터랙션 입력부에 앉아있는 역활.

사용자는 웹 프레임워크 처리 결과를 보고 → 마우스 클릭 & 키보드 입력 등을 이용해 웹 프레임워크와 상호작용

 

[ 브라우저 ]

 

→ 웹 서버에 정보를 제공하거나 제공 받는다.

→ 서버의 데이터를 해석 → 사용자가 실제로 볼 수 있게 처리

→ 키보드, 마우스, 터치스크린 등의 입력 장치를 거쳐 전달된 사용자 인터랙션을 처리

 

 

[ 브라우저와 웹 서버 간의 통신 ]

 

HTTP와 HTTPS 프로토콜을 이용한 일련의 요청들로 구성된다.

HTTP는 발생할 수 있는 요청 형식과 해당 요청들과 HTTP 응답 형식을 정의한다.

 

HTTPS에는 보안 계층인 SSL/TLS가 추가됨

→ 웹 서버가 브라우저에게 인증서를 제공함으로써 보안성 있는 통신이 가능하게 된다.

그 후 사용자는 접속을 허용하기 전에 인증서 수락 여부를 결정할 수 있다.

 

*** 웹 서버 요청 3가지 종류 ***

• GET: .html 파일, 이미지, JSON 데이터와 같은 데이터를 서버에서 가져오는데 사용
• POST: 장바구니에 아이템 추가, 웹 폼을 보내는것과 같은 회원가입 등 데이터를 서버로 보낼 때 사용
• AJAX: '비동기식 자바스크립트와 XML'은 브라우저에서 실행 중인 자바스크립트에 의해 직접적으로 수행되는 GET or POST 요청이다. 이름이 'Asynchronouse JavaScript and XML'이지만, 요청은 XML, JSON, 가공되지 않은 데이터를 수신 할 수 있다.

 

[ 브라우저 뷰 그려 내기 ]

실제로 보고 상호 작용할 화면은 웹 서버로부터 받은 여러 종류의 데이터로 이뤄져 있다.

브라우저는 (요청 /응답) 앞부분에 있는 URL로부터 데이터를 읽어 문서 객체 모델(DOM)을 생서하기 위해 HTML 문서를 제공한다.

DOM (Document Object Model) HTML 문서가 루트 노드인 트리 구조 객체 → 트리 구조는 HTMl 문서 구조와 일치한다.

브라우저는 웹 페이지 뷰를 생성하기 위해 각 DOM 요소들을 해석하고 내용을 화면에 표시한다.

브라우저는 웹 페이지 생성을 위해 다중의 웹 서버 요청으로부터 다양한 종류의 데이터를 얻는다.

 

 

*** 최종적인 사용자뷰 생성 및 웹 페이지 동작을 정의하기 위한 브라우저가 사용하는 데이터 형태

• HTML 파일들 : DOM의 핵심 구조를 제공
• CSS 파일들 : 페이지의 각각의 요소들이 폰트, 색상, 가장자리, 간격 측면에서 어떤 스타일로 표현할지 정의
• 클라이언트 측 스크립트들 : 보통 JS 파일, 웹 페이지에 추가 기능을 제공하는 일. DOM을 조작해 웹 페이지를 변경, 페이지를 보여주는 일, 추가 기능에 필요한 중요 로직을 제공하는 일을 담당한다.
• 미디어 파일들 : 이미지, 비디오, 사운드 파일들을 웹 페이지의 일부로 제공
• 데이터 : XML, JSON, 가공되지 않은 텍스트 같은 데이터는 AJAX 요청에 대한 응답으로 웹 서버에 의해 제공. 웹 페이지를 다시 생성하기 위해 서버에 다시 요청하기 보단 AJAX를 통해 새로운 데이터를 얻어온 다음 해당 데이터를 JS 통해 웹 페이지에 입력.
• HTTP 헤더들 : HTTP는 웹 페이지의 동작을 정의하기 위해 브라우저가 사용할 수 있는 여러개의 헤더들과 클라이언트 측 스크립트를 정의한다. 쿠키들은 HTTP 헤더에 저장된다. HTTP 헤더는 요청 내부의 데이터 종류와 브라우저로 되돌아올 것이라 예상되는 데이터의 종류들도 정의한다.

[ 사용자 상호작용 ]

마우스, 키보드, 터치스크린과 같은 사용자 인터페이스(UI)를 통해 브라우저와 상호작용한다.

브라우저는 사용자의 입력 이벤트를 포착 → 적절한 동작 수행하는 정교한 이벤트 시스템을 갖는다.

ex) 팝업 메뉴 보여주는 것, 실행 중인 클라이언트 측 JS에 서버의 새로운 무서를 올리는 등의 여러 동작 수행

 

[ 웹 서버 ] - 브라우저의 요청 사항을 처리하는 일에 중점.

 

브라우저는 문서 요청, 데이터를 보냄, 데이터를 얻기 위해 AJAX 요청할 수도 있다.

웹 서버는 어떤 동작을 수행할지 결정하기 위해 HTTP헤더외에 URL을 사용한다.

 

<아파치와 IIS 같은 대부분의 웹서버들은 .html .css, 미디어 파일과 같이 정적 파일들을 제공하도록 되어 있다.>

서버의 데이터를 변경하는 POST 요청과 백엔드 서비스와 통신하는

AJAX 요청을 처리하기 위해, 웹 서버는 서버 측 스크립트와 함께 작동되어야 한다.

 

서버 측 스크립트 → 브라우저가 요청하는 작업을 수행하기 위해 웹 서버가 실행 할 수 있는 것.

[ PHP, Python, C, C++, C#, Perl, Java, Go 등 ]

웹 서버들은 서버 측 스크립트를 포함시킨 후 브라우저가 요청한 특정 URL 위치에 추가할 수 있는 구조를 제공

서버 측 스크립트는 코드 실행하여 응답을 바로 생성 or 중요 정보를 얻기 위해 D

B와 같은 백엔드 서버와 연결 후 해당 정보를 이용해 적절한 응답을 생성 후 보낸다.

 

[ 백엔드 서비스 ] → 웹 서버의 백그라운드에서 실행되는 서비스

브라우저에 대한 응답을 생성하기 위해 사용되는 데이터를 제공한다. 가장 흔히 사용되는건 DB이다.