React

[TS] React Typescript 변환하기

TypeScript TypeScript는 JavaScript의 변수에 형식을 지정한 파생 언어이다. 아래를 참고해 기본 구조를 먼저 익히자. TypeScript 가이드북 - TypeScript Guidebook 타입(Types)을 사용하면 JavaScript 애플리케이션을 개발할 때 정적 타입 검사 및 코드 리팩토링과 같은 생산성 높은 개발을 수행할 수 있습니다. 타입 설정이 필수는 아니지만, 설정할 경우 컴파일 yamoo9.gitbook.io 설치하기 npm install --save typescript @types/node @types/react @types/react-dom @types/jest # or yarn add typescript @types/node @types/react @types/r..

[React] 최신 Firebase Real-Time DB 사용하기

Firestore와 Real-Time DB의 차이점은 아래 글에 간략하게 정리되어있다. [React] 최신 Firebase Firestore 사용하기 Firebase의 기본 설정이 필요하다면 아래 글을 참고하길 바란다. [React] 최신 Firebase에서 로그인 구현하기 React의 Firebase 라이브러리가 업데이트 되면서 함수를 호출하는 방식이 바뀌었다. 거의 필수 muhly.tistory.com Real-Time DB는 doc, collection 두 가지가 존재하는 Firestore와는 다르게 ref라는 하나의 함수만 사용한다. 경로 선언 import { push, ref, limitToLast, onValue, orderByChild, query, remove, } from "@fireba..

[React] 최신 Firebase Firestore 사용하기

Firebase의 기본 설정이 필요하다면 아래 글을 참고하길 바란다. [React] 최신 Firebase에서 로그인 구현하기 React의 Firebase 라이브러리가 업데이트 되면서 함수를 호출하는 방식이 바뀌었다. 거의 필수적으로 사용하는 Auth, Firestore, RealTimeDatabase의 최신 구문을 알아보자. 간단히 바뀐점에 대해 설명하자면 muhly.tistory.com 앞서 Firestore와 Real time database의 차이점을 간단하게 짚고 넘어가자. 먼저, 요금제에 차이가 있다. Firestore는 입출력 횟수당 요금이 부과되지만 Real time database는 입출력 대역폭으로 요금이 부과된다. 또한 후자는 연결할 수 있는 유저의 제한이 있다. 아마도 동시접속자 인듯..

[React] 최신 Firebase에서 로그인 구현하기

React의 Firebase 라이브러리가 업데이트 되면서 함수를 호출하는 방식이 바뀌었다. 거의 필수적으로 사용하는 Auth, Firestore, RealTimeDatabase의 최신 구문을 알아보자. 간단히 바뀐점에 대해 설명하자면 Class내에 선언되어있던 함수들을 모두 전역으로 전언해서 사용할 수 있게 바뀌었다. 예를들어 Email login 함수가 FirebaseAuth 내부에 선언되어 있어 이를 FirebaseAuth.emailLogin()과 같은 형태로 사용했어야 했다면, 최신 버전에서는 emailLogin(FirebaseAuth, email, password)의 형태로 사용하게끔 변경되었다. 설치 yarn add firebase Firebase_config.js import { initial..

[CSS] scroll 영역의 크기를 100%로 만드는 방법

Bitfolio bitfolio.me 위 사이트를 Non-scrollable 디자인으로 개발하면서 겪은 에로 사항이다. 스크롤을 사용하지 않기 위해 상단의 Header와 Contents 영역의 height %로 지정해주었고 화면의 세로길이와 관련 없이 항상 꽉 차는 화면을 만들고자하였다. 당연히 오른쪽에 보이는 채팅창의 화면도 height가 %로 지정되어야했다. 채팅창은 스크롤을 위해 'overflow-y : scroll' 속성이 지정 되어야하는데, 해당 속성은 길이가 %로 지정되면 overflow 발생 시 원하는 크기대로 동작하지 않는 문제가 존재했다. height를 vh나 정확한 px 단위로 고정한 경우라면 예측한대로 동작한다. 하지만, 원하던 결과를 발견할 수 없었기에 검색을 거듭했다. 예상대로 o..