🗓️ 날짜 : 2023.09.08
📚 할 일 : React 복습, Next 복습
📝 오늘의 목표 : Firebase 셋업, Cloudinary 셋업, 프로젝트 셋업
⌛ 공부시간 : 15:00 ~ TIL
Firebase
Firebase 는 구글에서 제공하는 클라우드 플랫폼이다.
다양한 백엔드 서비스와 API 를 제공한다. No SQL 데이터베이스를 제공하며
다양한 프레임워크와 호환이 쉽다. 러닝커브도 낮은편.
백엔드 칭구가 없다면 귀여운 Firebase 를 사용해보자.
Firebase 에 접속하면 오른쪽 상단에 자신 계정의 콘솔에 접근할 수 있는 버튼이 있다.
콘솔에서 새로운 프로젝트를 만들 수 있다.
가장 간단하게 해볼 수 있는 건 Authentication 서비스를 이용한 구글 로그인.
프로젝트를 만들어 접속하면 빌드 탭에 Authentication 서비스가 있다.
접근하면 위와 같은 탭이 뜨는데
박스 오른쪽 상단에 사용 설정을 켜면 사용할 수 있다.
프로젝트 지원 이메일은 드롭다운을 클릭하면 본인 이메일이 나온다.
이걸로 설정하면 되는 것 같다.
이후에 콘솔로 나와서 앱에 Firebase 를 추가하여 시작하기 에서 웹을 선택하면
이름을 입력한 뒤에 Firebase SDK 를 추가하라고 나온다.
사용하는 프로젝트에서 npm install 해서 사용할 수 있나보다.
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
const firebaseConfig = {
apiKey:
authDomain:
projectId:
storageBucket:
messagingSenderId:
appId:
measurementId:
};
const app = initializeApp(firebaseConfig);
export const analytics = getAnalytics(app);
이제 SDK 를 프로젝트에 추가하면 firebase 를 연동할 수 있다.
추가적인 구현사항은 차근차근 추가할 예정.
Cloudinary
미디어 관리 플랫폼.
비디오와 이미지를 쉽고 간편하게 관리할 수 있다.
AWS 같은 서비스를 이용해도 되지만
백엔드 칭구가 없는 프론트엔드 개발자라면 미디어 관리를 위해 채용 할만 하다.
타입스크립트와 함께 사용하기 위해서는 @types/cloudinary 로
타입도 같이 설치해주어야 한다.
가입하고 잠깐 바꿔주어야 하는 옵션이 있는데,
왼쪽 하단에 톱니바퀴 모양의 아이콘을 클릭해 Settings 옵션에 들어가면
Upload 탭이 있다. 해당 탭에서 Upload presets 항목을 보면
빨갛게 Enable unsigned uploading 이라는 글자가 있는데
서명되지 않은 업로드 옵션이다. 이를 가능하게 해준다.
이미지를 업로드 할 때, 이 옵션을 활성화 시키지 않으면
클라우디너리에 로그인 하지 않으면 이미지를 업로드 할 수 없다.
매우 귀찮을 수 있기 때문에 개발단계에서는 위의 옵션을 켜주는게 좋다.
그리고 add upload preset 을 눌러서 옵션을 설정할 수 있다.
Upload Manipulations 를 눌러서 Add Eager Transformation 을 설정하면
이미지를 받을 때 default 옵션을 선택할 수 있다.
그런 다음 Getting Started 를 확인해보면
npm i @cloudinary/url-gen @cloudinary/react
Copy
import {Cloudinary} from "@cloudinary/url-gen";
const App = () => {
const cld = new Cloudinary({cloud: {cloudName: 'ditvdeuux'}});
};React 환경에서 위와 같이 사용할 수 있다.
마찬가지로 상세한 구현 내용은 앞으로 차곡차곡 쌓을 예정
Feedback
취업했다! 🥳
좋은 기회가 생겼고 실력보다는 운이 좋았던 것 같다.
앞으로는 운보다 실력이 좋은사람이 될 수 있도록,
지금의 행복을 잊지 않도록 초심을 잃지 말 것.
