Overview

web 개발을 하면서 가장 많은 면접 질문은 '구글에서 본인 이름을 검색하면 일어나는 일을 말해보세요' 일 것이다. web의 기본 개념을 알아야지만 정확하게 말을 할 수 있고, 어느 강의에서는 해당 내용을 100개 이상의 프로세스로 설명을 하는 강의도 있다.

그만큼 해당 내용이 web개발에 있어 기초이자 끝이기 때문에 이 내용을 정리해보려고 한다.

1. DNS(Domain Name Server)

DNS는 '월드 와이드 웹'이 가능하도록 만드는 기반의 기술이다.

'구글' 페이지의 경우 IP주소는 (85.129.83.120) 이다. 만약 DNS가 존재하지 않는다면, 우리는 홈페이지를 들어가기위해 수만가지의 숫자를 머릿속에 기억을 해야될 것이다.

조금 더 쉽게 표현을 하자면,
지금 본인이 가지고 있는 스마트폰을 이용하여 가장 친한 친구에게 전화를 걸어보자.

혹시, 전화번호를 바로 눌르고 통화버튼을 눌렀는가? 아니면 전화번호부나 카카오톡에서 친구 이름을 검색하고 통화버튼을 눌렀는가?

웹도 마찬가지가, 숫자로 되어 있는 IP주소를 조금더 기억하기 쉽게 표현이 필요했고, 그에 따라 IP주소를 문자화 시키기 시작하였다.

2. Load Balanncer(로드 밸런서)

웹 개발을 하게 된다면, 최적화를 위해서 많은 노력을 할 것이다. 웹을 최적화를 해야되는 이유를 생각해보자.

그 이유는 클라이언트에게 빠르게 정보를 전달을 하기위해서이다.
물론, 클라이언트의 컴퓨터 성능이 매우 좋아서 무겁게 웹 개발을 하여도 빠르게 정보를 볼 수 있지만, 모든 클라이언트의 컴퓨터가 성능이 뛰어나진 않다.
이러한 하드웨어적인 성능을 업그레이드 하는 것을 수직적 확장 이라고 한다.

로드 밸런서 는 수직적 확장이 아닌 수평적 확장이 가능하도록 만드는 기술이다.

수평적 확장은 백앤드(웹서버, DB, 기타 등등)들을 각각 다른 서버에서 돌림으로서 서로가 최소한으로 결합할 수 있도록 하는 확장을 의미한다.

로드 밸런서는 들어오는 요청을 복제/미러링 된 수많은 서버 중의 하나로 연결하고 서버의 응답을 다시 클라이언트로 보낸다. 로드 밸런서는 이들 서부에 과부하가 걸리지 않도록 들어오는 요청을 적절히 분배해주는 일을 한다.

3. WEB APP Servers

클라이언트에서 들어오는 요청을 핵심 비지니스 로직을 실행하고 그 결과를 HTML에 담아 브라우저로 보낸다.

4. Database(데이터베이스:DB)

데이터베이스는 데이터 구조를 정의하고, 새로운 데이터를 삽입하고, 데이터를 찾고, 데이터를 수정하거나 삭제하는 (CRUD)의 일을 수행한다.

거기에 더해서 각각의 백엔드 서비스는 애플리케이션의 다른 영역과 분리된 자시만의 데이터베이스를 가지고 있을 수 있다.

5. Caching service(캐싱 서비스)

캐싱 서비스는 클라이언트가 요청하는 html, js, css등에 대해 첫 요청 시 파일을 내려받아 특정 위치에 복사본을 저장하고, 이후 동일한 URL의 요청은 다시 내려 받지 않고 내부에 저장한 파일을 사용하여 더 빠르게 서비스 하기 위한 것이다.

6. Job queue & server

많은 웹/애플리케이션은 사용자에 요청에 의해 응답과는 직접적인 관련이 없는 작업을 백그라운드에서 비동기적으로 실행할 필요가 있다.

예를 들어, 구글링 시 결과를 얻기 위해 인터넷에서 데이터를 크롤링하고, 인덱싱 할 필요가 있다. 이럴때 비동기적으로 웹을 크롤링 한다.

동기적 : 특정코드를 완료하고 이후 아랫줄을 수행함
비동기적 : 특정 코드를 수행하는 도중에도 아래로 계속 내려가며 수행함

비동기적 작업을 가능하게 하는 여러가지 아키텍쳐가 있지만, 해당 이미지에서는 '잡 큐' 아키텍처로 표현을 하였다.

비동기적 작업을 가능하는 아키텍처는 다음시간에 더 자세히 다루겠다.

7. Full text search service (전체 텍스트 검색 서비스)

전체 텍스트트 검색은 많은 웹 앱이 사용자가 텍스트 입력을 하면 검색과 동시에 가장 '관련 있는' 결과를 보여주는 기능을 한다. 그 대표 예시가 '네이버 - 연관검색어', '자동완성' 기능등이 있다.

8. Service

규모가 커진 앱/웹 들은 내부에서 추가적인 서비스가 생성이 된다. 겉으로는 노출되지 않지만, 앱 내부의 다른 서비스들은 서로 연동이 되고 있다.

1. 계정 서비스 : 우리의 모든 사이트의 사용자정보를 저장해서 교차 판매 기회를 더 쉽게 제공하고, 더 일관적인 사용자 경험을 가능하게 한다.
2. 컨텐츠 서비스 : 우리의 모든 비디오, 오디오, 이미지의 메타 데이터를 저장한다.

이 두개의 서비스는 예시로 들 수 있다. 이 외에도 service라는 것은 앱/웹에서 광범위하게 존재한다.

9. Date

최근 거의 모든 앱은 특정 규모에 도달하면 데이터를 제어, 저장, 번석하기위해 데이터 파이프 라인을 구축한다. 전형적인 파이프라인은 보통 3개의 주요 단계를 가진다.

1. firehose는 데이터를 받아드리고 처리할 수 있는 스트리밍 인터페이스를 제공한다.
   가공되지 않은 원시의 데이터는 변형되거나 추가 정보와 함께 다른 firehose로 전달이 된다.
2. 원시 데이터와 최종 데이터는모두 클라우드 스토리지에 저장이된다.
3. 변형/추가된 데이터는 종종 분석을 위해 데이터 웨어하우스(DW)에서 로드 된다.

10. Cluode storage

전세계 대표적인 웹서비스 회사인aws에서는 cluode storage를 다음과 같이 설명하고 있다.

데이터 스토리지를 서비스로서 관리하고 운영하는 클라우드 컴퓨팅 공급자를 통해 데이터를 인터넷에 저장하는 클라우드 컴퓨터 모델이다.

이와 같이 clude storage는 인터넷만 존재하면 어디서든 어떠한 기계를 통해서든 파일 및 모든 시스템을 저장 할 수 있고 불러와 사용할 수 있다.

11. CDN

CDN은 Content Delivery Network의 약자로 html, css, js, 이미지와 같이 정적인 데이터를 웹을 통해 원본서버를 이용하는 거솝다 더 빠르게 제공하기 위한 기술이다.

예를 들어, 나이키 신발을 사기위해 본사인 미국을 가서 사오는 것이 아닌, 각 나라의 도시에 나이키 매장에서 우리는 손쉽게 나이키 제품을 빠르게 구매를 할 수 있다.

이와 같이 CDN도 거리가 멀어 통신의 속도가 느려지는 것을 막기 위해 각 나라에 엣지 서버를 구축하여 더욱 빠르게 정적인 데이터를 가져오는 기술이다.

마무리

웹 아키텍쳐의 간단한 설명을 해보았다. 많은 사람들이 정리를 해놓은 것을 보고 내가 업무를 하면서 가장 직접적으로 느낀점을 토대로 작성을 해보았다. 아키텍처를 알기위해 영어사전부터 찾아보며, 다양한 개발의 아키텍처 정보가 쏟아져 나왔지만, 결국 front end를 준비하는 나에게 가장 적합한 이미지를 찾고 그 이미지에 대해 하나하나 설명을 덧붙여 봤다.

아직 부족한게 많지만, 그래도 유사한 내용이 나오면 혼동되지 않고 해결할 수 있을것 같다.