전체 글

0. Closure + HOC클로저: 이벤트가 발생할 때마다 이전의 상태를 기억해야 하기 때문에 클로저가 필요. 반환된 함수가 실행될 때마다 클로저를 사용하여 함수 실행여부를 결정할 수 있음고차 함수: 인자로 실행하려는 함수를 받아, 이 함수를 조건에 따라 실행하는 새로운 함수를 반환1. Debouncingtype Debounce = (...args: T) => void;function debounce(func: (...args: T) => void, delay: number): Debounce { let timer: ReturnType | null = null; return (...args: T) => { if (timer !== null) clearTimeout(timer); timer..

1.Q1: OOP는 Stateful 프로그램에는 적합하지만, Stateless 프로그램에는 적합도가 떨어지는 편인가?A1: ① Stateful과 Stateless의 개념 Stateful 프로그램은 내부에 상태(state)를 유지하며, 그 상태에 따라 프로그램의 동작이 달라집니다. 예를 들어, 은행 계좌의 잔액 정보를 저장하고 그에 따라 입출금 작업을 수행하는 시스템은 상태를 유지해야 합니다. 반면에 Stateless 프로그램은 내부에 상태를 유지하지 않습니다. 즉, 각 요청이나 함수 호출은 이전의 상태에 영향을 받지 않고 독립적으로 처리됩니다. 예를 들어, 단순한 계산기 프로그램은 입력값에 따라 결과를 반환하지만, 내부에 상태를 저장하지 않습니다.A1: ② 객체지향 프로그래밍(OOP)과 Stateful ..

1. 싱글톤 패턴이란? Zustand 는 싱글톤 패턴?싱글톤 패턴(Singleton Pattern)은 소프트웨어 디자인 패턴 중 하나로, 하나의 클래스에서 단 하나의 인스턴스만 생성되도록 보장하는 패턴입니다. 즉, 애플리케이션 전체에서 특정 클래스의 객체가 오직 하나만 존재하고, 어디서든 이 객체에 접근할 수 있는 전역적인 접근점을 제공합니다. 정의:싱글톤 패턴은 클래스의 인스턴스를 하나로 제한하고, 해당 인스턴스가 전역적으로 사용될 수 있도록 하는 디자인 패턴입니다. 동작 방식:• 클래스 내에 하나의 인스턴스만을 생성하며, 외부에서 해당 인스턴스를 직접 생성할 수 없도록 생성자를 private으로 설정합니다.• 클래스가 처음 호출되면 내부적으로 인스턴스를 생성하고, 이후부터는 동일한 인스턴스를 반환하여..

자주써도 헷갈리는 parallel routes 와 intercepting routes 로기본적인 modal 만드는 법을 정리해보려고 합니다. 1. Parallel RoutesParallel Routes 는 모달을 만들기 위한 기능은 아닙니다.공식문서에 따르면,  Parallel Routes를 사용하면 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링할 수 있습니다. 대시보드나 피드와 같이 앱의 매우 동적인 섹션에 유용합니다. 예를 들어 대시보드에서 Parallel Routes를 사용하여팀 페이지와 분석 페이지를 동시에 렌더링할 수 있습니다   라고 합니다.만드는 법은 아래처럼 @ 를 붙여서(슬롯이라고 합니다) 폴더를 생성하고 page.tsx 만들면 됩니다.app/ ├─ @moda..

git config --global --list 실행시뭔가 좀 꼬여가지고 대충 아래와 같이 나오는 상황이었는데credential.helper 를 지우고 싶었습니다...filter.lfs.clean=git-lfs clean -- %ffilter.lfs.smudge=git-lfs smudge -- %ffilter.lfs.process=git-lfs filter-processfilter.lfs.required=truecredential.helper=cachegit config --global --unset credential.helpergit credential-cache exit위 명령어는 글로벌 Git 설정에서 credential.helper 항목을 삭제하고 캐시된 인증 정보도 삭제합니다. macOS 키체..

supabase 하나의 프로젝트에 여러 배포사이트 OAuth 연결하기supabase 대시보드 > Authentication > URL Configuration 으로 이동Site URL 에는 대표 주소든 뭐든 아무거나 하나 입력하단 Redirect URLs 에 위 Site URL 과 다른, 원하는 주소를 주소/** 형식으로 입력OAuth provider login 코드에 아래 내용 추가const getURL = () => { let url = process?.env?.NEXT_PUBLIC_SITE_URL ?? // 변수명 이거 아니어도 되고 암튼 env에 있는 걸로 process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // vercel 에서 자동으로 생성 'http://..

여기 에 작성했던 내용중 부족한 내용이 있었습니다.컴포넌트와 값을 반환하는 커스텀 훅 사용시 주의사항을 다시 정리합니다.1. useCallback 사용리렌더링 통제가 어렵습니다.반환할 컴포넌트를 useCallback 처리합니다.function usePreferTheme({ mode }: UsePreferThemeProps) { const [selectedTheme, setSelectedTheme] = useState([]); const handleThemeChange = () => { // setSelectedTheme() 어쩌구 등등.. } // useCallback 사용! const PreferThemeToRender = useCallback(() => { ..

수파베이스 db 복제하고 싶을때(단 backup.gz 파일 있어야함)0. psql 설치brew install libpqecho 'export PATH="/usr/local/opt/libpq/bin:$PATH"' >> ~/.zshrcsource ~/.zshrc1. zip 해제gunzip path/to/your/file/db_dump.backup.gz2. psql 명령어로 백업 파일 복원하기psql -h 호스트명 -p 포트명 -U 사용자명 -d 디비이름 -f path/to/your/file/db_dump.backup• -h: 호스트 이름 (Supabase에서 제공하는 데이터베이스 호스트)• -p: 포트 번호• -U: PostgreSQL 사용자 이름• -d: 대상 데이터베이스 이름• -f: 복원할 백업 파일의..

useReducer는 React에서 상태 관리를 위해 사용하는 훅 중 하나로, 복잡한 상태 로직을 보다 체계적으로 관리하고 싶을 때 유용합니다. 특히 상태 변경 로직이 여러 단계로 나누어져 있거나, 상태 업데이트가 명확한 액션에 의해 이루어져야 할 때 사용됩니다. Redux의 상태 관리 방식과 유사하게 리듀서 패턴을 사용하여 상태를 업데이트합니다.useReducer의 기본 구조useReducer는 세 가지 요소를 인자로 받습니다:리듀서 함수: 현재 상태와 액션을 받아서 새로운 상태를 반환하는 함수입니다.초기 상태: 상태의 초기 값입니다.초기화 함수 (선택적): 초기 상태를 더 복잡한 방식으로 설정해야 할 경우에 사용할 수 있습니다.useReducer는 dispatch 함수를 반환하며, 이 dispatch..

싱글 스레드인 자바스크립트가 어떻게 비동기를 구현합니까?네, 좋은 질문입니다! JavaScript는 싱글 스레드(single-threaded) 언어입니다. 즉, 한 번에 하나의 작업만 처리할 수 있는 실행 스레드를 가지고 있습니다. 그럼에도 불구하고, 비동기 작업을 통해 마치 멀티스레드처럼 여러 작업이 동시에 실행되는 것처럼 보일 수 있습니다. 이는 JavaScript의 런타임 환경, 특히 이벤트 루프(Event Loop)와 콜백 큐(Callback Queue) 덕분입니다.자바스크립트의 비동기 작업 처리는 자바스크립트 엔진(V8 엔진 등)과 이를 실행하는 런타임 환경(브라우저, Node.js 등)의 구조에 의해 가능해집니다.1. 싱글 스레드와 비동기 처리JavaScript는 기본적으로 싱글 스레드로 동작..