수업 목표

1. DataBase(DB)
2. DB 관리 프로그램 (DBeaver)
3. 백엔드 서버 구축 실습
4. DBeaver 연동

---

수업 리뷰

리뷰
open api 할 때 cors가 no, yes 있었는데, 이게 뭔지 자세히 알아봅시당 (일단 yes있는걸로 하기!)

• SOP : same origin policy
  예를들어 네이버 브라우저에서만 네이버 백엔드에 , 다음 브라우저는 다음 백엔드로만 데이터 보낼 수 있음. 조금 불편했음
• CORS : 네이버에서도 다음 백엔드로, 다음 브라우저에서 네이버 백엔드로 데이터를 보내자. 공유하자!
  
• preflight : CORS 할 때 미리 api 요청해도 괜찮은지 허락구하는 것
  백엔드에서는 cors["*","다음","쿠팡"] 이런식으로 허용되는 범위 적용되어있다.

💡 만약 네이버 백엔드에서 cor를 쿠팡만 적용해서 거절당한다면, 이것은 백엔드에서 안주는게 아니고 크롬 브라우저가 막는거임. 그래서 아래이미지 처럼 우회해서, 다음 브라우저가 다음 백엔드로 요청, 다음백엔드가 네이버 백엔드에서 데이터를 대신 받아줄 수 있다. 이것을 proxy프록시 라고 한다! (대리인)

cors가 no 인 경우는, 모바일에서 요청하거나 백엔드에서 요청하거나 우회하는 방법이 있다. 브라우저에서만 요청 안하면 됨!!
❗️ 그런데 그러면 CORS가 왜 있을까? -> 브라우저를 보호하려고 하는 것. 그래서 브라우저에서 막는 것임.

• 브라우저 쿠키란? 저장소 같은거임. 백엔드에서 발급한 로그인증표 같은게 있으면 알아서 쿠키에 저장되고, 다음에 결제하기나 등록하기 같은 요청 보낼때 쿠키에서 자동으로 해당 사이트 백엔드로 들어간다.
  

• 쿠키로 인한 CSRF 공격이 있을 수 있다.
  

• 위와 같은 문제를 막기위해 브라우저에서 막은 것.
  

• 그럼 아까 우회한 것 처럼 백엔드로 보내면 되잖아? 아래 이미지 처럼 다음 에서 받아온 로그인증표라서 다은 백엔드에서 못보냄
  

---

1. 서비스 전체 구조 이해

2. DataBase(DB)

데이터 베이스란 데이터를 담아두는 저장소이다.
대표적인 저장방식이 2개가 있다. SQL, NoSQL

• 한 행(row)을 a4용지 한장으로 바꿔볼 수 있다. NoAQL은 문서(document)라고 부른다. 객체형태로 되어있다.
• SQL의 열(column) 은 NiSQL에서 필드라고 불린다.
• 서류봉투는 Collection / 표는 Table !

  우리가 통신을 위해 사용했던 axios나 apollo-client처럼 백엔드에도 데이터베이스와 통신을 도와주는 툴이 있다.

  이 툴은 담아두는 방식(SQL,NoSQL)에 따라 달라진다 (ORM,ODM 2가지)

  • ODM : object document mapping
  • ORM : object relation mapping

SQL 방식

SQL방식은 데이터들을 엑셀과 비슷한 표에 정리해두는 방식이다.
SQL방식은 NoSQL방식과 달리 각각의 표 사이에 관계성을 부여 할 수 있습니다. 관계성을 부여할 수 있기때문에 mapping해주는 툴을 ORM을 사용한다!
또한 관계성을 부여하는 데이터베이스를 관계형 데이터 베이스 라고 하며, 대표적으로 Oracle, MySQL, Postgres가 있다.

NoSQL 방식

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

관계형 데이터베이스(RDB) - SQL

게시판에 글 쓴 사람이 u01 이라고 봤을 때 유저테이블에서 확인결과 철수, 12살 이라는 것을 확인할 수 있다. 이것을 관계형 데이터베이스(Rleational)라고 할 수 있음.

데이터베이스가 실행중일 때, 백엔드에서는 접속프로그램 설치.
원래는 아래이미지처럼 길게 써야했는데 설치프로그램 실행하면 (ORM이 조금 쉽다.) 명령어를 Board.find() 를 명령어로 쓰면, 프로그램에서 아래 명령어로 자동 변환해준다.

3. Node.js에서 JS실행하기

node.js가 나오기 이전에는 자바스크립트가 브라우저에서만 작동이 되었다. 그러나 사람들은 자바스크립트로 다른 것들을 만들고 싶었고, 이때문에 브라우저가 아닌 다른 곳에서도 실행이 되도록 만들고 싶었다. 그래서 나온것이 node.js이며 node.js는 JavaScript 실행 프로그램이다. 사용하면 브라우저를 켜지않고 node.js에서 아래 이미지 처럼 확인할 수 있다.

💡 실습하기!

1. 백엔드 폴더 만들고, 확장자가 js인 파일 만들기
   
2. 파일에 console.log(”Hello World”) 를 입력해보자
   
3. 터미널에 node [파일] 을 입력해 파일을 실행시켜주세요
   
   터미널에 "Hello World!!" 가 보인다.

위 실습에서는 js확장자 파일이어서 잘 실행이 되었지만, 우리가 쓰는 타입스크립트는 실행이 되지 않는다. node.js는 자바스크립트의 실행파일이기때문에! 그렇다면 TS 실행프로그램인 ts-node를 설치해보자

💡 Node.js에서 TypeScript 실행하기 실습!

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

2. 터미널에 yarn add —-dev typescript 를 입력해 TypeScript를 설치하기

3. tsconfig.json 파일을 생성해주신 후 파일의 내용을 [ Docs ]를 보고 채워주기
   
   
   
   여기까지는 타입스크립트 설치와 설정이고, 아직 파일을 실행할 수 없으므로 ts-node를 설치해보자

4. yarn add ts-node 를 입력하여 ts-node 설치

5. package.json에서 ts-node를 이용해 index.ts를 실행하는 명령어를 추가합니다.

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

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

yarn 명령어

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

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

ORM 을 통해 데이터베이스랑 연결한다. 테이블 구조를 class로 만들면 DB에 테이블 만들어진다. 이것을 확인하기 위해 디비관리프로그램 필요! (디비버)

1. ORM 설치
2. DB에 접속
3. class로 테이블 만들고, DB에 보내주기
4. DBeaver라는 DB관리프로그램으로 DB가 설치된 컴퓨터에 접속해서 테이블 잘 만들어져있는지 확인하기!

typeORM 설치

1. 터미널에 yarn add typeorm을 입력
2. 터미널에 yarn add pg 를 입력
   (pg는 typeorm이 postgres와 연결하기 쉽게 도와주는 라이브러리)

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

index.ts

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, "연결 실패!"));

entities의 파일경로
→ entities[ ” ./*.postgres.ts “ ]
해당 위치의 postgres.ts로 끝나는 모든 파일들 데이터베이스와 연결시켜 줘! 라는 뜻 입니다.

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;

}

이 오류는 데코레이터의 타입 때문임. tsconfig.json 파일에서 데코레이터의 타입을 설정해주어용

메타데이터만 있고 Board가 없다면 뭐가 문제일까요?

→ 연결은 되어있지만 데이터가 들어가지 않은 상황입니다.
index.ts의 entities를 확인해주세요.
entities의 파일경로가 맞는지 확인해주시고, 오타가 없는지 확인해주시면 됩니다.

❗️ git push 전에 반드시 .gitignore 만들어서 node_modules폴더가 함께 코밋되지 않게 해주자!!
Next.js 프로젝트 생성시에는 .gitignore가 자동으로 만들어지지만,
이번에는 Next.js 프로젝트를 생성한 것이 아니기 때문에 .gitignore 파일을 반드시 따로 만들야한다.

DBeaver 연동

설치해준 (설치링크) 데이터베이스 관리프로그램에 연동해봅시다.

1. DBeaver 열기
2. 좌측 상단에 플러그 모양 클릭
   
3. postgreSQL을 선택!
   
4. Host 부분에 localhost 대신 백엔드의 주소를 입력해주세요. ( 34.64.244.122 )
   - 비밀번호는 postgres2022
   - localhost는 내컴퓨터입니다. 내 컴퓨터에는 백엔드가 없으므로 백엔드에 접속 할 수 있도록 백엔드 주소를 입력합니다.
   
5. 모두 입력 후 test connection을 누르기! 파란색이 뜨면 완료된 것이니 완료를 눌러줍시다.
   
6. 모두 완료했다면, 이런 엑셀같은 화면이 나오는 것을 볼 수 있다!!
   

슬라이도 질문

qqq왜 사용?

데이터는 코캠 컴퓨터에 있고, 우리는 거기에 접속해서 데이터 보는것 그래서 실제로 보려면 코캠 컴퓨터에서 봐야한다.
우리는 백엔드 프로그램을 실행시킨거고(yarn qqq), 이 과정에서 디비에 접속한거다.(코캠컴퓨터)

노드는 자바스크립트 실행 프로그램인데 우리는 타입스크립트니까 ts-node로 실행해야한다. 설치 했는데 전역에 설치한게 아니라서 실행 명령어가 없다고 나온다. 해결방법은
1. 전역에 설치( node처럼 ) 내컴퓨터 전체
2. node_modules 안에 찾아서 실행시켜줘 명령어를 작성 (스크립트 태그)

이렇게 작성하고, 터미널에 yarn qqq !
tsnode를 전역에 설치하면 내 코드가 다른사람이 봤을 때 그사람은 tsnode가 없을수도 있으니까.. 이게 단점!

---

🤷🏻‍♀️ 궁금한 것

• 내 프리보드.. 왜 왜왜왜 페이지네이션 적용이 안되는가.
• 어제 파일 쪼개는데 리뷰 코드 참고하느랴.. 구현해야 하는 코드들을 봐버렸다.. 내가 혼자 힘으로 시도해보고 구현한 기능들이 아니라서 분명 정확하게 이해한 상태가 아닐것임..! 그래서 이거 다 제대로 정리하고 이해해놓고싶다 ㅠㅠㅠ익.. 되게 찝찝

---

❗️ 배운 것

뭐 많은데요.. 그거 ([]) 이거 정리하자..ㅋㅋㄹㅋㅎㅎㅎㅋㅎㅎ

---

✨ 느낀 점

신기하다 백엔드도! 오늘은 완전 그냥 기본세팅에 대해 배웠다. 내일은 API를 직접 만든다고 하셨는데 진짜 이것저것 다해보고싶다 ㅎㅋㅎㅎㅎㅎㅎ 신기혀.. 일단 오늘은 밀린것을 좀 할 수 있는 날이 될 것 같아서 기분이 조곰 좋다 !!

해야할 것들 ...🙄
css css css css css css css css css css............................
1) 16일차 TIL
2) 저번주 회고
3) tsx 파일 변경
4) 기능들 블로그 정리

• 주소입력하면 입력은 되었지만 화면에 뜨지 않았다.
• 댓글 파일분리한거 흐름 파악
• 댓글 수정
• 별점
• 알림창 모달

5) 완성못한 기능들

• 동영상 넣기
• 페이지네이션
• day02_board 이거 폴더명좀 바꿔보자...