메로그

요즘 웹 개발에서 가장 중요한 것은 데이터 패칭에 대한 전략을 어떻게 가져갈 것인가 입니다.이제 그 중에서 React 를 쓴다고 하면, React Query, SWR 과 같은 도구를 사용할 것 입니다.또한, 코드 스플리팅을 위해서 Suspense 를 사용하게 될텐데, 이제 그러면 lazy + Suspense + fetch (react query, swr) 이렇게 사용하면서 언제 로딩을 어떻게 넣고 어떻게 최적화하고 그러는 고민이 발생하게 됩니다. 그래서 적절한 사용 시나리오를 정리하고 얘기해보겠습니다.React Query 로딩 전략 비교가장 기본적인 방법으로 로딩, 에러 상태를 컴포넌트 레벨에서 제어하며, 각 컴포넌트 별 로딩 UI 적용이 가능함.const UserProfile = ({ userId }:..

신규 프로젝트의 경우 코드 스타일과 공통 기능에 대한 설계를 미리 작성하여 모노레포를 선도입해서 사용해왔습니다. 하지만 이번에는 조금 다른 상황이었습니다. 기존에 멀티 프로젝트로 나뉘어 운영되던 서비스들을 모노레포 구조로 변경하는 작업을 진행했고, 그 과정과 결과를 공유하고자 합니다.멀티 프로젝트를 사용했던 이유초기에는 개발 담당자들이 각자의 서비스를 개발하다 보니 자연스럽게 각각의 레포지토리에서 관리를 진행했습니다. 당시에는 이것이 가장 자연스러운 선택이었죠.하지만 프로젝트가 커지고 작업을 진행하다보니 불편해지기 시작했습니다. 무엇보다 관리차원에서 너무 힘들어지기 시작했습니다. 1. 일관성 부족프로젝트마다 다른 코드 컨벤션각기 다른 코드 패턴매번 새롭게 디자인 시스템을 재도입해야 하는 번거로움2. 관리..

현재 사용하는 대부분의 서비스는 EKS, ECS 기반으로 운영되고 있습니다. 하지만 간단한 프로젝트를 진행할 때는 컨테이너 기반 설정보다 빠른 환경 세팅이 중요한 경우가 많습니다. 이럴 때는 Elastic Beanstalk(EB) 을 활용하는 편이 훨씬 간단하고 효율적입니다.특히, CI/CD를 구축할 때 ECS보다 EB가 훨씬 빠르게 배포 파이프라인을 구성할 수 있습니다.이번 프로젝트의 목표가 간단한 프로젝트 진행 후, 빠르게 배포하는 것이었기 때문에 EB를 선택했습니다.따라서 비슷한 상황이라면 EB + GitHub Actions 조합을 추천드립니다. 우선, ASW ElasticBeanstalk 에 가서 애플리케이션을 생성해줍니다. 다음과 같이 셋팅하고 애플리케이션 코드는 올려도 되고 올리지 않아도 됩니..

기존 모노레포 프로젝트에 간단한 조회용 기능을 추가하려고 하는데, 별도의 RDB를 새로 쓰기는 부담스러워서 Supabase (severless DB)를 활용해 간단하게 API를 구축하기로 했다. 우선 Supabase 프로젝트를 생성하자프로젝트 생성을 눌러서 프로젝트를 하나 만들어주자. 아래 name, password 그리고 기존에 만들어둔 organization 이 있으면 넣어주면 됨. RLS 사용 여부의 경우, 일단 기본 보안정책으로 enable 상태로 넘어가자. 추후 policy 를 수정할 수 있다. 생성 후, project url, anon key 를 가져와서 supabase 객체를 생성하면 되는데, 혹시 기억 못해도 프로젝트 셋팅 쪽으로 오면 다 볼 수 있으니 걱정하지 말자. 사이드 메뉴에 Tab..

최근 Figma MCP + Cursor 를 이용한 조합이 프론트엔드, 디자이너 쪽에서 핫한 주제였습니다.우리 팀은 vscode 에서도 mcp 를 쓸 수 있는 기능이 나와서 vscode + 깃허브 코파일럿 + Figma MCP 를 결합하는 가이드 제공드립니다.1. vscode 최신버전 + 깃허브 코파일럿 셋팅2. figma mcp 서버 활성화 (참고: 피그마 dev 버전에서 사용해야함.)Figma 데스크톱 앱을 열고 최신 버전으로 업데이트했는지 확인합니다.Figma Design 파일을 생성하거나 엽니다.왼쪽 상단 모서리에서 Figma 메뉴를 엽니다.기본 설정에서 Dev Mode MCP 서버 활성화를 선택합니다. (Enable Dev Mode MCP server 클릭)3. figma mcp 서버 링크 가져오..

최근에 MCP-Framework 공식 Quickstart 문서를 참고해서, 직접 날씨 정보를 반환하는 간단한 MCP 서버와 툴을 만들어봤습니다.아래는 설치부터 코드 작성, 빌드, 그리고 Claude Desktop 연동까지 실제 실습 과정을 정리한 후기입니다.1. MCP-Framework CLI 설치먼저, MCP-Framework를 전역으로 설치합니다.Node.js가 설치되어 있다면 아래 명령어 한 줄이면 끝!npm i -g mcp-framework설치가 완료되면, 터미널에서 mcp 명령어를 사용할 수 있습니다.2. 새 프로젝트 생성이제 새 MCP 서버 프로젝트를 만들어봅니다.mcp create weather-mcp-servercd weather-mcp-server이렇게 하면, weather-mcp-s..