yehey's 공부 노트 \n ο(=•ω＜=)ρ⌒☆

이슈 가계부 내역에 통계 제외 기능을 추가해달라는 요청이 있었다. 통계 제외 기능 추가에는 2가지 방법 정도 생각해봤다. 1. 현재 있는 Tag 테이블에 통계제외 태그를 추가해서 해당 태그를 기반으로 통계 포함,제외 기능을 구현하기 2. 내역 테이블에 통계 제외 컬럼을 추가해서 구현하기 두가지 중에서는 Tag 테이블을 이용하는 것 보다 내역 테이블에 컬럼을 추가하는게 더 좋을 것 같다고 판단했다. 내역 테이블에 통계 제외 컬럼을 추가하는 것 보다 태그-내역 관계 테이블에서 통계 제외가 포함되는지 확인하는 로직이 더 복잡할 것 같다고 생각했다. 그래서 내역 테이블에 isExcluded 라는 컬럼을 생성하기로 했음 그리고 해당 컬럼의 값을 Boolean 즉 true, false 로 값을 넣고 싶었다. Con..

배경 프로젝트 진행하면서 전역 상태관리를 사용해야하는 단계가 왔다. 검색을 할 때 조건을 저장해두거나, 입력 폼 값 등을 받아놓을 전역 상태가 필요해서 찾아보았다. 기존에 사용해보았던건 Redux toolkit 이었고 보일러 플레이트 코드가 많다는 단점이 있다. 현재 진행중인 프로젝트는 크기가 크지 않고 복잡한 상태관리는 필요하지 않았기에 Redux 는 사용하지 않기로 했다. Redux를 사용하면 store,reducers, action 등을 모두 작성해야하기 때문에 현재 프로젝트에서는 적합하지 않다고 생각했다. 그치만 장점이라고 볼 수 있는 devtools 와 디버깅을 놓치는 부분은 좀 아쉬웠다. 그 외에 생각한 라이브러리는 Recoil 이다. 무엇보다 사용할 때 코드가 간편하고, useState와 같..

Issue Input 컴포넌트를 styled-component로 커스텀하여 사용하는 중, input type='date' 를 사용하여 날짜를 선택할 수 있게 하려 했다. 데스크탑 웹에서 테스트 및 개발을 하고 있기 때문에 모바일로 확인해서 볼 기회가 없었는데, 최근 테스트를 하며 기대한 것과 다르게 input 의 width가 설정해둔 100%가 아닌 특정 값으로 고정되어있었다. (테스트 기기는 아이폰 13pro, safari, chrome 모두 동일하게 출력됐다.) 100%로는 지정되지 않는데, 정확한 값을 넣으면 또 되고,,, 그치만 내가 원하는건 반응형으로 딱 절반 크기의 width가 될 수 있도록 하고 싶었다. 우선 같은 이슈를 가진 사람들은 어떻게 해결했는지 찾아본 결과.. https://gith..

Background 2023.11.27 - [개발/프로젝트] - [DB/RDBMS] ERD 설계 ERD 설계를 보면 one to many로 내역과 태그 테이블이 있다. 사실은 Many to Many 관계지만, many to many는 분리하는게 좋다고 들어서 one to many로 설계하고 관계 관련 테이블을 따로 만들도록 구성했었다. 현재 spring boot 의 ORM으로 JPA를 사용하고 있다. 그리고 JPA에서 entity를 정의하고 있고 내역 테이블과 태그 테이블을 many to many를 사용해서 관계를 정의해주었다. JPA에서 many to many로 정의하면 두 테이블의 관계 테이블이 자동으로 생성되는 것을 보고 적용해도 괜찮다고 판단해서 many to many로 두었다. Issue 통계 ..

Today I Learned : React Portal 을 왜 쓰는지, 썼을 때의 장점을 알아보고 Next js 프로젝트에 적용해서 모달 컴포넌트를 개선했다!! 배경 우연한 계기로 ReactDOM Portal 을 접하게 되었다. 거의 처음 보는거라 이게 무슨 역할을 하는지 궁금했고 이후 찾아봤다. 서치 결과 장점이 많아서 사용해보지 않을 이유가 없었다! Contents React Portal 은 다양한 이유에서 사용하는 듯 했다. 우선 이해한 바 로는 '현재 컴포넌트를 다른 DOM으로 분리할 때, 다른 DOM에 렌더링 하고자 할 때 사용한다.' 가 첫번째였다. DOM 을 분리하는게 무슨 이점이 있는지 궁금했지만 곧바로 이해할 수 있었다. Portal 없이 컴포넌트, 페이지를 개발하는 과정에서는 계층적으로..