프론트엔드와 백엔드의 기본

프론트엔드 : 실제 유저들이 사용하게 되는 웹,앱

웹서버

• 웹을 제공해주는 서버. 보통 웹서버에서 제공하는 것은 HTML,CSS,Javascript가 합쳐져 있는 하나의 정적인 웹이다.
• 백엔드 서버와 헷갈려선 안된다. 웹서버는 웹 정보(프론트엔드 정보)를 제공해주고, 백엔드 서버는 필요한 데이터를 제공해준다.
• 브라우저가 웹서버에서 이러한 웹을 다운받아 화면에 보여준다.
• 앱은 웹서버가 존재하지 않는다. 대신 프론트엔드 정보를 앱스토어에서 받아오니, 앱스터가 웹서버의 역할을 한다고 볼 수 있다.

반응형웹

• 여러 디바이스에 맞춰 크기가 변경하는 웹

CDN

• 네트워크도 결국은 물리적인 신호로 통신을 수행하기 때문에, 거리가 멀수록 시간이 오래 걸린다.
• 이를 해결하기 위해 CDN(Contents Delivery Network)가 만들어졌다. 웹이나 이미지, 비디오 등의 정보를 미리 캐시로 저장하고 사용자에게 가까운 거리에서 보여주게 하는 기술이다.
• CDN을 제공하는 서비스는 다양한 나라(혹은 지역)에 미리 정보들을 다운받아둔다. 그럼 클라이언트들이 사용할 때 핵심 웹서버로부터 정보를 받지않고, 각 지역의 센터로부터 웹을 받을 수 있게 된다.

웹을 다운받는 방식

• CSR : 웹서버에서 HTML&CSS만 받아온 후, 먼저 화면을 그린다. JavaScript를 나중에 다운받는다. (데이터요청을 나중에 한다.)
• SSR : 웹서버에서 HTML&CSS&Javascript를 통해 먼저 화면을 그린다. CSR과 다르게 웹서버에서 먼저 데이터를 포함한 렌더링을 실시한다.

랜더링

• 서버에서 정보를 불러와 프론트엔드의 내용과 함께 화면을 시각적으로 그려주는 작업
• 기초 랜더링로 뼈대가 되는 레이아웃을 구성한 후에 서버에 정보를 요청하고, 이를 활용하여 추가 렌더링작업을 한다.

라우터

• 페이지를 넘기는 작업을 개발 용어로 '라우팅'이라고 한다.
• 웹 안에서 개발한 라우터가 이러한 작업에 도움을 준다.

인증

• 로그인과 같은 과정을 수행하면 서버(백엔드)로 부터 토큰을 받는다.
• 이러한 토큰을 저장하고 있다가 서버에게 정보를 요청할 때 토큰을 같이 넘겨주어, 해당 토큰에 맞는 정보를 받는다.
• 이러한 과정이 인증의 핵심이다.

---

백엔드 : 웹,앱에 정보를 주는 서버

데이터베이스

• 서비스에 대한 모든 정보를 담는 저장 공간
• '테이블'의 형태로 데이터들을 저장하고 읽는다.

Storage

• 데이터베이스에도 이미지나 동영상을 저장할 수는 있다.
• 하지만 데이터베이스는 텍스트와 숫자정보를 저장하는 것에 최적화되어 있다.
• 따라서 이미지나 동영상같은 파일은 파일 스토리지에 저장한다.

API서버

• 서비스의 주요 로직을 담당
• 클라이언트가 필요로 하는 데이터를 전달해주는 서버
• 웹에서 라우터로 페이지를 전환하듯, 서버에서는 라우터로 다른 정보를 내보낼 수 있다.
• 웹페이지가 URL이 다르듯, 서버도 정보(요청)에 따라 URL이 다르다.

WAS(Web Application Server)

• 동적인 데이터를 제공. (주체마다 데이터가 다를 수 있는 데이터, 예를 들어 유저정보)
• API서버도 사실상 WAS의 일종

트래픽이 많은 서버

• 사용자가 많아 서버의 성능을 개선할 때 사용하는 방법 2가지
• 스케일업: 서버 컴퓨터의 성능을 올리는 것
• 스케일아웃: 서버의 개수를 늘리는 것 (로드밸런싱)
• 최근엔 클라우드 서비스를 주로 이용하기 때문에 오토 밸런싱이 가능하다.

클라우드

• 가상의 컴퓨터를 사용하는 개념
• 개발하는 웹,서버,데이터베이스,파일 스토리지 등이 전부 클라우드 서버에 들어간다.
• 데이터베이스 서버, 스토리지 서버를 쉽게 구축하고 보안 관리도 용이하다.