정중식의 개발공부로그

Firebase SDK 앱 추가

16 Sep 2023 | firebase

자세한 설명 X 짧고 간단한 설명 O

Firebase 프로젝트 생성

파이어베이스 홈페이지에서 프로젝트 생성

Firebase SDK 앱 추가

SDK는 파이어베이스 공홈에서 프로젝트를 생성하면 SDK 코드가 나온다.


src/firebaseApp.ts 파일생성

import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_ID,
  measurementId: process.env.REACT_APP_MEASUREMENTID,
};

// Initialize Firebase
const firebase = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebase);

export default firebase;

tsconfig.json 파일도 만져준다. (만약 경로 설정이 필요없으면 안만져도됨)
경로설정을 해주면 ‘../firebaseApp.ts’ 이렇게 안불러와도된다.
‘/firebaseApp.ts’ 바로 이렇게 불러오면 됨

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "path": {
    "pages/*": ["pages/*"],
    "components/*": ["components/*"],
    "firebaseApp/*": ["firebaseApp/*"] // 추가
  }
}

여기까지 했으면, 잘 설정이 되었나 체크해보자.
브라우저에서 f12를 눌러서 잘 뜨면 설정이 잘된거다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';

import firebase from 'firebaseApp'; // 추가
console.log(firebase); // 추가

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

파이어베이스 개요

16 Sep 2023 | firebase

파이어베이스를 강의에서 사용하는데, 짤막하게 정리하는 시간을 가져보려고 한다.

파이어베이스의 역사

  • 파이어베이스는 실시간 데이터베이스, 인증, 스토리지, 분석 등 다양한 기능을 제공하는 모바일 및 웹 앱 개발 플랫폼이다.
  • 2011년 스타트업에서 시작(실시간 채팅 기능)해서, 2014년 구글에 인수되었다.
  • 백엔드 서버를 구축하고 관리 할 필요가없고, 구글 클라우드 플랫폼을 이용해서 빠르고 효율적인 개발이 가능하다.
  • 특히 실시간 기능 서비스, 클라이언트 사이드에 집중할 수 있고, 초기 프로토타입 개발에 유용하다.

주요 기능 (사용자 인증 구현)

Authentication

  • 간편한 다중 플랫폼 로그인
  • 이메일 인증, 소셜 미디어 계정 인증, 전화번호 인증 방식 제공
  • 보안 강화, 사용자 인증 과정 등을 안전하게 처리 가능

FireStore

  • 파이어베이스에서 제공하는 NoSQL형식의 클라우드 데이터 베이스
  • 실시간 데이터 동기화 지원 Ex)실시간 채팅

Store

  • 사진 및 동영상 저장
  • 사용자 파일 저장 및 공유. 강력한 보안

Hosting

  • 웹 앱 호스팅
  • 정적 및 동적 컨텐츠 모두 호스팅 가능
  • 웹 앱 간단 배포

장점

  • 백엔드 서버 없이 개발 시간 절약, 클라이언트에 집중 개발 가능하다.

  • 실시간 데이터 베이스 사용자 데이터 실시간 공유, 실시간 채팅 쉽게 개발 가능

  • 구글 플랫폼 통합, 구글 클라우드 플랫폼 서비스 쉽게 이용 및 분석 가능하다.

단점

  • 쿼리 제한, NOSQL 데이터 베이스의 간단한 쿼리만 사용 가능

  • 비용, 확장성이 중요한 경우 비용이 빠르게 증가할 수 있다.
    EX)대규모 CRUD 기능이 많이 일어날때

  • 마이그레이션이 어렵다, 타 백엔드 서비스로 전환 하는 경우 추가적인 작업이 필요하다.

경로관리(리액트,타입스크립트)

14 Sep 2023 | memo

개요

프로젝트가 커질수록 경로관리에 어려움이있다고한다.

경로란 이런걸 뜻한다.

import PostList from '../../components/PostList';
import PostList from '../../components/PostList';
import PostList from '../../components/PostList';

근데 프로젝트가 커지면 폴더도 많아지고 파일도 많아질텐데 ../../../이런식으로 불러오는건 프로젝트가 더 복잡해지고 지저분해지는 혼란을 초래한다.

그러한 점을 막고자 리액트와 타입스크립트를 사용할때 경로관리하는 방법을 간단하게 메모하고자 한다.

경로관리 with 리액트,타입스크립트

리액트와 타입스크립트를 사용하면 tsconfig.json 파일이 루트 디렉토리에 있을건데, 이 파일을 수정해주면 된다.

 "baseUrl": "src",

 "path": {
    "pages/*": ["pages/*"],
    "components/*": ["components/*"]
  }

baseUrl과 path를 설정해주면 된다.

baseUrl: 프로젝트 경로가 src/components, src/pages 이렇게 되어있어서 src를 baseUrl로 잡아준다.
path: pages폴더안의 모든 경로 *, components 폴더안의 모든 경로 *를 불러와준다는뜻

전체 코드는 이렇다.
(사용자의 설정에따라 약간은 차이가있을 수 있다.)

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "path": {
    "pages/*": ["pages/*"],
    "components/*": ["components/*"]
  }
}

이렇게 설정해주면 다음과 같이 불러올수 있다.
또한, 자동완성기능으로 PostList만치고 엔터를 눌러도 자동으로 아래처럼 불러와진다.

import Header from 'components/Header';
import Footer from 'components/Footer';
import PostList from 'components/PostList';

yarn과 npm의 차이

14 Sep 2023 | memo

개요

최근 듣는 강의에서 npm 대신에 yarn을 사용했다.
어떤 차이점이 있는지 강의에서 짤막하게 설명을 해주었지만 부족한거같아서 더 자세히 정리해보려 한다.
다만, 핵심부분만을 추려내 정리했다.

npm과 yarn

npm과 yarn은 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자이다.

yarn과 npm의 차이

속도

npm은 패키지를 한번에 하나씩 순차적으로 설치함. 그에 비해서 yarn은 여러 패키지를 동시에 가져오고 설치하도록 최적화되어 있어 패키지 설치 속도 측면에서 yarn이 npm보다 빠름

보안

yarn은 보안 측면에서 npm보다 더 안전함. npm은 자동으로 패키지에 포함된 다른 패키지 코드를 실행하여, 보안 시스템에 몇 가지 취약성이 발생하여 나중에 심각한 문제가 발생할 수 있다고하는 반면에, yarn은 yarn.lock또는 package.json파일에 있는 파일만을 설치함 (최근 npm 업데이트에서 npm의 보안 업데이트도 크게 향상됨)

결론

npm과 yarn 둘 중에 무엇을 선택해야 할지는 개인의 취향,성능(패키지 설치 속도),커뮤니티에 따라 달라질 수 있다.

flex-basis

03 Sep 2023 | css

flex-basis는 flex 항목의 초기 크기를 설정할 수 있고,
max-width,min-width와 같은 동작을 한다.

flex-basis

  • flex 항목의 초기 크기를 설정한 모습
<div class="father">
  <div class="box">I'm a box, hello world! 🍸</div>
  <div class="box">I'm a box, hello world! 🍸</div>
</div>

.box:nth-child(1) {
  background-color: tomato;
  flex-grow: 1;
  flex-basis: 500px;
}
.box:nth-child(2) {
  background-color: orange;
  flex-grow: 1;
}

코드에서 주의깊게봐야할 점은
코드를 보면 flex-grow를 1을줬다. (디폴트 값은 0임)
flex-grow는 요소를 늘어나게한다.
근데 첫번째 박스는 flex-basis 500px을 줬으니 500px부터 늘어날거고,
두번째 박스는 컨텐츠박스의 기본크기에서부터 늘어나기 때문에 전체적으로 요소가 다 늘어났을때는 크기 차이가 난다.

이해를 돕기 위한 이미지 첨부

views

  • flex-basis가 max-width와 같은 동작을 한다.
<div class="father">
  <div class="box">I'm a box, hello world! 🍸</div>
  <div class="box">I'm a box, hello world! 🍸</div>
</div>

.box:nth-child(1) {
  background-color: tomato;
  flex-grow: 0;
  flex-basis: 500px;
  flex-shrink: 3;
}
.box:nth-child(2) {
  background-color: orange;
  flex-grow: 1;
}

위 코드는 첫번째 박스는 최대 500px의 너비를 넘기지않을 것이고, 축소가 가능하다를 의미한다.


  • flex-basis가 min-width와 같은 동작을 한다.
<div class="father">
  <div class="box">I'm a box, hello world! 🍸</div>
  <div class="box">I'm a box, hello world! 🍸</div>
</div>

.box:nth-child(1) {
  background-color: tomato;
  flex-grow: 1;
  flex-basis: 500px;
  flex-shrink: 0;
}
.box:nth-child(2) {
  background-color: orange;
  flex-grow: 1;
}

flex-shrink는 (디폴트 값 1) 화면이 축소되었을 때 요소안의 컨텐츠가 줄어드는 크기를 결정한다.
shrink를 0을 주고 basis를 500px을 주면, 500px미만으로는 크기가 안줄어든다.

즉

flex-grow: 1;
flex-basis: 500px;
flex-shrink: 0;

이 코드는 상자는 원하는 만큼 커질것이고(grow), 축소를 시작하면(shrink), 500px보다 작아지진 않는다.(basis)

flex로 키워드를 축약하자

vscode에 flex:를 적고 마우스를 위에올려놓으면 속성이뜸

.box {
  flex: 1 0 500px;
}

grow 1, shrink 0, basis 500px 을 준 모습이다.
(500px부터 늘어나고, 500px이하로 줄어들지않음)

그 반대의 경우로

.box {
  flex: 0 1 500px;
}

최대 500px까지만 늘어나고,줄어든다.

flex-basis는 주축을 갖는다.

width와 flex-basis의 차이점으로는 basis는 주축을 갖는다는 차이점이 있다.
한마디로 쉽게 이해하자면 높이를 갖는다고 보면된다.