전체 글

📌 채팅 구현시 구글 로그인된 정보값을 가져오지 못하는 문제 [구글 로그인시] 채팅 프로필에 구글 로그인시에는 그냥 디폴트이미지만 불러오는 이슈가 발생했다. 🥹 [이메일로 회원가입시] 이메일로 회원가입시에는 마이페이지에서 변경한 이미지가 실시간으로 잘 들어오지만 구글 로그인은 정보값을 가져오지 못했다. 🧐 해결 과정 알고 보니 구글 로그인한 정보값은 파이어베이스의 users collection에 들어가지 않아서 생긴 이슈였다. [ handleGoogleSignIn.tsx ] import classNames from 'classnames'; import { auth } from '@/firebase/auth'; import { db } from '@/firebase/firestore'; import cla..

프로필이미지가 다 똑같이 나오는 이슈가 발생..! 이를 해결하기 위해서 다음과 같이 해결하였습니다. [ Firebase를 사용하여 채팅 메시지를 표시하는 컴포넌트 ] import { useState, useEffect } from 'react'; import { useRecoilValue } from 'recoil'; import classNames from 'classnames'; import classes from './Message.module.scss'; import { authImagState } from '@/@recoil/authImgState'; import defaultAvatar from '/public/assets/defaultAvatars.svg'; import { collectio..

🧐 Redux의 3원칙 1. Single source of truth (진실은 하나의 근원으로부터) 애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장됩니다. 애플리케이션의 모든 상태는 하나의 store에 저장되며, 이 store는 읽기 전용입니다. 즉, 애플리케이션의 상태를 변경하려면 반드시 action을 dispatch하여 store에서 처리해야 합니다. 이렇게 함으로써, 애플리케이션 전체에서 일관된 상태를 유지할 수 있습니다. 2. State is read-only (상태는 읽기 전용) 상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법뿐입니다. Redux에서는 상태(state)가 읽기 전용(read-only)이어야 합니다. 이는 R..

⭐️ Loop 함수import { isFunction } from "./typeOf.js"; import { throwTypeError } from "./throwError.js"; export function loop(callback, repeatCount = 10) { if (!isFunction(callback)) { throwTypeError("callback 인자 유형은 함수여야 합니다."); } Array(repeatCount) .fill(null) .forEach((_, i) => callback(i)); }loop 함수는 반복 횟수와 콜백 함수를 인자로 받아서, 주어진 횟수만큼 콜백 함수를 반복 호출하는 함수입니다. 만약 인자로 전달된 콜백 함수가 함수 유형인지 체크하고, 아니라면 예외를 ..

⭐️ Memoization(메모이제이션) 패턴을 구현한 memo 함수import { isFunction, isString } from "./typeOf.js"; import { throwTypeError } from "./throwError.js"; export const memo = (() => { const cache = {}; return (memoized, key, showLog = false) => { if (!isFunction(memoized)) { throwTypeError("memoized 인자는 함수 유형이여야 합니다"); } if (!isString(key)) { throwTypeError("key 인자는 문자 유형이여야 합니다"); } if (cache[key]) { return c..

⭐️ throttle 유틸리티 함수 export const throttle = (callback, delay = 300) => { let isThrottling = false; return (...args) => { if (!isThrottling) { callback.apply(this, args); isThrottling = true; setTimeout(() => (isThrottling = false), delay); } }; }; //! Test // window.addEventListener( // "mousemove", // throttle(() => { // console.log("throttling"); // }, 300) // ); 위의 함수는 지정된 시간 간격(delay) 동안 여러 ..

⭐️ 객체나 배열의 각 요소를 처리하는 유틸리티 함수객체 또는 배열에서 각 요소를 반복적으로 처리하는 each 함수를 제공하며, 유효하지 않은 인자가 전달되었을 경우 예외를 발생시키는 재사용 가능한 함수import { throwTypeError } from "./throwError.js"; import { isArray, isObject, isFunction } from "./typeOf.js"; /** * * @param {Array | Object} arrayOrObject 순환할 객체(배열 또는 객체) * @param {Function} callback 반복 순환 처리할 함수 * @returns {Array} 집합 객체 반환 */ export function each(arrayOrObject, ca..

⭐️ 에러 유틸리티 함수 export const throwError = (message) => { throw new Error(message); }; export const throwSyntaxError = (message) => { throw new SyntaxError(message); }; export const throwReferenceError = (message) => { throw new ReferenceError(message); }; export const throwTypeError = (message) => { throw new TypeError(message); }; Error, SyntaxError, ReferenceError, TypeError 객체를 생성하고, 이들 객체에 인수로..