Open API / Public API
Public api : [https://github.com/public-apis/public-apis]
무료로 제공되는 Open api가 있음 - 백엔드 없이 혼자 서비스 제작해보고 싶을 때 활용하기
api별 특징 확인 후 사용
- 이미지
스토리지 : 사진, 영상을 저장하는 컴퓨터
이미지를 업로드하면 -> 이미지를 다운로드 받을 수 있는 주소를 받게 됨
네트워크 확인하면 이미지를 다운로드 받아온 것을 확인할 수 있음
useEffect와 OpenApi (axios이용하기)
- api를 받아오면 state에 저장해서 이미지 url을 바꿔가며 보여주자!
- 오픈 api주소를 result에 넣어주자
- setState에 남아주자 그런데 api마다 다르니 data까지 하고 필요한 내용 추가 (그런데 계속 바뀐다! - 무한렌더링 => useEffect를 사용할까?)
- useEffect 자체에 async 사용 불가능 -> 나만의 함수를 만들어서 async - await 사용
- useEffect는 다른 함수, return 등이 모두 실행 된 다음에 실행된다 (가장 나중)-> 그 후에는 각각 컴포넌트 생애 주기에 따라
- setState를 사용하면 다시 렌더링 되기 때문에 비효율적이다
- 그러면..
RestApi 최적화 (react query) : [https://react-query-v2.tanstack.com/]
현재 Api 이용
- rest Api : ReactQuery
- graphQl : apollo-client
🌼 Global-state : 모든 컴포넌트에서 공통적으로 사용하는 state
Database / ORM
서버 : 24시간 켜져있는 서버 프로그램이 동작하고 있는 컴퓨터
서버프로그램 : yarn dev해서 24시간 켜져있는 포트 번호
👀 왜 24시간 켜져있나? 접속을 기다린다.... 프론트엔드는 브라우저의 접속을 기다림
1번 하드코딩된 html, css, js
2번 useQuery 백 요청
3번 db에서 데이터 받아서 화면에 렌더링
DB 에 데이터를 담아두는 방식
SQL VS NoSQL
1) < SQL >
: 표 (table) - 행 (row)
: (ex. Oracle, MySQL, Mssql, postgresql)
: 관계형 데이터 베이스 (RDB) ( ex. board - user 연결)
: ORM
2) < NoSQL >
: 서류봉투 (collection) - 문서 (document)
: (ex. mongodb, firebase)
: ODM
DB 관리 프로그램
[https://dbeaver.io/download/]
- postgres안의 데이터를 좀 더 편하게 조회 할 수 있도록 도와주는 프로그램이 DB 관리프로그램
- 아이디, 비밀번호만 입력하면 표 형태로 볼 수 있음
Node.js
오늘 공부를 돌아보며
백엔드까지 잘 이해하는 개발자가 되기 위해서 이번주는 백엔드 과정을 학습한다
어리둥절한 느낌이지만....
오픈 api를 활용해서 이것저것 만들어보고 싶다는 생각이 있는데, 생각보다 활용이 쉽지 않다..ㅎㅎ
아무래도 인증키도 받고, 여러 설정도 해서 다양한 api를 쓸 수 있게 연습해야 할 듯..
이거빼구 저거빼구하니까 쓸만한게 없당
js 배열 문제 푸는 꿈을 꿨는데, 그러고 나서 아침부터 4주차 js 문제를 바로 다 풀어버렸다 (11번까지)
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ요즘 맨날 코딩하는 꿈꿔서 웃기고 슬프당
