백엔드 부분 이해 못했다고 너무 슬퍼하지 않기!
차라리 파이어베이스 부분 포트폴리오에 적용연습해볼걸 ㅠ.ㅠ
firebase 포트폴리오 적용
파이어베이스에 있는 docs를 읽고 사용방법을 익히자! ( 방법이 모두 다르기 때문에! )
getFirestore firesore 정보 가져오기
colloection
getDocs로 데이터 여러개 불러오기 / 한 개만 가져오고 싶으면 getDoc
빈 배열이던 State에 boards의 { ~~ } 데이터 들어감
데이터 받았으니 바뀐 state로 새롭게 렌더링 ~~ map으로 뿌리기
ID가 없는 상황 - Index는 비추천
자동으로 아이디 만들어주는 uuid (유니버셜 유니크 아이디!) - 중복 방지!
[https://www.npmjs.com/package/uuid]
addDoc 데이터 등록하기
정렬, 검색 등 다양한 기능 구현 할 수 있도록 docs 공부하기!
Image - Process
storage 또한 컴퓨터이며
여러 컴퓨터들을 연결시켜 놓은 큰 용량을 담을 수 있는 데이터베이스
(사이즈가 큰 이미지, 동영상을 저장하기 위함)
구글 스토리지에 저장 -> 다운로드 받을 수 있는 주소 활용
🌟 순서
- 브라우저에
- 버튼 생성 = 클릭하면 이미지 선택 - 등록
- 백엔드 업로드api 요청
(선택한 파일이 변수에 담겨, uploadFile로 넘김) - 백엔드에서는 스토리지로 이동시킴
- 스토리지에 저장되면 다운로드 받을 수 있는 주소 생성
- 백엔드에서는 받은 주소를 브라우저에 다시 알려준다
1) 받아온 url을 이미지 태그에 넣으면 화면에 띄울 수 있음
2) 주소에 접속하면 다운로드도 가능 - 게시글 등록 , 상품 등록 등을 할 때 url을 같이 보내주어야 함
(이미지는 state에 url(string)이 들어가는 것) - 등록하면 createB, createP등의 api가 요청 -> DB에 저장 -> 등록 완료!
- 상세페이지에서는? 패치보드할 때 데이터를 그대로 가지고 오는데...
- 이미지 태그의 url 부분에 넣어야함 (이미지로 띄움)
🔥 file을 db에 그대로 저장하는 것은 아님!! (가능은 함..)
타입이 blob (큰객체)면 파일 자체를 저장할 수는 있음 - 이미지나 영상은 수많은 픽셀..숫자등으로 이루어진 것이기때문에 용량이 크다 그래서 데이터베이스에는 이미지 주소만 넣기
Cloud-Storage
Validation 이미지 검증
이미지를 업로드 할 때 이미지의 크기를 지정하고, 확장자를 검증하는 등 이미지 검증 단계를 거쳐 업로드
오늘 공부를 돌아보며
알고리즘 테스트에서 한 문제를 못 풀었다... 아무리 해도 빈 값이 나오는..ㅠㅠ 문제 풀 때 마다 return 부분에서 틀리는 경우가 있긴 하다.. 아마 기초가 부실해서 그러겠지
내일은 1차 중간고사.... CRUD 잘 해내야할텐데
👻주말에 할 것
이미지 등록 수정 조회 !!
