캘린더를 추가하기 전, 투두리스트만 있었을 때는 저장한 날짜(created_at)를 기준으로 태스크를 보여주고 있었는데, 캘린더를 추가하면서 저장 날짜 따로, 태스크 기준일 따로 나누게 되어서 다음과 같이 due_date 컬럼을 추가했습니다.ALTER TABLE tasksADD COLUMN due_date DATE; 이후 createTask하는 함수에 props로 due_date를 추가하고, 이외의 필요한 부분에 작성해서 Calendar 페이지에서 모달로 태스크를 작성할 수 있도록 수정했습니다. 그런데 DB를 확인하니 due_date가 -1일 되는 것처럼 보이는 것입니다.그래서 timestamptz로 타입을 바꾸고 시분초까지 보니까 -9시간이 되어있는 것을 보니 UTC 기준으로 날짜가 저장된 것을 확인할..

: 여러 이미지 소스를 지정하고, 각각의 소스를 어떤 상황에서 사용할지를 정의하는 컨테이너이면서 여기서 스타일을 지정 가능하다. : picture 태그 내에서 조건을 지정하고, 해당 조건에 맞는 이미지를 설정한다. 여기에 media-query를 통해 어떠한 조건을 기준으로 이미지를 선택할 수 있다. @media (width: 734px) 요런... : 이미지를 출력하는 태그. 브라우저가 picture 태그를 지원하지 않거나 미디어 쿼리에 해당하지 않는 경우, img 태그에 설정된 이미지가 기본값으로 로드된다.➡️ 사용 예시  예전에는 이런 이미지 조절되는 거 보고 짱 큰 이미지 하나 두고 크기 조절하는 건가? 라고 생각했는데, 이미지 최적화 유무에 성능 차이가 난다. 생..

반응형 이미지를 구현하면서 미디어 쿼리를 사용해서 뷰포트 width에 따라 변화를 주고 있었다. 그런데 자꾸 sm 사이즈, lg 사이즈만 적용되고 중간 사이즈가 적용이 안 되고 헛도는 것;;사이즈에 변화를 주거나 이것 저것 만져봐도 이유를 모르다가 해결책을 알아냈다. 먼저 문제 상황을 간략히 설명하자면 다음과 같다.➡️ 문제 상황 !@media screen and (max-width: 734px) { .section-tile-wrapper { min-height: 490px; justify-content: flex-end; }}@media screen and (max-width: 1068px) { .section-tile-wrapper { min-hei..

➡️ 문제 상황 ! 메인 화면에서 유저의 email을 유저 네임으로 보여주기 위해 유저 정보가 필요한 상황. 1차: useState로 1:1 관리2차: 전역에서 관리하기 위해 store 작업3차: 로그인이 되었을 때만 유저정보를 가져오도록 리팩토링 1차 시도 ->필요한 파일마다 useState로 유저 데이터를 관리 (1:1)const [userData, setUserData] = useState(null) useEffect(() => { const fetchData = async () => { const supabase = createClient() const { data: { user }, error } = await supabase.auth.getUser() setU..