seheej 님의 블로그

1. 리팩토링 배경RegisterChildInfo.tsx와 RegisterChildRecord.tsx 두 개의 파일에서 상단 네비게이션(뒤로 가기 버튼 + 제목)이 반복되고 있었다.이러한 중복된 UI를 하나의 재사용 가능한 컴포넌트로 분리하면 유지보수가 쉬워지고, 코드 가독성이 높아진다. 따라서 StepNavigation.tsx라는 별도의 컴포넌트를 만들어 적용해 보았다. 2. 기존 코드 문제점RegisterChildInfo.tsx와 RegisterChildRecord.tsx에서 상단 네비게이션 UI가 반복되고 있었다. router.back()}> 아이 등록하기 위 코드가 여러 파일에서 중복되어 유지보수가 어렵고, 변경이 필요할 때 일일이 수정해야 하는 문제가 ..

디렉토리 구조 개선: 기존 components/child/ 내부 파일이 너무 많아 가독성이 떨어짐관련 기능별로 child/, register/, record/, info/ 등을 분리"혹시 모르니까", 테스트 코드 등 불필요한 코드 지우기상태 관리 (useEffect -> Tanstack Query)useChildrenData.tsxchlidId상태관리가 문제....chlidId를 API요청을 통해서 가져오는 것으로 변경문제 1: 처음엔 아이 아이디가 null -> 요청으로 받아오면 여기가 다시 실행되면서 값이 들어와서 (아이디가 변경됨)Query key 정리 (중복되는 커스텀 훅이 어딘가에는 존재할 듯)usequery 사용 mutation onsuccess안에서 invalidateselectedId를 상..

최종 프로젝트 이후, APM으로 남기로 한 이유최종 프로젝트를 마친 후, 바로 취업을 하기보다는 내일배움캠프에 잔류하여 APM으로 근무하기로 결정했다.이 선택을 하게 된 가장 큰 이유는 아직 프론트엔드 개발자로서 부족한 점을 보완할 필요성을 느꼈기 때문이다. 부트캠프를 통해 React와 Next.js를 기반으로 프로젝트를 완성했지만, 이를 완전히 내 것으로 만들고, 코드의 설계와 구조를 더 깊이 이해하기 위해서는 시간이 필요하다고 판단했다. 단순히 동작하는 코드를 작성하는 것이 아니라, "왜 이렇게 설계해야 하는지", "이보다 더 나은 구조는 없을지", "팀 개발 환경에서 유지보수가 용이한 코드를 작성하려면 어떻게 해야 하는지" 같은 질문들에 대한 답을 찾아가고 싶었다.   APM 경험이 FE 개발자로서..

기존 코드프로필 수정 폼에서 생년월일 입력 필드는 단순히 날짜를 텍스트로 입력받는 방식이었습니다. 이는 사용자 경험이 다소 불편할 수 있어, 달력 컴포넌트(Calendar)를 사용하여 날짜를 선택하는 방식으로 개선했습니다.{/* 생년월일 입력 필드 */} ( 생년월일 )}/> 수정된 코드날짜 입력 필드를 개선하기 위해 Popover와 Calendar 컴포넌트를 사용했습니다. 달력에서 날짜를 선택하면 입력값이 자동으로 업데이트되며, 포맷팅된 날짜가 표시됩니다. ( 생년월일 {field.value ? format(field.value,..

1. 오류 발생 다음은 이미지 업로드 시 발생한 오류 메시지입니다:이미지 업로드 오류: {statusCode: '400', error: 'InvalidKey', message: 'Invalid key: public/1732276487299_따꼼_단체사진1.png'}이미지 업로드 오류: {statusCode: '400', error: 'InvalidKey', message: 'Invalid key: public/1732275371312_Screenshot 2024-11-20 at 10.10.32 AM.png'} 2. 문제 원인1. 파일 경로에 공백이나 특수문자 포함: 파일 이름에 공백이나 특수문자가 포함되어 있어 업로드 경로가 잘못 처리될 수 있습니다. 파일 이름을 URL-safe 형식으로..

✨ 내일배움캠프 이전의 삶기존에는 디자인 작업을 주로 했지만, 점점 개발 분야에 대한 흥미가 커지면서 소프트웨어 개발자로서 경로를 전환하고 싶었습니다. 하지만 개발 전공이 아니어서 막막한 부분도 있었고, 이를 어떻게 시작해야 할지 몰랐습니다. 그 당시엔 프로그래밍을 전혀 해본 경험이 없었기 때문에, 그 길을 어떻게 시작할지에 대해 고민이 많았습니다. 우연히 대학에 진학하게 되었고, 선택한 학과에서는 크게 흥미를 느끼지 못했지만, 프론트엔드에 대해 공부해보고 싶다는 생각이 계속 들었습니다. 전과를 하기에 부담스럽고, 어디서 어떻게 배우면 좋을지 몰랐던 저는 내일배움캠프라는 프로그램을 알게 되었습니다.스파르타 코딩클럽이라는 이름처럼 9시부터 9시까지 진행되는 강도 높은 학습에 매력을 느꼈고, 무엇보다 맞춤형..

React와 Supabase를 사용해 다음 버튼을 눌렀을 때 데이터를 추가하는 기능을 구현하던 중, 중복 데이터가 삽입되는 문제를 발견했습니다. 이 포스팅에서는 문제의 원인과 이를 해결한 방법을 공유합니다. 1. 문제 상황다음 버튼을 눌렀을 때, 사용자가 입력한 자녀 정보(이름, 나이 등)를 Supabase 데이터베이스에 저장한 후, 다음 단계로 이동하는 로직을 구현했습니다. 그러나 동일한 데이터를 여러 번 입력하면 데이터가 중복 삽입되는 문제가 발생했습니다. 2. 문제 원인중복 확인 로직 부재데이터가 이미 존재하는지 확인하는 코드가 없어서, 매번 새로운 데이터를 삽입했습니다.UUID 무조건 생성새로운 데이터를 삽입할 때마다 uuidv4()를 통해 고유 ID를 생성했기 때문에 기존 데이터와 구분되지 않았..

1. 문제 상황아이카드에서 프로필 이미지가 설정되지 않은 경우 기본 이미지가 표시되지 않는 문제가 있었습니다. 이미지 경로를 설정했지만, "/default-profile.jpg" 이미지가 불러와지지 않았습니다. 2. 원인 분석Next.js 프로젝트에서 기본 이미지를 Supabase의 스토리지에서 가져오려면 Supabase의 Storage URL을 사용해야 했습니다. Image 컴포넌트에 로컬 이미지 경로가 아닌, Supabase의 스토리지 URL을 src 속성에 지정해야만 이미지가 정상적으로 표시될 수 있음을 알게 되었습니다. 3. 해결 방법1. Supabase 기본 프로필 이미지 URL 설정.env.local 파일에 Supabase의 기본 프로필 이미지 URL을 환경 변수로 추가했습니다.# .env.l..

1. 문제 상황2단계에서 '이전' 버튼을 누르면 1단계 페이지로 돌아가기는 하지만, 이전 단계에서 입력한 내용이 폼에 유지되지 않는 문제가 발생했습니다.다행히 supabase의 child 테이블에는 데이터가 저장되어 있는 상태입니다. 2. 해결 과정1) RegisterForm 컴포넌트 수정RegisterForm 컴포넌트에서 RegisterChildInfo으로 childInfo를 props로 전달하여, 이전에 입력된 정보가 유지될 수 있도록 설정했습니다.const RegisterForm: React.FC = ({ userId }) => { // `child`가 없을 경우 빈 객체로 초기화하여 상태 관리 const [childInfo, setChildInfo] = useState>({}); Registe..

1. 문제 원인아이 기본 정보를 입력하고 2단계 접종 정보를 전송하려고 했으나, 1단계에서 등록된 아이 정보가 없어서 데이터 전송에 실패했습니다.1단계에서 아이 정보를 입력한 후 child 테이블에 아이의 기본 정보가 저장되며 uid가 자동 생성됩니다. 이 uid가 있어야만 2단계에서 아이 접종 리스트 데이터를 제대로 전송할 수 있기 때문에, 다음 버튼 클릭 시 생성된 uid를 2단계로 전달하는 로직이 필요했습니다. 2. 해결 과정데이터 전송 코드 수정: Supabase의 .insert() 메서드를 사용하여 child 테이블에 기본 정보를 입력할 때, 단일 객체가 아니라 배열 형태로 전달하고 있었습니다. 이로 인해 single() 메서드가 작동하지 않았고, 새로 생성된 uid 값을 불러오지 못했습니다.코..