리덕스에서 관리되는 데이터는 props로 넘기는 대신 redux 접근해서 바로 가져와도 성능적인면에서 크게 상관없나요? 컴포넌트끼리 props 넘기는 과정이 귀찮고 나중에 코드볼때 어떤 데이터가 넘어가야되는지 확인해야되서 리덕스로 웬만한건 다 처리하려고하는데 상관없나요?
안녕하세요. typescript 와 create-react-app 을 사용하여 공부중인데요. 커스텀 훅을 만들어서 비동기 API를 호출하여 테이블에 노출하는 기능을 구현하다가 도저히 답이 안나와서 질문드립니다. useState와 useEffect 를 사용하여 비동기 API를 set 하는 커스텀훅을 만들었고, axios 를 호출하는 별도의 파일을 만들어서 사용중인데 const [items , setItems] = useState <coronaApiProps[]>() ; const coronaItems = getCorona () ; useEffect (() => { setItems(coronaItems) ; } , []) ; 이렇게 사용하니 아래처럼 에러가 나타납니다. TS2345: Argument of type 'Promise<coronaApiProps[]>' is not assignable to parameter of type 'SetStateAction<coronaApiProps[] | undefined>'. Type 'Promise<coronaApiProps[]>' is not assignable to type '(prevState: coronaApiProps[] | undefined) => coronaApiProps[] | undefined'. Type 'Promise<coronaApiProps[]>' provides no match for the signature '(prevState: coronaApiProps[] | undefined): coronaApiProps[] | undefined'. coronaApiProps 는 제가 만든 인터페이스입니다. 해당 에러가 나타나서 useEffect 안에 const [items , setItems] = useState <coronaApiProps[]>() ; // axios 로 api 호출 const coronaItems = getCorona () ; useEffect (() => { coronaItems. then (response => { setItems(response) ; }) ; } , []) ; 이렇게 사용하니 커스텀훅을 두번 호출합니다. 그래서 axios 파일을 분리하지 않고 커스텀훅 안에 사용하면 커스텀훅을 한번만 사용합니다. api를 호출하는 axios 파일을 분리하고 사용할 수 없나요? 필요하면 github 추가해드릴 수 있습니다.
이전 과정까지는 잘따라왔는데 어느순간부터 npm start시 오류가 납니다. 1. visual studio code - 터미널에서 실행하는것과 / window [cmd]에서 실행하는것과 같은것이죠? 2, package.json / package-lock.json 두파일은 실행하는 프로젝트 안에 존재하면 되나요? 3. node_modules 을 삭제해도 해결이 되지 않아 답답합니다. 초기 오류는 webpack version이 달라서 생긴 문제였는데 지금은 프로젝트 폴더에서 npm start시 아래와 같은 오류가 뜨는데 도움 주실수 있나요 ㅜ 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! suspense@0.1.0 start: `react-scripts start` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the suspense@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install? npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\seulki-office\AppData\Roaming\npm-cache\_logs\2021-11-16T08_31_43_225Z-debug.log
강의와 관련없지만 , 구글창키면 처음 나오는 페이지입니다! 웹팩 관련한 페이지 같은데 혹시 어떻게 설정하신건가요 ?! 추가로 private로 설정하면 AWS S3에서 올라간 이미지들을 불러올 때 캐싱이 적용이 안되는건가요 ? 내 브라우저 기준이 어떤건지 잘 모르겠습니다.
안녕하세요 강사님. 15:50부터 시작하는 '올바른 USER 모델 지정방법'설명이 제대로 이해가 가지 않습니다. 제가 아래와 같이 이해한게 맞는 내용인가요? 장고에서는 기본적으로 auth에서 User모델을 제공해준다. 그러나 개별 앱에서 User모델을 만들었을 때 Model.py에서 제대로 인식하지 못하므로 settings.py에서 'AUTH_USER_MODEL = 'instagram.User' 를 작성해주고, Models.py에서도 author = models.ForeginKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)로 작성해줘야 한다. 이렇게 이해했는데 제가 이해한 부분이 맞을까요? 맞다면 개별 앱에서 user모델을 작성하게 되는 이유는 무엇인가요? 간단한 예제로 설명해주시면 이해가 갈 것 같습니다!
npm run start를 실행하면 loading만 게속 뜨고 넘어가질 않네요. 현재 회원가입 및 로그인 파이어베이스 9 버젼으로 바꾼 상태입니다. 코드도 다 똑같이 했는데 뭐가 문제인지 모르겠습니다. 아마 redux 저장에서 문제가 생긴거 같은데 잘 모르겠네요 git hub 주소도 첨부합니다. https://github.com/dgd03146/React-firebase-chat-app
setInterval과 외부 변수와의 관계를 정확히 이해하지 못했습니다. 참조하는 변수가 객체나 배열일 때만 이 문제가 발생하는건지요? let a = 0; this.interval = setInterval(() => { console.log(a); if(a === 0 ){ a = -1; }else if( a=== -1){ a = 1; }else if( a === 1){ a = 0; } },1000) 이 부분의 경우는 이상없이 잘 동작하는 걸 확인했습니다. 그런데 객체나 배열의 경우에만 비동기 참조관계가 어그러지는건지와 말씀하신 것 처럼 왜 imgCoords 변수가 고정되는지가 궁금합니다.
제로초님 안녕하세요 다름이 아니라. 제가 신발 상세 페이지에서 json 에 신발 사이즈 Array(10) 개가 있고. 0,1,2,3,4,5,6,7,8,9,10 이 있습니다 id 값이. 각 id 값 마다 이미지를 부여 하고 싶습니다. 예시로 들자면? 만약 Array 중 id 값 -> 8 인 값에 예시로 구름 이미지를 넣어주고 싶고, id 값 중 5 인 값에는 햇님 이미지를 넣어주고 싶습니다. 제가 프론트쪽 공부해서. 백단에서 이미지를 넣어주면 되지만, 프론트에서 한번 id 값마다 특정 이미지를 넣어주고 싶은데 어떻게 해야 할 지 감이 안옵니다 ㅠㅠㅠ 도와주세요
@babel/preset-react 프리셋 변환 명령에 Successfully 완료로 확인되는데 simple1.js 파일이 생성되지 않습니다. 여전히 src>simple1.js만 있구요. 어떻게 처리해야하나요? 컴파일완료문구는 있으나 파일생성되지 않아 자바스크립트 문법이 없어서, 브라우저에 실행시 버튼이 노출되지 않으며, Uncaught SyntaxError: Unexpected token '<' 위와 같은 오류가 보입니다.
안녕하세요. 강의 보고 useState, useEffect 를 활용해보고 싶어서 공공데이터 포털에서 제공해주는 openapi 로 커스텀 훅을 만들어 봤습니다. typescript + webstorm 환경에서 작업중인데요 TS2349: This expression is not callable. No constituent of type 'void | coronaApiPros[]' is callable. import useDailyCorona: void | coronaApiPros[] App.tsx 6번 라인의 useDailyCorona(); 코드에서 이런 에러가 나타납니다. 구글링을 계속 해보는데 원하는 답을 찾을수가 없어서 질문드립니다..ㅠㅠ App.tsx 파일과 커스텀훅 파일인 useDailCorona.tsx 파일을 첨부합니다. ----------- App.tsx --------- import './App.css'; import React from 'react'; import useDailyCorona from './hooks/useDailyCorona'; function App() { const items = useDailyCorona(); return ( <ul> {items?.map((item, index) => ( <li key={index}>createDate: {item.createDt}</li> ))} </ul> ); } export default App; ----------- useDailyCorona.tsx ------------- import {useEffect, useState} from "react"; import {getCorona} from "../corona"; interface coronaApiPros { createDt: string // 조회 시작 시간 deathCnt: number // 사망자 수 defCnt: number // 확진자 수 gubun: string // 시도명(한글) gubunCn: string // 시도명(중국어) gubunEn: string // 시도명(영어) incDec: number // 전일대비 증감 수 isolClearCnt: number // 격리 해제 수 isolIngCnt: number // 격리중 환자 수 localOccCnt: number // 지역 발생 수 overFlowCnt: number // 해외 유입 수 qurRate: string // 10만명당 발생률 seq: number // 게시글번호 (국내 시도별 발생 현황 고유값) stdDay: string // 기준 일 시 updateDt: string // 수정 일시 분초 } function useDailyCorona():void|coronaApiPros[] { const [items, setItems] = useState(); const coronaItems = getCorona(); useEffect(() => { coronaItems.then(response => { setItems(response); }); }, []); return items; } export default useDailyCorona();
제로초 강사님, 책과 강의 잘보고 있습니다. 감사합니다. 넥스트 12가 나왔는데... 러스트 컴퍼일러 등 다른 기능과~~ 서버 컴포넌트가 나왔다고 하네요 ( getServerSideProps or getStaticProps 요거 필요없다고 함) 어떻게 생각하시나요? 넉스트보다 좋나요??
userId=roy 까지 치고 새글 생성 시 roy로만 추가하는 것까지 완료되었는데 수정을 하고나서 완료버튼을 누르면 콘솔에 에러가 떠요 catch 부분에 console.log을 찍어서 messages의 Update 부분에서 오류가 났다는 것까지는 발견했는데 구글에 검색해봐도 어떻게 해결해야 할지 잘 모르겠습니다 ㅠㅠ 사진이 좀 많은데... 감사합니다! console에 찍힌 에러 MsgList.js MsgItem.js messages.js fetcher.js