yoo chang heon·2022년 5월 29일
0

Web

목록 보기
4/6

아파치(Apache)

아파치는 WWW 서버용 소프트웨어로 HTTP 아파치 서버라고도 불리고, HTTP 웹 서버이다. 리눅스나 윈도우 등 거의 모든 운영체제에서 사용할 수 있으며 구축이 쉽고, 다양한 추가기능을 가지고 있기 때문에 가장 인기있고 많이 사용되는 웹서버 중 하나이다.

톰캣

아파치 재단에서 만든 소프트웨어로 동적인 데이터를 처리하는 웹서버이다. (WAS: Web Application Server) 아파치 톰캣이 대표적인 WAS이다.

웹 서버

웹 브라우저와 같은 클라이언트로부터 HTTP 요청을 받아들이고, HTML 문서와 같은 웹 페이지를 반환하는 프로그램이다.

주된 기능은 웹 페이지를 클라이언트로 전달하는 것이다. 주로 HTML, CSS, Javascript가 클라이언트로 전달된다. 또한 클라이언트로 부터 콘텐츠를 전달 받기도 한다. 크게 정적인 방식과 동적인 방식이 있다.

정적 웹서버

단순히 HTML 문서만을 사용자에게 제공하기 때문에 아파치 웹 서버 하나면 된다.
회사 소개 페이지처럼 별다른 로그인이 없고 페이지는 디바이스나 상황에 큰 상관없이 항상 같은 화면을 보여준다.
=> 브라우저는 웹서버와 통신해서 이미 저장되어 있던 HTML, CSS, JS 파일을 다운 받는다.(웹서버는 이를 담고 있는 저장소 역할)

동적 웹서버

사용자의 요구에 따라 다양한 웹페이지를 제공하고, 이를 구성하기 위해 DB를 연계하여 사용한다.

클라이언트의 요청에 따라 다양한 화면을 제공해준다. 이 경우 웹서버는 단순히 HTML, CSS, JS파일만 제공하는 것이 아닌 웹 어플리케이션 서버와 직접 통신을 한다.

(WAS)는 복잡한 비즈니스 로직, DB 통신등을 책임진다. 웹서버는 WAS와 통신해서 얻은 결과 값을 바탕으로 가공 작업을 거쳐 최종적으로 만들어진 동적인 웹파일을 클라이언트에게 전달해준다.

Java에서 만들어서 사용자에게 넘겨준다. => SSR: 서버에서 렌더링된게 내려온다.

Ajax

Ajax란 비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)이다. 간단하게 서버와 통신하기 위해서 XMLHttpRequest객체를 사용하는 것이다.
JSON, XML, HTML, 일반 텍스트 파일 등을 포함한 다양한 포맷을 주고 받을 수 있다.
특징: 페이지 전체를 리프레쉬하지 않고 수행되는 비동기성 이다.
사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트

ajax가 등장하며 점점 client쪽으로 넘어오기 시작한다.

문제점: 서버와 클라이언트 쪽에 같은 코드가 존재하는데 변경이 있을 경우 둘다 변경해야하는 번거로움이 있었다.
=> 서버는 아무것도 하지 말자

<div></div>
<script/>

script를 실행해서 div안을 채워넣어주자=>CSR

CSR

각 유저의 브라우저에서 그림

문제점

  1. 검색엔진 최적화: 검색엔진이 정보를 가지러 올 때 렌더링이 되기 전에 정보를 수집해 가기 때문에 빈 <div></div>을 가져가기 때문에 문제 발생
  2. 성능

=> Server에서 실행, 완성된 HTML을 내려주자 => SSR

SSR

문제점

  1. 복잡도: 배포 난이도가 올라간다. 서버 사이드에서 렌더링을 하다보니 배포에 서버가 필요해졌다.(docker, EC2...) => CDN의 이점을 가져가지 못함
  2. 사용자가 몰리면 다운된다. => 사용자 수에 따라서 서버 스케일링을 프론트에서 신경 써야한다.
  3. 느림: SSR은 들어올 때마다 서버에서 브라우저로 내려줘야한다.

=> 빌드과정에서 React를 실행, 모든 페이지를 만든다: SSG

SSG(Static Site Generator)

ex) gatsby.js

문제점

  1. 페이지가 많아지면 모든 페이지를 만들어야 하기 때문에 부담이 커진다.
  2. 동적으로 작동할 수 없다. 값이 바뀌면 재배포를 해야 한다.

=> Next.js에서 선택권을 준다. SSG를 쓸 페이지를 정할 수 있고, 시간 제한을 정할 수 있다.
일정 시간이 지나면 페이지를 파기할 수 있고(페이지마다 유효시간), 요청이 오면 SSG로 만들고 캐싱을 해서 사용한다.
ex) 페이지 유효시간이 5분이면 5분간 같은 페이지를 보여주고, 5분 1초가 되면 DB에서 새로 값을 가져와서 페이지를 만들어서 5분동안 보여준다.

특징: 첫 사용자는 오래걸린다.(처음 generate하는 것을 모두 기다려야하기 때문) 하지만 나머지는 빠르게 이용할 수 있다.

ISR

DSR

결론

블로그: gatsby.js
다이나믹한 웹: Next.js
내부 어드민 웹: CRA(create-react-app)

0개의 댓글