기록

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는 전체 리스트를 다시 렌더링해..

자바스크립트에서의 함수와 일급객체

연관 면접 질문자바스크립트 함수에 대해서 아는대로 설명해주세요.참고 링크 https://www.maeil-mail.kr/question/33🗝️ 키 포인트 : 일급객체, 익명함수와 함수 표현식, 호이스팅, 클로저, 고차함수, 화살표 함수 함수와 일급 객체함수는 값처럼 취급 될 수 있으며 고차 함수를 포함한 다양한 패턴을 구현할 수 있습니다.여기서 일급 객체란?아래 특징을 갖고 있는 객체를 말합니다.무명의 리터럴로 생성할 수 있다. 런타임에 생성이 가능하다- 무명의 리터럴은 이름이 없는 리터럴 값을 의미합니다. 자바스크립트에서 이것은 주로 익명 함수(anonymous function)를 가리키는데, 함수의 이름 없이 직접 표현식으로 작성하는 방식입니다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다..