전체 글

Cursor AI를 활용한 반자동화 코드 리뷰 시스템 가이드

1. 개요기존 코드 리뷰는 GitHub PR 환경에서 코드 리뷰를 진행할 시 컨텍스트 전환의 부담, 팀원 부재 시 적시 피드백의 어려움 같은 불편함이 있었다. 그리고 Cursor의 Bugbot 같은 AI 리뷰 도구가 있지만 월 40달러의 비용이 부담스러웠다.그래서 나는 Cursor v1.6의 Custom Slash Commands와 v1.7의 Plan Mode를 활용해 IDE에서 바로 쓸 수 있는 나만의 반자동 코드 리뷰 커맨드(/code-review)를 만들었다.이 커스텀 커맨드는 몇 가지 질문에 답하면 AI가 Toss의 변경하기 쉬운 프론트엔드 코드를 위한 지침서를 기반으로 꽤나 괜찮은 퀄리티의 코드 리뷰를 자동으로 해주며, 토큰 소모량을 기준으로 산정해보았을 때 Bugbot보다 훨씬 저렴한 비용으로..

변경된 파일에 한해서만 테스트할 수 있도록 해보자 ! (feat.Github Actions, Jest)

❗️문제 상황발생한 문제PR 생성 시 마다 Github Action의 CI Action에서 약 160개 테스트와 500개의 테스트 케이스가 매 번 실행되어 완료까지의 과도한 소요 시간이 발생목표CI Action 시 테스트 시간 단축을 통한 생산성 향상시도한 해결 방법들❎ 1차 시도: Jest 내장 옵션 --onlyChanged 활용 (실패)npm test --onlyChanged결과: PR 환경에서 "No tests found related to files changed since last commit" 에러 발생 에러 원인:--onlyChanged 옵션은 마지막 커밋 이후의 변경사항만 감지PR 환경에서는 모든 변경사항이 이미 커밋되어 있어 Jest가 변경된 파일을 찾지 못함Git working dire..

Figma MCP를 이용해서 사이드 프로젝트 디자인, 퍼블리싱 해보기 (feat. Readdy ai)

사이드 프로젝트를 진행할 때 디자인과 퍼블리싱 작업에 많은 시간이 소요됩니다. 하지만 AI 기술을 활용하면 이 과정을 크게 단축할 수 있습니다. 이 글에서는 Readdy AI와 Figma, 그리고 MCP(Model Context Protocol)를 활용해 디자인부터 코드 구현까지 AI가 도와주는 방법을 소개하려 합니다.제 0장. MCP ?MCP에 대해서.AI 시스템이 콘텐츠 저장소, 비즈니스 도구, 개발 환경 등 다양한 데이터 소스와 원활하게 연결될 수 있도록 지원하는 표준화된 프로토콜입니다.MCP 서버의 구조와 주요 기능MCP는 클라이언트-서버 모델을 기반으로 하며, AI 시스템이 다양한 데이터 소스와 연결될 수 있도록 설계된 프로토콜입니다. MCP Server 특징데이터 소스 연결: AI 시스템이 파..

입사한 지 2주째인 현시점에서 주절주절

이번 글의 제목은 "입사한지 2주째인 현시점에서 주절주절"이름하여, 주절주절 시리즈가 되겠다 !! (퇴사하고 주절주절편은 여기로) 시작. 2024. 06. 17 월요일 날씨 맑고 더움 어쩌구 저쩌구 ... 오늘은 2023년 12월까지 근무를 마치고 퇴사를 하고서 약 5개월간 내 자신이 정말 고생했다고 느껴질 만큼 열심히 이직 준비를 했던 지난날을 뒤로하고, 이직에 성공한 내가 새로운 회사에 입사한 지 딱 2주가 되는 오늘이다. 난 퇴사를 하고 본격적으로 이직하기 전까지 남들이 "요새 이직이 너무 힘들다."라고 말할 때, 나는 그 사람들이 눈이 높아서 취직을 못하는 줄 알았다. 하지만 내가 직접 채용시장에 놓여지니 "요새 이직이 너무 말도 안되게 꽁꽁 얼어붙어 힘들어 죽겠다"라고 곡소리가 절로 나더라...

[Next.js] MSW 사용 시 Mocking enabled보다 API 호출이 더 빨리되어 발생하는 문제 해결

❗️서론(설치 과정은 생략합니다 !)사이드 프로젝트 진행중에 백엔드 개발자가 아직 API를 완성하지않아 MSW를 통해 API Mocking를 사용하여 미리 개발을 진행하려 하였다. 그러면서 초반에 환경셋팅을 하는 과정에서 아래와 같은 문제가 지속적으로 발생하였다.로그를 보면알 수 있듯이 MSW는 정상적으로 동작하지만 API 호출 로직이 Mocking을 만들기 전에 호출되어버리는게 원인이라 생각하여 에러 처리를 진행하였다. RootLayout에서 children 컴포넌트들이 렌더링 되기 전에 MSW를 실행할 수 있게하는 로직을 추가로 만들어주겠노라 ~! "use client";import { useState, type PropsWithChildren, useEffect } from "react";const..

[Next.js] Next.js 14에서 react-select를 사용해보자 (feat. 트러블 슈팅)

이번에 프로젝트를 진행하던중에 next.js 14버전에서 react-select를 쓰려는데 참고할만한 글이 그렇게 많지 않아서 정보도 공유하고 나도 나중에 다시 볼 겸 포스팅을 해본다 ! 시작은 똑같다. npm i react-select 해당 명령을 통해 설치하면 기본 셋팅은 끝. "use client"; import React from "react"; import Select from "react-select"; export default function SelectBox() { const areaOptions = [ { value: "전체", label: "전체" }, { value: "강동구", label: "강동구" }, { value: "강서구", label: "강서구" }, ]; return ..

[Next.js] Extra attributes from the server : ... 에러 해결

Next 14를 사용하는 프로젝트를 하다가 문제에 부딪혔다. "use client"; import React, { useId } from "react"; import Select from "react-select"; interface OptionData { value: string; label: string; } interface Props { area?: boolean; status?: boolean; options: OptionData[]; } export default function SelectBox({ area, options }: Props) { const placeholder = area ? "지역 선택" : "완료/미완료 여부"; const id = useId(); return ( ); }..

[Next.js] useSelectedLayoutSegment와 useSelectedLayoutSegments에 대해 알아보자 !

❗️useSelectedLayoutSegment ✅ 클라이언트 컴포넌트에서만 사용할 수 있는 훅으로 'use client'필수 ✅ 현재 active 한 segment의 값을 (/ 가 포함되지 않은) 반환 ✅ Header Footer와 같이 글로벌하게 사용되는 레이아웃 컴포넌트에서 이를 활용하여 조건부 처리가 가능 경로 url return app/layout.tsx /segment segment app/test/layout.tsx /segment null app/layout.tsx / null ❗️useSelectedLayoutSegments ✅ useSelectedLayoutSegment와 동일하게 클라이언트 컴포넌트에서만 사용할 수 있느 훅으로 'use client'필수 ✅ 현재 active 한 seg..