서버시스템 구축 실습 - 웹서버와 데이터베이스 개요

프론트엔드(클라이언트 사이드)
- 사용자 관점에서 봤을 때 웹 브라우저에서 사용자가 직접 눈으로 보는 부분을 개발

-웹페이지 로드 시 사용자 경험을 애니메이션화 하는데 사용되는 JS 포함

Ex. 아마존 사이트에서 광고, 구매가능한 제품 리스트 등이 보여지는 부분을 구현함

 

백엔드(서버 사이드)
-사용자 관점에서 봤을 때 눈에 보이는 부분이 아닌 뒤쪽에서 일어나는 모든 부분을 개발

-애플리케이션 로직에 사용되는 코드 개발

Ex. 아마존 사이트에서 결제 기능 구현 (결제와 관련된 정보 처리)

 

클라이언트 = 웹 브라우저 서버에 요청을 하면 서버가 데이터를 처리 및 가공하고 클라이언트가 볼 수 있는 웹페이지를 response해줌

 

 

 

 

정적 웹페이지 vs 동적 웹페이지

1. 정적 웹페이지 (static web page)
   - 서버에 미리 저장된 파일(일반적으로 html파일..)이 그대로 전달되는 웹 페이지
   - 사용자는 서버에 저장된 데이터가 변경되지 않으면 고정된 웹 페이지만 볼 수 있음
   - 사용자의 요청에 따라 페이지가 따로 변화하지 않음 -> 사용자는 항상 같은 페이지만 볼 수 있음
   문제점 : 파일을 전부 미리 만들어 두어야 함.. (만약 1억개면..? 1억개를 만들어야함)
   
   
2. 동적 웹페이지 (Dynamic web page)
   - 서버에 있는 데이터를 가공한 후 생성되어 전달되는 웹 페이지 
   - 사용자는 상황, 시간, 요청에 따라 달라지는 웹 페이지를 보게 됨
   - 사용자 요청에 따라 웹 브라우저에 표시되는 내용은 다름
   ex. http://naver.com 
   -> 시간이 지나면 광고가 달라지고 특정 날짜에 맞춰 배너도 바뀜 (동적으로 변화함)

 

 

URL 이해하기

1. url의 구성
   - 프로토콜 : 사용자가 서버에 접속할 때 어떤 방식으로 통신할 것인지를 나타내는 부분
                    +http는 웹 브라우저와 웹 서버가 서로 데이터를 주고 받기 위해 만든 통신 규칙(아예 규격화가 되어 있음)
   - 도메인네임, 호스트 : ip주소를 우리가 기억하기 쉬운 이름으로 변경한 것 (DNS)
                                   +호스트 : 인터넷에 접속된 각각의 컴퓨터를 의미
                                   +인터넷의 실제 ip주소와 연결된 기억하기 쉬운 이름
   - 포트번호 : 하나의 컴퓨터에 여러 서버 프로세스가 존재할 수 있음 -> 클라이언트가 포트 번호를 명시하면, 해당포트를 사용하고 있는 서버와 통신
   - 경로 : path, 웹 서버에서 어떤 것을 요청했는지를 알기 위한 경로 (웹 서버에서 실행시키기 위한 소스코드, file을 담고 있음)
   - 쿼리 스트링 : url을 입력할 때 사용자가 원하는 것이 무엇인지 일부 url에 포함시켜서 요청을 하게 되는데 바로 그 부분, 웹 서버에서는 쿼리 스트링 값을 보고 해당 url 처리
                        +쿼리 스트링을 사용해 웹 서버에 데이터를 전달할 수 있음. -> 물음표(?)로 시작하고 값과 값 사이엔 &기호로 구분, 이름과 같은 값은 등호로 구분함.
   - 해시 : #을 사용함
             + 웹 페이지의 위치 표시/ 해시는 http서버로 전달되지 않음/ 웹 페이지를 전달받은 후에 웹 브라우저가 해당 위치로 자동으로 스크롤할 때 사용 (웹 브라우저가 처리함)
   
   프로토콜/ 호스트(도메인네임)/ 포트번호/ 경로/ 쿼리스트링
   http://openturorials.org:300/main?id=HTML&page=12
   *https -> http + 보안
   *쿼리 스트링을 활용한 웹 애플리케이션
   - id값에 따라 사용자에게 적절한 콘텐츠를 보여줌
   
   
2. 정적 웹 페이지 vs 동적 웹 페이지
   a. 정적 웹페이지 (static website)
   - 서버는 웹 페이지 파일을 갖고 있고 client가 요청하면 이를 response해줌
   b. 동적 웹페이지 (dynamic website)
   - 웹 서버의 역할(웹 페이지를 보내는 부분), 애플리케이션 서버(로직을 처리하는 부분), 데이터베이스 서버가 필요함
   - http request가 오면 어떤 페이지를 만들 것인지 판단하고 필요한 정보를 애플리케이션 서버에게 요청 후 필요한 데이터들을 모아서 처리 -> 결과를 웹 서버에게 다시 반환하고 client에게 response
   
   *http란?
   - 텍스트 기반의 클라이언트/서버 프로토콜
   - http request
      GET: 데이터를 담고 있음 (header부분의 데이터) -> 이 request가 어떤 request고 어떤 버전을 사용하는지 담고 있음
      Host: request를 전달하는 웹 사이트가 누군지를 나타냄  
   -> 웹 서버 : response로 어떤 프로토콜 + 어떤 결과가 나왔는지를 보여줌 + 서버가 클라이언트에게 보내주는 웹 페이지는 어떤 종류의 타입인지, 그 파일의 사이즈 정보를 같이 보냄
   *용어정리*
   - GET : 클라이언트가 서버측 리소스를 다운로드할 때 사용
       -> 웹 브라우저 주소창 입력 👉 GET
   -HEAD : 클라이언트가 서버측 리소스에 대한 정보만을 다운로드 하고자 할 때 사용
      👉 데이터 말고 딱 header부분만 (header와 body는 \n로 구분함)
   - POST : 클라이언트가 서버쪽으로 정보를 보내고자 할 때 사용
   (쿼리 스트링을 사용하여 정보를 보낼 수도 있긴 함 -> But url의 최대 길이가 정해져 있어서 큰 정보는 불가 + url에 클라이언트 정보 노출)
   
   
3. 웹 애플리케이션 구조
   - 웹 클라이언트 = 사용자 웹 브라우저
   - 1번 : 도메인 네임 -> DNS 통해서 ip주소를 가져오게 됨(웹 브라우저가 알아서..)
   - 3번 : 웹 서버에게 해당 웹 페이지를 요청하면 웹 서버는 경우에 따라 필요한 정보에 따라 웹 페이지를 만들거나 가져옴. 
   + WAS : web application server -> 실제 웹 페이지를 전달하는 역할, 웹 페이지를 만들기 위해 필요한 모든 비지니스 로직이 일어나는 곳, request를 해결하기 위해서 어떤 일들을 해야하는지, 데이터가 필요하면 db요청하고 처리하고.. 웹 서버에 넘기면 웹 서버가 페이지를 만든다. / ex. php, python
   + web server : http request를 받고 실제 response를 해주는 부분
   
   https://blog.kakaocdn.net/dn/mhafF/btsFKQJkXsJ/J6w3XlljV7gpOUD8MUeWj0/img.png
   
   
   
   
   
4. 웹의 발전
   a. 1990년 웹의 등장
   -html 기반의 정적 웹 페이지
     - 양방향 통신 불가능, html을 직접 타이핑하여 수동으로 웹 페이지를 생성
     - ex. 방문자들이 직접 글을 올리게 하려면?
              -> 웹 페이지가 담긴 html파일을 방문자가 수정할 수 있도록 허용해야 함 -> 위험
   
   b. 자바스크립트의 등장
   - 1995년 넷스케이프와 선 마이크로시스템이 공동으로 제작하여 보급
   -넷스케이프(상업용 웹브라우저)에서 동작하는 스크립트 언어
   - 사용자와 상호작용하는 애플리케이션의 면모
   
   c. Node.js의 등장
   - 2008년 구글이 크롬 웹 브라우저에서 동작하는 자바 스크립트 성능을 개선하고자 만든 V8엔진을 오픈소스로 공개
   -라이언 달(Rayn Dahl)이 V8엔진을 기반으로 Node.js개발
   - 웹 브라우저라는 울타리 밖으로 팽창 (웹 브라우저 밖에서도 컨트롤 가능 like c언어와 같이 컴퓨터 제어 가능)
      -> 자바스크립트 -> 웹 브라우저 제어
      -> Node.js -> 자바스크립트를 활용하여 컴퓨터를 제어
   
   * 클라이언트 스크립트 vs 서버 스크립트
   -> 기본적으로 둘은 목적이 다름 !! 다른 것 !

개요	프론트엔드에서 동작하며 유저가 스크립트를 볼 수 있음	백엔드에서 동작하며 클라이언트 쪽에서는 보이지 않음
처리	서버와 상호작용 필요없음	서버와 상호작용 필요 (서버 컨트롤 할 수 있어야함)
언어	html, css, js	php, asp.net, ruby on rails, coldfusion, python 등
목적	사용자 요청에 즉각적인 반응 보이거나 웹 문서의 모습을 동적으로 변경(ex. 마우스 스크롤내리면 이미지가 둥실둥실 떠다니게끔)	동적인 웹 페이지 생성 가능
보안	보안 위험 -> 스크립트는 브라우저에서 개발자 모드로 보면 어떤 스크립트로 돌아가는지 볼 수 있음.	상대적으로 안전  -> 클라이언트 측에서 접근 불가능.

+ js는 클라이언트 스크립트인데 node.js를 통해 서버 스크립트까지 가능함. (백엔드 처리 가능 !)
+ 클라이언트 스크립트 
ex. 우클릭 방지 -> 스크립트라 웹 브라우저 단에서 접근이 가능하기 때문에 우클릭 방지 시키는 코드를 무시하게 해주는 코드를 작성하면 차단 가능 => 스크립트의 허점을 다 알 수 있음 -> 보안 위험 O


5. Node.js
-비동기 이벤트 구동 js 런타임

- 구글 크롬 V8 엔진 기반
   *V8이란?

     -> 구글에서 만든 c++로 작성된 자바 스크립트를 처리하기 위한 엔진
     -> js를 머신코드로 변환

    *런타임이란?

    -> runtime environment
    -> 운영체제가 제공하는 응용프로그램을 실행할 수 있는 환경
    -> JRE, Node.js ?

         👉 응용프로그램과 OS 사이에서 변환기(해석기) 역할을 수행

       *Java Runtime Environment

         👉 JRE는 JVM에 Java로 짜여진 어플리케이션들이 실행될 수 있도록 일종의 library를 제공하는 것 (운영체제, 응용프로그램 사이에서 변환기 역할을 수행함. 자바로 짜여진 코드를 binary형태로 변환)

      *Node.js
         👉 js런타임. VB엔진을 기반으로 여러 Node api 또는 모듈을 제공. JS로 어플리케이션을 짜서 Node.js로 실행시키게 되면 Node api or modules를 호출하게 됨. -> VB엔진을 통해서 OS에서 제공하는 기능을 갖고 실행이 됨.

 

+비동기 이벤트

 

이벤트 큐에 이벤트가 쌓임 -> 이벤트 루트라는 싱글 스레드 기반의 루프가 존재함(이벤트만 처리하는) 

*이벤트 루프
👉 1. 이벤트큐의 이벤트를 체크함

     2. 첫번째 이벤트를 가져와서 어떤 이벤트인지 확인하고 만들어둔 스레드 풀에게 이벤트를 넘겨줌(등록)

     3. 이벤트는 동작하게 됨. 이때, 보조기억장치에서 데이터를 읽어와야할 수도 있음 -> 오래걸림 -> 이때 이벤트 루프는 이를 기다리게 되면 다른 이벤트를 처리할 수 없음(싱글스레드기 때문) 

따라서, 비동기 기반의 이벤트 루프는 이벤트를 스레드 풀에 전달만 함. + 스레드 풀에게 이벤트가 끝나면 callback해달라고 callback를 등록함. -> 이후 이 과정을 계속 반복. (다른 이벤트가 있으면 이를 스레드풀 중 하나에게 할당시켜주고.. 반복)

🔗completion queue도 존재함. 완료된 이벤트들은 여기로 이동하고, 이벤트 루프는 스레드 풀과 이곳을 왔다갔다 하며 동작

 

*비동기

-비동기의 반대는 동기.

- synchronous(동기) , asyschronous(비동기)

- 비동기는 순차적으로 실행되지 않을 수 있다는 것

- 이벤트 단위로 처리하기 때문에 끝나는 순서가 조금 달라질 수도 있음

장점!

- 웹 애플리케이션에 적합

   ex. 아마존 -> 동기적인 방법으로 한다면? 한 명이 주문하는 동안 다른 사람들이 접속 불가 -> 방문자마다 새로운 프로세서/스레드를 생성하면 해결할 수는 있지만 현실적으로 불가능.. 👉 고로 비동기방식으로 처리하는 게 더 적합함

 

 

<정리>

- Node.js 애플리케이션 ?

-> node.js 런타임이라는 프로그램 위에서 동작

-> js를 이용해 작성

-> node.js런타임이 가지고 있는 여러 가지 기능 중 필요한 기능을 호출

-> 웹 서버/웹 애플리케이션 서버

+ node.js는 웹 서버 기능 내장 -> 웹 서버의 역할과 웹 애플리케이션의 역할을 다 할 수 있음

   ex. Apache, Nginx 등

 

<마지막으로.. Node.js의 장점>

1. js로 전체 스택 개발 가능 -> 풀스택 개발자 가능 !

2. 데이터를 연속적으로 스트리밍하거나 채팅 기능 구현시 성능적으로 다른 플랫폼보다 우수

-V8 JS 엔진의 활용 (구글이 유지보수 중)

-전 세계에서 가장 인기 많은 웹 개발 플랫폼

  *Spring Boot

     -> java 기반의 백엔드 개발 

     -> 우리나라에서 많이 사용 중 But, 전 세계적으로는 Node.js를 더 많이 사용함

     .. 어떤 도구를 쓰는지는 사실 그렇게 중요하지 않음. 하나만 잘 다룰 줄 알면 다른 것들도 쉽게 사용 가능 !

-낮은 진입 장벽