프론트엔드, 백엔드, 클라이언트, 서버, 데이터베이스, 렌더링, 풀스택

프론트엔드: 사용자에게 정보를 보여준다.

- 사용 언어: HTML(사이트의 구조), CSS(외관), JavaScript(상호작용)

- 프레임워크: React, Angular

 

 

※ 프레임워크(Framework)란?

프론트엔드와 백엔드 구현에 공통으로 사용되는 각종 기능을 수행하는 여러 코드가 미리 탑재된 툴이다.

사용자가 모든 코드를 일일이 작성하지 않아도 된다는 점이 라이브러리와 비슷하지만,

라이브러리는 사용자가 직접 필요한 기능을 호출해야 하는 반면, 

프레임워크는 사용자가 호출하지 않는다.

사용자가 프레임워크에 맞게 코드를 정의하고, 어떤 경우에 이 코드를 실행해야 하는지 계획을 세워둔다면

프레임워크가 알아서 해당 코드를 호출하기 때문이다.   

 

 

백엔드: 파이썬 등 프로그래밍 언어로 로직을 짜거나, 연산 등을 했던 여러 작업이다.

- 사용 언어: JavaScript, Java, Python, Ruby 등 더 다양하다.

- 프레임워크: Node, Flask(초보자에게 적합), Django(대규모 사업 프로젝트에 적합)

 

 

클라이언트, 서버, 데이터베이스

백엔드를 이해하려면 3가지 요소를 알아야 한다. 이 요소들이 맞물려 백엔드가 작동하기 때문이다.

- Client: 브라우저를 이용하는 사용자이다.

- Server: 고성능 컴퓨터이다. 인터넷에 연결된 채 24시간 돌아가며, 오는 요청을 받을 준비가 돼 있다.

- Database: 사이트의 모든 데이터를 가지고 있는 고성능 스프레드시트라고 생각하면 된다.

 

 

이들을 각각 테이블이 있는 식당(Client), 음식이 조리되는 부엌(Server), 음식 재료가 가득한 식료품 저장고(Database)라고 생각해보자.

테이블이 있는 식당은 부엌, 식료품 저장고와  완전히 공간이 구분되어 있다.

마찬가지로 클라이언트는 서버와 데이터베이스와 완전히 공간이 구분되어 있어, 이 안에서 무엇이 일어나는지 전혀 모른다.

식료품 저장고에서 식재료를 가지고와 부엌에서 음식을 만들 듯,

서버는 데이터베이스에서 필요한 데이터를 가져와서

이것을 HTML, CSS, JavaScript로 렌더링하여 최종 결과물을 만든다. 그리고 난 후,  클라이언트의 브라우저에 가져다준다.

 

즉, 프론트엔드와 백엔드가 상호작용을 하는 것이 우리가 지금 보는 웹사이트이다!

 

컴퓨터에서 일어나는 과정을 보자.

사용자가 올리비아코딩스쿨에 접속하기 위해 주소창에 URL을 입력하고 엔터를 쳤다.

그 요청이 인터넷을 통해 서버 측으로 전달된다.

만약 사용자가 요청한 데이터가 매우 많거나 복잡한 경우에는 대부분 데이터베이스를 이용한다.

서버는 데이터베이스에서 데이터를 가져온 후,

응답으로 데이터와 함께 해당 사이트의 HTML, CSS, JavaScript파일을 보낸다.

브라우저는 이 파일들을 실제 웹페이지로 렌더링한다.

 

※ 렌더링?

마크업언어를 사람들이 볼 수 있는 형태로 바꾸어 표현해 주는 것.

 

 

풀스택: 프론트엔드 + 백엔드 기술 합친 것