3.웹(Web) : 인터넷에서 제공되는 하이퍼텍스트 시스템
-하이퍼텍스트(hypertext) : 문서안에 다른 문서의 위치정보 등을 포함하여 문서 간의 정보를 서로 연관 지어 참조 할 수 있는 문서
-HTML로 대표되는 하이퍼텍스트 언어와 인터넷이 융합하여 탄생
-기술의 발전과 함께 오늘날 게임, 동영상 서비스, 전자상거래, 거대 소셜미디어 서비스 등 다양한 용도로 활용되고 있음
3-1.클라이언트-서버 아키텍쳐(Client-Server Architecture)
-리소스가 존재하는 곳(서버)과 리소스를 사용하는 앱(클라이언트)을 분리
-2티어 아키텍쳐라고도 부름
-클라이언트는 보통 플랫폼에 따라 구분되며 웹사이트, 스마트폰/태블릿 용 앱, 데스크탑 앱 등이 있음
-서버는 무엇을 하느냐에 따라 종류가 달라지고 파일 서버, 웹 서버, 메일 서버, 데이터베이스 서버 등이 있음
+3티어 아키텍쳐 : 2티어 아키텍쳐에서 리소스를 데이터베이스라는 창고에 저장하고 서버는 리소스를 전달만해주는 역할
3-2.웹 애플리케이션 아키텍쳐(Web Application Architecture)
-웹 개발 영역에서 website는 일반적으로 정적 페이지들의 집합체를 의미, 웹 어플리케이션은 정적 페이지 뿐만 아니라 동적 페이지를 포함함
-웹 애플리케이션 아키텍처는 어떻게 애플리케이션 내부의 요소들이 상호간에 소통하는지 설명함
-웹 애플리케이션 구조
(1)Presentation Layer: 이 계층은 유저와 브라우저 등을 이용해 직접적으로 접촉함. Web Server가 이 영역에 포함되며, 유저 인터페이스 요소들을 포함함
(2)Application Layer: Business Layer, Business Logic, Domain Logic으로도 불리우며 유저의 요청을 브라우저로부터 받아서 처리함. Application Server가 이 계층에 포함되며 또한, 데이터 접근을 위한 경로를 규격화 하는 등의 과정이 이 계층에 작성됨
(3)Data access layer: Persistence layer 라고도 불리며 애플리케이선의 데이터 저장소에 접근하여 데이터를 불러 오거나 저장을 담당함. Application Layer는 이 계층과 밀접한 연관을 가짐
(4)Cross-cutting: 주로 보안, 통신, 운영 관리등을 위한 요소
(5)Third-party integrations: 제 3의 API 서비스를 이용하는 것을 의미함. OAuth 2.0을 이용한 소셜 로그인, PG 사를 이용한 결재기능 등이 여기에 속함.
-웹 애플리케이션 구현방식
(1)Single Page Application
-웹페이지에서 일부분만 바꾸며 유저의 입력과 요청에 의한 콘텐츠나 정보의 최신화가 페이지를 새로 불러오지 않고 현재 페이지에서 이루어 짐.
-AJAX, Asynchronous JavaScript, XML 이 주로 사용됨
(2)Microservice architecture
-작고 가벼운 특정한 한가지 기능에 집중한 웹 애플리케이션을 의미
-개발자는 원하는 언어를 사용해 기능 개발에 유연성을 더 갖게 되고. 개발 과정의 전반적인 속도와 생산성이 향상됨
(3)Serverless Architecture
-개발자가 웹 애플리케이션의 서버와 기타 기반 기능들에 대해 외부의 3자인 클라우드 서비스 제공자에게 의탁하는 방식
-개발자가 기본적인 서버나 기반 기능들에 걱정할 필요 없이 특정기능의 개발에 집중할 수 있음
+쿠키(Cookie)와 세션(Session)
-쿠키 : 웹 애플리케이션을 사용하는 유저의 정보를 클라이언트에 보관하고, 다음 접속부터는 유저의 정보를 클라이언트가 서버로 보내서 유저를 서버가 식별하게 함
-세션 : 서버에 Session-Id 라는 고유 아이디를 할당해서 유저를 식별함
-세션정보는 쿠키에서 관리하고, 실제 매칭되는 값들은 서버 측에서 관리하는 것이 일반적
3-3.SSR vs CSR
(1)SSR(Sever Side Rendering) : 웹 페이지를 브라우저가 아닌 서버에서 렌더링
-웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보냄
(2)CSR(Client Side Rendering) : 클라이언트에서 Javascript 가 페이지를 렌더링
-클라이언트가 웹 페이지를 받으면, 웹 페이지와 함께 전달된 JavaScript 파일은 브라우저에서 웹 페이지를 완전히 렌더링 된 페이지로 바꿈
+CSR과 SSR의 주요 차이점은 페이지가 렌더링되는 위치임. SSR은 서버에서 페이지를 렌더링하고, CSR은 브라우저(클라이언트)에서 페이지를 렌더링함. 브라우저는 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리함
-이미지 및 내용 출처 : code states
'부트캠프' 카테고리의 다른 글
| 관계형 데이터베이스 part1 (0) | 2023.01.30 |
|---|---|
| 네트워크 - HTTP (0) | 2023.01.30 |
| 네트워크 - 웹 애플리케이션 작동원리 part1 (0) | 2023.01.26 |
| 자료구조/알고리즘 - 알고리즘 part2 (0) | 2023.01.25 |
| 자료구조/알고리즘 - 알고리즘 part1 (2) | 2023.01.19 |