웹 관련 기초 정의

웹의 이해

Internet( International Network ) :
。전 세계 모든 컴퓨터를 하나의 통신망 내에서 연결
▶ 웹을 통해 인터넷으로 연결된 Client와 Server는 HTTP를 통해 데이터를 교환

웹 WWW ( World Wide Web = Web = W3 )
。인터넷에 연결된 전세계 사용자들이 서로의 정보를 공유할 수 있는 공간

。정보를 하이퍼텍스트 형식으로 표현 및 하이퍼텍스트를 따라 이동하면서 다양한 정보/문서들을 연결 및 제공

。웹 브라우저를 통해 접근되며 HTTP, HTTPS 프로토콜 사용
▶ Web은 Server와 Client가 HTTP Transaction(Hyper Text Transfer Protocol)을 통해 요청과 응답으로 상호작용

• 웹의 시작
  。1980년 스위스 CERN 소속 팀 버너스리에 의해 연구원 간 신속한 정보교환을 목적으로 개발
  
  ▶ 하이퍼 텍스트를 통해 다양한 정보로 연결
  
  hyper text
  。단순한 글자가 아닌, 그 이상의 의미를 가진 text라는 의미
  ▶ 주로 링크, 참조의 역할을 하는 기술
  
  
• 웹서핑 / 웹 브라우징 :
  。웹페이지에서 하이퍼텍스트를 통해 다른 웹페이지로 이동하는것
  
  
• 적응형 웹 :
  。웹브라우저가 주어진 플랫폼에 맞춰서 생성된 레이아웃을 불러오는 웹
  
  
• 반응형 웹 :
  。감지된 화면 크기에 따라 자동으로 페이지가 재배열되는 웹

웹 서비스 구조
。대표적으로 Client와 Server로 구분되는 Cilent-Server 구조

Client : 서비스를 요청하는 컴퓨터 = 웹브라우저
Server : 서비스를 제공하는 컴퓨터 = 웹서버

。 레이어드 아키텍처 : Application을 각 Tier의 독립적인 계층으로 분할한 구조로 표현
▶ 단방향 의존성을 가져야한다.

• Client - Web Server - DB
  。대표적인 Client / Server 구조로 주로 Web Sever에서 DB로 바로 접근하는 구조
  ▶ 웹 서버가 정적페이지를 처리.
  
  
• Client - WAS - DB
  。WAS가 정적 & 동적페이지를 모두 처리
  
  
• Client - Web Server - WAS - DB
  。정적페이지는 웹 서버 , 동적페이지는 WAS가 처리하도록 분산하여 서버부하를 방지.
  ▶ Client : React, Web Server : Apache Httpd / Nginx , WAS : Apache Tomcat / Jetty

  React Project의 경우.
  。일반적으로 SPA 방식 ( CSR )
  
  。index.html(동적) 이외 다른 html문서(정적) 파일 생성 시 MPA방식으로 처리 ( CSR , SSR )
  ▶ index.html는 WAS , 이외 html문서는 Web Server가 처리하도록 분산
  ▶ Client - Web Server - WAS - DB

웹 서버( Web Server ) ex. Apache Httpd, Nginx, ...
。Client에서 Http Request를 전송 시 단순히 기존에 생성되어 저장된 정적 콘텐츠를 Client에게 제공
▶ 정적 페이지의 요청에 대해서만 대응하며 동적 페이지 처리는 WAS에 전달

。Web Server : 80 / 443 포트 사용
▶ WAS : 8080 포트 사용

。React를 Web Server로서 활용하여 리버스 프록시 및 캐시 서버 역할을 수행할 수 있음.
▶ 클라이언트는 HTTP / HTTPS를 통해 80 / 443 포트로 웹 서버에 접근 후 내부 3000포트의 React Framework를 접근하고, React Framework는 Spring Framework와 직접 통신하면서 동적으로 데이터를 가져와서 클라이언트에게 데이터를 제공
▶ 리버스 프록시 역할을 수행하여 클라이언트는 WAS에 직접 접근할 수 없고, 오직 Web Server( = React)를 통해 접근

。정적인 HTML 문서를 저장 및 Client가 요청 시 수정없이 제공
▶ 사전에 작성되어 생성되있는 문서를 제공하는 역할만 수행

。웹 브라우저를 통해 HTTP Request를 웹 서버에 전달 시 웹 서버는 요청에 해당하는 정적인 CSS, JS를 포함한 HTML 문서를 웹 브라우저에 HTTP Response하여 해석 후 화면에 표현

。요청에 대한 결과값을 사전에 미리 생성해야하는 단점이 존재
▶ 실시간으로 변경되는 데이터, 증가하는 트래픽에 대해서 대응이 힘듬.

• 리버스 프록시 ( Reverse Proxy )
  
  。웹서버는 80 / 443 포트를 사용하여 클라이언트와 WAS 사이에서 상호작용을 대리수행하는 역할을 수행.
  ▶ WAS : 8080는 Client Side에서 직접 접근하지 못하고, 오직 Web Server를 경유해서 접근 가능하도록 설정
  
  。클라이언트는 WAS 정보에 대해 알 수 없고, 오직 Web Server의 IP주소 + 포트를 통해 간접적으로 통신
  
  。정적 콘텐츠의 요청에 대해서만 작업을 수행하고 앞단에서 빠르게 처리하여 WAS의 부담을 감소

  • 정적 페이지 :
    。
    ▶ DB 또는 사용자와의 상호작용 기능이 없는 페이지.
    
    
  • 동적 페이지 :
    。

정적 컨텐츠 ( Static Contents )
。웹 서버에 저장된 파일이 모든 사용자에게 동일하게 전달되는 컨텐츠
▶ HTML / JS 등으로 구성
ex ) 화면의 내용 / 데이터 등의 변동이 없는 페이지

。추가 연산 작업이 필요하지 않으므로, 매번 WAS에 요청할 필요 없이 캐싱 가능
▶ DB 또는 사용자와의 상호작용 기능이 없음


동적 컨텐츠 ( Dynamic Contents )
。시간, 입력 등에 따라서 내용이 동적으로 변화하는 컨텐츠
▶ JSP, Thymeleaf 등
ex ) 데이터 처리 / 연산을 통해 화면의 내용, 데이터가 변화하는 페이지

。매번 WAS에 요청하여 내용을 구성하고 클라이언트로 제공해야함.

웹 어플리케이션 서버( WAS : Web Application Server ) ex ) Apache Tomcat , Jetty ...
。Client가 동적 콘텐츠에 대해 요청 시 주로 DB와의 Business Logic이 필요한 동적 콘텐츠를 생성하여 Client에게 제공하는 서버
▶ Web Server는 정적 콘텐츠 / WAS는 동적 콘텐츠로 분업하여 담당

。Apache Tomcat / Jetty : 8080 포트를 사용
▶ Spring Boot의 경우 Spring Web Starter에 Embedded Server( = tomcat )를 기본적으로 제공하여 기본 프로젝트로도 서버구동이 가능

。틀이되는 HTML 문서를 기반으로 Client의 요청대로 동적으로 HTML 문서를 생성하여 Client에게 제공
▶ SSR / MPA 방식
ex ) Spring Boot의 JAR 파일은 기본적으로 톰캣을 내장서버로 가지고 있으며, JSP 또는 Thymeleaf를 사용하는 경우 서버 사이드에서 렌더링한 HTML을 반환

。Spring Framework는 WAS인 Tomcat을 기반으로 JSP 또는 Thymeleaf를 통해 동적콘텐츠를 생성하여 제공하며, React를 SSR 형식으로서 사용 시 이때 Spring Framework는 동적 콘텐츠( JSP를 통한 HTML 페이지 생성 )을 생성하지 않고, 프론트엔드에서 필요로하는 JSON을 제공하는 역할을 수행

。일반적으로 클라이언트에 의해 직접 접근은 불가능하고, Web Server를 통해 간접적으로 접근 가능

。Apache Tomcat은 서블릿 컨테이너 역할을 수행
▶ 요청 당 스레드를 하나씩 할당 후 처리하는 특징으로 Thread Safe한 특징이 존재


。 단일 WAS는 여러 서버 어플리케이션을 배포할 수 있다.


WAS 특징

• 장점
  。Client의 요청에 해당하는 데이터를 DB로부터 가져와서 즉석으로 결과를 생성하여 제공하므로 자원을 효율적으로 사용.
  
  
• 단점
  。Client가 요청하는대로 페이지가 즉석으로 생성되므로 웹 서버에 비해 부하가 크다.
  ▶ 이에 Web Server에서 정적콘텐츠를 제공하면서 리버스 프록시를 통해 WAS의 부담을 감소

• 프론트엔드 ( Front-End ) : React
  。웹 서비스의 Client-Side의 GUI ( User Interface )를 개발 및 사용자와 상호작용 기능을 담당하여 클라이언트 측 성능을 최적화하는 목적의 어플리케이션
  
  。브라우저를 기반으로 작동하지만, 웹서버로서 클라이언트와 WAS 간 리버스 프록시 역할을 수행
  
  
• 백엔드 ( Back-End ) : Spring
  。웹 서비스의 Server-Side에서 프론트엔드에게 전달받은 데이터와 요청을 내부데이터를 통해 연산하여 처리 후 결과를 응답으로 전달하는 목적의 WAS

렌더링 (Rendering) :
。실시간으로 웹 사이트가 브라우저에서 그려지는 과정.
▶ 웹브라우저는 렌더링 엔진과 자바스크립트 엔진으로 구성


렌더링 방식

• CSR( Client-Side-Rendering )
  。Server에서 기본적인 페이지 구조와 JavaScript를 Client의 웹 브라우저로 전송 시 Client의 웹 브라우저에서 페이지의 미완성부분을 생성하는 실행하는 방식.
  ▶ SPA 방식과 함께 활용.
  
  
• SSR(Server-Side-Rendering)
  。Client가 웹 브라우저로 접속 시 Server는 요청한 페이지를 생성하여 Client의 브라우저로 서버에서 완성된 페이지를 전송.
  ▶ MPA 방식과 함께 활용.

페이지 구성방식

• MPA ( Multi Page Application ) : ex ) JSP, Thymeleaf
  。여러 페이지로 구성되어 페이지 이동 시 서버로 데이터 요청 시 서버로부터 새로운 HTML 문서를 수신하여 Page 전체를 Rendering하는 방식.
  ▶ 서버로부터 페이지를 생성
  
  
• SPA ( Single Page Applications ) : ex ) React
  。단일 HTML로 구성된 Web Application으로서, 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 업데이트 후 현재 화면에 부분적으로 Rendering하는 방식.
  ▶ 서버에 요청하며 전체 HTML 화면을 받아오는게 아닌, 화면 렌더링을 Local에서 수행하므로 빠른 화면전환이 가능
  
  。어플리케이션 상호작용하여 서버에 요청 시 전체 HTML 문서를 받아오는게 아닌, 필요한 데이터만 받아와서 부분적으로 동적으로 업데이트하여 렌더링

Web에는 수많은 Web Site가 존재하고, 각각의 Web Site는 Web Page들로 구성
。 웹페이지 $\in$ 웹사이트 $\in$ 웹

• 웹 페이지 ( Web Page )
  。웹 상에 웹사이트를 구성하는 개별문서 또는 페이지
  ▶ 텍스트, 이미지, 동영상, 오디오 등 다양한 형태의 콘텐츠를 포함할 수 있음
  
  
• 웹 사이트 ( Web Site )
  。웹 상에서 특정 도메인이나 IP 주소를 통해 접근가능한 웹페이지들의 집합

웹 브라우저 ( Web Browser ) Chrome, Explorer, FireFox
。웹 페이지 또는 웹 상의 데이터 등 웹 기반 Contents에 접근하기 위한 응용 프로그램
▶ HTML 문서 등에 접근

。렌더링 엔진( 사용자 화면 생성 )과 자바스크립트 엔진( JS code 해석 및 기능 작동 )으로 구성

• HTML ( Hyper Text Markup Language )
  확장자 포맷 : .htm .html
  。하이퍼텍스트를 이용해 웹페이지 구성요소를 구조화하여 명시하는 언어
  
  。태그( <> )내에 태그를 포함하는 계단식 구조
  
  
• CSS ( Cascading Style Sheets ) :
  。HTML, XHTML, XML 등의 문서의 태그에 Style (색상, 크기, 위치 ,그림등의 배치 등)을 추가하여 꾸밀 때 사용하는 Style Sheet 언어
  
  。html에서 css를 활용 시 <head>부분에 <link>를 사용해 파일을 연결.
  
  。부모태그에 css 설정 시 자식태그도 같이 상속
  
  
• Javascript
  。특정 HTML 태그를 선택 및 제어하여 동적인 효과를 부여함으로써 웹 브라우저와 상호작용을 가능하게하는 스크립트언어
  ▶ ECMAScript를 구현
  
  。 JS는 Client-Side-Script로서 웹 브라우저의 JS 엔진에 의해 해석 및 구동

  JS 변수

  • let :
    。let으로 선언한 변수는 다시 let으로 재선언이 불가능
    ▶ 변수의 값만 수정이 가능하다.
    
    
  • const :
    。상수로서, 변경이 불가능!
    。상수명은 대문자로 선언.
    
    
  • var :
    。한번 선언된 변수의 재선언이 가능.
    ▶ 현재는 사용하지 않는 변수선언 방식
    
    。호이스팅이 가능.
    ▶ var는 변수를 선언하기 이전 구문에서 사용이 가능하지만 값은 되지 않음.
    。ex)

  console.log(name1);
  var name1="이정수"
   // name1은 호이스팅에 의해 변수선언 이전에서 사용이 가능하지만 할당단계를 거치지 않았으므로 undefined 도출.
  //////////////////////////////
  var name1;
  console.log(name1);
  name1="이정수"
    // 이정수 도출!

  ▶ 호이스팅을 let , const에 적용 시 오류가 발생.