분류 전체보기147 zustnad 개별 구독 / store 구독 모달 상태 관리 코드를 리팩토링하다가, zustand에서 store를 어떻게 구독하는 게 더 좋은지 고민하는 과정이 있었다. 공식 문서에도 있는 내용이었으나 구현에 급급해서 공부가 소홀했다 // stores/modalStore.tsimport create from 'zustand';interface ModalState { isOpen: boolean; open: () => void; close: () => void;}export const useModalStore = create(set => ({ isOpen: false, open: () => set({ isOpen: true }), close: () => set({ isOpen: false }),}));이건 모달 상태를 간단하게 zusta.. 2025. 6. 16. CodeRabbit ai 사용기 요즘 기존에 진행했던 팀 프로젝트를 디자이너와 둘이 개선 진행중인데 깃서핑하다보니 코드래빗 ai를 발견했고, 코드 리뷰에 목말라있던 참에 써보기로 했습니다(잘 하고있는건지 뭔지 점점 모르겠고 가끔 오타가 등록되어도 지적해 줄 사람이 없다는 게 좀 외로웠음) https://www.coderabbit.ai/ AI Code Reviews | CodeRabbit | Try for FreeMost advanced AI code reviews that catches 95%+ bugs. Free your devs to ship code faster.www.coderabbit.ai 사용법은 코드래빗 ai 공홈에서 로그인 후 깃헙과 연동해서 사용할 레포 선택 및 간략한 설정만 해주면 됩니다 # yaml-langua.. 2025. 6. 16. 왜 내 모달은 리사이즈 때마다 닫힐까 - 리사이징,상태 초기화 문제와 단일 트리 + CSS 리팩터링 과정 모달 - 모바일 풀 화면, 데스크탑 모달 -> 반응형 구현 중 생긴 문제 해결 과정 기록문제 : 리사이징 발생할 때 모달 open 상태 관리하는 state가 계속해서 초기화하는 문제 발생 - 시도 1. 리렌더링 영향을 받지 않기 위해, ref 와 같이 사용해서 open, close 이벤트 발생때에만 ref와 state가 동기화되도록 수정 // refconst modalOpenRef = useRef(false);// state (초기값을 ref 값으로 지정)const [isCouponModalOpen, setIsCouponModalOpen] = useState(modalOpenRef.currunt);// open, close 함수 - ref.current 변경, setState 동시 진행 con.. 2025. 6. 11. 자료구조 - 해시테이블 ⚙️ 해시 테이블 및 함수 정의📌 해시테이블이란? 키/값 대응으로 이루어진 표 형태의 자료구조 시간 복잡도: 검색, 삽입, 삭제 → O(1), 충돌 발생 시 → O(N) 활용 분야: 캐시, 중복 제거, 키-값 저장, 사전 등예시: 리눅스 커널 내부 구현된 해시 테이블🔐 해시함수란? 임의 길이의 입력 → 고정 길이 해시값으로 변환하는 단방향 함수 동일 입력 → 항상 동일 출력, 역변환 어려움🚨 해시 충돌 (Hash Collision) 서로 다른 키가 같은 해시값을 가질 때예시: SHA-1 충돌 사례shattered-1.pdf와 shattered-2.pdf는 다른 파일이지만, SHA-1 해시값이 동일🛠️ 충돌 해결 방법1. 체이닝 (Chaining) 같은 인덱스에 연결 리스트로 값 저장 .. 2025. 6. 5. 자료구조 - 스택과 큐 스택 : 후입 선출 자료구조 - push : 스택에 데이터를 저장하는 연산 - pop : 스택에서 데이터를 빼내는 연산 유용하게 사용되는 상황 - 최근에 임시 저장한 데이터를 가장 먼저 활용해야할 때 - 뒤로가기 기능 등 중첩되어 실행되는 함수의 매개변수function bar(y){ return y + 2}function foo(x){ bar(2); return x + 1;}foo(1); - 최근에 호출된 함수의 매개변수가 가장 먼저 활용되고, 가장 먼저 메모리에서 삭제 -> 후입선출 자료구조인 스택이 가장 적합하다 사이트 방문시마다 URL push, 뒤로가기 버튼 클릭시 URL pop 큐 : 선입선출, 한 쪽으로 데이터 삽입 - 다른 한 쪽으로 데이터 삭제 큐 : 선입선출.. 2025. 5. 24. JS 선형 검색 - linear search 구현 // 선형 검색 - linear search// 특정 요소를 찾기 위해 처음부터 끝까지 순차적으로 요소를 하나씩 비교하는 방식// 시간 복잡도 : O(N)// 문제 : 배열에서 주어진 값을 찾아, 그 인덱스를 반환하시오// 값이 없으면 -1 반환/** * * @param {배열} arr * @param {찾을 값} target * @returns target의 index * @returns */function linearSearch(arr, target) { let steps = 0; let result = 0; for (let i = 0; i { const result = linearSearch(testCase.arr, testCase.target); const passed = res.. 2025. 5. 22. 이전 1 2 3 4 ··· 25 다음
