[TIL] 22.11.22 - CORS, Database

open API 사용

• map : return이 있고 속도가 forEach 보다 느림
• forEach : return이 없고 반복용, 속도가 map보다 빠름

-> forEach로 9번 요청
-> 기존에 있는 이미지를 덮어쓰게 되므로 setImgUrls에 prev와 스프레드 연산자를 사용하여 이미지들을 불러온다.

---

!! CORS !!

CORS가 No인 Open-API들은 요청하면 실패한다.

원래 SOP 정책으로 프론트(브라우저)랑 백엔드랑 같은 주소를 사용해야만 데이터를 주고 받을 수 있었다.

이를 해결하기 위해, cross origin을 가능하도록 해주는 것이 CORS 이다. 예를 들어, 네이버 브라우저에서 다음 백엔드를 사용할 수 있도록 해준다.

백엔드에서 CORS 허용 여부를 설정하기 때문에, CORS로 API를 무조건 받아올 수 없고 API를 요청하기 전에 preflight을 해온다.

preflight 요청 후에 백엔드에서 요청에 대한 답을 준다. (GET, POST, CORS true/false 여부)

=> CORS가 false이면 브라우저가 API요청을 보내지 않는다.

백엔드에서 백엔드로의 요청은 가능하기 때문에 CORS가 fasle여도 API를 받아올 수 있다.
=> 백엔드 서버를 Proxy 서버로 사용 하여 우회해서 사용한다.

모바일 APP에서는 브라우저가 없기 때문에 API를 요청하면 받아올 수 있다.
(모바일 안 브라우저에서는 불가능)

webpack을 사용하여 백엔드 서버를 임시로 만들어 사용할 수 있다.(webpack proxy)
=> react를 백엔드로 사용하기

CSRF

CORS를 사용하는 이유는 브라우저를 보호하기 위함이다.

CORS가 허용되어 있으면 해커사이트에서 API 요청시, 브라우저에 저장된 쿠키(로그인 증표 보관함)가 같이 전달되버린다.
=> 해커 사이트에 접속해서 버튼을 클릭하면, 원본 사이트의 API를 요청하도록 설정해놓았기 때문에 원본 사이트의 쿠키가 전송된다.

이러한 해킹 방식을 CSRF 라 하고, 이를 차단하기 위해 CORS를 fasle로 설정하여 브라우저가 차단하도록 한다.

웹 서비스 구조

DB에 저장된 데이터를 가져와 백엔드 API를 통해 브라우저 화면에 보여준다.

Database

데이터 베이스란 데이터를 담아두는 저장소이다.

데이터베이스에 데이터를 담아두는 방식에는 크게 두가지가 있는데, SQL방식과 NoSQL방식이 있다.

• SQL
  액셀처럼 표(테이블) 에 저장한다. NoSQL방식과달리 각각의 표 사이에 관계성을 부여할 수 있다. mapping해주는 툴로 ORM (Object Realation Mapping) 을 사용한다.
  관계성을 부여하는 데이터베이스를 관계형 데이터 베이스(RDB) 라고 하며,
  대표적으로 Oracle, MySQL, Postgres 이 있다.

• NoSQL
  서류 봉투에 document를 저장하는 방식이며, 객체 형태로 데이터를 저장한다. NoSQL에서는 서류 봉투를 컬렉션이라고 부르며, 통신을 도와주는 툴로 ODM (Object Document Mapping) 을 사용한다.
  NoSQL 방식을 사용하는 데이터베이스에는 대표적으로 MongoDB와 FireBase이 있다.

DB 데이터 조회 방법

백엔드에서 DB와 연결 후, 백엔드가 SQL Query문을 사용해서 DB를 가져와야 한다.

백엔드에서 SQL Query문을 요청하는 프로그램 (ORM / ODM) 이 존재하기 때문에 yarn add로 설치해서 사용가능하다.

Board.find({번호: 1}) 이런 방식으로 query를 찾아 조회할 수 있다.

• ORM : sequalize(자바스크립트), typeORM(타입스크립트) , prisma
• ODM : mongoose

Node.js를 활용해서 백엔드 서버 만들기

새로운 폴더를 만들어서

typeORM 설치
yarn add typeorm

typeORM으로 연결되는 DB(postgresql) 접속
yarn add pg

타입스크립트를 사용하기 때문에 타입스크립트도 설치
yarn add --dev typescript

.gitignore 파일을 만들어서 node_modules 추가

tsconfig.json 파일을 만들어서 아래 코드 넣어주기

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Recommended"
}

<tsconfig.json 위치>
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

node.js는 자바스크립트 실행기여서 타입스크립트는 실행이 안된다.
-> 타입스크립트 실행기 ts-node 설치가 필요하다.

ts-node 설치
yarn add ts-node

ts-node는 컴퓨터 전체에 설치하지 않았기 때문에 (node-modules에 설치된것 뿐) 아직 실행되지 않는다.
(node.js는 컴퓨터 전체에 설치했기 때문에 아무데서나 실행 가능)
-> ts-node를 컴퓨터 전체에 설치하거나,
-> package.json에 아래를 추가해준다.

  "scripts": {
    "qqq": "ts-node index.ts"
  },

-> yarn qqq 하면 실행됨

@Eneity() 함수 : 클래스를 테이블로 만들어줌
@Column() 함수: 컬럼으로 만들어줌
@PrimaryGeneratedColumn() : 유일한 값을 가진 컬럼을 만들어줌

tsconfig.json에서 compilerOptions에
"experimentalDecorators": true 추가

DataSource로 DB 설정을 해주고 initialize() 해주면 DB 접속이 가능하다.

yarn qqq로 실행해준 후,
DBeaver에 접속해서 localhost 주소, port번호, 비밀번호를 입력해주면 DB생성이 된것을 확인할 수 있다.

---