기록

손가락 까딱 몇번으로 AI한테 내 PR 코드리뷰받기

Google이 Gemini라는 AI를 풀어준지 벌써 몇달이 지나고,,, 마침 이전 프로젝트 리팩토링하면서 AI한테 올리는 PR마다 코드리뷰를 받아보면 어떨까하는 생각이들어 간단한 세팅 방법을 가져와보았습니다.Gemini Code Assist한테 내 PR 코드리뷰 받기최우선으로 고려한 점은 무료인가였고 내가 코드단위로 코드리뷰를 받아볼 수 있는가 였습니다. 리팩토링 방향성이 뚜렸하게 정해져 있다면 n8n을 사용하여 Gemini와 같은 무료 AI와 연동하여 코드리뷰 봇을 만들 수 있지만, 현재는 리팩토링 방향성이 뚜렸하게 잡혀있지 않기도 하고(= 단순 관심사 분리만 방향성을 잡은 상황) 애초에 코드리뷰 세팅하는데에 시간을 오래 쓰고 싶지않아 이 방법을 선택하였습니다. 먼저 해당 페이지에 접속하여 우측에 보이..

supabase 리액트 프로젝트에 연동하기 (feat. 목업유저 생성하기)

개발 공부를 시작하고 했던 첫 프로젝트를 리팩토링을 하기로 하였습니다. 프론트/백 코드가 함께있는 모노레포였고, 빠르게 프론트엔드 부분 리팩토링을 하기위해서 기존 서버 쪽은 건드리지 않고 supabase를 연동하여 리팩토링을 하기로 하였습니다.supabase를 선택한 이유목표가 프론트엔드 코드 리팩토링이었기 때문에 후에 기능 추가가 되는 것을 고려하여 SQL쿼리로 테이블을 쉽게 생성할 수 있는 supabase를 선택하였습니다.supabase란? Baas(Backend as a Service)로 서버리스로 데이터베이스에 API 호출을 보낼 수 있는 서비스 입니다.supabase 프로젝트 생성하기해당 페이지 방법대로 CLI로도 프로젝트를 생성할 수도 있고 https://supabase.com/dashboar..

웹 호환성을 위한 package.json에 browerslist설정하기

2년전에 했던 프로젝트를 리팩토링하게 되었습니다. 잊고 있던 프로젝트 구조부터 하나하나 파악하게 되었는데, 첫 프로젝트때는 아예 아무것도 없는 cra에서 시작한게 아니라 누군가 우리가 프로젝트를 할 수 있게, 만들어둔 보일러 플레이트에서 프로젝트를 시작하였습니다. 이번에 리팩토링을 하기위해 프로젝트 구조를 먼저 파악하려하였습니다.구조를 보고 포맷팅을 설정하면서 pacakge.json에서 이전에는 발견하지 못했던 "browserslist": { 를 발견하였습니다.{ "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome..

최신 업데이트 이후 pnpm 실행 시 버전 충돌 에러 해결 ( feat. brew 삭제 후 재설치 )

pnpm 최신 업데이트 이후 다음과 같은 에러를 겪었습니다.ERR_PNPM_NO_GLOBAL_BIN_DIR Unable to find the global bin directoryRun "pnpm setup" to create it automatically, or set the global-bin-dir setting, or the PNPM_HOME env variable. The global bin directory should be in the PATH.에러 문구에서 나온대로 pnpm self-update를 입력하였습니다. 그랬더니 한 번은 파일이 생성되는 것처럼 동작했는데, 다시 실행하니 이번에는 아래와 같은 메시지가 발생하였습니다.pnpm command "self-update" not found해당..

리액트 요소에 유니크키 생성하는 방법

매일매일 프론트엔드를 보고 정리한 글입니다. https://www.maeil-mail.kr/question/42 리액트에서 순회하는 배열의 각 요소 key값에 index값을 넣으면 안된다는 것은 리액트를 학습하는 사람이라면 누구나 알고 있는 사실입니다. 배열이 삭제, 수정, 등록될 때, 배열의 순서가 바뀌는 경우가 있기 때문입니다. 그럼 key는 유니크한 값이어야하는데, 생성하는 방법에는 어떤 것들이 있을까요?Key가 중요한 이유React는 key prop을 사용하여 DOM을 효율적으로 업데이트하고 상태 변경을 반영합니다. React의 재조정(reconciliation) 과정에서 키는 어떤 아이템이 변경, 추가 또는 제거되었는지 결정하는 데 사용됩니다.키가 없다면 React는 전체 리스트를 다시 렌더링해..