리액트 훅 폼을 사용하기 전 폼을 제출하기 위해서는 수많은 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..

20.1 strict mode란? 할당문으로 변수를 생성함 이때 전역 객체의 x 프로퍼티는 마치 전역 변수처럼 사용할 수 있다. 암묵적 전역 자바스크립트 문법을 엄격히 적용 20.2 strict mode의 적용 use strict; 20.3 전역에 strict mode를 적용하는 것은 피하자 20.4 함수 단위로 strict mode를 적용하는 것도 피하자 strict mode는 즉시 실행 함수로 감싼 스크립트 단위로 적용하는 것이 바람직하다. 20.5 strict mode가 발생시키는 에러 20.5.1 암묵적 전역 20.5.2 변수, 함수, 매개변수의 삭제 20.5.3 매개변수 이름의 중복 20.5.4 with 문의 사용 with 문은 전달된 객체를 스코프 체인에 추가한다. with문은 사용하지 않는 ..

그냥 하나에서 아래 내려주는 그런건 이상한건가? import { useState } from 'react'; function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return ( {title} {isActive ? ( {children} ) : ( setIsActive(true)}> Show )} ); } export default function Accordion() { return ( Almaty, Kazakhstan With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was it..

state 구조화 한번도 생각해보지 않았던 부분이다. 초창기 값이 무시된다는 걸 알 수 있도록 명명한다. 초기에만 들어오고 state color에 값이 들어오면 수정됨 이런 실수는 할 수 있을 것 같음; 지금 initialItems 가 items에 들어가 있는데 items[0]가 아래 state로 관리되고 있음. 중복되는데 input에 변해도 아래 ui가 안변함 선택된 아이템의 아이디를 찾아서 value를 변경시켜 다시 저장 그리고 리렌더링 되고 아래 메시지도 변경 import { useState } from 'react'; import { initialTravelPlan } from './places.js'; export default function TravelPlan() { const [plan, ..