[카우치 코딩]프론트엔드와 데이터베이스의 상호작용

트릴로니·2022년 5월 22일
0

카우치코딩

목록 보기
3/8

프론트와 데이터베이스의 상호 작용

리액트와 데이터베이스와 바로 연결되는 것은 지양해야한다

데이터베이스 연결 코드 예시

// Dummy code - does not really work
mysql.connect('sql-database-path', 'username', 'password')
    .then(db => db.query('SELECT * FROM todos'));
  1. security issue: 모든 js코드는 클라이언트에서 접근 가능하기 때문에 데이터베이스에 접근할 수 있도록 만들어 주는 database credential이 노출된다.
  2. Performace Issue 발생

리액트에서 바로 데이터 베이스와 연결하지 않고 다른 루트를 통해 데이터베이스와 통신해야 한다.즉 프론트엔드에서는 백엔드 서버로 Http request만 보내야 한다.

rest api의 등장 배경


예전에는 클라이언트(브라우저)에서 URL을 입력하면 서버는 응답으로 html파일 줬다.

그런데 클라이언트에서 더이상 html만을 받아오는 것을 원하지 않게되었다. 예를 들어

  • mobile app: 서버에 요청해서 데이터를 store, fetch를 해야하지만 HTML은 필요없다.
  • code: google geo api의 경우 좌표값에 대한 데이터가 필요하지 HTML은 필요없다.
  • browser/SPA: 처음 요청할 때는 서버에서 HTML을 받아올 필요는 있지만 그 이후의 요청은 단지 데이터만 필요하다. 즉 여러 HTML파일이 필요없다.

위의 경우와 같이 더이상 HTML이 아닌 서버에서 데이터를 가져오는 것이 필요해졌다.

Rest(Representational State Transfer) API(Application Programming Interface)

  • 데이터를 주고 받는 것을 의미한다. 즉 client와 server 사이 통신 방식 중 하나이다.

REST란

  • 어떤 자원에 대해 CRUD(Create, Read, Update, Delete) 연산을 수행하기 위해 URI(Resource)로 GET, POST 등의 방식(Method)을 사용하여 요청을 보내며, 요청을 위한 자원은 특정한 형태(Representation of Resource)로 표현된다

URL와 URI의 차이

  • URL은 Uniform Resource Locator로 인터넷 상 자원의 위치
  • URI는 Uniform Resource Identifier로 인터넷 상의 자원을 식별하기 위한 문자열의 구성으로, URI는 URL을 포함

REST의 구성
1. 자원 [URI]

  • 모든 자원은 고유한 id가 존재하고 이 자원은 서버에 존재한다
  • 클라이언트는 URI를 통해 자원을 지정하고 해당 자원의 상태에 대한 조작을 서버에 요청한다.
  1. 행위 [method]
  • HTTP 프로토콜의 Method를 사용한다
  • GET, POST, PUT, PATCH, DELETE
  1. 표현
  • 클라이언트와 서버가 데이터를 주고받는 형태로 JSON, XML, TEXT, RSS 등이 있다

REST API란?

  • REST의 특징을 기반으로 서비스 API 구현한 것이다.

REST API와 RESTful API의 차이

  • RESTful은 REST의 설계 규칙을 잘 지켜서 설계된 API를 RESTful한 API이다.
  • REST의 원리를 잘 따르는 시스템을 RESTful이란 용어로 지칭된다.

출처:
https://dev-coco.tistory.com/97 [슬기로운 개발생활😃]
https://www.youtube.com/watch?v=0oXYLzuucwE
https://academind.com/tutorials/connect-to-database

0개의 댓글