게시글
질문&답변
2024.07.24
versel 배포 후 id : null
안녕하세요 이정환입니다. 프로젝트의 전체 코드를 확인해봐야 이유를 알 수 있을 것 같습니다. 질문 가이드라인을 확인하시어 전체 프로젝트의 코드를 깃허브 등으로 전달해주시면 확인해보겠습니다 😃
- 0
- 1
- 47
질문&답변
2024.07.23
eslint 다운로드하면서
안녕하세요 이정환입니다. 아마 eslint가 아닌 prettier 옵션 설정이 잘못된 것으로 보입니다. 1섹션의 "VSCode 설치하기" 챕터에 안내드린대로 prettier 설정을 다시 확인해보시는게 좋을 것 같습니다. 그래도 안된다면 답글 부탁드립니다.
- 0
- 1
- 59
질문&답변
2024.07.23
투두리스트 코드
안녕하세요 이정환입니다. 섹션 0의 "예제 코드 및 강의 자료 안내" 에 챕터별로 안내되어 있습니다. 참고하시기 바랍니다 (사진)
- 0
- 1
- 60
질문&답변
2024.07.22
Checkbox를 누르는데 왜 Editor가 리렌더링되나요?
안녕하세요 이정환입니다. 현재 프로젝트에서 최적화를 적용했는데도 강의와 다르게 Editor 컴포넌트가 리렌더링 된다는 말씀이실까요 ? 그렇다면 원인을 정확히 파악하기 위해 질문 가이드라인에 공지해 드린대로 전체 프로젝트의 코드가 필요합니다. 코드를 깃허브에 업로드하신 다음 링크로 공유해주시면 살펴보겠습니다.
- 0
- 2
- 61
질문&답변
2024.07.22
로컬 스토리지 로딩 관련질문
안녕하세요 이정환입니다. 넵 .. 로딩이 너무 빨라서 그렇습니다 ㅠㅠ 로딩화면을 보고 싶으시다면 LocalStorage로 부터 데이터를 불러오는 함수에 setData 메서드를 호출하기 전에 setTimeout 함수를 사용해 딜레이를 걸어주시면 됩니다. 구체적으로 말씀드리자면 우선 다음과 같은 딜레이 함수를 만들어주신 다음에 export async function delay(ms: number) { return new Promise((resolve) => { setTimeout(() => { resolve(""); }, ms); }); } 해당 함수를 다음과 같이 호출해 주시면 됩니다! useEffect(() => { init(); // useEffect 내에서 await을 사용할 수 없으므로 init 이라는 별도의 함수로 분리 }, []); const init = async () => { await delay(3000); // 3초간 정지 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 = item.id; } }); idRef.current = maxId + 1; dispatch({ type: "INIT", data: parsedData, }); setIsLoading(false); };
- 0
- 3
- 83
질문&답변
2024.07.19
Diary 페이지 구현하기 23분 30초에 useEffect is not defined 에러가 나요
안녕하세요 이정환입니다. "useEffect is not defined" 란 useEffect가 정의되지 않았다는 의미로 곧 import 하지 않았음을 의미합니다. 따라서 해당 파일의 상단에 import {useEffect} from 'react' 코드가 존재하는지 다시한번 확인해보시면 좋을 것 같습니다 😃
- 0
- 1
- 50
질문&답변
2024.07.18
오픈그래프 질문드려요
안녕하세요 이정환입니다. 우선 아래의 질문을 참고해보신 다음 https://www.inflearn.com/questions/1243619/%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%ED%83%9C%EA%B7%B8 그래도 되지 않는다면 카카오 개발자 센터에서 직접 오픈그래프 캐시를 초기화 시켜주셔야 합니다 아래 첨부해드린 페이지에서 URL을 입력하신 다음 "캐시 초기화" 버튼을 클릭하시면 됩니다. https://developers.kakao.com/tool/debugger/sharing 그래도 안된다면 답글 부탁드립니다 😃
- 0
- 3
- 48
질문&답변
2024.07.16
props 데이터 전달하기 missing in props validation 오류
안녕하세요! 이정환입니다. 해당 오류는 ESLint 설정때문에 발생하는 오류로 보입니다. ESLint에 대해 간단히 설명드리자면 ESLint란 우리가 작성한 코드에 문법이나 타입적인 오류가 존재하는지 정적으로 검사해주는 추가 도구인데요 컴포넌트가 전달받은 프롭스의 타입을 명시적으로 지정하지 않았거나, 또는 여러가지 잠재적인 오류가 발생할 수 있는 상황이 되면 코드상에 경고 또는 오류 메세지를 보여주게 됩니다. 그런데 이런 ESLint의 모든 검사 옵션을 다 활성화 한 상태로 실습을 진행하게 되면 갖가지 코드에서 다 오류나 경고가 발생하게 되기 때문에 리액트를 빠르게 입문하고 계신 여러분들의 입장에서는 다소 불편함을 느끼실 수 있을 것 같아 우리 강의에서는 새로운 프로젝트를 생성할 때 마다 다음과 같이 eslintrc.json 파일에 "react/prop-types"라는 옵션을 "off"로 꺼둔 상태로 실습을 진행하게 됩니다. "rules": { "react/prop-types": "off" } 따라서 질문자님께서는 아마 이 옵션을 설정하시는 걸 까먹지 않으셨을까 ...! 예상됩니다. 안내드린대로 옵션을 조정하신 다음에도 오류가 발생하면 꼭 답글로 알려주세요! 감사합니다.
- 0
- 1
- 66
질문&답변
2024.07.15
[section08, 투두리스트] 할일 추가가 한개밖에 안되는 문제
안녕하세요 이정환입니다. 이것은 컴포넌트의 마운트 타이밍에 useMemo에 onCreate가 감싸진 이후로 다시는 생성되지 않도록 설정되었기 때문입니다. 이렇게 될 경우 onCreate 함수 내부의 setTodos([newTodos, ...todos]); 함수 호출은 영원히 초기 상태의 todos State 의 값을 참조하게 됩니다. 따라서 이런 문제를 해결하시려면 useReducer를 이용하시거나 또는 함수형 업데이트를 사용하셔야 하는데요 먼저 useReducer의 경우에는 이런 문제를 발생시키지 않습니다. 왜냐면 reducer 함수에게 매개변수로 전달되는 state는 항상 최신의 State 값을 보장하기 때문입니다. 함수형 업데이트란 setState 함수에서 항상 최신의 State 값을 참조하기 위해 사용하는 것으로 다음과 같은 문법으로 사용하실 수 있습니다. setState((state) => state + 1); 이때 매개변수로 전달되는 State 값은 항상 최신의 State값을 보장합니다. 따라서 질문자님의 경우 setTodos((todos)=>[newTodos, ...todos]); 와 같이 코드를 변경하시는게 좋을 것 같습니다.
- 1
- 1
- 57
질문&답변
2024.07.15
3.3)Node.js 사용하기 강의 중 npm run start 시 오류 발생
안녕하세요 이정환입니다. 다음 순서에 따라 해결해보시면 될 것 같습니다. NPM이 최신 버전인지 확인하기 현 재 PC에 설치되어있는 NPM이 최신 버전이 아닐 경우, 이런 현상이 발생할 수 있습니다. 따라서 npm -v 명령으로 버전을 확인하신 다음 최신 버전이 아니라면 npm i -g npm@latest 로 최신 버전으로 업그레이드해서 수행해보시기 바랍니다. (현재 최신 버전은 10.8.2입니다) NPM 캐시를 비운 뒤 다시 시도해보기 실습을 진행하고 계신 section03 폴더에서 패키지를 자주 삭제했다가 다시 설치한 경우 npm cache로 인해 문제가 발생하는 경우도 종종 있습니다. npm cache clean --force 명령으로 먼저 캐시를 전부 삭제해주신 다음 node_modules 와 package-lock.json 파일을 삭제하시고 npm install 로 의존성을 다시 다 설치해보시기 바랍니다. 그래도 안된다면 바로 답글보내주세요!
- 0
- 1
- 131