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

Background프로젝트를 갈아 엎었다. 원래는 스프링 공부할 목적으로 스프링 프로젝트를 하고 있었으나... 모종의 이유로 golang 공부가 시급해져서 기존에 하던 프로젝트를 spring -> golang 으로 스택 전환을 할 생각이다.참고로 기존에 만들어놓은건 열심히 쓰고 있다. 고칠게 많기도 하고 직접 써보니 부족한게 정말정말 많다.그런 의미에서 새로운 go 프로젝트에 DB 를 연결해보겠다. 지난 프로젝트는 application.yml 파일에서 관리했는데, 이번엔 그냥 빌드 시점에 환경변수에 넣고 초기화 과정을 추가했다.Contents우선 DB가 있어야함. database 생성은 다루지 않을 예정. 난 이미 있으니까!바로 RDS 로 연결을 할 까 생각했지만 그러면 인바운드 규칙을 수정해야하는 귀찮..

이슈 가계부 내역에 통계 제외 기능을 추가해달라는 요청이 있었다. 통계 제외 기능 추가에는 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 없이 컴포넌트, 페이지를 개발하는 과정에서는 계층적으로..

Today I Learned : React query 라이브러리를 Next js 에 적용하고 사용해보았다. 배경 프로젝트 진행 중 서버와 api 통신 과정을 react query + axios를 이용하여 진행하기로 하였다. fetch 가 Next 공식 문서 상에 있지만 기본 url 정보나 인터셉터 등등을 지정해놓고 사용하기에는 axios 가 더 적절하다고 판단했다. 굳이 react query를 사용한 이유는 서버 데이터 관리, 캐싱 등을 통해 성능을 높일 수 있다고 생각하여 한번 적용해보고자 했다. 동일한 데이터 요청을 중복으로 처리하지 않고 기존 응답 값을 캐싱하고 캐싱 값을 사용한다는 점에서 시도해볼 가치가 있다고 생각해서 적용했다. 그리고 무엇보다 hook 과 비슷한 구조를 가지고 있어서 초기 학습..

Background Typescript 기반으로 Next, styled-components 를 사용해서 개발 중 constant 값에 변수로 접근해야하는 경우가 있었다. 그런데 타입스크립트에서 object를 변수로 접근하려니 typescript warning? error 가 발생했다. Issue / Error 현재 color 를 정해놓고 color.ts 에 두고 필요한 곳에서 불러서 사용하고 있다. // color.ts export const WHITE = '#FFFFFF'; export const BLACK = '#000000'; export const GREY = { 100: '#B3B3B3', 200: '#4E4E4E', 300: '#..

Background icon을 추가하면서 기존에는 필요한 svg 파일을 다운받아 사용했는데, 이번 프로젝트에서는 정해진 아이콘 없이 이것저것 사용해보고 잘 맞는 아이콘을 적용하고 싶었다. 그래서 google 에서 지원하는 google material icon 을 사용하기로 했다. 현재 프로젝트는 Next.js Approuter 를 사용하고 있다. Contents https://fonts.google.com/icons Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design v..

Background next js 를 app router 프로젝트로 시작했다. 그리고 styled-component로 스타일링 하는 것을 선호하기 때문에 설치 후 적용하면서 겪었던 모든 에러를 정리하고자... 쓴다.... (굉장히 다양하게 만남...^^) Issue 1 : use client 에러 // app/layout.tsx import styled, { ThemeProvider } from 'styled-components'; import { theme, GlobalStyle } from '@/styles'; import Header from '@/components/Header'; export default function RootLayout({ children }: { children: Reac..