17일차 - Open-API, DB, 백엔드 서버 구축

류연찬·2022년 11월 16일

Codecamp FE07

목록 보기

17/39

Open-API

오픈 API란, 누구든지 사용할 수 있도록 공개된 API를 의미합니다.
예를 들면, 동물 이미지, 날씨 정보, 바이러스 정보, 금융 정보 등 여러정보들을 API를 통해 무료로 데이터를 사용할 수 있습니다.
오픈 API를 잘 활용하면, 백엔드 없이도 서비스를 만드는 것이 가능합니다.

🔔 다양한 Open-API 사이트 모음
public-apis github 링크

Dogs Open-API 예제

위의 링크를 통해 들어가서 여러 카테고리 중 animals를 들어갑니다.
animals에 들어가 Dogs를 클릭합니다.
아래 사진 부분의 Fetch! 를 이용해 주소를 복사해주세요.

Rest-API를 연습하는 도구로 postman을 사용했습니다.

Postman을 열어 복사한 주소를 붙여넣어주고 Send 버튼을 눌러주면 아래와 같이 랜덤 이미지를 받을 수 있는 것을 확인할 수 있습니다.

useEffect와 Open-API

axios를 이용해 get을 해보겠습니다.

우선, axios를 사용하기 위해 axios를 설치하고 import 해야합니다.

axios를 이용해 Open-API 이용하기 예제

import axios from 'axios'

const Dogs = () => {
  // 강아지 이미지 주소를 저장해둘 state
  const [dogsUrl,setDogUrl] = setState("")

  // 마운트 될 때 한번만 요청할 수 있도록 의존성배열( [ ] )을 적어주었습니다.
  useEffect(() => {
    const fetchDog = async () => {
      const result = await axios.get("복사해온 주소") // axios 날리기
      console.log(result.data.message)
      setDogUrl(result.data.message)
    }

    // fetchDog 함수 호출해오기
    fetchDog()
  },[])


  return(
    <div>
      <img src={dogsUrl} />
    </div>
  )
}

웹서비스 구조

웹서비스는 Front-end 서버, Back-end 서버, Database로 이루어져있습니다.

Front-end 서버

yarn dev 해서 실행시키면서 생선된 포트가 동작하고 있는 컴퓨터를 프론트엔드 서버라고 합니다.

프론트엔드 서버 프로그램
yarn dev 를 해서 실행시키면 포트가 생성되고, 해당 포트는 누군가 종료하지 않는 이상 24시간 동작합니다. 이처럼 24시간 켜져 있는 포트 번호를 서버 프로그램이라고 합니다.

서버 프로그램은 접속을 기다리고 바로바로 응답을 줘야하기 때문에 24시간 켜져있습니다.
데이터베이스는 백엔드의 접속을 기다리고 프론트엔드 서버는 브라우저의 접속을 기다립니다.

DataBase(DB)

데이터베이스란, 데이터를 담아두는 저장소입니다.
데이터베이서에 데이터를 담아두는 방식에는 크게 2가지가 있는데 SQL방식과 NoSQL방식이 있습니다.

통신을 위해 사용했던 axios나 apollo-client처럼 백엔드에도 데이터베이스와 통신을 도와주는 툴이 있습니다.
이 툴은 담아두는 방식(SQL, NoSQL)에 따라 달라집니다.

ODM : Object Document Mapping
ORM : Object Relation Mapping

SQL 방식

SQL방식은 데이터들을 엑셀과 비슷한 표에 정리해두는 방식입니다.
SQL방식은 NoSQL방식과 달리 각각의 표 사이에 관계성을 부여할 수 있습니다. 관계성을 부여할 수 있기때문에 mapping해주는 툴을 ORM을 사용합니다.
또한 관계성을 부여하는 데이터베이스를 관계형 데이터베이스라고 하며, 대표적으로 Oracle, MySQL, Postgres가 있습니다.

NoSQL 방식

NoSQL방식은 서류 봉투에 document를 모아두는 방식입니다.
NoSQL에서는 서류 봉투를 컬렉션이라고 부르며, 통신을 도와주는 툴로는 ODM을 사용합니다.
NoSQL방식을 사용하는 데이터베이스에는 대표적으로 MongoDB와 Firebase가 있습니다.

DB 관리 프로그램

데이터베이스에는 Postgres가 이미 설치 되어습니다. postgres안의 데이터를 좀 더 편하게 조회할 수 있도록 도와주는 프로그램이 DB 관리 프로그램입니다.

DB 관리 프로그램에는 DBeaver, MySQL webpack이 있습니다.

❗️DB 관리 프로그램은 데이터베이스가 아닙니다

백엔드 서버 구축

데이터베이스에 table도 넣고 데이터도 넣어야 합니다.
테이블과 데이터를 넣는 것을 도와주는 것이 typeORM입니다.

typeORM 설치

typeORM은 npm으로 설치합니다.
npm으로 설치하려면 package.json 이 있어야 합니다.

터미널에서 백엔드 폴더로 들어와줍니다.
터미널에서 yarn init 을 해줍니다.
yarn init 을 실행하면 빈 package.json 이 생성됩니다.
터미널에 yarn add typeorm 혹은 npm install typeorm 을 입력해주세요.
typeORM을 사용하기 때문에 타입스크립트를 설치해야합니다.
터미널에 yarn add typescript -dev 을 입력합니다.
tsconfig.json 파일을 만들어주세요.
이전에는 yarn dev 하면 자동으로 채워졌지만, 지금은 next 프로젝트를 하고 있는게 아니기 때문에 직접 채워줘야 합니다.
tsconfig.json 파일을 채워줍니다. TypeScript 공식 홈페이지

상단 메뉴에서 Docs를 클릭해줍니다.

밑으로 내려 What is a tsconfig.json을 클릭해줍니다.

안에 내용을 채워주기 위해 docs에서 추천하는 방법으로 복사하겠습니다.
Recommended를 클릭해줍니다.

코드를 복사해서 tsconfig.json 파일에 붙여넣기 해줍니다.

Node.js에 Hello World 실습(JS)

node.js가 나오기 이전에는 자바스크립트가 브라우저에서만 작동이 되었습니다.
그러나 이후에 브라우저가 아닌 다른 곳에서도 실행이 가능하도록 만들고 싶어서 나온 것이 node.js입니다.

백엔드 폴더에 파일을 하나 만들어줍니다.

파일에 console.log("Hello World") 를 입력해주세요.
터미널에 node [파일] 을 입력해 파일을 실행시켜주세요.

그러면 터미널에 hello world 가 띄워진 것을 확인할 수 있습니다.

ts-node 설치하기

터미널에 yarn add ts-node -dev 를 입력해주세요.
위의 ts-node가 설치 완료되었다면, 터미널에 yarn add ts-node-dev -dev 를 입력해주세요.

프로젝트와 데이터베이스 연결

데이터베이스와 백엔드를 연결해주는 건 typeORM에서 제공을 하고 있습니다.
typeORM의 기능을 이용해 실습해보겠습니다.

데이터베이스와 백엔드 연결해주기

import { createConnection } from ‘typeorm’

cerateConnection({
  type : "postgres",
  database : "postgres",
  username : "postgres",
  password : "postgres2021",
  port : // 각자의 포트를 입력해주세요(number),
  host : "34.64.187.209"

  // 어떤 테이블이 들어갈 것 인가
  entities : [	//파일경로 넣어주시면 됩니다],
  logging : true,
  // entities 들어간 것들을 데이터베이스와 동기화 해줍니다.
  synchronize : true → entitites에 들어간 것들을 데이터 베이스와 동기화 해준다
			
})
// 성공시에 실행 할 것 
.then(() ⇒ {
	console.log(”접속완료”)
})
// 실패시에 실행 할 것
.catch(() ⇒ {
	console.log(”접속 실패”)
})

entities의 파일경로
entities["./*postgres.ts"]
해당 위치의 postgres.ts로 끝나는 모든 파일들 데이터베이스와 연결시켜달라는 의미입니다.

실제 데이터 넣어보기(entities 만들어보기)

새로운 타입스크립트 파일을 만들어줍니다.

import { createConnection } from ‘typeorm’

cerateConnection({
  type : "postgres",
  database : "postgres",
  username : "postgres",
  password : "postgres2021",
  port : // 각자의 포트를 입력해주세요(number),
  host : "34.64.187.209"

  // 어떤 테이블이 들어갈 것 인가
  entities : [	//파일경로 넣어주시면 됩니다],
  logging : true,
  // entities 들어간 것들을 데이터베이스와 동기화 해줍니다.
  synchronize : true → entitites에 들어간 것들을 데이터 베이스와 동기화 해준다
})
// 성공시에 실행 할 것 
.then(() ⇒ {
	console.log(”접속완료”)
})
// 실패시에 실행 할 것
.catch(() ⇒ {
	console.log(”접속 실패”)
})