본문 바로가기

💻 DEV63

[Github] GPG Keys 생성 & 등록하기 접근 (요약)이전 글에서 프로젝트 배포 + Tag 생성 + Release 작업을 수행하는데, GPG Keys 가 없어서 Tags 탭에 'verified'를 받지 못한 것을 해소하고자 한다. 따라서 GPG Keys를 생성하고 Github repo에 정상적으로 등록하는 절차를 기록한다. 1. GPG Key 생성 (1) gnupg 패키지 설치- (mac) ~$ brew install gnupg 2. GPG Key 생성 (2) Key 생성하기- ~$ gpg --full-generate-key- (1) what kind of key you want(키 종류) (2) keysize(키 길이)- (3) specify how long(유효기간) (4) name / email / comment (개인신원)- 생성.. 2025. 5. 15.

[Github] Releases Tags 생성 & Verified 인증 접근 (요약)진행 중인 프로젝트를 배포하는 단계(develop → master)에서 Release와 Tag 관리를 요했다. 적용한 내용을 기록한다.(추가로, Github repo의 Verified 인증까지) 1. 배포 준비- develop 브랜치 최신화- master 브랜치로 병합 2. 수동으로 Tag 달기 (Git Flow 없이)- 릴리즈 태그 생성 git tag -s v2.0.4 -m "Release v2.0.4"- 원격에 push (git push origin master / git push origin v2.0.4) 3. Github repo Release 메뉴- Draft a new release 4. Github Repo > Tag > Verified- '-s' 와 '-a'의 .. 2025. 5. 13.

[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.

[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 ··· 7 다음

티스토리툴바