B41 TIL Blog

Firebase - Firestore Database 가져오기, 쓰기

들어가기 공식 문서에 너무 잘 정리가 되어있지만 완전 처음 사용할 때 헛갈렸던 부분이 있어서 정리 웹 버전 9 (modular) 기준 데이터 쓰기 (혹은 덮어쓰기) set() 메서드 setDoc()을 사용함. 문서가 있으면 덮어씌움 문서가 없다면 새로 생성 import { doc, setDoc } from "fireb...

'플래닝 포커'로 프로젝트 예상 시간 계산하기

들어가기 원티드 프리온보딩 코스에서 프로젝트를 진행하면서 정말 많은 회고를 했었다. 그 중에서 하나는 ‘왜 항상 밤을 새고 새벽 4시까지 작업하게 되는가?’였다. 우리는 시간을 줄이기 위해 여러 방법을 생각했었는데 그 중에 첫 번째는 가장 중요한 기능을 우선적 구현하는 MVP(Minimum Viable Product) 개발하기 였다. 그리고 각자...

Next.js - getStaticProps 정적 페이지 생성

정적 페이지 만들기 Next.js 프레임워크에서는 3가지 렌더링 방식이 있다. 정적 생성 SSR CSR 일반적으로 Next.js에서 데이터를 가져오는 메서드 없이 컴포넌트를 만들면 정적 페이지가 생성된다. 하지만 데이터를 가져와야 하는 경우 getStaticProps, getStat...

instanceof, DOM

들어가기 <M.MUITableRow hover={hover} {...(stickyTop !== undefined && { sx: { position: 'sticky', zIndex: 1, top: stickyTop, ...sx }, })} onClick={event =&gt...

Bubbling 방지하기와 주의점, Jest Unit Test

Bubbling 방지하기와 주의점 onClick 등의 이벤트에선 event.preventDefault()를 사용 하지만 지난 번에 정리한 것처럼 부모 엘리먼트에서 자식 엘리먼트로 상속되는 이벤트의 경우 event.stopPropagation()를 사용 (a태그 등) 하지만 event.stopPropagation()의 경우 위쪽으로 일어나...

debouncing & throttling

들어가기 지지난주에 했던 과제 구현 내용 중 Debounce와 자주 같이 소개되는 쓰로틀링과 연관해서 정리하면 좋을 것 같아서 이 주제로 다시 TIL을 남긴다. 쓰로틀링과 디바운싱 프로그래밍 기법 중 하나로 다음과 같은 상황에서 사용함. 쓰로틀링 마지막 함수가 호출된 후 일정 시간이 지나기 전에는 다...

Git Flow 모델

Git git tag 0.1 0.1 버전이라고 태그를 달아 놓는 방법 checkout할 때 b옵션 브랜치 생성과 동시에 체크아웃 git branch release/0.2 /0.2는 0.2버전을 준비하겠다고 달아 놓음. git merge...

repeat, TypeScript Narrowing,

String.prototype.repeat() 문자를 반복해서 새로운 문자열을 반환 '안녕'.repeat(3); //안녕안녕안녕 TypeScript Narrowing 타입을 좁혀 주어 더 안정적으로 코드를 체크할 수 있도록 하는 방법 공식 문서에 다음과 같은 예제가 있다. function padLeft(padding: ...

220224,220225 - ClipBoard, React-Router v6

React-Router v6에서 History를 사용하려면 useHistory, History가 useNavigate로 바뀜. 사용법 import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); navigate(`/${item.key}`); ...

CORS, 브라우저 렌더링, REST란?

#CORS (Cross Origin Resource Sharing) A 사이트에서 B사이트의 API로 정보를 요청할 때 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 것을 Cross Origin Resource Sharing, CORS라고 함. 프론트엔드 : 접근 방법, 도메인, 포트가 담겨 있는 Origin이라는 Header를 ...