✍🏻 [Code Camp_TIL] 17일차: CORS, 데이터베이스 기초, DBeaver 실습

CORS

CORS가 등장하기 전에는 SOP(Same Origin Policy) 정책이 먼저 있었다. 예를 들어, 네이버 브라우저의 api 요청과 그에 따른 응답은 네이버 백엔드에서만 보낼 수 있고, 다움 브라우저는 다움 백엔드에서만 보낼 수 있었다.

그러다가 다움에서도 네이버의 백엔드에 api 요청할 수 있도록 하자! 해서 나온 것이 CORS(Cross Origin Resource Sharing)다.

preflight(api 요청 보내기 전에 미리 요청 보내보는 것)를 보내면, 백엔드에서는 데이터를 보내줘도 되는지, 안되는지 검사를 하고 알려주게 된다.

백엔드에서 CORS 배열에 데이터를 보내줘도 되는 브라우저를 명시해놓고, 검사 후에 CORS 허용 혹은 거절을 보낸다.

CORS가 거절된 경우, 어떻게 해야 할까?

다른 백엔드로 우회해서 원래 api 요청을 보내려던 백엔드로 접근할 수 있다. 이때 브라우저와 백엔드 사이에서 데이터를 주고 받아주는 대리인 역할을 하는 서버를 프록시서버(proxy)라고 한다.

그 외에 모바일로 api 요청을 보내는 방법도 있다. 이 경우 브라우저와 다르게 백엔드 컴퓨터와 데이터를 바로 주고받을 수 있다.

그러면 다 우회하면 될텐데 왜 굳이 CORS 정책이 있는걸까? 바로 브라우저를 보호하기 위해서다!

브라우저가 로그인을 하면, 백엔드에서 검증 후 브라우저에 로그인증표를 보내게 되고, 브라우저의 쿠키라는 곳에 로그인증표를 저장해놓는다.

쿠키에 누구한테서 데이터를 받아왔는지 저장되어 있고, 로그인증표가 저장되어 있는 상태에서 로그인증표를 받았던 백엔드에 다시 api를 요청할 수 있다.

따라서 신뢰할 수 있는 사이트만을 CORS 허용해줄 수 있다. 원래 브라우저와 똑같이 생긴 해킹 사이트가 접속을 시도하는 것을 막아줄 수 있는 것이다!

백엔드와 데이터베이스

서비스 전체 구조 이해

database

데이터베이스란 데이터를 담아두는 저장소이다. 데이터를 담아두는 방식에는 크게 2가지가 있다.

SQL(표 방식): Oracle, MySQL, Postgresql..
NoSQL(서류 방식): MongoDB, Redis, Firebase..

SQL 방식

SQL 방식은 NoSQL 방식과 달리 표 사이에 관계성을 부여할 수 있다. 관계성을 부여하는 데이터베이스를 관계형 데이터 베이스라고 한다. 통신을 도와주는 툴로 ORM(Object Relation Mapping)을 사용한다.

NoSQL 방식

NoSQL 방식은 서류 봉투에 document를 모아두는 방식이다. 여기서 서류 봉투를 컬렉션이라고 부르고, 통신을 도와주는 툴로 ODM(Object Document Mapping)을 사용한다.

DB 관리 프로그램

DB 관리 프로그램에는 DBeaver, MySQL webpack 등이 있다. 수업에서는 DBeaver를 사용했다.

백엔드 서버 구축 실습

실습할 내용은 다음과 같다.

ORM을 설치해서 ORM을 통해 DB와 연결.
JS에 백엔드 테이블 구조를 class 형태로 만들어줌.
해당하는 class를 넣으면 DB에 Board table이 만들어짐.
DB 관리 프로그램을 통해 DB에 테이블이 잘 만들어져 있는지 확인.

Node.js

원래 자바스크립트는 개발을 하고, 브라우저에서만 실행시킬 수 있었는데, node.js가 나오면서 브라우저를 켜지 않고 실행시킬 수 있는 방법이 생겼다.

실행시키는 방법

1. 확장자 js로 파일 만들기
2. 코드 작성
3. 터미널에 node 파일 입력해서 파일 실행시키기

Node.js에서 타입스크립트 실행하기

1. ts/tsx 확장자 파일 만들기

2. typescript 설치 및 설정

   yarn add --dev typescript

3. ts-node(타입스크립트 실행프로그램) 설치

   yarn add ts-node

4. package.json에 파일 실행 명령어 추가 후 명령어를 터미널에 입력(yarn 명령어)

"scripts": {
    "명령어": "ts-node index.ts"
  },

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

typeORM을 이용해서 데이터베이스와 백엔드를 연결할 수 있다.

typeORM 설치

yarn add typeorm
yarn add pg(typeorm이 postgres와 연결하기 쉽게 도와주는 라이브러리)

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

import { DataSource } from "typeorm";
import { Board } from "./Board.postgres";

const AppDataSource = new DataSource({
  type: "postgres",
  host: "DB가 있는 컴퓨터의 IP 주소",
  port: DB가 있는 컴퓨터의 port number,
  username: "postgres",
  password: "password",
  database: "postgres",
  entities: [Board], // entities의 파일경로
  synchronize: true, 
  logging: true, 
});

AppDataSource.initialize()
  .then(() => {
    console.log("연결 성공!");
  })
  .catch((error) => console.log(error, "연결 실패!"));

entity 만들기

Board.postgres.ts 파일을 만들고, entity를 만드는 코드를 작성했다.

// entities 만들어주기 _ 새로운 타입스크립트파일 만들기
import { BaseEntity, Column, Entity, PrimaryGeneratedColumn } from "typeorm";

// @ -> 데코레이터(typeORM에게 테이블임을 알려줌. 데코레이터는 함수)
 @Entity() 
	export class Board extends BaseEntity {
      
		// primaryGenerateColumn: 자동으로 생성되는 번호		
			@primaryGenerateColumn(’increment’) 
			number!: number;
			
			@column({type : “text”})
			wrtier!: string;
		
		  @Column({ type: "text" })
		  title!: string;
		
		  @Column({ type: "text" })
		  contents!: string;

}

여기서 데코레이터의 타입을 tsconfig.json에서 설정해줘야 한다.

"experimentalDecorators": true

DBeaver 연동

1. 좌측 상단 플러그 모양 클릭

2. postgreSQL 선택

3. Host 부분에 localhost 대신 백엔드 주소 입력

4. 모두 입력 후 test connection 클릭(파란색 뜨면 완료된 것이므로 완료 누르기)

이렇게 하면 DB에 테이블이 잘 만들어진 것을 확인할 수 있다.