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

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

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() 는 즉각적인 명령이 아니..

✅ unknown // unknown type let a : unknown let b = a + 1 //error : a 값이 unknown 이므로 에러 발생 // unknown 상태의 a 값이 number일 경우, string일 경우를 지정해서 해결 if (type of a === "number") { let b = a + 1 } if (type of a === "string") { let b = a.toUpperCase() } ✅ void ( 아무것도 return 하지 않는 함수에서 반환 자료형 ) // void function hello() { console.log("x") } const a = hello() a.toUpperCase() //error : a는 아무것도 return 하지 않는 함수 ..

✅ readonly 속성 // readonly 속성 사용 type Person = { readonly name : string age? : number } const personMaker = (name : string): Person => ({name}) const jude = personMaker("jude") jude.name = "erling" // error : readonly 속성의 name 값을 변경 불가 // readonly 속성 사용 const numbers : readonly number[] = [1, 2, 3, 4] numbers.push(5) //error : readonly 속성의 numbers 에 새로운 number 추가 불가능 readonly 속성이 있으면 최초 선언 이후 수정이..