** 짧게..
map과 forEach의 차이. map은 리턴 값이 있고, forEach는 리턴 없음.
ㅡㅡㅡㅡ
같은 주소에서 주소로 요청이 들어가는 출발진: 오리진.
SOP정책시 ==> 무조건 오리진과 같은 벡엔드로만 요청이가능했다. 즉, 외부에서 접근하지 못했다.
현재 ==> 다른 사이트에서 요청해도 허용하는것 생겼다.
CORS가 yes 인 경우다.
벡엔드에서 허용여부를 선택하는것이다.
그런데 알고보면 CORS가 no인것도 막아주는것은 브라우저다.
즉 브라우저에서 요청하지 않으면 그 벡엔드에 접근할 수 있다는 것이다.
그럼 브라우저에서 받아오는 방법은 바로 브라우저에서 요청하지 않는 방법을 사용해야한다. 즉 , 연결된 벡엔드를통해 다른 벡엔드로 요청을 보내는 방식을 사용한다.
===> 프록시 서버이용방식, 즉 대리서버를 만들어 브라우저에서 프록시를 요청 --> 이 프록시에서 실제 벡엔드를 요청 --> 데이터 받아와 브라우저에 넘기는 과정으로 우회해 받아오면 된다.
왜 브라우저에서는 그냥 받아올 수 없나?
브라우저의 쿠키가 API요청시 따라다니기에 보안문제로 막아두었다고한다.
프론트엔드나, 벡엔드, 데이터 베이스는 각각 서버 프로그램이 깔려있는 컴퓨터를 가져 따라서 실행된다.
각각을 프론트엔드 서버(컴퓨터), 벡엔드 서버(컴퓨터), DB서버(컴퓨터)라고 한다.
이 서버에는 각각이 포트 번호라는게 따라다닌다.
오늘 실습해본것은 백엔드 서버 즉 API를 만들어 보는 것이었다.
그렇다면 DB에 대해 좀더 알아보아야한다.
DB는 벡엔드의 접속을 24시간 기다리는 프로그램이다.
크게 두가지로 나뉘는데, SQL방식과 NOSQL방식이 있다.
SQL방식은 표 형식으로 저장되어 엑셀처럼 표로 나타낼 수 있다.
이 표는 테이블이라고하고 각표들은 서로 공통된것으로 연결될 수 있어 관계형 DB라고도 한다.
NOSQL방식은 서류형식이다. 문서 한장 한장에 데이터를 객체로 저장한다.
sQL에서 행(row)한줄이 하나의 데이터이면 NOSQL에서는 이 문서 (document)한 장이 하나의 데이터이다.
SQL DB: Mysql, Mssql, oracle, postgres..
NoSQL DB : MongoDB,Firebase..
실습도구로는 postgres를 사용하였다. DB는 DBeaver? 을 다운받아 사용하였다.
원래 벡엔드에서는 저장하고 하는 명령어를 외워야하는데 다행히도 이것을 단축시키는 라이브러리? 도구가 존재한다. SQL방식에서는 ORM, NoSQL방식에서는 ODM을 사용한다.
이것을 사용하게되면 객체형태로 써주기만하면 자동으로 전용 쿼리문으로 바꾸어주어 편리하다. 물론 모든것이 되는것은 아니고, 10퍼센트정도는 외워야한다지만, 일단 프론트 엔드에서는 그정도까지는 안해도된다고 한다.
ORM:prisma,js 전용 sequalize, 타입스크립트 전용 typeorm..
ODM:몽고 DB전용 mongoose등..
정리하자면, DB에는 크게 두가지 형태 표 형식으로 저장되는 SQL, 문서형식으로 저장되는 NoSQL이 있다. (여기서 NOSQL 이란 SQL을 사용하지 않는다는 의미도 있지만, SQL뿐만아니라 추가적인 기능들을 가졌다는 의미도 있다)
그리고 각각의 자동 쿼리문 생성기인 ORM과 ODM이 있다.
-----실습
DBeaver는 DB가 아니라 실제 DB가 깔린 프로그램에 접속해 저장된 정보를 보여주는 DB관리도구이다.
오늘 실습은 DB에 들어갈 표의 column부분을 작성했다.
설치하기
기존실습폴더 밖에 폴더를 하나 만들고 js파일을 하나 만들어본다.
일단 브라우저로 실행시키던 기존 방법을 사용하지 않고 node로 실행해보았다.
node 파일명.확장자 로 실행.
벡엔드에서는 jsx를 사용하지 않기에 확장자는 ts로 해서 다시 새파일을 만든다.
그런데 이건 타입스크립트이므로 타입스크립트를 해당폴더에 설치해야한다.
yarn add --dev typescript 엔터
tsconfig.json파일을 만든다.
내부 내용은 typescript docs의 whar is tsconfig.json부분을 들어가 recommended를 클릭해 추천해주는 내용을 복사해 붙여넣는다.(The tsconfig.json:)
원래 next js 사용으로 yarn dev를 하면 자동으로 안에 내용을 채워주었지만, 현재 폴더에는 해당부분을 설치하지 않았기에 이러한 과정을 거쳐야한다.
타입스크립트 전용 노드 설치
yarn add ts-node
그런데, 기존 node는 내 컴퓨터 전체에 설치되어 실행이 가능했다. 이 경우에는 폴더에 설치 했으니 실행명령어 입력이 필요하다.
package.json 에 script부분 추가하기
"script":{ "dev":"ts-node index.ts" },
이렇게 추가해주면 기존 yarn dev명령어로 실행이 가능하다.
--> 그냥 ts-node index.ts하면 내컴퓨터에서 찾기에 실행되지 않기때문에 명령어를 추가해준것이다.
타입orm설치
yarn add typeorm
현재 파일 실행시 DB에 column만들기.
`import { DataSource } from "typeorm";
const AppDataSource = new DataSource({
type: "postgres",=> 연결한 데이터 베이스(postgres사용)
host: "벡엔드 ip주소,
port: 포트번호 입력, => 지급받은 포트번호 입력
username: "postgres",
password: "서버 비밀번호 입력",
database: "postgres",=> type과 이름 통일
synchronize: true, => 클래스를 테이블로 만들게 동기화
logging: true,=> 쿼리문으로 바뀌어 나가는 기록 보여줌
entities: [테이블명(클래스)],
});`
AppDataSource.initialize() .then(() => { console.log("DB접속에 성공했습니다!!!"); }) .catch((error) => { console.log("DB접속에 실패했습니다"); console.log("원인: "); console.log(error); });
`import { BaseEntity, Column, Entity, PrimaryGeneratedColumn } from "typeorm";
@Entity() => 여기 선언된 class Board가 테이블이라고 알려줌
export class Board extends BaseEntity {
@PrimaryGeneratedColumn("increment")
number!: number;
@Column({ type: "text" })=> 각각 컬럼이라고 알려주고, DB타입을 안에 중괄호로 적어줌.
writer!: string;==> 타입스크립트 타입
@Column({ type: "text" })
title!: string;
@Column({ type: "text" })
contents!: string;
}
`
!얘는 반드시 있어야한다는 표시.
@는 데코레이터
빨간줄생긴것은 tsconfig.json에 컴파일러 옵션스에
"experimentalDecorators":true 추가.(빨간줄 간곳에 마우스를 올리면 뜸)
@PrimaryGeneratedColumn() ==>
하나의 칼럼에 각각을 구분할 수 있는 핵심컬럼 PK필요!
번호 아이디 등.
얘는 자동으로 생성해줌. 소괄호에 "uuid"면 중복되지 않는 아이디를 넣어줌.
"increment"는 자동으로 1, 2, 3, ... 번호 생성.
BaseEntity는 벡엔드 전용기능.
initialize 얘는 초기화하겠다는 말.초기화되면서자동접속됨.
.than(()=>{접속 성공시 실행})
.catch(()=>{접속실패시 실행})
포스트 그래스 연결할 것이기에 연결 프로그램 설치 필요
yarn add pg
pg는 포스트그래스의 준말인것같다.
이렇게 프록시서버 만들기 1 차 수업을 끝냈고, 나도 조금 만들어보았다.
맞는지는 모르지만...
