bravo my life!

개발중에는 이슈가 없었는데,테스트하기 위해 빌드했을 때 빌드 중 오류가 발생했다. 나중에 운영 배포 때 발견하지 않은게 다행이다. 오류의 내용은 다음과 같다.useSearchParams() should be wrapped in a suspense boundary at page "/login".useSearchParams()는 suspense 안에 있어야 하는데,그렇지 않으면 서버에서 실행이 불가능하다고 판단하고 빌드를 중단하게 된다. 우선 나의 코드 구조는 대략 이렇다.// layout.tsxexport default function RootLayout({ children,}: Readonly) { return ( {children} ..

페이지네이션으로 페이지 이동 후,화면의 스크롤읠 최상단으로 이동시키기 위해 아래의 코드를 작성했다. useEffect(() => { window.scrollTo(0, 0); }, [list]);의존성 배열에 list를 넣고 list가 변경되는 경우 스크롤을 최상단으로 이동하는 코드다. 그런데 작동이 되지 않는다.이유는 아주 간단했지만 원인 파악에 꽤 시간을 소비했다.내 경우 body에 over-flow 문제였다.html,body { max-width: 100vw; /* overflow-x: hidden; */ height: 100vh; box-sizing: border-box !important; -webkit-box-sizing: border-box !important; -moz-b..

약 3년만에 서비스 리뉴얼 게획이 잡혔고 개발이 진행됐다. 프로젝트 세팅을 해야 했다.프로젝트 세팅사용할 프레임워크, 라이브러리next.js: 15.1.3tailwindcss: 3.4.1axios: 1.7.9clsx: 2.1.1tailwindcss-preset-px-to-rem: 1.2.1zustand: 5.0.3react-hook-form: 7.54.2yup: 1.61라이브러리의 사용 이유tailwindcss: 기존에는 styled-components를 사용했다. 스타일을 적용하기 위해서는 컴포넌트를 생성해야 하는데 코드량이 많아지는 문제가 있었고, ssr방식과 런타임 방식인 css-in-js가 궁합이 좋지 않았다. 또 컴포넌트의 이름을 고민해야 하는 시간이 아까웠다.clsx: tailwind를 좀 더..

서비스 개선의 필요성 대두기존 서류 발급 기능은 불편한 점이 더러 있었는데 그 중 하나는 여러 문서를 한 번에 인쇄, 다운로드를 할 수 없는 것이었다.최대 네 개의 문서를 발급할 수 있는데, 저장이나 인쇄를 하기 위해서는 각 문서마다 네 번의 저장이나, 네 번의 다운로드 버튼 클릭이 필요했다.pdf 병합 기능 검토현재 사용하는 pdf 관련 라이브러리는 다음과 같다.react-pdf - pdf 미리보기 라이브러리@react-pdf/renderer - pdf 문서 생성 라이브러리react-pdf 라이브러리 공식문서를 확인해 보아도 pdf를 병합해 하나의 파일로 만들어 주는 기능을 찾을 수는 없었다. pdf-merger-js 라이브러리를 알게 되었는데 이름 그대로 pdf를 병합할 수 있는 라이브러리다.node..

프로젝트가 완료되고 난 후, 전체적으로 코드를 검토를 해보다 문득 들었던 생각이 있다. '아, 기록이 필요하구나.' 어떤 상황에 부딪치고, 대응하고 해결하는 과정을 기록하지 않는다면 나의 경험을 허공으로 버리는 꼴이 되어버릴 것 같았다. 이제부터 꾸준하지는 않더라도 프로젝트가 종료되면 회고를 해보려고 한다. - 프로그레스바 만들기 관리자 서비스에서 유저에게 보여줄 목적으로 프로그레스바를 만들었다. 프로그레스바는 네가지의 신청 단계를 보여준다. 예. ○ -- ○ -- ○ -- ○ 각 신청 단계마다 세부 단계가 있다. 세부 단계는 각 단계에서 색깔로 표현한다. 기본 회색. 완료 녹색. 취소 적색. 미진행 회색. 예. ○녹색 -- ○녹색 -- ○적색 -- ○회색 예외 상황. 첫번째 단계를 건너뛰고 두번째 단계..

이번 스프린트에서는 마이페이지 내의 프로필 레이아웃, 프로필 수정 모달, 팔로워, 팔로잉관리 모달을 맡았다. 현재 프로필 레이아웃 완성.

중간 기록. 홈 UI 완성.

1. 개요 부모 요소에 꽉 찬 화면 기준으로 패딩이 16px 지정되어 있다. 자식 요소는 부모 요소의 패딩을 무시하고 꽉 찬 화면을 유지하고 싶다. 2.코드 상세 부모 요소 속성 무시 적용 전 코드 현재 부모 요소에 패딩이 16px로 지정되어 있어 자식요소 또한 동일한 패딩값을 가지고 있다. 더보기 // Home.tsx (부모요소) function Home() { return ( ); } //SlideSection.tsx (자식요소) const SlideSection = () => ( ... ); export default SlideSection; 부모 요소 속성 무시 적용 후 코드 부모 요소의 패딩값을 무시하고 자식요소는 꽉 찬 화면을 유지하고 있다. 더보기 //SlideSection.tsx (자식요소..

1. 개요 슬라이드 섹션에서 scrollbar의 색상과 크기를 프로젝트 디자인과 동일하게 커스텀을 하려고 한다. 2. 코드 상세 커스텀 전을 보면 스크롤바의 상태는 평범하다. 회색, 5px의 높이. 더보기 - 커스텀 전 const HomeSwiper = styled(Swiper)` top: -28px; `; const SlideSection = () => ( ); export default SlideSection; 커스텀 후를 보면 스코롤바가 노란색으로 변했고 드래그 부분과 레일 부분의 height가 달라졌다. 더보기 - 커스텀 후 const HomeSwiper = styled(Swiper)` top: -28px; .swiper-scrollbar-drag { background: #ffe000; heig..

1. 개요 코드를 좀 더 가독성이 좋게, 간결하게하기 위해 버릴건 버리자. 2. 코드상세 코드 변경 전. 더보기 코드 변경 전. /* eslint-disable no-confusing-arrow */ import { useState } from 'react'; import { IonButton, IonButtons, IonHeader, IonImg, IonToolbar, } from '@ionic/react'; import styled from 'styled-components'; import { NotiState } from '../../types/home/NotiState'; const TravelitHeader = styled(IonHeader)` width: 100%; `; const Travel..