[React] 프론트엔드란 무엇인가?

개요

기본적으로 웹 사이트의 구조는 다음과 같은 형태를 지닌다.

예를 들어서 웹 페이지에 방문해 정보를 열람하고자 할 경우...

1. 유저는 웹 페이지에 방문해 정보들을 조회하기 위한 것들을 요청(Request)한다.

2. 프론트엔드와 백엔드를 통해 요청 사항들을 전달한다.

3. 웹 서버는 클라이언트에게 콘텐츠 사항을, 데이터베이스는 데이터 조회를 요청 받는다.

4. 다시 유저에게 응답(Response)하기 위해 웹 서버는 요청받은 콘텐츠를 클라이언트로 제공, 데이터베이스는 데이터를 전달한다.

5. 응답 사항들을 백엔드와 프론트엔드를 거쳐(비유하자면 무언가를 가공해서...) 유저에게 전달한다.

6. 유저는 이를 토대로 전달받은 내용들을 열람한다.

 

... 뭔가 여러 과정이 지나갔다만 보통 우리들은 이걸 1초내외의 시간대로 보고 있다.

그런데 위에서 유저는 요청하고 응답을 받아 웹 페이지를 열람할 수 있게 된다고 했는데 그 중 프론트엔드가 가지는 역할은 과연 무엇이길래 그 사이에 꼽사리(?)를 끼게 되는 것일까?

 

 

 

본론

프론트엔드와 백엔드 - 위키백과, 우리 모두의 백과사전

해당 본문에 의하면 프론트엔드는 유저에게 시각적으로 보여지는 부분들을 담당하여 정보들을 제공 및 입력 전달을 위한 프로세스의 처음 단계로 설명하고 있다. 이를 비유하자면 유저는 키보드 자판(프론트엔드)을 눌러 정보를 전달하면 기판 내부(백엔드)가 이를 연산처리하여 입력이 되게끔 한다 생각할 수 있다.

 

근데 여기서 한 가지 생각이 드는게 있다.

JSP와 같은 서버페이지도 유저에게 시각적으로 제공하여 정보들을 보여주거나 입력을 받을 수 있게 해주는데 그렇다면 이것도 프론트엔드인가?

 

라고... 한 때 생각하던 때가 있었는데, 결론은 아니다. 왜냐하면 JSP나 PHP와 같은 것들은 서버 사이드 페이지로 클라이언트-서버 간 서버 측에서 이루어 지는 언어체계이기 때문에 전혀 다른 성격의 구조를 가진다. 이 말은 즉, 프론트엔드는 클라이언트 단에 이루어지는 체계라고 말할 수 있다.

 

 

 

결론

프론트엔드는 유저에게 시각적인 요소들을 제공하고 입력사항들을 받아 다음 단계로 전달하는 클라이언트 단의 첫 프로세스이다.