칠구의 블로그

구축 계기지금까지 배포를 할 때 프론트엔드 빌드 파일을 배포 서버에 직접 업로드 하는 방식 인구식(수동) 방식을 사용하고 있었다.방식이 어렵지 않고 간단했지만 넘 구식이기도 했고 매번 빌드 후서버에 업로드 하는 과정이 번거로워서 자동화를 해야겠다고 마음을 먹었다목표 : 직접 업로드 → 자동 배포[기존]개발빌드FTP 접속서버 업로드확인[변경 후]개발빌드 및 배포 (npm run deploy)확인나는 솔직히 배포 및 운영에 대한 개념이 부족하기도 하고현재 서버가 사내망 환경에 있어 외부 CI 서버에 직접 접근이 어려워서비교적 간단하게 구현할 수 있는 SSH 기반 배포 방식 선택전체 파이프라인내 PC (Windows) │ deploy.ps1 ▼ Build (Vite) │ SSH..

나만의 "일정 알림 앱" 말 그대로 나의 일정을 알려주는 앱이다나는 매일매일 듀오링고, 캐시워크 골드 받기 등등을 하고4일, 5일마다 블로그 및 인스타 업로드를 하고 있는데까먹지 않고 일정을 챙기기 위해 나만의 "일정 알림 앱"을 만들어봤다1. 왜 만들었나 일반 캘린더 앱은 "특정 날짜에 한 번 알림"에는 강하다하지만 "오늘 시작해서 5일 뒤부터 매일 알려줘" 같은 패턴은 잘 안 맞는다"카카오톡"에도 이 기능이 있긴 하지만 나는 앱마다 메인 기능만 사용하는 것을좋아하기도 하고 내가 직접 만들어보고 싶어서 만들기로 결정!!2. 주요 기능기능설명N일 후 매일 알림발송 시작일 = 기준일 + N일, 이후 매일 지정 시각에 발송1회성 알림반복 없이 한 번만 울리는 일정달력 뷰일정별 색상, 지난 날짜 구분카테고리추..

AI 에이전트 시대, 정말 투자해야 하는 것은 Execution Layer다https://x.com/djfarrelly/status/2079950053628641759이 글에서 본 문장이다.AI 에이전트 생태계는 정말 빠르게 변하고 있다.불과 몇 년 전까지 사람이 코드를 직접 입력했는데이제는 입력은 물론 개발까지 싹 다해주고 있다.이처럼 AI 스택은 끊임없이 변경되고 변화하지만 ,변하지 않는 레이어가 하나 있다.바로 Execution Layer(실행 레이어) 다.실행 레이어를 일상생활 단어로 비유하자면감독이라고 할 수 있겠다.실행 레이어의 역할1. Workflow 관리예를 들어 음식을 만든다고 하면재료 사기 -> 재료 다듬기 -> 요리하기 -> 설거지하기이러한 과정을 거칠 것이다실행 레이어는 이렇듯 작업..

프리징 프론트 개발을 하던 도중 렌더링이 멈춰버리는프리징 현상을 경험했다이런 경우 보통 새로고침을 하거나 오류가 발생한 코드를 고치면 해결이 되었는데이번엔 그렇지 않고 새 창을 열고 다시 실행해야만 프리징이 풀렸다 프리징 원인 AI에게 프리징 원인을 물어보니 무한 루프가 발생해서 주로 발생한다고 한다.useEffect, useMemo 등 의존성 배열을 사용할 때 의존성 배열을 잘못 설정하였을 때무한 렌더링이 발생한다고 한다. 하지만 나의 문제는 다른 문제였는데 data가 없을 때 예외처리를 하지 않아서 발생했다...!! // 문제였던 코드 // 예외처리 코드 {data?.length === 0 ? ( ) : ( )}data가 없을 때 fallback 없이 상태 업데이트를 계속 시도..

리액트 쿼리란 요즘 프론트엔드 개발을 하다 보면 리액트 쿼리(TanStack Qurry)를 많이 사용한다.사용하는 다양한 이유가 있지만 내가 느끼는 가장 큰 장점은 캐싱이다. 리액트 쿼리의 캐싱리액트 쿼리 캐싱은 데이터를 효율적으로 관리하여 사용자경험을 부드럽게 만드는 기능이다.즉 한번 불러온 데이터를 다시 불러오지 않고 바로 불러와 사용자경험을 향상하는 것!!주요 개념staleTime : 캐시가 신선한 상태로 유지되는 시간cacheTime : 캐시가 메모리에 남아있는 시간refetchInterval : 주기적으로 데이터 갱신실제로 사용자 경험을 향상시키는 지 확인하기육안으로 보기엔 큰 차이가 없어 보여 개발자 모드 - 네트워크를 통해 실제로캐싱이 데이터를 효율적으로 관리하는 지 살펴보았다. 리액트 쿼..

스토리북이란프론트엔드 개발자가 UI 컴포넌트를독립적으로 개발·테스트·문서화할 수 있도록 도와주는 오픈소스 툴이다.여기서 주목해야 할 키워드는 독립 실행 환경, 문서화 기능, 디자인 협업장점전체 빌드하지 않고 컴포넌트 단위 개발 가능디자인 검증 용이테스트 자동화 연계 가능리액트에서 사용해 보기리액트에서 스토리북을 사용하기 위해선 다음과 같은 순서를 거치면 된다.설치 -> 2. 세팅 -> 3. 실행//Home.stories.tsximport type {Meta, StoryObj} from '@storybook/react';import Home from './Home';import {MemoryRouter} from 'react-router-dom';import {Provider} from 'react-red..

TypeDoc이란TypeScript 프로젝트를 위한 문서 생성기이다.타입과 주석을 기반으로 문서를 자동화해 주는 도구https://www.npmjs.com/package/typedocTypeDoc를 선택한 이유TypeDoc을 처음 알게 되고 비슷한 라이브러리 중 더 좋은 라이브러리가 있을지 찾아보았다npm 트렌드에서 DeepDocs와 JsDoc과 비교해보았다일단 다운로드량부터 훨씬 높은 모습게다가 225년 8월 기준 최근까지도 업데이트가 되며꾸준히 관리되고 있는 모습을 보고 TypeDoc을 선택했다. TypeDoc 사용 방법설치설정실행간단하게 요약하면 위의 3가지 방법대로 진행된다.설치npm install typedoc --save-dev설정최상단에 typedoc.json 파일을 생성 후typedoc.j..

📌문제Jest를 사용해 테스트 코드 작성 후 테스트를 진행하던 중 위의 사진과 같은 오류가 발생했다.보안 오류로 확인되지 않은 곳에서 로컬 스토리지를 사용할 수 없다는데처음엔 로컬 스토리지를 사용하는 코드 자체가 없어서 띠용했다 😅😅🔎원인jest.config.ts 파일// jest.config.tsmodule.exports = { testEnvironment: 'jsdom', ...};useState나 navigate 등등을 테스트 하려면 브라우저 환경에서 해야 하고그러려면 테스트 환경을 jsdom으로 진행해야 하는데 이때 명확한 URL을 지정해줘야 한다고 한다.지정해 주는 방법으로는 크게 2가지가 있는데첫 번째 jest.config.ts 파일 내 URL 지정해 주기// jest.config...

MSAMFA에 대해 알기 전 MSA에 대해 먼저 알아야 한다.MSA는 Microservices Architecture의 줄임말로애플리케이션을 느슨하게 결합된 서비스 모임으로 구조화하는서비스 지향 아키텍처 스타일의 일종인 소프트웨어 개발 기법이다.즉 각 서비스별로 특정 기능을 담당하고 독립적으로 배포 및 확장을 할 수 있다 뷔페를 예시로 들 수 있다.뷔페는 한식, 중식, 양식 등등의 코너가 있으며 그 코너를 담당하는 셰프가 있고손님도 원하는 코너에 가서 골라먹을 수 있는 것과 같다따라서 유연한 확장성 , 빠른 배포, 유지 보수의 용이 등과 같은 장점이 있어규모가 큰 프로젝트에서 많이 사용하는 아키텍처 스타일이라고 한다. MFAMFA는 Micro frontend Architecture의 줄임말로웹 개발을 위..

컨트리뷰션은 오픈소스 프로젝트에 참여하고 기여하는 활동을 의미한다. 그렇다면 어떻게 오픈소스 컨트리뷰션을 진행해야 하는지 알아보겠다. 📌절차 레포지토리 fork하기 나의 로컬 레포지토리로 clone 코드 컨벤션 코드 구현 , 수정 (주석 수정) 나의 레포 깃허브로 push 오픈 소스 레포에 PR 1. 레포지토리 fork 하기가장 먼저 내가 원하는 프로젝트를 찾아서나의 레포지토리에 fork하면 된다. 나의 경우 React 오픈 소스를 fork 했다. 2. 나의 로컬 레포지토리로 clonegit clone 명령어를 이용해서 나의 로컬 레포지토리에clone을 하면 된다. git remote -v 명령어를 했을 때해당 url이 잘 뜬다면 정상적으로 clone이 된 것이다. 3. 코드 ..