Open-Api
다양한 오픈 API 사이트 모음
https://github.com/public-apis/public-apis
Auth => No 누구나 사용가능 YES면 회원가입 필요
CORS(Cross Origin Resource Sharing) => YES 다른 백엔드의 데이터를 요청할 수 있다.
NO라고 되어있을 경우 브라우저가 차단해 조회 불가능
브라우저가 아닌 환경에서 API를 요청하면 됨 (ex 모바일)
<실습>
Postman 실행
일반적으로 get방식
Dogs API를 요청한 모습
브라우저가 Frontend 컴퓨터와 접속해서 html,css,js를 받아온다.
이미지가 있으면 이미지 주소로 API를 다시 요청,
이미지를 받아와서 브라우저로 출력한다.
<실습>
async await 때문에 페이지가 계속해서 다시 그려지기 때문에 좋지 못한 방법이다.
useEffect를 사용한 방법.
아무 함수나 만들어서 그 안에서 실행시킨다.
하지만 useEffect에서 setState를 사용하면 불필요한 렌더가 한번 더 생기기 때문에 이것도 좋지 못한 방법이다.
rest API에서는 useQuery를 사용하지 못하기 때문에 대신해서 react-Query를 사용하게 된다.
이미지 크기가 크면 다운로드 받아오는데 시간이 오래 걸리므로 이미지 크기를 줄이기 위해 jpg to webp를 이용해서 이미지 크기를 줄여줄 수 있다.
여러가지 사이트가 있으므로 골라서 사용한다.
Database / ORM
yarn dev가 되어있을 때만 접속이 되므로 Backend & Frontend 컴퓨터는 24시간 켜져있어야 한다.
DB 컴퓨터 안에 MySQL..오라클...프로그램을 다운받을 수 있고 실행가능
yarn dev가 자동으로 실행되고 24시간동안 켜져있다.
서버프로그램이 있는 컴퓨터를 서버컴퓨터라고 한다.
데이터베이스 서버프로그램이 설치되어있는 컴퓨터이므로 데이터베이스 서버컴퓨터라고 한다. (컴퓨터 생략가능)
백엔드와 프론트엔드도 마찬가지로 백엔드 서버, 프론트엔드 서버라고 함
서버에는 port가 각각 따로 있다.
24시간 켜져있어야 누군가의 접속이 가능하다.
FE는 브라우저의 접속을 기다린다.
BE는 브라우저가 useQuery, axios 할 때까지 기다린다.
DB는 백엔드의 접속을 기다린다.
예전에는 한대의 컴퓨터에 모든 프로그램을 깔았지만 지금은 한대의 컴퓨터에 한 개의 프로그램을 설치한다.
그래서 보통 3개의 컴퓨터로 운영을 하게 된다.
SQL는 데이터를 표(Table) 안에 객체 형태로 행과 열에 담아주며, 이런 방식을 RDB, 관계형 데이터베이스라고도 한다.
(ex Oracle,MySQL...)
데이터를 서류 봉투 방식으로 담아줍니다. 이것을 NotOnlySQL 즉 NoSQL이라고 한다.
(ex MongoDB, Firebase, Redis...)
Node.js
<실습>
DBeaver 설치
개인 host 서버 받아오기
vscode에서 node.js 때문에 node라는 명령을 통해서 브라우저가 아닌 환경에서도 실행할 수 있게 됐다.
yarn add typescript --dev
yarn add typeorm
노드모듈즈 삭제
yarn install --production
yarn add pg
(postgres X, typeorm이 postgres에 접속하기 위해 도와주는 도우미)
tsconfig.json 직접 생성
타입스크립트 홈페이지 Docs에 What is a tsconfig.json / Recommended를 복사, 붙여넣기
타입스크립트 실행
entities에는 테이블을 만들어서 넣어준다.
typeorm Docs에서 table 만드는 법 찾기
오류를 해결하기 위해 tsconfig에 데코레이터 추가
!는 반드시 있다는 뜻
Board를 import, synchronize를 true로 해서 데이터베이스와 연동
logging: true
then() catch()
type: "module" 추가
에러 발생
타입스크립트를 node로 실행해서 나는 에러같다.
ts-node 리프레시 X
yarn add ts-node-dev
package.json에 스크립트 추가
타입 추가
타입이 다 다르기 때문에 지정해준다.
아이디값이 넘버기 때문에 인크리먼트 지정
유니버설 유니크 아이디
중복되지 않게끔 만들어진다.
yarn dev 실행하면 만들어진다.
DBeavor에 Board가 생겼는지 확인!
