220405

👩🏻‍💻 Learn

Open-API / Public-API

무료로 사용할 수 있도록 제공하는 API
https://github.com/public-apis/public-apis

오랜만에 axios 를 써서 api 를 받아왔다.

export default function OpenapiWithUseEffectPage() {
  const [dogUrl, setDogUrl] = useState("");

  useEffect(() => {
    const aaa = async () => {
      // async - await 사용을 위해 새로운 함수 만들어 줌
      const result = await axios.get("https://dog.ceo/api/breeds/image/random");
      setDogUrl(result.data.message);
    };
    aaa();
  }, []);

  return (
    <div>
      <div>오픈 API 연습</div>;
      <img src={dogUrl} />
    </div>
  );
}

useEffect 에서 setState 의 사용
1. useEffect가 실행되면 state의 값이 변경된다
2. 변경된 값에 따라 렌더링이 한 번 더 일어난다

NoSQL, SQL

데이터 베이스를 담아두는 방식에 따라 NoSQL, SQL 이라고 부른다

SQL(RDB) 표, 테이블 안에 각각의 행(row)들이 저장
표들을 연결시켜 관계를 만들어 줄 수 있기 때문에 관계형 데이터 베이스(Relational DataBase)라고도 부른다.
ex. Oracle, MySQL, Postgres

NoSQL(DocumnetDB) 서류봉투(Collection) 안에 a4용지(Document) 가 들어있는 것처럼 저장된다.
ex. MongoDB, Firebase, Redis ...

예전에는 각각의 명령어들을 전부 입력해줘야 했지만 이젠 명령어를 자동으로 만들어주는 라이브러리가 생겼다. 이런 라이브러리들을 ORM(SQL)/ODM(NoSQL) 이라고 부른다

백엔드 서버 셋팅하기

yarn init 비어있는 package.json 생성
yarn add typeorm 테이블과 데이터 넣는 것을 도와줄 typeORM 설치
yarn add typescript —dev 타입스크립트 설치
tsconfig.json 파일 생성 후

{
"compilerOptions": {
"target": "ES2015",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"experimentalDecorators": true
},
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Recommended"
}

입력하기(출처 : https://www.typescriptlang.org/)

여기까지 진행한 후 index 파일을 만들어 console.log 를 찍어 제대로 작동하는지 확인해보자.

yarn add ts-node—dev
yarn add pg typeORM 이 postgres에 잘 접속하게 하기 위한 라이브러리 pg 설치

데이터베이스와 백엔드 연결

typeORM 을 이용하여 연결해준다

import { DataSource } from "typeorm";
import { Board } from "./Board.postgres";

const AppDataSource = new DataSource({
  type: "postgres",
  host: // 백엔드 서버가 있는 컴퓨터 ip,
  port: // 포트번호,
  username: "postgres",
  password: // 비밀번호,
  database: "postgres",
  entities: [//파일 경로],
  synchronize: true, //entities와 db 를 동기화
  logging: true, // log 찍어줘~!
});

AppDataSource.initialize()
  .then(() => {
    console.log("연결 성공!!!");
  })
  .catch(() => {
    console.log("연결 실패!!!");
  }); // 연결에 실패하면 catch

이게 바로 entities! 파일을 따로 만들어 작성해준다.

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

@Entity() // board 를 테이블로 만들어 달라는 요청
export class Board {
  @PrimaryGeneratedColumn("increment") // 중복되지 않는, 자동으로 증가(increment)하는 컬럼, id는 uuid 사용
  number!: number;

// 데이터 베이스의 타입을 지정해 줄 수도 있다
  @Column({ type: "text" })
  writer!: string;

  @Column({ type: "text" })
  title!: string;

  @Column({ type: "text" })
  contents!: string;
}

📝 Review

백엔드 너무너무 어렵다... 들으면서도 무슨 말인지 잘 모르겠던 하루였다. 프론트엔드랑은 정말 많이 다르구나 새삼스럽게 느꼈고, 난 역시 백보다는 프론트구나 깨달았던 시간...
백엔드가 작업하는 방식에 대해 배우고나면 나중에 협업할 때 조금쯤 매끄러운 소통이 가능하지 않을까 기대해본다.

프로젝트에 open api 연결해주는데 경로를 이동하면 오류가 난다. Error: Invalid hook call. 이런 오류가 나는데 여기서 제시한 오류가 나는 세 가지 이유(1.리액트, 리액트 돔 버전 2.export default function 밖에서 hook 선언 3. react 중복 설치로 인한 충돌) 중 해당이 되는 사항이 없다... 오류의 늪에 빠져버린 내 프리보드......

🔥 Will

• 리팩토링 끝내기
• hook 문제 해결