네트워크 기초

이홍경·2021년 9월 3일
0
post-thumbnail

2-Tier Architecure(Client-server Architecure)

자원(데이터)을 사용하는 곳(앱, 브라우저 등....)을 클라이언트(client), 제공하는 곳을 서버(server)라고 함.
만약 쇼핑몰 앱에 상품의 정보와 같은 것들이 모두 존재한다고 가정하면(앱과 연결된 서버가 없다, 정보가 고여있다), 새로운 상품이 추가되거나 업데이트가 어렵다.(앱 자체를 업데이트 해야 한다)
그래서 상품의 정보와 같은 리소스를 따로 분리한다. 이렇듯 리소스가 존재하는 곳과, 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처 또는, 클라이언트-서버 아키텍처라고 부른다.
클라이언트-서버 아키텍처에서는 서버 마음대로 클라이언트에 리소스를 전달하지 않는다. 하지만 쿠키와 같이 간혹 서버에서 일방적으로 클라이언트에 정보를 전달하는 경우도 있다고 한다.

3-Tier Architecture

일반적으로 서버는 리소스를 전달해주는 역할만 담당하고, 리소스를 저장하는 공간을 별도로 마련해 둔다. 이 공간을 데이타베이스(database)라고 부르고, 이처럼 2티어 아키텍처에 데이터베이스가 추가된 형태를 3티어 아키텍처라고 부른다.

Protocol

손님이 가게에 없는 메뉴를 주문할 수 없듯, 통신을 하기 위해서는 꼭 지켜야 하는 약속이 몇가지 존재한다. 이와 같이 프로토콜은 통신규약, 즉 이런 약속이다.
(출처: 코드스테이츠)

API(Application Programming Interface)

서버는 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스(interface)를 제공해줘야 하며, 이것을 API라고 합니다. 정보를 수정, 추가, 조회, 삭제(CRUD)하려면 API에 규정된 형식에 맞춰 요청해야 합니다.

URL(Uniform Resource Locator)

네트워크 상에서 웹 페이지, 이미지, 동영상 등의 파일이 위치한 정보를 나타낸다. URL은 scheme, hosts, url-path로 구분할 수 있습니다. scheme은 통신 방식(프로토콜)을 결정합니하며, 일반적인 웹 브라우저에서는 http(s)를 사용함. hosts는 웹 서버의 이름이나 도메인, IP를 사용하며 주소를 나타냄. url-path는 웹 서버에서 지정한 루트 디렉토리부터 시작하여 웹 페이지, 이미지, 동영상 등이 위치한 경로와 파일명을 나타냄.
(출처: 코드스테이츠)

URI(Uniform Resource Identifier)

URL의 기본 요소인 scheme, hosts, url-path에 더해 query, bookmark를 포함. query는 웹 서버에 보내는 추가적인 질문임.(주소 뒷부분의 ?q로 시작하는 부분)
브라우저의 검색창을 클릭하면 나타나는 주소가 URI이고, URI는 !URL을 포함하는 상위개념임. 따라서, 'URL은 URI다.' 는 참이고, 'URI는 URL이다.' 는 거짓임.
(출처: 코드스테이츠)

SSR(Server Side Rendering)

웹 페이지를 브라우저에서 렌더링하는 대신에, 서버에서 렌더링함. 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송하고, 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링됨. 서버에서 웹 페이지를 브라우저로 보내기 전에, 서버에서 완전히 렌더링했기 때문에 Server Side Rendering 이라고 하며, 웹 페이지의 내용에 데이터가 필요한 경우, 데이터베이스의 데이터를 불러온 다음 웹 페이지를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보낸다. 웹 페이지를 살펴보던 사용자가, 브라우저가 다른 경로로 이동할 때마다 서버는 이 작업을 다시 수행함.

  • SEO(Search Engine Optimization) 가 우선순위인 경우, 일반적으로 SSR(Server Side Rendering) 을 사용.
  • 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우에 단일 파일의 용량이 작은 SSR 이 적합.
  • 웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용.

CSR(Client Side Rendering)

SSR이 서버 측에서 페이지를 렌더링한다면, CSR은 클라이언트에서 페이지를 렌더링한다. 웹 개발에서 사용하는 대표적인 클라이언트는 웹 브라우저이고, 브라우저의 요청을 서버로 보내면 서버는 웹 페이지를 렌더링하는 대신, 웹 페이지의 골격이 될 단일 페이지를 클라이언트에 보낸다. 서버는 웹 페이지와 함께 JavaScript 파일을 보내게 되고, 클라이언트가 웹 페이지를 받으면, 웹 페이지와 함께 전달된 JavaScript 파일은 브라우저에서 웹 페이지를 완전히 렌더링 된 페이지로 바꾼다. 브라우저는 데이터베이스에 저장된 데이터를 가져와서 웹 페이지에 렌더링을 해야 하며, 이를 위해 API가 사용된다. 렌더링하는 데에 필요한 데이터를 API 요청으로 해소함. CSR에서는 SSR과 다르게, 서버가 웹 페이지를 다시 보내지 않고, 브라우저가 요청한 경로에 따라 페이지를 다시 렌더링함. 이때 보이는 웹 페이지의 파일은 맨 처음 서버로부터 전달받은 웹 페이지 파일과 동일한 파일입니다.

  • SEO 가 우선순위가 아닌 경우.
  • 사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공함.
  • 웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공.
profile
개발자를 꿈꾸는 자

0개의 댓글