✅ 오늘의 목표 GitHub 조직의 레포지토리와 멤버 목록 불러오기 선택한 레포지토리의 커밋 내역 가져오기 요일별 커밋 수 계산 및 시각화 🧩 문제 상황 / 배경 GitHub 조직의 협업 기여도를 주간 단위로 한눈에 파악하기 어려움 단순 커밋 수만 보여주는 방식은 누가 언제 활동했는지 파악하기 힘들었음 협업 활성화와...

✅ 오늘의 목표 GitHub 조직 API 연동을 위한 React Query 커스텀 훅 작성 사용자 username(localStorage) 기반으로 조직 리스트 불러오기 사이드바 내 반복 코드 제거 및 동적 렌더링 🧩 문제 상황 / 배경 다른 팀원이 Github 로그인 기능을 구현한 상태였고, 사용자 인증은 JWT 기반으로...

✅ 오늘의 목표 React Query 전역 설정 및 Devtools 연결 throttle 유틸 함수 작성 React Router 구성 (라우터 트리, 레이아웃 적용) 사이드바 구현 🧩 문제 상황 / 배경 프로젝트 초기 세팅 중, 다음과 같은 상황이 있었습니다: 서버 상태를 효율적으로 관리하기 위해 React Q...

🔄 구성 흐름 [프론트엔드] 프론트엔드에서 입력값 유효성 검사를 통해 잘못된 값은 서버에 보내지 않음 [백엔드] 백엔드는 Express로 서버를 구성하고, CORS 문제 해결 [데이터베이스] MongoDB에 Mongoose를 통해 사용자 정보를 저장 1. 프론트엔드 (React) ✅ 정규표현식 이용한 유효성 검사 정규 표현식은 ...

TanStack Query 란? 서버 상태(Server State) 관리를 도와주는 라이브러리 서버로부터 데이터를 가져오기(fetch), 캐싱(cache), 자동 갱신(refetch) 등을 효율적으로 처리할 수 있게 해준다 주요 기능 데이터 가져오기 및 캐싱 동일 요청의 중복 제거 무한 스크롤, 페이지네이션 등의 성...

🔗 사용 API: OpenWeatherMap OpenWeatherMap은 전 세계 날씨 정보를 제공하는 무료 API 이다 ! ✅ API Key 보안 관리 .env 파일 생성 API Key는 외부에 노출되면 안 되는 민감 정보 → .env 파일에 저장해서 코드에서 분리 관리 VITE_WEATHER_API_KEY = 8b7f7d685453d0...

React Redux Quick Start (Redux Toolkit) React-Redux 🔸 Redux란 ? Redux는 애플리케이션의 상태(state)를 예측 가능하게 관리하는 라이브러리. React와 함께 쓰면 전역 상태 관리를 더 효율적으로 할 수 있음. 1. Install Redux Toolkit and React Redux...

프로그래머스 - 미로탈출 문제 파악 미로 탈출 벽(x), 통로(이동 O) 루트 : 출발 지점 -> … -> 레버가 있는 칸으로 이동 -> 레버 열기 -> 미로 빠져나가는 문까지 이동 레버를 당기지 않으면 출구가 있는 칸을 지나갈 수 있음 📌 백준 1...

URL과 params에 대한 핵심 내용은 따로 포스팅 해두었다 ! URL? URLSearchParams? useSearchParams? Shop 기능 상품 목록 페이지 카테고리 필터링 정렬 기능 페이지네이션 URL Query 파라미터를 활용한 상태 관리 ?category=new&_sort=price&_page...

URL (Uniform Resource Locators) 웹에서 HTML 페이지, CSS 문서, 이미지 등 리소스의 위치를 나타내는 주소를 뜻한다. 쉽게 말해서, URL은 웹 페이지를 찾기위한 주소를 말한다. 🔸 URL의 구조 Scheme scheme는 브라우저가 자원을 요청하기 위해 사용해야 하는 protocol을 나타낸다. 일반적으로...