Day 17

김정동·2021년 11월 23일

front end nosql sql 데이터베이스 웹서비스 구조

코드캠프와 달려보자

목록 보기

15/35

프론트엔드 뿐만 아니고 백엔드까지 이해해야한다.
쉽게 말해서 프런트엔드상의 컴퓨터, 백엔드 컴퓨터, 데이터베이스에도 있는 컴퓨터를 생각해보고 작동구조와 원리를 이해하는것이 좋다.

웹서비스 구조

서비스를 위해선 총 세개의 컴퓨터(프로그램), 그리고 그걸 보기위한 컴퓨터(user, Brower의 약자로 Br로 표시) 가 필요하다 front-end, back-end, DataBase

지금까지는 실행시키는 것은 yarn dev를 해서 실행시켜왔지만 배포를 하고나서는 클라우드나 컴퓨터를 빌려서 거기에서 yarn dev를 하는 셈이다.(서버를 켜둔 것, 이게 front-end)
우리가 이용하는 백엔드 api는 이미 다른 컴퓨터에서 yarn dev, 즉 켜져있는 상태임
데이터베이스가 또 있음
또 하나의 컴퓨터/클라우드임 큰 엑셀같은것이라고 생각하면 좋다.

여기서 여태 만들었던 것은 front-end, 우리는 지금 이용자의 컴퓨터에서 front-end를 띄워서 yarn dev를 해서 테스트하고 있는 것 (나밖에 보지 못한다)

그럼 누구든지 접속할 수 있게 하려면 배포라는 것을 해야함
일단 배포했다고 치고 생각해보자

브라우저에서 일단 접속하게되면 front-end에서 HTML, CSS, JS들을 불러와서 브라우저에 그려줌(안의 데이터들은 비어있음)
그리고 비어있는 데이터를 메우기 위해서 Back-End에서 useQuery, 등등의 api를 가져오려고 함 데이터는 back-end에 없음
Back-End에서 DataBase에 필요한 데이터를 가져오거나/저장하거나 한 다음 브라우저에 그려줌, 전체적인 사이트를 완성

이 과정들을 수행하는데는 그에 맞는 역할을 하는 친구들이 있다.

브라우저의 기능을 수행하는 apollo-client,
백엔드로 보내는 apollo-sever,

백엔드에서 데이터베이스로 보내는 ORM/ODM

왜 한개있는게 아니고 두개가있죠??
ORM과 ODM은 이름만 다른게 아니고 용도도 다름

SQL과 NoSQL

표(table)를 담는 용도, <- 관계형 데이터베이스, SQL, RDB라고 함
대표적으로는 Oracle, mySQL, Postgres등등이 있음

서류 봉투(collection)을 담는 용도 <- NoSQL(not only sql)
대표적으로는 MongoDB, Firebase가 있음

그래서 왜 ORM/ODM???

ORM은 SQl 인 친구를 연결하는 역할, (Object Realation Model)
ODM은 NoSQL인 친구를 연결하는 역할을 담당한다 (Object Document Model)

아직까지는SQL 이 기본이고 추가 퍼포먼스가 필요할 때 NoSQL추가를 고려함

!!반복 강조!!!!반복 강조!!!!반복 강조!!!!반복 강조!!!!반복 강조!!!!반복 강조!!

front-end인데 제가 이거까지 알아야되나요???
물론 주니어일때는 모를 가능성이 높아지지만 시간이 지날수록 구분이 없어지고 단지 front-end로 깊이가 깊을 뿐이지 둘 다 할 수 있음, 전체를 알아야지만 결국 할 수 있게됨, 또한 어느정도의 백엔드의 지식은 필요함, 로그인이나 이미지 업로드 같은 경우에는 이런 과정을 알아야 구현할 수 있음

데이터베이스

데이터 베이스를 한번 눈으로 보자. 디비버를 한번 쓰면 볼 수 있다.

https://dbeaver.io/

콘센트 부분을 누르면 현재 쓰고 있는 DB를 고를 수 있음
현재는 쓰고있는 코끼리 모양의 PostgreSQL을 사용

기본 설정 창이 나온다
포트는 yarn dev했던 3000의 포트를 이야기한다.PostgreSQL는 기본적으로 5432의 포트를 이용함
호스트는 IP주소를 의미함, 사용하고 있는 데이터베이스(PostgreSQL가 깔려있는 프로그램/클라우드/컴퓨터)의 주소를 넣는다.
비밀번호가 걸려있으면 넣어야한다.
이후 test Connection 을 누르면 연결되어있는지 확인 가능하다.

실제로 안의 내용물들을 볼 수 있다. 이건 단지 보고 있는 도구, 관리 툴에 가깝기 때문에 따로 수정은 할 수 없다.(디비버)

데이터베이스 실습
백엔드 api를 만들어보기

빈 DB에 테이블 부터 만들어야 한다.

VS코드에서 class_backend로 만들고 index.js로 시작한다.

자바스크립트가 작동되는 곳이 어딜까?
사실상 브라우저에서 HTML, CSS, JS가 다 작동된다.
이렇게 많이 쓰는 자바 스크립트 브라우저 안에서만 써야하나???

윈도우, 운영체제에서 실행시켜보자 -> Node.js
자바스크립트를 브라우저가 아닌 곳에서 실행 시킬 수 있게됨(Node.js를 하나의 브라우저라고 생각하는게 좋음)
Node.js를 세팅해야한다.

터미널에서 class_backend로 이동
yarn init 이후 질문들은 그냥 엔터 치면 디폴드 설정인 package.json이 들어옴

이후 package.json의 스크립트 부분을 수정

그리고나서 yarn dev를 해보면??

브라우저가 아닌데도 이렇게 열린다 ?????

다시 index.js로 돌아가서 api를 만들기 전에 데이터베이스의 데이터를 저장할 공간, Table을 만들어야한다. 이후 각각 column들을 만들어서 빈 공간을 만들어야한다. 이후에 API를 만들어서 저장시키기를 해야한다

브라우저에서 백엔드 컴퓨터로 연결하기 위해 Apollo 클라이언트를 썼던 것 처럼 백엔드에서 데이터베이스로 연결하기 위해서는 ORM이 필요한데, 아폴로 처럼 ORMdpsms sequlize, typeORM 등등 있지만

여기서는 typeORM을 쓴다.

yarn add -D typescript

(npm 느리니까 yarn 쓴다)
그럼 알아서 node_modules가 채워지는 것이다
이제 그럼 타입스크립트 설치 했으니 index를 .ts로 바꾼다
tsconfig.json파일을 만든다.

Next.js에서는 설치만 해도 알아서 해줬지만 지금은 직접 입력해야함

타입스크립트의 독스에 가면 tsconfig에 관한 부분이 있다.
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

아래 보면 recommended 가 있는데 누르면
https://www.npmjs.com/package/@tsconfig/recommended

이렇게 예시가 나온다. 이걸 tsconfig.ts에 넣는다.

실행은 node가 아니고 ts-node로 실행한다. 그래서
ts-node, ts-node-dev 를 설치해야한다. (배포용, 개발용)

yarn add -D ts-node
yarn add -D ts-node-dev

잘 설치됐다면 package.json에 가서 "dev"부분을 ts-node-dev index.ts로 수정한다.

이후 orm 을 깔아야한다.

yarn add typeorm

typeorm의 역할은 데이터베이스와 백엔드를 통신시켜주는 역할임, 여기서 데이터베이스를 사용하느냐에 따라서 다르기 때문에, 그에 맞는 라이브러리를 설치해야함(데이터베이스를 까는 것이 아님) mysql이라는걸 깔지만 라이브러리라는것

yarn add mysql

이럼 세팅은 다 됨
class_backend폴더에 Board_mysql.ts를 만들어서 글을 채워보자

typeorm에서 Baseentity라는걸 import해야함

그래서 이렇게 채운 걸 표로 바꿔달라는 요청을 해야한다.

클래스를 실행하는데 기존 자바스크립트와는 다르게 실행해야한다.
typeorm에 있는Entity기능(함수)을 실행해야한다. 어떻게 다르게 실행시킬지 구별은 @Entity()를 만나면서부터 시작된다. 그럼 클래스를 entity기능에 담아서 자바스크립트랑 다르게 실행됨
이 클래스를 mysql 테이블로 바꿔달라는 요청임.
@column는 이걸 컬럼으로 바꿔달라는 .

!이전에 빨간줄들은
tsconfig 안에 compilerOption 안에
"experimentalDecorators": true 추가
writer, title, age 는 age!: 로 바꾸기(데이터를꼭 보여줘!)

이후 또 연결을 해야함

type, database, username, password, host, port
를 채운 이후

어디서 참조할껀지 써야한다. mysql.ts끝나는 모든 파일을 참조한다는 뜻이다.

entities:[__dirname + "/*.mysql.ts"]

logging : true

로그를 볼지 안볼지 정한다는 뜻이다.

synchronize: true
동기화를 사용할지 안할지 정한다는 뜻

그럼 성공했는지 안했는지 어떻게 알아요?
.then(() => {})과
.catch(() => {})를 실행해야한다.
성공했으면 then, 실패했으면 catch

import { createConnection } from "typeorm";

createConnection({
  type: "mysql",
  database: "mysql",
  username: "root",
  password: "codecamp",
  host: "34.64.207.239",
  port: 3313,
  entities: [__dirname + "/*.mysql.ts"],
  logging: true,
  synchronize: true,
})
  .then(() => {
    //연결 성공시 실생하기!!
    console.log("연결완료!");
  })

  .catch((error) => {
    // 연결 실패시 실행하기
    console.log(error);
  });

이제 yarn dev를 실행시키면 작성한대로... 되야한다.
근데 오류가 뜰 것이다

https://velog.io/@john_with_smile/x-Unable-to-compile-TypeScript-Cannot-find-name-dirname

간단히 말하면 타입을 지정해줘야한다.