https://kimjongmo.github.io/

요청에서 이에 대한 응답을 내려주기 까지의 과정을 그림으로 그려서 이해해보고자 했다.


내가 알고있었던 보통의 과정들은 다음과 같았다.



이 과정에서 각각 어떤 과정을 거치면서 요청이 가는지 간단하게 사진을 나타내보았다.


- dns, router, tcp/ip 


② 

- 로드밸런싱(다중 서버일 때 요청이 적절하게 분배될 수 있도록 한다.)


- 웹 컨테이너를 거치지 않고 정적 컨텐츠를 리턴( js, html, css, font 등등)

- 동적컨테이너가 요구될 때 was(웹 컨테이너)에 전달


④ 

- jsp,servlet을 실행시킬수 있는 소프트웨어이다.

- web.xml(Deployment descripter)로부터 서블릿을 검색

- HttpServletRequest, HttpServletResponse객체를 만들어 생성하고 요청할 때 전달한다.

- 아래에서 더 상세하게 정리해놓습니다.


- 연결할 수 있는 스레드들을 미리 생성하여놓고 관리한다.


- 서블릿을 관리하는 컨테이너이다.


- was위에서 동작하는 프로그램이다.

- 자바를 사용하여 웹 페이지를 동적으로 생성한다.

(서블릿 : https://monny.tistory.com/163?category=658835)



위에서 정리하다 보니 웹 컨테이너에 대해서는 정리할 게 많아서 다시 밑에 따로 정리해놓는다.

아래의 그림은 웹 컨테이너가 구동되고 최초 요청에 의해서 각 컨테이너들이 생성되는 과정을 그림으로 나타내본것이다.



초기화 과정은 이렇게 진행되고 다음 url은 예전에 정리해두었던 DispatcherServlet이 요청을 처리하는 과정을 나타낸것이다.

(DispatcherServlet 요청 처리 : https://monny.tistory.com/170?category=720158)


'Programming > 웹 관련' 카테고리의 다른 글

스프링의 요청에서 응답까지  (0) 2019.03.06
웹 렌더링  (0) 2019.03.03
브라우저 아키텍처 그리고 html 파싱  (1) 2019.03.02

■용어


Rendering 

    • SSR : Server Side Rendering - 서버 측에서 HTML로 렌더링하여 준 자원을 브라우저가 표시
    • CSR : Client Side Rendering - 일반적으로 DOM을 사용하여 브라우저에서 렌더링을 한다.
Performance 
    • TTFB : Time to First Byte - 링크를 클릭 후에서부터 첫 번째 바이트를 받기까지의 시간
    • FP : First Paint - 픽셀이 처음으로 사용자에게 표시되는 시간
    • FCP : First Contentful Paint - 요청한 컨텐츠가 보이게 되는 시간
    • TTI : Time To Interactive- 페이지가 대화형으로 전환되는 시간


■ SSR(Server Side Rendering)


서버사이드 렌더링은 서버 측에서 리소스 + HTML을 내려주는 것이다. 이렇게 하면 브라우저에서 응답을 받기 전에 처리되므로 클라이언트에서 데이터 가져오기 및 템플리트 작성에 대한 추가 왕복이 발생하지 않습니다.




서버에서 페이지 로직 및 렌더링을 실행하면 많은 Javascript를 클라이언트에 보내지 않아도되므로 TTI를 빠르게 수행할 수 있습니다. 단 서버 사이드 렌더링을 사용하면 서버에서 렌더링하는 시간이 걸리므로 TTFB가 느려질 수 있습니다. 



■ Static Rendering 


서버사이드 렌더링이 사용자의 요청을 받았을 때 즉석에서 HTML을 생성해낼 때, 정적 렌더링은 각각의 요청에 대한 렌더링을 CDN에 배포함으로 에지 캐싱을 활용한다. 하지만 단점이 있는데 이는 가능한 모든 URL에 대해 개별 HTML 파일을 생성해야 한다는 것이다. 



■ CSR(Client Side Rendering)


클라이언트 사이드 렌더링은 Javascript를 이용하여 브라우저에서 페이지를 직접 렌더링하는 것입니다. 모든 로직, 데이터 가져오기, 템플릿 및 라우팅은 서버가 아닌 클라이언트에서 처리합니다.



CSR의 단점으로는 응용프로그램이 커질수록 Javascript의 양이 증가하게 되는것이다. 



'Programming > 웹 관련' 카테고리의 다른 글

스프링의 요청에서 응답까지  (0) 2019.03.06
웹 렌더링  (0) 2019.03.03
브라우저 아키텍처 그리고 html 파싱  (1) 2019.03.02

서버로부터 HTML를 받아온 브라우저가 이를 어떻게 해석하여 화면에 표시하는지 과정을 알고 싶어서 찾아보았다. 이 글은 https://d2.naver.com/helloworld/59361과 https://dzone.com/articles/behind-browser-basicspart-1를 정리하여 작성한다.


브라우저의 기능

브라우저는 웹 리소스(HTML, CSS, XML, JS, JSON, PDF 등등)을 화면에 그리는 기능을 한다. 일반적으로 리소스의 위치를 사용자가 URI를 통해 사용함으로 브라우저는 서버에게 요청을 하고 서버는 이에 대한 응답을 정보들을 준다. 


브라우저의 구성 요소



1. 사용자 인터페이스 

- 일반적으로 우리가 바라보는 브라우저의 모습이다. (뒤로가기 버튼, 새로 고침 버튼, 주소 입력창, 탭창 등등..)

- 인터페이스 계층은 주로 데이터 계층과 커뮤니케이션한다. 또한 콤보 박스 같은 위젯을 그리기 위해 UI 백엔드와 통신하기도 한다. 


2. 브라우저 엔진 

- 브라우저 엔진은 렌더링 엔진과 인터페이스 사이에서 다리 역할을 하며 새로 고침이나 뒤로가기, 앞으로가기 등 메소드를 제공한다.

 

3. 렌더링 엔진 : 컨텐츠를 화면에 그리는 역할을 한다.

- 화면에 URL로부터 주어진 컨텐츠를 렌더링하는 역할을 하며 HTML과 CSS, XML등을 해석한다. 기본적으로 하나의 스레드로 동작한다.


4. 통신 

-Http요청과 같은 네트워크 호출에 사용한다.

  

5. 자바스크립트 해석기 

-자바스크립트를 해석하고 실행한다.


6. UI 백엔드  

- 콤보 박스와 창 같은 기본적인 장치를 그림.


7. 자료 저장소  

-  자료를 저장하는 곳으로. 모든 종류의 자원을 로컬의 하드 디스크에 저장할 필요가 있다. 로컬 웹 데이터베이스다.




■ HTML 파싱 과정

  1. HTML Parser가 DOM 트리로 파싱한다.

    파싱 = 코드를 이해하고 사용할 수 있도록 특정 구조로 변환시키는 것

    DOM = 웹페이지가 로드될 때, 페이지의 엘리먼트가 구조화되어 트리를 이루는데, DOM이란 그 엘리먼트를 다루기 위한 표준이다.

    (DOM에 대해 더 알고싶다면 https://www.w3schools.com/js/js_htmldom.asp)



    웹은 파싱과 동시에 수행이 되는 동기화 모델이다. 파싱 중 <script> 태그를 만나게 되면 파싱을 멈추고 스크립트를 실행하게 된다. 보통 html을 작성할 때 스크립트 태그를 가장 아래에 내려놓는 이유도 이것이다.  css의 경우에는 화면을 표시하기 위한 정보를 담고 있기에 미리 해석되는 것이 유리하다 판단하기 때문에 body태그 위에 많이 선언한다. 이렇게 자바스크립트의 경우 아래에 많이 삽입하는데 HTML5에서는 defer , async와 같이 비동기로 속성을 추가하기 때문에 별도의 맥락에 의해 파싱되고 실행할 수 있다.

    async의 경우는 외부에 위치한 스크립트 파일에만 적용가능하며, 스크립트 로드를 파싱하고 있는 와중에 비동기로 다운받고, 실행할 때는 파싱을 멈춘다. 

    defer 속성은 비동기적으로 스크립트를 로드하지만 실행은 파싱이 끝난 후에 하도록 하는 것이다.

  2. CSS Parser가 스타일을 파싱하여 스타일 규칙을 생성한다.



  3. DOM 트리와 스타일 규칙을 이용하여 렌더트리를 생성하고 레이아웃을 실행 시킨다. 

    렌더 트리 = DOM 트리에 스타일 규칙을 적용하여 만든 것



    레이아웃 실행 = 노드와 해당 노드의 스타일 규칙을 적용 만든 것들의 정확한 위치와 크기 등을 계산하는 과정 


  4. 이제 렌더 트리는 각 노드를 화면에 실제로 나타낼 수 있도록 페인팅한다.


이 전체 과정을 보면 다음 사진과 같다.



이 과정을 측정할 수 있는 도구가 크롬 개발자 도구에도 있는데 크롬 개발자 도구를 열고 아래와 같이 들어가게 되면



다음과 같이 측정되었던 것들을 볼 수 있게 된다.




'Programming > 웹 관련' 카테고리의 다른 글

스프링의 요청에서 응답까지  (0) 2019.03.06
웹 렌더링  (0) 2019.03.03
브라우저 아키텍처 그리고 html 파싱  (1) 2019.03.02
  1. 2019.03.03 20:47

    비밀댓글입니다

■커스터마이징 버튼 만들기


프로젝트 내에서 fullcalendar를 사용하게 되었다. 뷰 모드는 agenda로 다음 날짜 혹은 이전 날짜 버튼을 클릭했을 때 특별한 작업을 하고 싶었다.  


일단 기존의 prev, next 버튼에 이벤트를 추가하고 싶었으나 정보를 제대로 찾지 못해서 커스터마이징된 버튼으로 대체 하기로 하였다.



Calendar에 동적으로 데이터 추가하기


작성한 updateTime는 calendar에 events(데이터)를 추가하는 것이다. calendar에 데이터를 추가하는 방법은 다음과 같이 호출하면 된다. 


* 배열의 경우

$('#calendar').fullCalendar('renderEvents',데이터배열,영구데이터)


* 배열이 아닌 객체의 경우

$('#calendar').fullCalendar('renderEvent',데이터,영구데이터)




삽입 시 데이터의 구조


다음은 데이터 구조는 https://fullcalendar.io/docs/event-object를 보면서 작성하였다.


내 경우에는 start와 end 프로퍼티를 이용했다.



위에서 너무 횡설수설하며 글을 써서 잘 이해가 되지 않는다면 https://fullcalendar.io/docs/renderEvent 이 부분을 한번 읽어보면 좋을 것 같다.



 

'Programming > javascript' 카테고리의 다른 글

FullCalendar prev, next 버튼 이벤트  (0) 2019.03.01

인증이 되어있지 않은 사용자는 스프링 시큐리티의 필터링에 걸려 로그인 페이지로 향하게 된다. 나의 경우 처음에는 로그인을 성공했을 때 핸들러를 통해(SimpleUrlAuthenticationSuccessHandler를 상속받아 작성) 메인페이지로 돌아가게끔 URL을 지정하였다.


그렇다면 메인페이지말고 내가 로그인 페이지로 넘어가기전에 요청했었던 url로 넘어가고 싶다면 어떻게 해야 할까?


보통 다른 방법들을 찾아보았을 때 login페이지 컨트롤러에서 Session 값을 넣거나 하는 작업을 하는 것들을 보았는데, 사실 우리는 그럴필요가 없다. 



레퍼런스에서 발견한 내용인데 두번째 문단을 읽어보면 인증전의 요청을 세션에 저장하고 있다고 얘기한다.

그리고 세션에 저장되어 있는 속성의 이름은 SPRING_SECURITY_SAVED_REQUEST 이다. 그렇다면 이제 로그인을 성공했을 때 핸들러에서는 다음과 같이 작업을 하면 될것이다.




또 다른 방법으로는 위의 글에서 언급한바와 같이 핸들러를 작성할 때 SavedRequestAwareAuthenticationSuccessHandler

를 상속받아 사용할수도 있는 것 같다.




분할 정복 알고리즘이란 문제에 대한 답을 재귀 호출을 이용해 계산하고, 각 부분 문제의 답으로부터 전체 문제의 답을 계산해 낸다. 재귀 호출과 차이점은 이 부분 문제를 나누는 방법에 있어 재귀 호출은 작은 부분하나씩 분리해서 해결하지만, 분할 정복은 항상 비슷한 크기의 부분으로 나눈다는 것


분할 정복을 사용하는 알고리즘들의 세 가지 구성 요소

  • 문제를 더 작은 문제로 분할하는 과정
  • 각 문제에 대해 구한 답을 원래 문제에 대한 답으로 병합하는 과정
  • 더이상 답을 분할하지 않고 곧장 풀 수 있는 매우 작은 문제


분할 정복을 이용한 문제


1) 1~n까지의 합을 구하여라

재귀 함수를 이용하여 1~n 까지의 합을 구했을 때는 O(n) 시간 복잡도였지만

분할 정복을 이용한다면 O(log n) 까지 줄일 수 있다.


2)행렬의 거듭제곱

n*n 행렬을 m번 곱하게 된다면 일반적인 방법은 O(n^3)시간 복잡도가 걸린다면 분할 정복을 이용했을 때는 O(log m)이 걸린다.



절반은 어떠한 형태로 나누어야 할까?


A^m을 나눌 때는 어떤 형식으로 나누어야 할까


1) A*A^(m-1)

2) A^(m/2) * A^(m/2)


이것은 같은 문제라도 어떻게 분할하느냐에 따라 시간 복잡도 차이가 커진다는 것을 보여주는 좋은 예이다.


절반으로 나누는 알고리즘이 큰 효율 저하를 불러오는 이유는 바로 여러 번 중복되어 계산되면서 시간을 소모하는 부분 문제들이 있기 때문이다. 예로 A(11)→A(5)*A(6)→(A2)(A3) * (A3)(A3)→... 이와 같이 반복되는 부분문제들이 많아지게 때문이다. 


3) 병합 정렬과 퀵 정렬


병합 정렬 = 병합 정렬 알고리즘은 주어진 수열을 가운데에서 쪼개 비슷한 크기의 수열 두 개로 만든 뒤 이들을 재귀 호출을 이용해 각각 정렬하는 알고리즘으로, 그 후 정렬된 배열을 하나로 합침으로써 정렬된 전체 수열을 얻는다.


분할 단계의 시간 복잡도 : O(1)

병합 단계의 시간 복잡도 : O(n)


퀵 정렬 = 배열을 단순하게 가운데에서 쪼개는 대신, 병합 과정이 필요 없도록 한쪽의 배열에 포함된 수가 다른 쪽 배열의 수보다 항상 작도록 분할.


이 두 알고리즘은 같은 아이디어로 정렬을 수행하지만 시간이 많이 걸리는 작업을 분할 단계에서 하느냐, 병합 단계에서 하느냐가 다르다.


4) 카라츠바의 빠른 곱셉 알고리즘


카라츠바의 빠른 곱셉 알고리즘은 두 개의 정수를 곱하는 알고리즘이다. 기존의 두 개의 정수의 곱셈으로 사용했던 아이디어는 O(n^2)의 시간 복잡도를 요구하였지만 카라츠바의 바른 곱셉 알고리즘의 시간 복잡도는 O(n^log 3)이다. 단 카라츠바의 알고리즘 구현은 매우 복잡하기 때문에 입력의 크기가 작은 경우에는 O(n^2)의 알고리즘을 사용한다. 


5) 쿼드 트리 뒤집기 문제


알고리즘 설계 패러다임이란 주어진 문제를 해결하기 위해 알고리즘이 채택한 전략이나 관점을 말한다.


무식하게 풀기


'무식하게 푼다'라는 말은 컴퓨터의 빠른 계산 능력을 이용해 가능한 경우의 수를 일일이 나열하면서 답을 찾는 방법을 의미한다. 이렇게 가능한 방법을 전부 만들어 보는 알고리즘들을 가리켜 흔히 "완전 탐색"이라고 한다.



재귀 호출과 완전 탐색


재귀 호출(=재귀 함수)이란 자신이 수행할 작업을 유사한 형태의 여러 조각으로 쪼갠 뒤 그 중 한 조각을 수행하고, 나머지를 자기 자신을 호출해 실행하는 함수를 말한다.


재귀 함수에는 '더 이상 쪼개지지 않는' 최소한의 작업에 도달했을 때 답을 곧장 반환하는 조건문(='거저 사례')을 포함해야 한다.

ex) if(n==1) return 1;


재귀 호출은 기존에 반복문을 사용해 작성하던 코드를 다르게 짤 수 있는 방법을 제공해 준다. 기존의 코드에 비해 재귀 호출을 통해 얻을 수 있는 별다른 이득은 없지만, 문제의 특성에 따라 재귀 호출은 코딩을 간편하게 해 줄 수 있는 강력한 무기가 된다.


재귀 호출을 이용하여 풀 수 있는 문제

1) 소풍 - 학생들을 두 명씩 짝 지어 주되, 친구인 학생들끼리만 짝을 지어줄 수 있는 방법의 갯수.

2) 게임판 덮기 - 격자 모양의 게임판에 ㄴ자 형식의 블록을 알맞게 삽입할 수 있는 경우의 개수.




최적화 문제(Optimization Problem)


문제의 답이 하나가 아니라 여러 개이고, 그 중에서 어떤 기준에 따라 가장 '좋은' 답을 찾아 내는 문제들을 통칭해 최적화 문제라고 합니다.


최적화 문제를 해결하는 방식 중 하나는 완전 탐색이다.


최적화 문제를 완전 탐색으로 풀 수 있는 문제 


1) 외판원 문제 - n개의 도시를 한 번씩 돌아서 돌아오는 데 걸리는 최소 거리.

2) 시계 맞추기 문제 - 


'3학년 > 알고리즘' 카테고리의 다른 글

6장 알고리즘 설계 패러다임  (0) 2018.11.22
5장 알고리즘의 정당성 증명  (0) 2018.11.22
문제 해결 전략 질문들  (0) 2018.11.16
백준 알고리즘 2294번  (0) 2018.01.16
백준 알고리즘 2870번  (0) 2018.01.15
백준 알고리즘 1003번  (0) 2018.01.15

알고리즘이 존재가능한 모든 입력에 대해 정확하게 동작한다는 사실을 증명할 수 없다. 따라서 알고리즘의 정확한 증명은 각종 수학적인 기법을 기반으로 되야한다.


수학적 귀납법과 반복문 불변식



수학적 귀납법은 반복적인 구조를 갖는 명제들을 증명하는 데 유용하게 사용되는 증명 기법.


귀납법은 크게 3가지로 나뉜다.

  • 단계 나누기 = 증명하고 싶은 사실을 여러 단계로 나눈다.

  • 첫 단계 증명 = 첫 단계에서 증명하고 싶은 내용이 성립함을 보인다. 

  • 귀납 증명 = 첫 단계에서 증명하고 싶은 내용이 성립하면, 다음 단계에서도 성립함을 보인다.

알고리즘은 어떠한 형태로든 반복적인 요소를 가지고 있기 때문에, 귀납법은 알고리즘의 정당성을 증명할 때 가장 유용하게 사용되는 기법.


반복문 불변식 = 반복문의 내용이 한 번 실행될 때마다 중간 결과가 우리가 원하는 답으로 가는지..


불변식을 이용한 반복문의 정당성은 다음과 같이 증명한다


  • 반복문 진입시에 불변식이 성립함을 보인다.

  • 반복문 내용이 불변식을 깨뜨리지 않음 보인다. 시작할 때 불변식이 성립하면, 끝에서도 성립한다

  • 반복문 종료시에 불변식이 성립하면 항상 우리가 정답을 구했음 보인다.

*불변식이 깨졌을 때 프로그램을 강제 종료함으로써 알고리즘에 문제가 있는지 없는지를 판단할 수 있다. 다만 엄청나게 많이 실행되는 반복문 안에 단정문을 배치하는 것은 삼가는 것이 좋다.


귀류법



귀류법은 원하는 바와 반대되는 상황을 가정하고 논리를 전개해서 결론이 잘못됐음을 찾아내는 증명 기법.


알고리즘의 결과가 최선임을 보이기 위해 각 단계에서 최선의 선택을 함을 귀류법으로 증명하고, 각 단계에서 최선의 선택을 한다면 다음 단계에서도 최선의 선택을 할 수 있음을 귀납법으로 증명한다.


비둘기집의 원리



10마리의 비둘기가 9개의 비둘기집에 모두 들어갔다면, 2마리 이상이 들어간 비둘기집이 반드시 하나는 있게 마련이다.




'3학년 > 알고리즘' 카테고리의 다른 글

6장 알고리즘 설계 패러다임  (0) 2018.11.22
5장 알고리즘의 정당성 증명  (0) 2018.11.22
문제 해결 전략 질문들  (0) 2018.11.16
백준 알고리즘 2294번  (0) 2018.01.16
백준 알고리즘 2870번  (0) 2018.01.15
백준 알고리즘 1003번  (0) 2018.01.15

1. final



1) 변수 : 변수가 초기화된 이후 변경되지 않는다.



2) 클래스 : 이 클래스는 서브클래스를 가지지 않는다. 다시 말해 이 클래스를 상속할 수 없다.




3) 메소드 : 해당 메소드는 서브 클래스에 의해 오버라이딩 되지 않는다.





2.finally



1) try - catch : try 혹은 catch가 실행된 후 실행



finalize



가비지 컬렉션에서 객체를 destroy 또는 delete 하기 전에 호출하는 메소드이다. 데이터베이스 커넥션이나,  네트워크 커넥션 같은 연관된 자원들을 해제한다. 기본적으로 Object에 선언되어 있으므로, 모든 객체는 finalize를 가지고 있다.



'Programming > JAVA' 카테고리의 다른 글

final, finally, finalize  (0) 2018.11.20
Comparison with Lambda  (0) 2018.10.29
자바 8 - Map  (0) 2018.10.19
캡슐화, 추상화, 인터페이스  (0) 2018.10.10
자바8 - List  (0) 2018.10.02
자바8 - 제네릭  (2) 2018.09.03

+ Recent posts