Language/Node.js, Next.js, React
-
React에서 AB 테스트 GrowthBook사용1Language/Node.js, Next.js, React 2025. 6. 23. 10:54
1. AB 테스트란?AB 테스트는 두 가지(또는 그 이상)의 버전(A와 B)을 사용자에게 무작위로 노출시켜 어느 쪽이 더 나은 성과를 내는지 비교 분석하는 실험 방법웹사이트, 앱, 광고, 이메일, UI/UX 디자인 등에서 사용자 행동(예: 클릭률, 전환율, 구매율)을 기반으로 최적의 옵션을 찾기 위해 활용된다. 1.1. AB 테스트의 핵심 요소변수: A 버전과 B 버전의 차이를 주는 요소 (예: 버튼 색상, 문구, 레이아웃)대상 그룹: 실험에 참여하는 사용자 집단을 무작위로 분리하여 공정성을 확보성과 지표: 클릭률, 전환율, 체류 시간 등 목표 성과를 측정할 지표통계적 유의성: 단순히 우연이 아닌 실제 차이를 확인하기 위해 통계적 검증을 실시 1.2. AB 테스트의 예버튼 색상을 파란색(A) vs. 빨간..
-
Cursor에서 Figma to React rule 적용Language/Node.js, Next.js, React 2025. 3. 10. 18:14
Figma 디자인을 React 컴포넌트로 수작업으로 변환하는 과정은 시간이 많이 소요되고 반복적인 작업이다.이 과정은 효율적이지 못하며, 자동화를 통해 개선할 필요가 있다고 생각되었다.초기 목표는 Figma API를 활용하여 디자인 토큰을 추출하고, 이를 바탕으로 React 코드를 자동 생성하는 것이었다. 그러나 여러 기술적 한계로 인해 완벽한 자동화에 실패하였다.특히, Figma의 디자인을 AI를 사용하지 않고 완벽하게 React 코드로 재현하는 것은 몇일간 테스트한 결과 한계가 있는듯 보인다. (더이상 시간투자 X)그래도 노가다 작업을 줄이기 위해서 작업 방향을 급선회 하여, Cursor에서 제공하는 규칙을 사용하여 Figma 디자인에서 React 컴포넌트로의 변환 시간을 단축시키는 방식으로 정리해 ..
-
TypeScript로 MCP Server 만들기Language/Node.js, Next.js, React 2025. 3. 9. 12:44
프로젝트 설정프로젝트 생성$ mkdir mcp-typescript-250309$ cd mcp-typescript-250309$ mkdir src$ cd src 라이브러리 설지$ npm install express @modelcontextprotocol/sdk zod$ npm install -D typescript ts-node$ npm install --save-dev @types/express 소스코드server.tsimport { McpServer, ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js";import { z } from "zod";import express from "express";import { SSEServerTran..
-
React로 Gauge Chart 만들기Language/Node.js, Next.js, React 2025. 2. 27. 17:07
2년전 차트로 화면을 표시할때 비슷한 차트 라이브러리를 찾고 커스터마이징해서 작업하는데 시간이 꽤 많이 소요되었다. 찾는것도 일이지만 직접 만들지 않았다보니 커스터마이징이 헬일경우가 많다.이번에 리뉴얼이 많이 되면서 비슷한 차트를 찾기도 힘들고 유지보수도 힘들것 같으니 직접 만들어보기로 했다. 1. Figma에서 화면 캡쳐 및 GPT에서 html로 변환 요청캡쳐 및 GTP 요청이렇게 요청하면 react-gauge-char등 기존 라이브러리를 찾아서 사용하라고 한다.. OTL.. 다시요청예상대로 svg로 만드는 법을 알려준다. 대충 만들어 진 코드 react에 복붙하면된다. 2. React 적용 및 커스터 마이징GPT로 요청한건 아직까지는 완벽하지 않다. 많이 부족하다.. 그래도 없는것 보다는!!아래 겁..
-
InfiniteScroll 컴포넌트 간단구현Language/Node.js, Next.js, React 2025. 2. 24. 11:36
react + java + jpa 환경에서 InfiniteScroll을 간단하게 구현해 보자. Reactviews Componentconst ReceiptViews: React.FC = (props) => { const [loading, setLoading] = useState(false); const [hasMore, setHasMore] = useState(true); const paginationRef = useRef({ current: 1, pageSize: 9 }); const pageNoRef = useRef(1); ... const fetchItems = async () => { setLoading(true); const l_pageNo = pageNoRef.cu..
-
env-cmd란?Language/Node.js, Next.js, React 2024. 12. 6. 10:19
env-cmd에 대해서 정리해 두자. env-cmd란?Node.js 애플리케이션에서 환경 변수를 손쉽게 관리하기 위한 도구.env 파일에 정의된 환경 변수를 로드하여 실행 중인 애플리케이션에서 사용할 수 있도록 해준다.환경 변수는 애플리케이션의 설정값(예: 데이터베이스 URL, API 키 등)을 관리하는 데 사용된다. 주요 특징1. 환경 변수 관리.env 파일의 변수들을 자동으로 로드하여 실행 중인 애플리케이션에서 사용 가능하다. 2. 다중 환경 지원개발, 테스트, 프로덕션 등의 환경별 .env 파일을 손쉽게 구분하고 각 환경에 맞는 .env 파일을 로드한다. 3. 간단한 사용법추가적인 코딩 없이 명령어로 환경 변수 로드할 수 있다. 4. 보안 및 코드 유지보수성 향상민감한 정보를 코드에 직접 포함하지 ..
-
react-hook-form을 사용하여 배열 형태 input 사용Language/Node.js, Next.js, React 2024. 12. 2. 12:32
배열형태의 Input을 처리하는 방식을 정리해 둔다. ChatGPT 예시import React from "react";import { useForm, useFieldArray, Controller } from "react-hook-form";function MyForm() { // react-hook-form의 useForm 훅 사용 const { control, handleSubmit, register, formState: { errors } } = useForm({ defaultValues: { users: [{ name: "" }] // 기본값으로 하나의 입력 필드를 넣음 } }); // useFieldArray 훅을 사용하여 동적으로 필드 추가 및 제거 const { ..
-
타입스크립트 예외처리Language/Node.js, Next.js, React 2024. 11. 22. 16:10
jsx파일로 개발된 컴포넌트들을 타입스크립트로 변환하면서 일을 진행하고 있다.수많은 컴포넌트들을 한번에 타입스크립로 변환하기에는 무리가 있다.모두 한번에 바꾸기는 힘든데 하위 컴포넌트로 소속되어 타입 에러가 나는 경우가 있다.그럴때는 여러 고민하지 말고 가장 간단한 방법으로 예외처리를 해보자. (원래 일에 집중해야지!) 에러 발생 해결import LocationFilter from '../../../common/filter/LocationFilter';const AnyLocationFilter = LocationFilter as any;...... 해결 방법이야 여러가지가 있겠지만 일단 선택하고 집중하자, 지금 안바꾼것은 나중에 관련 작업할때 바꾸면된다. 우리에겐 오픈 일정이 중요하자나!!