기록

[SQLD] 데이터 모델링

데이터 모델링데이터를 정규화하는 과정 → 단순화, 추상화해서 업무와 관련된 데이터를 단순화, 추상화하는 과정을 데이터 모델링이라고함모델링의 특징은추상황, 단순화, 명확화 하는 것임여기서 유의사항은 일관성, 중복 최소화, 비유연성 최소화를 해야한다는 점임모델링의 관점은데이터 관점프로세스 관점 ( 논리적 관점 X - 헷갈림 ㄴㄴ )데이터, 프로세스 관점이 있음데이터 모델링의 단계크게 3단계로 나뉨 ( 개논물 )1단계 - 개념적 데이터 모델링 ( Conceptual Data Modeling )가장 높은 추상화 모델업무와 개념 중심전사전 차원 모델링EA(Enterprise Architechure) 수립 시 이용엔터티, 속성 도출하는 단계2단계 - 논리적 데이터 모델링 (Logical Data Modeling )..

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