[TIL] 2022년 02월 04일

이번시간에는 백엔드를 조금 더 맛볼 수 있는 postgres 세팅에 대해 배워보았다.

 

커리큘럼

• API를 무료로 제공한다!! => Open-API / public API
• 프론트엔드와 백엔드 전체 숲 구경 => Architecture
• 같이 데이터 베이스를 구경해 보자 => Database
• Node.js를 활용해 백엔드 서버를 제작해 보자 => Node.js / Apollo-server

프론트엔드와 백엔드 구조

부여받은 DB를 BackEnd에서 DB로 연결해주는 TypeORM역할 

일반 Javascript에서는 nodejs를 사용해서 백엔드 구조를 잡는 반면 

 

Typescript에는 ts-node를 사용해서 백엔드 구조를 짠다. 

ts-node는 개발중일때 사용하는 것

 

두개의 차이점을 설명하면 

ts-node 는 개발중일때 실행하고 나서 안에 소스코드를 바꿔도 바로 반영이 되지 않는다.

ts-node-dev를 사용할때는 바로바로 refresh가 된다.

간단한 구조를 설명하자면 Front-end 서버와 Back-end 서버가 있다고 하면 브라우저에서는 apollo-client나 axios를 

사용해 백엔드 서버에게 요청을 하게된다.

 

그럼 백엔드 서버는 브라우저가 요청한 api에 대해서 SQL과 NoSQL 중에 하나를 요청하는데

여기서 둘의 차이점은 

 

SQL은 데이터베이스가 표형태로 되어있다는 것 

그 말은 즉슨 SQL은 관계형 데이터 베이스 이고  데이터 베이스의 형태는 table 표 형태로 구성되어 있다.

 

SQL을 이용해 구성할 수 있는 것은 postgres & mysql & oracle & mssql이 있다.

반면 NoSQL은 서류 형태로 구성된 데이터 베이스인데 collection형태로 구성되 있다.

 

이 두개는 DB를 넣는 방식이 존재한다.

firebase를 사용해 구성할 수 있고 또는 mongoDB를 이용해서 데이터베이스를 구축할 수 있다.

간단한 흐름을 설명하자면 먼저 프론트엔드 서버는 3000번 포트에 서버프로그램으로 구동되며 그림을 그려줄때

프론트엔드가 브라우저에게 요청을 한뒤 그림을 그려줄 사항을 다운로드 받는다.

 

이때 프론트엔드 서버에서 HTML, CSS,JS를 제공하고 최종적으로 브라우저가 이 사항들을 받아서 그려준다.

프론트엔드로 구성된 브라우저는 백엔드 서버에게 데이터 베이스를 구축할 사항을 요청하고 

 

백엔드서버는 4000, 8000, 8080으로 구성된 포트로 실행해 백엔드 서버 프로그램을 돌린다.

그리고 난뒤 목록으로 구성된 DB를 백엔드가 다시 요청하게 되고 

 

이 DB는 24시간동안 요청을 기다리는 데이터베이스 서버이다.

서버를 구성하자면 바로 이렇게 구성할 수 있다.

하나의 그룹안에서 백엔드 프론트 DB를  구성하고

 

백엔드에서는 한쪽이 꽉차는 것을 대비해 2개로 만들어준다.

요즘에는 한대에 컴퓨터에 모든것을 세팅하는 방식이다.

 

3가지가 모두 충족된 그룹에서는 0-65535 까지의 포트를 사용한다.

백엔드 서버를 구성할때는 이렇게 따로 벡엔드 폴더를 생서하고 그안에서 세팅을 이룬다.

  "devDependencies": {
    "ts-node": "^10.4.0",
    "ts-node-dev": "^1.1.8",
    "typescript": "^4.5.5"
  }

서버를 구성하기 전 typescript에서는 node를 사용할 수 없으니 ts-node 즉 타입스크립트 전용 node라이브러리를 

사용해 서버를 구성한다.

import { createConnection } from 'typeorm';

// 백엔드 설정
console.log('Hello Typescript');

// 데이터베이스 연결 코드
createConnection({
    type: 'postgres',
    database: 'postgres',
    username: 'postgres',
    password: 'postgres2021',
    port: 5022, // 각자의 포트
    host: '34.64.187.209',
    entities: ['./*.postgres.ts'],
    // 명령어가 전송되면 logging이 남음
    logging: true,
    // SQL 쿼리문 필요
    synchronize: true, // 동기화 Board를 데이터베이스에 연결해주는 명령어로 바뀌어서 전송됨
})
    .then(() => {
        // 연결 성공시 실행
        console.log('접속 완료');
    })
    .catch(err => {
        // 연결 실패시 실행
        console.log(err);
    });

데이터베이스를 연결하기 위해서는 위와 같은 connection을 구성해줘야 한다.

postgres를 구성할 DBever라는 프로그램을 사용해서 DataBase를 뿌려보았다.

import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm';

// 코드를 읽으면서 Entity를 읽으면 이것은 Table이라 알려주는 것
// Entity가 없으면 그냥 클래스
@Entity()
export class Board {
    // 자동으로 발생하는 Column
    // 특정 게시물을 만들거나 상품을 만들때
    // id number가 중복되는 일이 없었다.
    // 그래서 번호 id에는 Primary가 붙는다.
    // increment 데이터가 쌓일때마다 자동으로 한줄씩 증가
    @PrimaryGeneratedColumn('increment')
    number!: number;

    // 타입을 바꾸고 싶을때 {} 안에 변경
    // 데이터를 등록할때 type
    @Column({ type: 'text' })
    writer!: string;
    @Column({ type: 'text' })
    title!: string;
    @Column({ type: 'text' })
    age!: number;
}

최종적으로 table을 연결해주기 위해 type을 지정해주어야한다. 

위에서 불러올 데이터베이스는 Table형태라는 것을 알려주기 위해 Entity를 써주어야 한다.

아래에서 type들을 하나씩 지정해줘야 데이터베이스를 구성할때 연결할 제목 내용을 넣어줄 수 있다.

// 백엔드에서는 직접 만들어줘야함
{
    "compilerOptions": {
      "target": "ES2015",
      "module": "commonjs",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "experimentalDecorators": true
    },
    "$schema": "https://json.schemastore.org/tsconfig",
    "display": "Recommended"
  }

typescript를 사용할 것이니 tsconfig는 필수적으로 적어주어야 한다.

yarn dev를 써서 이런 화면이 뜨면 성공

간단하게 설명하자면 type을 을 지정해준 Board.postgrest.ts를 index.ts에서 enttites를 이용해 설정해주고 

yarn dev를 사용해 데이터베이스를 구성해줄 표를 생성해서 DBevar에 있는 Database에 세팅한 type들을 넣어주는 것