[TIL] CORS / DB

우기·2023년 4월 4일

📒 오늘 공부한 내용

🔍수업목차

[17-1] open API 끌어오기
[17-2] CORS
[17-3] DataBase(DB)
[17-4] DB 관리 프로그램
[17-5] Node.js에서 TypeScript 실행하기
[17-6] 프로젝트와 데이터 베이스 연결

✅ open API 끌어오기

// 첫 마운트시에만 요청을 보낼 수 있도록 의존성 배열을 같이 적어줍니다.
// open api가 rest-API이기 때문에 axios를 이용합니다.

useEffect(() => {
    const getImg = async (): Promise<void> => {
      // [1, 1, 1, 1, 1, 1, 1, 1, 1]
      new Array(9).fill(1).forEach(async (_) => {
        const result = await axios.get(
          "https://dog.ceo/api/breeds/image/random" // open API 주소
        );
        setImgUrls((prev) => [...prev, result.data.message]);
      });
    };
    void getImg();
  }, []);

💡 useEffect : 브라우저가 실행되자 마자 요청

state가 변화하면 화면이 리렌더 된다.
따라서 useEffect를 사용하지 않고 그냥 요청을 하게되면 state가 변할 때마다 화면이 다시 렌더되어 불필요한 리렌더가 지속적으로 일어나기 때문에 비효율 적이다.
첫 마운트시에만 요청할 수 있도록 useEffect에 []를 넣어 사용

✅ CORS

CORS(Cross-Origin Resource Sharing)는 클라이언트(웹 브라우저)에 의해 제어되는 HTTP 기반 보안 메커니즘이다.
이를 통해 서비스(API)는 클라이언트가 요청할 수 있는 오리진 이외에 요청할 수 없는 오리진도 표시할 수 있다.
CORS는 일부 크로스 오리진 요청을 명시적으로 허용하고 다른 요청은 거부하는데 사용된다.

📂 CORS의 작동 방법

본격적인 요청이 오고 가기 전 클라이언트 측에서 시작된다.
클라이언트는 서비스에게 HTTP 헤더(CORS 헤더)의 매개변수로 CORS preflight 요청을 보낸다.
클라이언트는 CORS preflight 요청의 결과를 바탕으로 본격적인 요청을 서비스로 보낼지 말지를 결정한다.
응답이 CORS preflight 요구 사항을 충족하지 않으면 웹 브라우저(클라이언트)는 오류를 발생

💡 CORS preflight

브라우저가 서버에 요청을 발송할 때, 먼저 HTTP OPTIONS 요청을 발송한다.
이를 CORS preflight 요청이라고 한다.

📂 CORS 에러 원인

잘못된 HTTP 헤더
HTTP 메소드
쿠키 헤더로인해 CORS 정책에 따라 차단

📂 CORS 에러 해결 방법

브라우저의 CORS 체크 비활성화 : 브라우저에서 CORS 검사를 완전히 비활성화할 수 있다.
프록시 서버 만들기 : 이 방법을 사용하면 브라우저 자체를 변경하지 않고도 CORS 오류를 해결할 수 있다.

✅ DataBase(DB)

데이터 베이스란 데이터를 담아두는 저장소다.
데이터베이스에 데이터를 담아두는 방식에는 크게 두가지가 있는데 SQL방식과 NoSQL방식이 있다.
통신을 위해 사용했던 axios나 apollo-client처럼 백엔드에도 데이터베이스와 통신을 도와주는 툴이 있다.
- ODM : object document mapping
- ORM : object relation mapping

📂 SQL 방식

SQL방식은 데이터들을 엑셀과 비슷한 표에 정리해두는 방식
SQL방식은 NoSQL방식과 달리 각각의 표 사이에 관계성을 부여 할 수 있다.
관계성을 부여할 수 있기때문에 mapping해주는 툴을 ORM을 사용

📂 NoSQL 방식

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

✅ DB 관리 프로그램

DB 관리프로그램은 postgres안의 데이터를 좀 더 편하게 조회할 수 있도록 도와주는 프로그램이다.
DB 관리 프로그램은 데이터베이스가 아니다.
DBeaver 설치

✅ Node.js에서 TypeScript 실행하기

1️⃣ 백엔드 폴더에 index.ts 파일을 생성

2️⃣ 터미널에 yarn add —-dev typescript 를 입력해 TypeScript를 설치

3️⃣ tsconfig.json 파일을 생성해주신 후 파일의 내용을 [ Docs ]를 보고 채워준다.

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

4️⃣ ts-node를 설치

yarn add ts-node

5️⃣ ackage.json에서 ts-node를 이용해 index.ts를 실행하는 명령어를 추가

ackage.json에서 ts-node를 이용해 index.ts를 실행하는 명령어를 추가

6️⃣ 이제, 위에서 지정한 명령어를 터미널에 입력하면 지정해둔 TS 파일(index.ts)가 실행

yarn 명령어

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

1️⃣ 터미널에 yarn add typeorm을 입력

2️⃣ 터미널에 yarn add pg 를 입력

3️⃣ 데이터베이스와 백엔드 연결

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

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

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

4️⃣ entity 만들기 : Board.postgres.ts 파일을 새로 만든다.

// entities 만들어주기 _ 새로운 타입스크립트파일을 만들어 주세요
import { BaseEntity, Column, Entity, PrimaryGeneratedColumn } from "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;

}

5️⃣ 데코레이터의 타입을 tsconfig.json에서 설정