(18) 백엔드 기본

*Udemy의 "The Complete Web Developer in 2019 : Zero To Mastery" 강의에서 학습한 내용을 정리한 포스팅입니다.

*https://soldonii.github.io에서 2019년 8월 2일(금)에 작성한 글을 티스토리로 옮겨온 포스팅입니다.

*자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :)

---

1. Backend Basics

백엔드로 넘어가기 전, 프론트엔드 파트에서 배운 내용을 정리해보자. 브라우저에서 특정 웹사이트 주소를 입력하면 ISP(Internect Service Provider) 회사들에게 해당 주소에 대한 정보를 요청하고, ISP 회사는 DNS(Domain Name Service) 회사에게 주소를 전달받아 브라우저에게 전달해준다. 이 과정에서 서버는 HTML, CSS, Javascript 파일을 브라우저에게 전달하게 되며, 브라우저가 HTML과 CSS를, 브라우저의 Javascript Engine(ex. 크롬의 V8엔진)이 자바스크립트 파일을 읽어서 웹페이지를 로딩한다.

 

출처 : https://www.udemy.com/the-complete-web-developer-zero-to-mastery/

 

또한 파일을 몇 번 주고받는지, 파일의 크기가 얼마나 큰지 등에 따라서 로딩 속도가 달라짐을 알았고, 특히 파일 크기를 줄이기 위해 bundle 및 minify하는 방법 등에 대해서도 배웠다.

출처 : https://www.udemy.com/the-complete-web-developer-zero-to-mastery/

 

AJAX를 이용해서 비동기적으로 웹사이트를 업데이트 하는 것도 살펴보았다.

출처 : https://www.udemy.com/the-complete-web-developer-zero-to-mastery/

 

아래 사진은 Full Stack Developer가 커버해야 하는 범위에 대한 그림이다. 여태까지는 프론트엔드 파트에 대해서 배웠지만 사실 웹 페이지의 모든 것은 서버에 달려있다고 해도 과언이 아니다. 클라이언트 쪽에서의 모든 요청은 서버가 받아서 수행하기 때문이다. 그렇다면 서버는 무엇인가? 아주 쉽게 말하면, 서버는 컴퓨터이다. HTTP를 통해 클라이언트의 요청을 듣고 이를 수행해주는 컴퓨터라고 생각하면 된다.

출처 : https://www.udemy.com/the-complete-web-developer-zero-to-mastery/

 

과거에 서버를 이용했던 방식은 소위 LAMP Stack이라고 불리우는 방식이었다. LAMP는 Linux, Apache, MySQL, PHP의 앞글자를 딴 말이다. LAMP Stack 방식은 기본적인 웹사이트에서는 유용한 방식이다.

출처 : https://www.udemy.com/the-complete-web-developer-zero-to-mastery/

 

최근에는 LAMP Stack 방식 대신, Application Server 방식을 사용한다. Apache 서버와 달리, Node.js를 이용한 서버를 통해 스크립트를 쓸 수도 있고, 클라이언트가 아니라 서버에서도 자바스크립트를 활용해서 명령들을 커스터마이징할 수 있게 되었다. 예를 들어 내가 사이트에서 무언가를 포스팅하면, 노드 서버에 그것을 요청하고, 노드 서버는 이 요청(request)을 JSON을 통해 읽어서 포스트를 데이터베이스에 저장을 시킨 후, 성공적으로 저장했다는 응답(response)을 클라이언트에 다시 전달을 한다. 이 모든 과정이 이제는 자바스크립트로도 가능해졌으며, 이 방식을 통해서 프론트엔드와 지속적으로 소통하는 힘을 백엔드에서도 얻게 되는 것이다.

 

출처 : https://www.udemy.com/the-complete-web-developer-zero-to-mastery/

 

그렇다면 이 내용이 백엔드의 전부일까? 그렇지 않다. 더 나아가면 서버를 카피해서 따로따로 관리함으로서 한 서버에 과부하가 걸리지 않게 하는 scaling 등도 백엔드에서 배울 내용에 포함된다. (아래 그림에서 각각의 네모들의 하나의 컴퓨터라고 생각하자.) 이 방식으로 다른 여러 개의 서버를 구동하더라도 여전히 데이터베이스는 동일하게 하나의 데이터베이스를 사용한다.

이럴 경우 load balancer 기술도 사용하는데, 이는 A 서버에 요청이 많아서 과부하가 걸릴 경우, 해당 요청을 B 서버로 옮겨줘서 과부하를 줄이는, 즉 말 그대로 서버의 load를 balancing하는 기술 등도 배울 내용이다.

 

출처 : https://www.udemy.com/the-complete-web-developer-zero-to-mastery/

 

여기서 한 걸음 더 나아가면, 데이터베이스도 여러 개로 관리할 수 있다. 서버와 마찬가지로, 여러 개의 데이터베이스 들도 각각 서로의 복사본을 가지고 있다.

출처 : https://www.udemy.com/the-complete-web-developer-zero-to-mastery/

 

# 백엔드에서의 가장 중요하고 핵심적인 목표는...

HTTP request를 받았을 때, 가장 빠르고 정확하게 이에 대한 response를 전달해주는 것이다.

2. Introduction to APIs

API란 무엇일까? API는 Application Programming Interface 메신저이다. 스카이스캐너 사이트를 예로 들어보자. 스카이스캐너는 전세계 모든 항공사의 비행기 최저가를 알려주는데 스카이스캐너가 그 항공정보에 대한 모든 데이터베이스를 가지고 있어서 그게 가능한걸까? 당연히 아니다.

 

스카이스캐너 사이트는 API를 사용한다. API는 위에서 말했듯, 메신저이다. 즉 낯선 컴퓨터가 다른 컴퓨터에게 말을 걸도록 도와주는 역할이다. API를 통해 특정 컴퓨터의 시스템에 접근할 수 있고, 데이터를 공유해서 함께 일할 수 있다.

DOM에는 window 객체가 있었는데, window 객체는 fetch()라는 메소드를 가지고 있었다. 이 때의 fetch가 바로 API 중 하나이다. 웹 브라우저에 이미 부여되어 있는 기능으로, 다른 기계와 커뮤니케이션을 가능하도록 도와주는 것이다.

아래 사진은 TV 뒷면인데, 이 또한 API의 일종이다. HDMI 케이블을 통해 컴퓨터와 TV가 커뮤니케이션 하도록 돕기 때문이다.

API는 단순한 웹사이트를 지칭하는 것이 아니다. TV도, NPM 패키지도 API의 일종이다. 다시 말하지만, API는 사람 또는 기계들 간에 정보를 주고 받기 위해 커뮤니케이션 하는 방식이자 메신저이다. 그런데 API가 우리에게 어떻게, 왜 유용한걸까?

 

API를 활용하면 스카이스캐너와 같은 서비스를 쉽게 만들 수 있다. 페이스북, 구글 등 아주 많은 사이트에서 API를 쉽게 찾아볼 수 있으며, 예를 들어 Stripe API를 사용하면 웹사이트에 결제 시스템을 넣을 수 있고, Twillo API를 사용하면 휴대폰에 메세지를 보내는 기능을 넣을 수 있다. API를 통해 내 웹사이트가 아주 강력한 힘을 가질 수 있는 것이다.