왜 이름이 Tailwind일까 싶었다. "Tailwind"란 용어는 비행기가 날개 끝에서 생성되는 역기류인 "tailwind"와 관련이 있습니다. 마찬가지로 Tailwind CSS는 개발자가 스타일을 쉽게 작성하고 효율적으로 디자인할 수 있도록 도와줍니다. 라고한다. zustand 라는 라이브러리를 접하게 되었다. 참고로 Zustand는 독일어로 상태를 뜻한다. 나는 이상하게 별개 다 궁금하다. 그리고 barebone이라는 단어가 최소한이라는 뜻인데 여기 캐릭이 곰이라 bearbones라고 써있다. 말그대로 최소한의 설정으로 상태 관리를 해준다는 의미이다. 마침 기업에서 쓴 기술 블로그 글이 있어 읽어 보았다. 읽어보니 Zustand가 아닌 Jotai를 다루고 있었다. https://blog.hwahae..

스타일 파일을 이렇게 구성했는데 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..