gggimmin 개발 블로그 gggimmin 개발 블로그

만약 내가 SNS 서비스를 만들고 있다고 생각해보면올라오는 게시글의 등록, 수정, 삭제 상태를 실시간으로 확인할 수 있다. 과연 그 과정은 어떻게 이루어지는걸까? firebase 에는 onSnapshot() 함수를 통해 이뤄진다.onSnapshot 은 특정 문서나 컬렉션, 쿼리 이벤트를 감지하여 realtime 으로 이벤트 콜백 함수를 실행한다.이를 통해 우리는 db 에 들어온 쿼리를 새로고침 없이 화면에 반영할 수 있는 것이다. const postsQuery = query( collection(db, "posts") ); onSnapshot(postsQuery, (snapshot)=>{ const posts = snapshot.docs.map((doc) => { const {..

Firebase 로 로그인 및 회원가입 기능을 구현하면서error 에 대한 처리를 하던 중, 사용자에게 에러가 보여질 때 Firebase: Error (auth/email-already-in-use) 이렇게 뜨니 나는 어떤 문제일지 알아볼 수 있지만사용자들이기 보기엔 정말 좋지 않은 에러 문구라고 생각했기에각각의 error.code 에 대해 한글로 정의해야겠다고 생각했다. / error-message.tsexport const errorMessages: Record = { "auth/email-already-in-use": "이미 사용 중인 이메일입니다.", "auth/invalid-email": "유효하지 않은 이메일 형식입니다.", "auth/weak-password": "비밀번호가 너무 약합..

authStateReady() 함수는 Firebase Authentication에서 제공하는 비동기 함수로,사용자의 인증 상태가 변할 때까지 기다렸다가 결과를 반환한다. 즉, 사용자가 로그인되어 있는지, 어떤 사용자가 로그인되어 있는지 확인하는데 사용된다. 이 함수는 프로미스를 반환하며, 프로미스가 성공적으로 해결되면 현재 로그인된 사용자에 대한 정보를 제공하고,실패하면 오류를 반환해준다.  사용할 수 있는 방법 예시 ✅ 사용자 맞춤형 UI 제공: 로그인 여부에 따라 UI를 다르게 표시하거나 기능을 제한해야 할 때✅ 인증이 필요한 데이터 액세스: 인증되지 않은 사용자가 민감한 데이터에 액세스하지 못하게 제어할 때✅ 실시간 사용자 상태 추척: 로그인, 로그아웃, 사용자 정보 변경 등 사용자 인증 상태 변화..

기존에 새 프로젝트를 시작하면 항상 reset.css 폴더를 만들어css의 디자인을 reset 해주는 코드를 가져와 본문에 적용시키고페이지를 만들기 시작했다. 하지만 이번에 강의를 들으면서 더욱 편하고, 깔끔하게페이지에 reset css를 적용하는 방법을 알게 되었다. import reset from "styled-reset";import { createGlobalStyle } from "styled-components"; 우선 npm i or yarn i 를 통해styled-reset, styled-components 를 설치해준다. styled-components는 이미 예전에 많이 사용해봤기에 따로 설명은 안하겠다.https://gggimmin-development-technology.tistory..

리액트를 다시 복습하는 과정에서내가 알던 React Router 방식인 안에, 안에, .. 생략return ( } /> } />  이 방식을 사용하던 도중 계속되는 에러를 만났다.원인을 찾던 도중 React Router 공식 문서를 통해 사용 방법이 업데이트 되었다는 것을 알았다. 가장 최신에 업데이트된 react-router-dom 6.4 버전부터는 업데이트가 되어BrowserRouter 사용이 불가능 했다. https://reactrouter.com/en/6.23.0/routers/create-browser-router참고 ⬇️⬇️⬇️ createBrowserRouter v6.23.0 | React Router reactrouter.com 새롭게 변경 된 방식을 쉽게 알아보자면이전에 안에,..

이번 리액트 복습 기간을 통해 얻어가는 새로운 지식들이 많았다.이번에 내가 기록할 지식은 React + CSS Modules 방식이다. 캠프를 통해 처음 배운 React + CSS 방식은 styled-components 사용 방식이다.https://gggimmin-development-technology.tistory.com/27 [ React ] CSS-in-JS 방식을 통한 Component 꾸미기styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지이다. vsc에서 이 확장 프로그램을 설치하면 styled-components 안에서 스타일 코드를 편하게 작성 가능gggimmin-development-technology.tistory.c..

function App() { const [counter, setCounter] = React.useState(0); const onClick = () => { //setCounter(counter + 1); setCounter((current) => current + 1); }; return ( Total Clicks : {counter} Click me! ); } ReactDOM.render(, root); 위 컴포넌트는 단순하게 Click me! 버튼을 누르면 Total Clicks 의 카운터가 올라가는 간단한 구조이다. 일반적인 카운터의 상태 변경은 setCounter(counter + 1) 위 코드를 통해 카운터의 상태를 업데이트 할 수 있다. 하지만 setState() 는 즉각적인 명령이 아니..

기본적으로 form 은 submit 을 할 때 브라우저는 페이지를 새로고침 하도록 되어있다. function onLoginSubmit(event) { event.preventDefault(); } 이러한 브라우저의 기본 동작을 우리는 preventDefault() 함수를 통하여 막을 수 있다. 이 preventDefault() 함수는 어디서,어떻게 호출이 가능한걸까? loginForm.addEventListner("submit", onLoginSubmit); 위 코드는 form 의 submit 이벤트가 발생한다면, onLoginSubmit 함수를 실행시킨다는 코드이다. 자바스크립트는 onLoginSubmit 함수를 호출 시 인자를 담아서 호출한다. 해당 인자는 event object가 담긴 정보들이다. ..