제가 지난 강의에서
언급했듯이
중앙 서버, 중앙 백엔드나 데이터베이스들이 있어야 할
이유들이 있습니다
리액트 앱의 여러 인스턴스(instance)들이 연결되고
유저들 사이에서 데이터를 공유하기 위함입니다
만약 온라인 스토어를 구축한다면, 확실한 건
전 세계의 다른 곳에 있는 사용자가
동일한 데이터에 접속할 수 있어야 하고
데이터를 보낼 수도 있어햐하고
주문을 넣을 수도 있어야 합니다
그리고 예를 들어 여러분은 가게의 주인으로써
마찬가지로 당연히
그 주문에 접속할 수 있어야 합니다
그렇기 때문에 중앙 백엔드나 데이터베이스가
필요한 것입니다
그래서 중요한 질문은
어떻게 리액트 앱과 그런 데이터베이스를 연결하냐는 겁니다
어떻게 데이터를 중앙 데이터베이스와
주고받을 수 있을까요?
간단하게 답하자면 적어도 직접적으로는 그렇게 하지 않습니다
리액트 앱을 직접적으로 데이터베이스에
연결하는 게 아닙니다
이렇게 하면 보안 문제를 마주하게 됩니다
가장 중요하게 이해해야 하는 건
웹 개발자로서 대체적으로
브라우저에 실행될 코드를 쓸 때
즉 리액트로 우리가 하는 작업을 할 때
그 리액트 앱 코드가
방문자들의 브라우저에서 실행된다는 점입니다
그렇게 하면
방문자들이 그 코드에 접속할 수 있고 볼 수도 있습니다
그 코드가 만약에 예를 들어
데이터베이스에 접근할 수 있는 인증 정보를 담고 있으면
여러분의 데이터베이스는 제대로 작동하지 않을 겁니다
왜냐면 사용자가 그 인증 정보를 받아
여러분의 데이터베이스에 접근하여
올바르지 않은 데이터를 삽입하는 등의 일을 할 수 있게 됩니다
그리고 프론트엔드 코드를 쓸 때
특정 제약들이 있습니다
브라우저에 실행되는 코드에 대한 내용입니다
예를 들어 파일 시스템은 쉽게 접근할 수 없습니다
특히 중앙 서버나 컴퓨터 속에
공유되지 않은 시스템 파일의 경우입니다
브라우저에는 사실상 그런 역량이 없습니다
그러니까 데이터베이스나 공유된 데이터를 담은 파일 시스템에
직접적으로 접근하는 것보다
백엔드 서버와 소통하는 것이 좋습니다
한 마디로 중개인 역할을 하는 것입니다
그래서 여러분의 프론트엔드 리액트 앱이
브라우저에서 실행되고
이론적으로 유저들이 전체 코드를 볼 수 있다면
그 앱은 백엔드에 연결할 수 있습니다
그러니 분리된 서버에서 분리된 프로젝트가 실행되며
개발자인 여러분이 소유하고 운영하는 컴퓨터에서 작동합니다
그리고 바로 그 백엔드에서
데이터베이스 같은 것들과 소통할 수 있습니다
그 백엔드 코드는 웹사이트의 유저들에게는
접근이 불가하고, 오직 여러분 즉
주인과 개발자만이 백엔드 서버에 있는
코드에 접근할 수 있습니다
프론트엔드와 백엔드를 연결하기 위해서는
HTTP 요청을 사용해야 합니다
그래야 리액트 앱 내에서, 예를 들어
HTTP 요청을 백엔드로 보내서 데이터를 요청하거나
데이터를 바꾸도록 요청할 수 있습니다
하지만 보안과 관련된 굉장히 중요한 점은
HTTP 요청을 보낼 때 백엔드가
허용하거나 수락한 것만 보낼 수 있다는 겁니다
만약 백엔드가 특정 요청을 거부하면
요청은 불가능합니다
그렇게 유저가 할수 있는 것과 없는 것을
여러분이 통제할 수 있습니다
정리하자면, 예를 들어 만약 리액트 앱이 있는데
데이터베이스와 소통을 해야한다면
이해해야 할 것은, 여러분은 리액트로
클라이언트 쪽 코드를 쓰는 것입니다
즉 클라이언트 쪽 웹 앱을 구축하는 겁니다
브라우저에서 실행되는 코드는 웹사이트의 방문자들이
전부 볼 수 있습니다
그러므로 백엔드와 소통할 때는
HTTP 요청을 사용하고
그 백엔드 코드가 데이터베이스와
소통할 수 있는 겁니다
그 코드는 유저들에게는 노출되지 않습니다
대신, 어떤 요청이 가능하지는
여러분이 통제할 수 있습니다
endpoint라고 불리는 백엔드 API를 사용하면 됩니다
간단하게 말해서 특정 요청만 받는 URL입니다
절대 데이터베이스와 내부 리액트 코드를
직접적으로 연결하려 하면 안 됩니다
그렇게 하면 데이터베이스 인증 정보가 노출됩니다
많이 쓰이는 방법은 프론트엔드와
백엔드 프로젝트를 구분해서 쓰는 것인데
심지어 같은 프로그래밍 언어를
쓰지 않아도 됩니다
리액트 앱을 구축할 땐
당연히 자바스크립트를 쓰지만
백엔드를 구축할 땐
아무 언어나 사용할 수 있습니다
예를 들어 PHP, C#, 자바스크립트와 NodeJS 등이 있습니다
풀스택 리액트 앱도 구축할 수 있습니다
프론트엔드와 백엔드를 적절히 섞으면 가능합니다
하지만 그것도 백엔드는 접근할 수 없도록 해야 합니다
추가적인 프레임워크나 라이브러리들을 사용해야 하겠습니다
NextJS 나Remix 같은 것들이 있습니다
나중에 이 과목에서
NextJS에 대한 자세한 소개를 다룰 겁니다
지금까지와는 조금 다른 접근으로
리액트를 사용해 백엔드 기반
웹 앱을 만들어볼 겁니다
하지만 이 섹션에서는
어떻게 독립된 백엔드를
리액트 앱 내부에서 연결할 수 있는지 다뤄보겠습니다