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..

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

1. 개요 지식을 필요할 때만 여기저기서 검색하고 적용하다보니 머리속에서는 정리되지 않고 파편화가 되어있다. Context API 를 사용하기 위한 코드 작성법이 어떻게 되는지 알아보자. 2. Context API 사용의 흐름 초기 상태값의 작성 초기 상태값을 작성한다. (예: initialState) 더보기 // TodoContext.js const initialTodo = [ { id: 1, text: '프로젝트 생성하기', done: true }, ]; 리듀서 만들기 액션 타입, useReducer 를 작성한다. 더보기 // TodoContext.js // 초기 상태값 작성 const initialTodo = [ { id: 1, text: '프로젝트 생성하기', done: true }, ]; // ..

1. 개요 & + & 선택자를 사용한다면 편하게 margin을 관리할 수 있다. 연속되는 같은 클래스의 요소들 중 첫 번째 요소를 제외한 나머지만 속성을 줄 수 있는 선택자이다. 하지만 하나의 styled-components 변수안에서 & + & 선택자를 두 번 사용하게 된다면 적용이 불가능하다. styled-components 버전 5.2.0 부터 발생된 문제로 보인다. 똑같은 동작을 하는 다른 방법은 없을까? 2. 코드 상세 좌측이 수정 전, 우측이 수정 후 코드이다. & + & 로 사용하던 선택자를 &:not(:first-child)로 변경하여 첫번째 자식요소를 제외하게 만들어 주었다. 이상없이 작동이 된다.

1. 개요 replace는 특정 문자열을 찾고, 내가 지정한 문자열로 변경하는 함수다. 특정 문자열을 찾을 때 동일한 문자열이 여러개라면 첫번째로 검색된 문자열만 변경이 된다. 이런 경우에는 정규식을 통해 검색된 모든 문자를 변경할 수 있다. 2.기본 사용 replace('찾을 문자열', '변경할 문자열') let string = 'hello world, JavaScript' string.replace('Java', 'Type') // 기대값 // string = 'hello world, TypeScript' 특정 문자열이 여러개라면 첫번째로 검색된 문자열만 변경이 된다. let string = 'hello world, JavaScript, JavaScript, JavaScript' string.repl..

1. 개요 TextInput이 여러개가 있다고 생각하자. 첫번째 인풋 입력 후, 두번째 인풋으로 이동하는 방법은 인풋을 터치하는 방법이 있겠지만 사용자의 엄지손가락은 이미 키보드에 있다. 엄지손가락의 이동을 최소화하려면 키보드 배열 안에서 다음 인풋으로 이동시키는 버튼이 있어야 할 것이다. 2. useRef 이용 import React, {useCallback, useRef, useState} from 'react'; import { Alert, Pressable, StyleSheet, Text, TextInput, View, } from 'react-native'; function SignIn() { ... const secondInput = useRef(null); return ( 이메일 { seco..

1. 오류 내용 react-native-reanimated 설치 후에 오류가 발행했다. Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`. 2. 해결 과정 프로젝트 루트폴더에 있는 babel.config.js에 다음의 코드를 추가한다. plugins: ['react-native-reanimated/plugin'], module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'],