스타일 파일을 이렇게 구성했는데 scss를 전체를 바꿔주기엔 너무 범위가 커지는 것 같아 내가 담당한 페이지에 한해서 공통 속성에 대해 변수로 처리하기로 하였다. 만약 바꿔줄 수 있다면 공통으로 처리할 수 있는 것들은 변수로 미리 처리한 다음 각 페이지에서 사용하는 것이 좋다고 생각했다. 지금은 폰트하나를 변수 처리하더라도 일일히 페이지를 다 확인하기에 그건 조금 무리인 듯 싶었다. 일단 base대신 pages로 폴더링 후 폰트 색깔부터 처리해보려한다. 어렵지 않은 일이라 금방하지만 하면서 든 생각은 프로젝트 기간이 매우 짧다보니 이런 설계 측면에서 고민할 시간이 거의 없었다는게 가장 아쉽다. 그리고 또 든 생각은 프로젝트 규모가 작다보니 많은 부분을 공통화 작업을 할 이유가 없었다. 그렇게 겹치는 게 ..

리액트를 하다보면 undefined는 언제나 고민거리이다. 처음에는 || 0 을 통해 undefined를 막았지만 그럼 값을 설정하지 않았을 때 date 값이 1970년으로 나와 UX 상 좋지 않다. 이런 모습을 유저가 본다면 앱이 성의없다고 느낄 것이다. {secondsToDate(plantDetail?.wateredDays?.at(-1)?.seconds)} 아래는 유틸 함수로 빼주었는데 이렇게 했더니 원하는 결과를 얻었지만 export const secondsToDate = (seconds: number) => { if (seconds) { const date = new Date(seconds * 1000); const formattedDate = format(date, 'yyyy-MM-dd'); r..

삭제 로직에 문제가 생겼다. 삭제 자체는 잘 되지만 메인 식물이 삭제 될 때 다음으로 메인 식물을 지정해주지 않는 문제가 발생하였다. const deletePlant = async () => { if (docId) { await deletePlantDataByDocId(docId); } navigate('/myplant'); }; 파이어베이스 함수를 바깥으로 빼주었기에 이 함수를 살펴보면 export const deletePlantDataByDocId = async (docId: string) => { if (!docId) return; const docRef = doc(db, 'plant', docId); const plantData = await findPlantDataByDocId(docId); c..

리액트 훅 폼을 사용하기 전 폼을 제출하기 위해서는 수많은 State와 Onchange 작성이 필요했다. const [plantNickname, setPlantNickname] = useState( nicknameFromDetail || nicknameFromList, ); const [plantName, setPlantName] = useState( plantNameFromDetail || plantNameFromList, ); const [purchasedDay, setPurchasedDay] = useState( secondsToDate( purchasedDayFromDetail?.seconds || purchasedDayFromList?.seconds, ), ); const [wateredDay,..

분명 삭제, 생성 로직은 문제가 없었는데 생성하고 navigate로 메인 리스트로 돌아오는데 생성 때는 문제 없이 리스트가 업데이트 되어 출력되지만 삭제 시에는 데이터는 삭제 되었는데 클라이언트 단에서 업데이트가 안되어있었다. 도대체 왜 그런지 이해를 못하고 있으면서 로직이 잘못 되었나 살피었다. 분명 이 접근이 잘못된 것이 클라이언트 단에서 화면 업데이트 문제인데 데이터 코드를 보았다는 것은 멍청했다. export const deletePlantDataByDocId = async (docId: string) => { if (!docId) return; // 삭제할 plantData를 먼저 찾고 const docRef = doc(db, 'plant', docId); const plantData = awa..

프로젝트 중에는 서비스 코드가 혼재 되어 있었다. 이미 데이터 관련 부분을 api 폴더에 분리했지만 이미지 부분를 처리하는 부분은 남아 있었는데 사실 이 코드는 그냥 따온 것이라 어떻게 해야할지 고민이 되었다. 일단 코드를 이해하는 것이 첫 번째 과제이다. const cleanFileName = (fileName: string) => { const cleanedName = fileName.replace(/[^\w\s.-]/gi, ''); return cleanedName; }; const readFileAsDataURL = (file: File) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.on..