분류 전체보기209 [ReactQuery] (4) ReactQuery - useIsFetching (feat. Nextjs) 접근 (요약)앱에서 isLoading 과 isFetching만을 사용해 컴포넌트마다 개별 Loading Indicator만을 활용했다면,useIsFetching에 대해서 알게 되고 더 큰 앱에 중앙 집중식 Loading Indicator를 사용해보기 위해 정리를 남긴다. 1. isLoading & isFetching & useIsFetching 2. useIsFetching 적용하기 3. 적용 TEST방법 1. isLoading & isFetching & useIsFetching# useIsFetching- 각 컴포넌트에 대해 "개별 로딩 인디케이터 (Loading Indicator)" 를 사용하는 대신- "중앙 집중식 로딩 인디케이터"를 사용하도록 앱을 업데이트 할 예정!>> useIsF.. 2025. 3. 19. [QT 매일성경] 250318(화) 허리에 띠를 띠고 등불을 켜고 (누가복음(Luke)12:35 - 48) 🍀 누가복음(Luke)12:35 - 4835 허리에 띠를 띠고 등불을 켜고 서 있으라36 너희는 마치 그 주인이 혼인 집에서 돌아와 문을 두드리면 곧 열어 주려고 기다리는 사람과 같이 되라37 주인이 와서 깨어 있는 것을 보면 그 종들은 복이 있으리로다 내가 진실로 너희에게 이르노니 주인이 띠를 띠고 그 종들을 자리에 앉히고 나아와 수종들리라38 주인이 혹 이경에나 혹 삼경에 이르러서도 종들이 그같이 하고 있는 것을 보면 그 종들은 복이 있으리로다39 너희도 아는 바니 집 주인이 만일 도둑이 어느 때에 이를 줄 알았더라면 그 집을 뚫지 못하게 하였으리라40 그러므로 너희도 준비하고 있으라 생각하지 않은 때에 인자가 오리라 하시니라41 베드로가 여짜오되 주께서 이 비유를 우리에게 하심이니이까 모든 사람.. 2025. 3. 18. [QT 매일성경] 250317(월) 어디에 보물을 쌓고 있는가? (누가복음(Luke)12:13 - 34) 누가복음(Luke)12:13 - 34 13 무리 중에 한 사람이 이르되 선생님 내 형을 명하여 유산을 나와 나누게 하소서 하니 14 이르시되 이 사람아 누가 나를 너희의 재판장이나 물건 나누는 자로 세웠느냐 하시고 15 그들에게 이르시되 삼가 모든 탐심을 물리치라 사람의 생명이 그 소유의 넉넉한 데 있지 아니하니라 하시고 16 또 비유로 그들에게 말하여 이르시되 한 부자가 그 밭에 소출이 풍성하매 17 심중에 생각하여 이르되 내가 곡식 쌓아 둘 곳이 없으니 어찌할까 하고 18 또 이르되 내가 이렇게 하리라 내 곳간을 헐고 더 크게 짓고 내 모든 곡식과 물건을 거기 쌓아 두리라 .. 2025. 3. 17. [ReactQuery] (1) ReactQuery 란 무엇인가? 접근 (요약)reactQuery의 개요를 작성한다. 1. Client State vs Server State 1. Client State - 웹 브라우저 세션과 관련된 모든 정보 의미 (단순히 사용자의 상태) (ex_ 사용자가 원하는 언어를 선택하거나 밝은/어두운 테마를 선택하는 등의 서버에서 일어나는 일과는 아무 관련이 없는 것)2. Server State- 서버 상태는 서버에 저장되지만 클라이언트에 표시하는 데 필요한 데이터 (ex_데이터베이스 등 블로그 게시물 데이터)- 데이터는 여러 클라이언트에 표시되어야 하기에 서버에 저장됨 2. React Query 특징 1. React Query는 클라이언트에서 서버 데이터 캐시를 관리 React Code ↔ React Query Cache ↔ S.. 2025. 3. 15. [ReactQuery] (3) ReactQuery - customHooks (feat. Nextjs) 접근 (요약)reactQuery를 활용해 custom hooks을 작성한다. (queryKey와 queryFn) 1. queryKey Object (queryKey Namespace) 패턴으로 정리- queryKey : 데이터 요청을 식별하는 중요한 역할- 쿼리 키 네임스페이스 패턴을 활용한 효율적 데이터 관리- ./react-query/index.ts 2. hooks 폴더 내에 customHooks 작성 => useExampleQuery.ts- app/hooks/queries/useExampleQuery.ts- app/hooks/queries/mutation/useExampleMutation.ts 3. useExampleQuery.ts (CustomHooks 코드 형식)- Data Fet.. 2025. 3. 15. [ReactQuery] (2) Nextjs 프로젝트에 ReactQuery 적용 접근 (요약)Next.js 를 통해 개발을 진행하는데, Web App의 서버 상태를 관리하는 라이브러리가 필수적이다.공식 웹사이트를 확인 해보면, npm 에서의 누적 다운로드 수가 18억에 육박하고 실시간으로 수치가 상승하는 것을 보기만 해도얼마나 핫한 기술인지 확인이 가능하다. 이를 프로젝트에 도입하여 치열하게 연구를 해보고자 한다.(예전에 개발 때에 드문드문 활용했던 것 그 이상으로 친숙해지고자 한다) 1. ReactQuery 설치- npm install @tanstack/react-query- npm install @tanstack/react-query-devtools 2. ESLint Plugin 설치- npm i -D @tanstack/eslint-plugin-query- 기타 설정 (... 2025. 3. 14. [Github Actions] 프로젝트에 github Actions 적용 접근 (요약)업무에서 Web Service 배포 방식에 변화(→ Github Actions)를 도모했다.이러한 변화를 개인 프로젝트에도 적용하고자 Nextjs 프로젝트 + Github Action을 적용한 샘플을 기록한다.(각 단계를 Step별로 작성해본다.) 0. Create Project (Terminal) → 하단에 게시글 첨부- 경로 이동- Project App 생성- Open Project & Branch 변경 (main → master)- 4. 원격저장소 생성(Web) & Push (로컬 → 원격저장소) 1. Github Action 적용- (Web) Actions > set up a workflow yourself- 방법 1. Github Action 적용1. (Web) Ac.. 2025. 3. 10. [Github] 프로젝트 생성 (로컬 저장소에서 원격 저장소 Push) 접근 (요약)Project 생성시, Github Web에서 Repo를 만들어 Pull을 받고 프로젝트를 진행하는 경우와 더불어,이미 코드 작성이 진행된 상황의 형상(로컬 저장소)을 원격저장소에 Push 하고자 할 때에 흐름을 작성한다. 1. Create Project (Terminal)- 경로 이동- Project App 생성- Open Project & Branch 변경 (main → master)- 4. 원격저장소 생성(Web) & Push (로컬 → 원격저장소) 방법 1. Create Project (Terminal) 1. Project 생성할 경로로 이동 (./WebStormProjects) 2. Next.js App 생성 $ npx create-next-app@latest 3. Open.. 2025. 3. 10. [ssh-key] 다중 등록으로 인한 인식 오류 해결 접근 (요약)개인, 업무용 2개의 github ssh-key를 가지고, 등록한 채 webStorm으로 git push를 하고자 했으나 우선순위에 따라 원하는 ssh-key가 인식되지 않는 문제에 봉착했다. 이때에 해결하는 과정을 담는다. 1. Push, 오류 2. 현재 연결된 Git 계정 확인 (확인1) 3. 원격 저장소 URL 확인 (확인2) 4. SSH키를 사용한 접근 설정 (확인3) 5. SSH키 등록 (로컬 내 경로 > 파일명 확인) 6. 등록되어 운용 중인 ssh-key 확인 7. 모든 SSH 키 초기화 후, 올바른 키만 추가 5. SSH키 등록 (로컬 내 경로 > 파일명 확인) 5. SSH키 등록 (로컬 내 경로 > 파일명 확인)방법 1. Push, 오류ER.. 2025. 3. 7. 이전 1 2 3 4 ··· 24 다음
