웹

◎ 웹(Web)

-> 인터넷에서 제공하는 ＊하이퍼텍스트 시스템

＊하이퍼텍스트 : 문서 내에 다른 문서의 위치정보 등을 포함하여 문서 간의 정보를 서로 연관지어 참조할 수 있는 문서

-> 웹 서비스는 주로 서비스를 이용하는 클라이언트와 서비스를 제공하는 서버로 나눈다.(클라이언트-서버 아키텍처)

 

◎ 웹 애플리케이션

-> 웹 브라우저를 통해 접근할 수 있는 애플리케이션

-> 장점 

- 브라우저를 통해 실행되기 때문에 다운로드를 할 필요가 없다.

- 특정 기기에 종속되지 않아 개발에 용이하다.(특정 기기에 맞춰야할 필요가 없다.)

-> 단점

- 인터넷이 없으면 사용할 수 없다.

- 네이티브 애플리케이션에 비해 속도가 느리다.

- 애플리케이션 스토어에서 관리되는 것이 아니라 사용자의 접근성이 떨어진다.

- 안드로이드나 ios처럼 특정 애플리케이션을 출시할 때 진행하는 검수과정이 웹 애플리케이션은 없기 때문에 보안상 위험에 노출될 가능성이 높아진다.

 

◎ 네이티브 애플리케이션

-> 특정 기기에 설치하여 사용하는 애플리케이션(모바일 애플리케이션 -> 안드로이드, ios같이 특정 기기에서 사용된다.)

-> 장점 

- 웹 애플리케이션보다 상대적으로 빠르다.

- 애플리케이션이 설치된 기기의 리소스에 접근이 용이하다.

- 특정 애플리케이션은 인터넷 없이도 사용할 수 있다.(ex 계산기, 캘린더 등)

- 애플리케이션을 출시할 때 앱 스토어의 검수를 받기 때문에 웹 애플리케이션에 비해 안전하다.

-> 단점

- 각 기기에 맞는 환경으로 애플리케이션을 개발해야하기 때문에 웹 애플리케이션에 비해 개발비용이 많이 든다.

- 앱 스토어에 승인 받기 어렵고, 비용이 발생한다.

 

◎ 웹 애플리케이션의 요청 흐름

-> https://web.appllication.com에 접근한다고 가정한다.

1. 브라우저에 위의 url을 입력한다.

2. url입력을 받으면 서버의 주소를 찾기 위해 dns서버에 요청을 보낸디.

3. dns서버를 통해 ip주소를 찾고, 해당 주소에 HTTPS요청을 보낸디.

4. 웹 서버에 요청이 오면 웹서버는 저장소에 요청을 보내 페이지와 관련된 데이터를 가져온다.

5. 데이터들을 가져와서 브라우저에 응답을 보낸다.

애플리케이션은 client-side, server-side로 작동한다. 사용자의 요청에 따라 브라우저에서 작동하는 프로그램은 client-side이고, HTTP요청에 따라 서버에서 요청을 받아 동작하는 프로그램은 server-side라고 할 수 있다.

 

◎ 웹 애플리케이션의 요소

-> 유저 인터페이스 요소 : 사용자의 경험과 관련된 요소. 화면 출력, 환경 설정 등 웹 애플리케이션의 외적인 부분이다.

-> 구조 요소 : 웹 애플리케이션의 기능을 담당하는 요소. 사용자와의 상호작용 등.

 

◎ 웹 애플리케이션의 3단계 계층 구조

 

-> 웹 애플리케이션의 구조는 3단계의 계층 구조로 나눌 수 있다.

-> Presentation Layer : 사용자와 브라우저를 통해 직접적으로 접촉하는 계층으로 웹 서버가 Presentation Layer에 속한다. 유저 인터페이스를 포함한다.

 

-> Application Layer : Business Layer, Business Logic으로도 불리며 유저의 사용자의 요청을 받아 처리하는 계층이다. Application Server가 속한다. 데이터 접근을 위한 경로를 규격화하는 과정이 해당 계층에 작성된다.

 

-> Data access Layer : 애플리케이션의 데이터 저장소에 접근하여 데이터를 가져오거나 저장하는 계층이다. Application Layer의 로직들은 Data access Layer를 통해 데이터베이스에 접근하여 데이터를 처리하는 과정을 최적화할 수 있다.

 

-> 3단계의 계층 이외에 존재하는 Cross Cutting은 주로 보안,통신, 운영관리를 위한 요소다. 또한 Third party Integrations는 제 3의 서비스를 이용하는 것을 의미한다.

 

◎ 웹 애플리케이션의 구현

-> 웹 애플리케이션을 구성하는 방식은 Single Page Application, Microservice architecture, Serverless Architectures가 있다.

-> Single Page Application : 사용자의 입력과 요청에 따른 정보의 최신화가 새로운 페이지를 불러오지 않고 현재 위치한 페이지에서 이루어진다. 필수적인 요소만을 요청하여 페이지가 새로고침되는 것을 방지해 ＊사용자 경험을 극대화 한다.

AJAX, XML, Asynchronous JavaScript가 Single Page Application을 구현하기 위해 사용된다.

 

＊ 사용자 경험 : 사용자가 어떤 시스템, 제품, 서비스를 직, 간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 말한다. (https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9A%A9%EC%9E%90_%EA%B2%BD%ED%97%98)

 

-> Microservice architecture : 작고 가벼운 특정한 한 가지 기술에 집중한 웹 애플리케이션. 각 애플리케이션의 기능 요소들은 상호 의존적으로 설계되지 않아 개발 단계나 완성 이후에도 같은 개발 언어를 사용할 필요가 없다. 개발자가 원하는 언어를 사용하여 기능 개발의 유연성을 높이고, 개발과정의 속도와 생산성이 향상된다.

 

-> Serverless Architectures : 웹 애플리케이션의 서버와 기타 기능들을 제 3자인 외부 클라우드 서비스 제공자에게 의탁하는 방식.

 

◎ 쿠키 & 세션

-> 쿠키 : 웹 애플리케이션을 사용하는 사용자의 정보를 클라이언트에 보관하고 다음 접속 시 사용자의 정보를 클라이언트가 서버로 보내 사용자를 서버가 식별하게 한다. 쿠키에 들어간 내용을 통해 웹 애플리케이션에 사용자가 설정한 정보들에 대해 저장하여 다음에 접속할 때 이전에 사용한 방식 그대로 사용할 수 있게 한다.

 

-> 세션 : 서버에 session-id라는 고유 아이디를 할당하여 사용자를 식별한다. 유출이 되면 안되는 정보를 서버에서 관리하면서 세션 id와 매칭하여 저장한다. 주로 세션정보를 쿠키에서 관리하고, 실제 매칭되는 값들은 서버측에서 관리한다.

 

◎ SSR & CSR

-> SSR(Server Side Rendering) : 웹페이지를 서버에서 랜더링하는 방식. 브라우저가 서버의 uri로 get요청을 보내면 서버는 정해진 웹 페이지 파일을 브라우저로 전달한다. 서버에서 보낸 웹페이지가 브라우저로 도착하면 페이지가 완전히 랜더링 된다. 사용자가 웹페이지를 보던 중에 브라우저의 다른 경로로 이동할 경우 서버는 다른 브라우저로 이동할 때마다 웹페이지를 랜더링한다.

 

-> CSR(Client Side Rendering) : 클라이언트에서 랜더링하는 방식. 사용자의 요청에 따라 필요한 부분만 서버에서 전달 받아 랜더링한다. 브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 랜더링하지 않고, 웹페이지의 골격이 되는 단일 페이지를 클라이언트에게 javascript파일을 같이 보낸디. 클라이언트가 웹페이지를 받으면 브라우저에서 완전히 랜더링된 페이지로 바꾼다.

 

-> SSR과 CSR의 차이는 페이지가 랜더링되는 경로다. SSR은 서버에서 랜더링하고, CSR은 클라이언트에서 페이지를 랜더링한다.

-> SSR 사용하는 경우 :  SEO(검색 엔진 최적화 : https://en.wikipedia.org/wiki/Search_engine_optimization) 가 우선순위인경우나 웹페이지의 첫 화면 랜더링이 빠르게 필요한 경우에 사용하며(서버에서 웹페이지를 이미 랜더링된 페이지를 클라이언트에게 보내주기 떄문에) 웹 페이지와 사용자 간의 상호작용이 적은 경우 SSR을 활용한다. 하지만 자원 이용이 서버에 집중되기 때문에 애플리케이션 유지비용이 높다.

 

-> CSR 사용하는 경우 : SEO가 우선순위가 아닌 경우나 웹 페이지와 사용자 간 상호작용이 활발한 경우 사용한다.(필요한 부분만 요청하여 랜더링하기 때문에 서버에 자원이용이 상대적으로 덜 집중된다.) 하지만 모든 랜더링의 부하가 클라이언트에게 집중되기 때문에 사용자 경험에 영향을 미칠 수 있다.