묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
리덕스랑 props
리덕스에서 관리되는 데이터는 props로 넘기는 대신 redux 접근해서 바로 가져와도 성능적인면에서 크게 상관없나요? 컴포넌트끼리 props 넘기는 과정이 귀찮고 나중에 코드볼때 어떤 데이터가 넘어가야되는지 확인해야되서 리덕스로 웬만한건 다 처리하려고하는데 상관없나요?
-
미해결실전 리액트 프로그래밍
커스텀훅 작성할 때 axios 부분을 별도의 파일로 만들어서 호출 할 경우 type error 가 나타납니다.
안녕하세요. 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 추가해드릴 수 있습니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
Failed to compile.
실행시 아래와 같은 오류가 발생합니다. 아무리 구글링해봐도 안보이네요. [에러내용]
-
미해결실전 리액트 프로그래밍
정리가 잘 안됩니다.
이전 과정까지는 잘따라왔는데 어느순간부터 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
-
미해결
ts(1005) 에러가 발생합니다
(사진)
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
google 첫 페이지에서 사용하는 페이지
강의와 관련없지만 , 구글창키면 처음 나오는 페이지입니다! 웹팩 관련한 페이지 같은데 혹시 어떻게 설정하신건가요 ?! 추가로 private로 설정하면 AWS S3에서 올라간 이미지들을 불러올 때 캐싱이 적용이 안되는건가요 ? 내 브라우저 기준이 어떤건지 잘 모르겠습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
http://localhost:3060/post/1에서 에러가 발생했습니다..ㅠ
바쁘실텐데 질문드려서 죄송합니다. 영상을 보고 따라하며 공부하고 있는데 localhost:3060/post/1에서 에러가 발생했습니다. 그전까지 잘 따라했다고 생각했는데 이유를 잘 모르겠네요.... 원인을 알려주시면 진심으로 감사드립니다.....ㅠ
-
미해결React & Express 를 이용한 웹 어플리케이션 개발하기
webpack 5 대응
우선 babel관련 친구들 babel-loader빼고 다 삭제하시고 npm install -D @babel/core @babel/preset-env @babel/preset-react webpack.config.js var webpack = require('webpack') module.exports = { mode: 'development', entry: './src/index.js', output: { path: __dirname + '/public/', filename: 'bundle.js' }, devServer: { hot: true, // inline: true, host: '0.0.0.0', port: 4000, static: __dirname + '/public/', }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, options: { cacheDirectory: true, presets: ['@babel/preset-env', '@babel/preset-react'] } }, ] }, plugins: [ new webpack.HotModuleReplacementPlugin() ] }
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
npm start가 안됩니다 꼭 좀 확인해주세요ㅜㅜ
creat-react-app은 다 설치가 되었는데 npm start가 안됩니다ㅜ cmd에서도 터미널에서도 안되는데 어떻게 해야 좋을까요? react를 겨우 설치하고 나니 또 이런 문제가 생겨서 너무 마음이 속상합니다ㅡㅜㅜ
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
eslint 적용 후 에러...
이게 대체 무슨 에러인지 모르겠습니다... 검색도해보고에러메시지에서시킨대로도해봤는데 아무리해도없어지지가않아요ㅠㅜ 도와주십숑..
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
올바른 USER 모델 지정방법이 제대로 이해가 가지 않습니다 ㅠㅠ
안녕하세요 강사님. 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모델을 작성하게 되는 이유는 무엇인가요? 간단한 예제로 설명해주시면 이해가 갈 것 같습니다!
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
질문) 질문있습니다^^
속 저는 접속이 안되네요
-
미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
질문 답변 부탁드립니다. 회원가입, 로그인 페이지에서 로딩
npm run start를 실행하면 loading만 게속 뜨고 넘어가질 않네요. 현재 회원가입 및 로그인 파이어베이스 9 버젼으로 바꾼 상태입니다. 코드도 다 똑같이 했는데 뭐가 문제인지 모르겠습니다.아마 redux 저장에서 문제가 생긴거 같은데 잘 모르겠네요git hub 주소도 첨부합니다. https://github.com/dgd03146/React-firebase-chat-app
-
미해결웹 게임을 만들며 배우는 React
비동기 함수 관련 질문이 있습니다.
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 변수가 고정되는지가 궁금합니다.
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
yarn 설치는 어떻게 해야하나요ㅠ
환경세팅 영상에서 yarn 설치가 필요하면 요청해주세요해서.. 요청드려요!!+_+
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
제로초님 각 id 값 마다 특정 이미지 넣기
제로초님 안녕하세요 다름이 아니라. 제가 신발 상세 페이지에서 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 '<' 위와 같은 오류가 보입니다.
-
미해결실전 리액트 프로그래밍
react typescript 환경에서 커스텀 훅을 만들어서 사용하려고 하는데 This expression is not callable 에러가 나타납니다.
안녕하세요. 강의 보고 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();
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
넥스트 12 버전에 나왔다고 합니다ㅋㅋㅋ
제로초 강사님, 책과 강의 잘보고 있습니다. 감사합니다. 넥스트 12가 나왔는데... 러스트 컴퍼일러 등 다른 기능과~~ 서버 컴포넌트가 나왔다고 하네요 (getServerSideProps or getStaticProps 요거 필요없다고 함) 어떻게 생각하시나요? 넉스트보다 좋나요??
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
주소창에 url 쿼리로 userId를 작성한 후 수정을 하려면 500번 에러가 나타납니다
userId=roy 까지 치고 새글 생성 시 roy로만 추가하는 것까지 완료되었는데 수정을 하고나서 완료버튼을 누르면 콘솔에 에러가 떠요 catch 부분에 console.log을 찍어서 messages의 Update 부분에서 오류가 났다는 것까지는 발견했는데 구글에 검색해봐도 어떻게 해결해야 할지 잘 모르겠습니다 ㅠㅠ 사진이 좀 많은데... 감사합니다! console에 찍힌 에러 MsgList.js MsgItem.js messages.js fetcher.js