할일 관리 앱(메모이제이션)

해당 코드에서 문제가 아니라 todoList 를 map으로 돌릴 때 key 값이 중복된다는 메세지이니반복되는 컴포넌트 요소에 key 프롭스를 어떻게 주었는지 확인해 봐야 합니다.// 아래와 같은 코드 내에서 key에 할당한 값이 중복되는 지를 확인해 보세요. {todos.map((todo, index) => ( {todo} ))}

강의자료

webstoryboy 님의 깃허브에 방문하여 소스코드에서 북붙하시면 됩니다.깃허브 주소는 강의 안내 페이지에 있습니다.

2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.

useRef() 훅을 사용했다면 해당 변수의 현재 값에 접근하려면 refObj.current 로 참조해야 합니다. 그리고 현재 const refObj = useRef() 는 초기값을 지정하거나 ref 속성으로 연결한 것이 보이지 않습니다.

사업자 등록 번호가 없는 경우는 어떻게 하죠?

개발목적으로 임시적으로 비즈앱 등록이 가능합니다. 앱 설정에서 비즈니스 항목에 '비즈 앱 등록' 링크로 들어가면 개인 개발자 비즈앱 항목에 '개인 개발자 비즈 앱 전환' 버튼이 있어서 그걸 클릭하고 비즈앱 전환 목적(필수) 란에 이메일 필수 동의 선택하시면 소설 로그인 할때 이메일 정보를 받을 수 있을 겁니다.

리액트 설치시 vite와 create React APP 차이

CRA(Create React App)으로 사용해도 상관은 없습니다.하지만 요즘은 CRA 느린 빌드 속도와 복잡한 빌드 설정등의 한계 땜에..Vite를 많이 사용합니다. vite 사용하면 CRA 사용 잘 안하게 됩니다.

강의와 만들어진 코드가 달라요

함수(메서드)나 컴포넌트를 구조분해할당(destructuring assignment)하여 가져온 차이입니다.React 와 ReactDOM 을 가져와(import) ReactDOM.createRoot(), React.StrictMode 를 사용하는가?아니면 구조분해할당 문법을 사용하여 createRoot(), StrictMode 로만 사용하는가에 차이입니다.React에서는 이런 구조분해할당이 많이 사용되니 꼭 해당 문법은 익혀두시는 게 좋습니다.

67강 상태업데이트 강의 중 궁금한 점

Prop Drilling 을 배우셨나요? 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달하는 과정에서 데이터가 필요치 않은 중간 컴포넌트들도 해당 props를 전달 받는 패턴인데.. 좋은 패턴은 아니죠.. 그래서 가깝게는 Context API를 사용하는 방법을 배울 꺼구요. 좀 더 들어가면 커스텀 훅, 상태관리 라이브러리인 redux, zustand 사용할 겁니다.

isLoading 기능 추가했는데, 존재하지 않는 일기 입니다.

isLoading 상태는 localStorage.getItem() 가 비동기가 아니므로 제대로 값을 변경할 수 없어서.계속 true 로 '데이터 로딩중...' 만 반환할 수 있습니다.우선은 isLoading 상태값을 false 로 초기화 하고서 useEffect 내에서 localStorage.getItem('daiary') 하기전에 true로 변경하고 코드를 진행해 보세요. const [isLoading, setIsLoading] = useState(false); useEffect(() => { setIsLoading(true); const storedData = localStorage.getItem("diary"); if (!storedData) { setIsLoading(false); return; } const parsedData = JSON.parse(storedData); if (!Array.isArray(parsedData)) { setIsLoading(false); return; } let maxId = 0; parsedData.forEach((item) => { if (Number(item.id) > maxId) { maxId = Number(item.id); } }); idRef.current = maxId + 1; console.log(parsedData); dispatch({ type: "INIT", data: parsedData, }); setIsLoading(false); }, []);

tsconfig.app.json에서 에러발생

TypeScript 버전이 7, 6이 나왔나요?? 현재 버전이 5.9.x 인걸로 알고 있는데..baseUrl , paths 설정 부분을 tsconfig.json 파일과 tsconfig.app.json 파일에만 설정하였는지 확인해 보세요. 혹시 tsconfig.node.json 에 설정하였다면 그곳에는 해당 설정을 제거하세요.tsconfig.json 파일에 baseUrl, paths 설정은 다음과 같은지 확인하세요.{ "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ], /* 템플릿 코드에 추가된 부분 : Path Alias */ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } }

15버전 이후의 (searchParams,Params) Promise타입 명시후 리액트 서스펜스 실습 질문

Next 15버전 부터 cookies, headers, params, searchParams, draftMode 등이 비동기 API 화 되었습니다.따라서 비동기 방식으로 코드를 처리해야 하며 따라서 함수에 async를 선언해줘야 합니다. 만약 일시적인 동기화 방식으로 처리하고자 한다면 아래 코드와 같이 React의 use() 사용해 보세요.'use client'; import { use } from 'react'; export default function Page({ searchParams }: { searchParams: Promise }) { const { q } = use(searchParams); //.... 생략 }