React

Open-API

오픈 API란 누구든지 사용할 수 있도록 공개된 API (오픈API사이트 모음)

ex.동물 이미지, 날씨 정보, 바이러스 정보, 금융 정보 등 여러 데이터들을 API를 통해 무료로 사용할 수 있다.

Open-api 실습

animals - Dogs
: 강아지 이미지 랜덤으로 보여주기

1. fetch 부분 복사
2. Postman 사용해서 Rest api get 방식으로 요청
3. 브라우저에 이미지 주소 복사해서 입력하면 이미지 받아와짐

useEffect를 사용한 API

: axios로 페이지 만들기

실행 결과

• 비동기 통신에는 react-query 가 있다! 링크

웹서비스의 구조

웹서비스는 Front-end 서버, Back-end 서버 그리고 DataBase로 이루어져 있다

=> 서버는 백엔드에서만 사용한다고 생각했지만,
서버는 24시간 켜져있는 서버프로그램이 동작하고 있는 컴퓨터를 의미한다 !

프론트엔드 서버

yarn dev 해서 실행시키면서 생성된 포트가 동작하고 있는 컴퓨터를 프론트엔드 서버 라고 한다

서버 프로그램은 왜 24시간 켜져 있는지?
-> 접속을 기다리기 때문이다. 바로바로 응답을 주려면 24시간 켜져있어야 하니까! 
(데이터베이스는 백엔드의 접속을 기다리고, 프론트엔드 서버는 브라우저의 접속을 기다린다)

DataBase(DB)

데이터베이스란? 데이터를 담아두는 저장소
데이터베이스에 데이터를 담아두는 방식에는 SQL방식 과 NoSQL 크게 두 가지가 있다.

프론트엔드에서 통신을 위해 사용했던 axios나 apllo-client처럼, 백엔드에도 데이터베이스와 통신을 도와주는 툴이 있는데
툴을 담아주는 방식(SQL, NoSQL)에 따라 달라진다.

=> 따라서 툴은 2가지가 있다

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

SQL 방식

: 데이터들을 엑셀과 비슷한 표 에 정리해두는 방식

• 표 사이에 관계성을 부여 할 수 있다 관계형 데이터베이스(RDB)
• 그래서 mapping 해주는 ORM 툴 사용 (typeorm, sequzlize, prisma)
• 대표적으로 Oracle, MySQL, Postgres가 있다

NoSQL 방식

: 서류봉투 에 문서형태로 저장하는 방식

• 서류봉투를 collection 이라고 부른다
• 통신을 도와주는 툴로 ODM 사용 (mongoose)
• 대표적으로 MongoDB, FireBase 가 있다

DB관리 프로그램

: 데이터베이스에 설치되어있는 postgres안의 데이터를 좀 더 편하게 조회 할 수 있도록 도와주는 프로그램

• DBeaver, MySQL, webpack 이 있다

!! DB관리 프로그램은 데이터베이스가 아니다!

++
포트폴리오에 원래
자유게시판, 중고마켓, 마이페이지 세개 있는데
메뉴 두개 더 생길 것,,
firebase, open API, 자유게시판, 중고마켓, 마이페이지 이러케

랜딩페이지
mbti,
입력하면
캐릭터 일치하는
챶아주기