[Day11] 프로그램 웹 개발 이론 (20240708)

1. 다중 페이지 애플리케이션(MPA)
   
   • MPA(Multi Page Application)는 웹 페이지에서 서버로 데이터를 요청하고 응답을 받을 때 매번 새로운 HTML 페이지를 받는 방식을 말합니다. 웹이 탄생했을 때부터 지금까지 사용되고 있는 디자인 패턴.
   • 간단히 정리해서 그냥 페이지를 여러개 만드는 것.
   • 장점
     
     • 검색엔진 최적화(검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정)에 용이.
     • 탁월한 확장성(새로 만들면 되니까.)
       
   • 단점
     
     • 페이지 속도 저하와 웹사이트 전체 성능 문제
     • 개발자 부담이 크고, 개발 기간이 김.
     • 웹 사이트의 보안 및 유지·보수가 어렵다.(페이지가 여러개니까)
   • 사족
     
     • AJAX(새로 고침을 하지 않고 데이터를 받아오는 기술)가 등장하기 전까지 모든 웹 사이트에서 사용
     • 이베이(eBay), 아마존(Amazon) 등의 글로벌 서비스에서 사용
2. 단일 페이지 애플리케이션(SPA)
   
   • AJAX의 등장으로 클라이언트에서 데이터를 요청할 때 새 HTML 페이지를 받지 않고 데이터를 갱신
   • SPA(Single Page Application)는 웹 페이지에서 처음 응답받을 때 딱 한 번만 HTML, CSS, 자바스크립트 같은 자원을 내려받고 다음 요청부터는 응답받은 데이터로 필요한 부분만 변경하는 방식
   • 응답 데이터는 XML, CSV, HTML 등의 형식으로 받을 수 있는데, JSON(JavaScript Object Notation, 제이슨) 데이터를 가장 많이 사용 
   • 응답받은 데이터를 웹 페이지에서 직접 변경. 렌더링을 클라이언트에서 함. CSR(Client Side Rendering, 클라이언트 사이드 렌더링)이라고도 함.
   • 장점 
     
     • 웹 페이지 전체를 다시 로딩하지 않고 변경되는 부분만 업데이트
     • 웹 페이지가 변경돼도 새로 고침이 발생하지 않아 사용자 경험(UX)이 향상
     • 전체적인 편의성(유저/개발자) 향
   • 단점
     • 모든 페이지가 분리돼 있지 않아 검색 엔진 최적화에 매우 불리
     • 하나의 웹 페이지 내에서 데이터가 변경되기 때문에 보안 측면에서 취약
     • 웹 브라우저의 히스토리를 따로 관리하지 않으므로 URL(Uniform Resource Locator, 웹 주소) 개념이 없음
     • 처음 페이지 로딩 SSR방식보다 느림.
     • 검색엔진최적화에 대한 추가 보완 작업 필요.(ex:sitemap문서 작성)
   • 사족
     
     • DOM
       • HTML, CSS 요소를 자바스크립트가 이해할 수 있도록 객체화해 제공하는 모델
       • DOM 생성이 끝나면 웹 브라우저는 자바스크립트가 DOM에 접근할 수 있도록 브라우 저 API, DOM API와 같은 접근 방법을 제공 
       • 문제는 자바스크립트가 DOM에 직접 접근하면 내부적으로 연속적인 처리가 발생해 속 도나 성능 면에서 매우 불리
       • SPA 디자인 패턴을 기반으로 한 자바스크립트 프레임워크(앵귤러, 리액트, 뷰)는 이 문 제를 해결하기 위해 DOM을 제어하는 알고리즘을 제공
       • 앵귤러는 증가 DOM 방식의 알고리즘을, 리액트와 뷰는 가상 DOM 방식의 알고리즘을 제공
3. 서버 측 렌더링(SSR)
   
   • SSR(Server Side Rendering, 서버 사이드 렌더링) 웹 페이지를 서버에서 렌더링 → 모든 데이터를 서버에서 생성한 후 클라이언트에 전달합니다.
   • 장점:
     
     • 서버에서 이미 렌더링한 데이터를 응답받기 때문에 초기 페이지 로딩 속도가 SPA(또는 CSR)보다 빠름.
     • 검색 엔진 최적화에 유리.
   • 단점:
     
     • 초기 로딩 이후 페이지 이동시 속도가 다소 느림(페이지 이동 마다 클라이언트가 서버에게 필요로 하는 데이터를 요청하고 서버가 응답하는 방식이기 때문)
     • 서버에서 렌더링이 발생하면 서버 부하가 증가합니다.
     • 제대로 최적화되지 않으면 초기 로드 후 상호 작용이 느려질 수 있습니다.

 

쿠키와 세션

[Node.js_4기] Today_I_Learn : 쿠키와 세션 (24/01/25) (tistory.com)

이전에 작성한 내용에 추가

쿠키 속성(또는 구성요소) :

• 만료시간(expires,max-age), 범위(domain,path), 보안(secure)-https에서만 사용 가능한 쿠키

XSS 공격 방지(HttpOnly)

xss(Cross-Site Scripting 사이트 간 스크립팅) : 사용자가 이용하는 사이트에 악성코드를 심어 쿠키를 탈취하는 해킹 공격

HttpOnly 속성을 사용하여 클라이언트가 쿠키에 접근하지 못하도록 하여 방어

 

CSRF 공격 방지

CSRF(Cross-Site Request Forgery 사이트간 요청 위조)  : 원치 않는 사이트로 쿠키를 보내게 하여 쿠키를 탈취하는 공격 방법.

인증된 사이트에 저장된 쿠키를 해커가 심어놓은 다른 사이트에 전송하는 방식

samesite 속성을 사용하여 방어

(strict : 다른 사이트로 쿠키 전송 불가)

(lax : 안전한 http 메서드(get)이고, 작업이 최상위 경로에서 이뤄지는 경우 외에는 사이트로 쿠키 전송 불가)

(none : 다른 사이트로 쿠키 전송 가능 - samesite 해놓을 이유가 없음. 쓰지 말자.)

 

 

HTTP의 비연결성 - 요청 없이 서버에서 응답을 보낼 수 없음.

웹 소켓

TCP/IP 4계층중 응용 계층에서 동작하며, 한 번 연결되면 끊어지지 않는다.

또한, 클라이언트의 요청 없이 서버에서 응답을 보낼 수 있다.

 

• 초기 연결 설정은 HTTP. 클라이언트와 서버가 웹 소켓을 지원하는지 사전에 알 수 없기 때문
• 요청 메시지 헤더에 Upgrade 값으로 websocket을 보내 서버가 지원하는지 확인
• 요청 받은 서버는 웹소켓을 지원하는 경우 응답에 101

 

웹 소켓 - Web API | MDN (mozilla.org)