✔︎ FAQ 질문 추가 시 타이틀 리셋 버그 디버깅 현상 : '자주 묻는 질문 이름'에 Title를 입력하고, 질문 추가하기 버튼을 클릭하면 타이틀이 예상치 않게 리셋되어 저장하기 버튼이 비활성화 상태로 변경되는 문제가 발생했습니다. 디버깅 과정 : useEffect 훅을 활용하여 Title먼저 입력하고, 질문 추가 후 title 상태값이 잘 들어오는지 확인해보니 빈 값이 나와서, 질문 추가하기 버튼 핸들러 함수를 자세히 살펴보았습니다. 이때 질문 & 답변 입력 필드를 초기화하는 과정에서 reset()을 사용했는데, 이 reset()함수는 useInputs 커스텀 훅을 사용하여 state를 {}객체로 관리하는데, 이때 객체 안에 들어 있는 모든 state를 초기화하기 때문에 발생한 문제였습니다. cons..
기존 코드의 문제점 : 각 부가서비스 컴포넌트에서 이미지 업로드 및 URL 저장 코드가 반복되어 있었습니다. uploadImagesAndUpdateFirestore함수 도입 : 중복 코드를 제거하기 위해 이미지 업로드와 URL 저장을 담당하는 함수를 만들었습니다. 이 함수는 이미지 압축 및 저장, Firestore 문서 업데이트를 처리합니다. // uploadUtils.js import { updateDoc } from 'firebase/firestore'; import { ref, uploadBytes, getDownloadURL } from 'firebase/storage'; import imageCompression from 'browser-image-compression'; import { mes..
크왕 앱서비스는 다양한 제출 폼에서 데이터를 수집하고 관리해야 하는 복잡한 작업에 대한 고민을 해결하기 위해 두 가지 데이터 관리 옵션을 고려하였습니다. Firebase Firestore (NoSQL) : Firebase는 초기 설정이 간편하고 데이터 모델을 미리 정의하지 않아도 유연하게 변경할 수 있는 장점을 가지고 있습니다. 또한, 예상치 못한 상황에서도 데이터를 쉽게 수정할 수 있어 프로젝트 초기에 적합합니다. Supabase (관계형 데이터베이스) : Supabase는 데이터 모델링과 스키마 정의에 시간과 노력이 많이 필요하며, 폼 변경이 어려울 수 있습니다. 그러나 복잡한 데이터 구조에 적합하며 확장성을 고려할 때 선택할 수 있습니다. 우리는 초기 서비스 론칭과 사용자 기반 확장을 고려하여 Fi..
유저 피드백 : 2023.9.8(금) ~ 2023.9.12(수) (총 5일) 🔎 발생된 문제 : 유저 A -> 예약 기능 설정 및 저장 시 같은 기능이 중복으로 등록되었어요. 유저 B -> 중복으로 등록된 예약 서비스가 수정만 가능하며 삭제가 되지 않아요. 유저 C -> 예약서비스 추가 시 너무느려서 한번더클릭하니까 여러개 생성되었어요. 유저 D -> 배너이미지 여러번 클릭시 여러개 생성되었어요. ⚒️ 문제 해결 과정 : 제가 맡은 멀티 링크 폼 추가(저장) 시 버튼이 중복으로 생성되는 버그를 확인했습니다. 이를 해결하기 위해 Lodash의 디바운싱을 활용하여 여러 번 클릭 시 1회만 실행되도록 구현하여 사용자 버튼 입력에 따른 서버 부하를 최소화하려고 노력했습니다. import _ from 'lodas..
불변성 : 메모리에 있는 값을 변경할 수 없는 것 원시데이터(문자, 숫자, 불리언) : 수정할 때 메모리에 저장된 값을 변경할 수 없고, 새로운 메모리 공간에 새로운 값을 저장한다. (불변성 ⭕️ ) !원시데이터(객체, 배열, 함수) : 수정하면 기존 메모리 공간의 값을 직접 변경한다. (불변성 ❌ ) 불변성을 지켜주는 방법 : 배열이나 객체를 수정할 때 기존 값을 직접 변경하는 것이 아니라, 새로운 배열이나 객체를 생성해야 한다.( = 순수함수) 이를 위해 스프레드 문법(...rest), map, filter 등을 사용하여 새로운 배열이나 객체로 만들어준다. 참고 레퍼런스) 리액트 입문주차 - 최원장 튜터 (스파르타코딩클럽)
