inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

오늘 구매햇구요 토씨 하나 안틀리고 클라이언트 환경세팅 9:02까지왔습니다 에러로 안됩니다/

해결됨

풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기

[plugin:vite:react-babel] D:\react_01\shopping-mall\src\routes.tsx: Unterminated string constant. (14:14) 17 | } D:/react_01/shopping-mall/src/routes.tsx:14:14 12 | element: <GlobalLayout />, 13 | children: [ 14 | { path: 'D:\', element: <DynamicIndex />, index: true}, | ^ 15 | { path: 'D:\products\:id', element: <DynamicId />, }, 16 | ] at instantiate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:67:32) at constructor (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:364:12) at TypeScriptParserMixin.raise (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:3365:19) at Object.unterminated (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2333:20) at readStringContents (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2065:16) at TypeScriptParserMixin.readString (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:3244:9) at TypeScriptParserMixin.getTokenFromCode (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2964:14) at TypeScriptParserMixin.getTokenFromCode (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:7267:18) at TypeScriptParserMixin.getTokenFromCode (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9752:18) at TypeScriptParserMixin.nextToken (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2451:10) at TypeScriptParserMixin.next (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2366:10) at TypeScriptParserMixin.eat (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:2371:12) at TypeScriptParserMixin.parseObjectProperty (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12126:14) at TypeScriptParserMixin.parseObjPropValue (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12154:100) at TypeScriptParserMixin.parseObjPropValue (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9482:18) at TypeScriptParserMixin.parsePropertyDefinition (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12083:17) at TypeScriptParserMixin.parseObjectLike (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11993:21) at TypeScriptParserMixin.parseExprAtom (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11464:23) at TypeScriptParserMixin.parseExprAtom (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:7239:20) at TypeScriptParserMixin.parseExprSubscripts (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11171:23) at TypeScriptParserMixin.parseUpdate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11153:21) at TypeScriptParserMixin.parseMaybeUnary (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11127:23) at TypeScriptParserMixin.parseMaybeUnary (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9590:20) at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10956:61) at TypeScriptParserMixin.parseExprOps (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10962:23) at TypeScriptParserMixin.parseMaybeConditional (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10937:23) at TypeScriptParserMixin.parseMaybeAssign (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10895:21) at TypeScriptParserMixin.parseMaybeAssign (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9529:20) at D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10863:39 at TypeScriptParserMixin.allowInAnd (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12640:12) at TypeScriptParserMixin.parseMaybeAssignAllowIn (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10863:17) at TypeScriptParserMixin.parseExprListItem (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12380:18) at TypeScriptParserMixin.parseExprList (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12352:22) at TypeScriptParserMixin.parseArrayLike (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12240:26) at TypeScriptParserMixin.parseArrayLike (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:8976:24) at TypeScriptParserMixin.parseExprAtom (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11455:23) at TypeScriptParserMixin.parseExprAtom (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:7239:20) at TypeScriptParserMixin.parseExprSubscripts (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11171:23) at TypeScriptParserMixin.parseUpdate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11153:21) at TypeScriptParserMixin.parseMaybeUnary (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:11127:23) at TypeScriptParserMixin.parseMaybeUnary (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9590:20) at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10956:61) at TypeScriptParserMixin.parseExprOps (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10962:23) at TypeScriptParserMixin.parseMaybeConditional (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10937:23) at TypeScriptParserMixin.parseMaybeAssign (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10895:21) at TypeScriptParserMixin.parseMaybeAssign (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:9529:20) at D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10863:39 at TypeScriptParserMixin.allowInAnd (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:12640:12) at TypeScriptParserMixin.parseMaybeAssignAllowIn (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.js:10863:17) at TypeScriptParserMixin.parseObjectProperty (D:\react_01\shopping-mall\node_modules\@babel\parser\lib\index.j 라고 코드 에러낫구요 이런 상황입니다 1화 앱입니다까지 햇고 그뒤로 product 페이지 만드는데서안되네요 오늘 구매햇구요 토씨 하나 안틀리고 클라이언트 환경세팅 9:02까지왔습니다 에러로 안됩니다/ 반품해도될까요? window 환경입니다 지금강의하신것은 mac 으로하시는것으로보입니다만 제환경에서는 안될것같군요 원활한 해결책을 보고 환불을 결정하겟습니다

  • graphql
  • firebase
  • react
oksky2957 댓글 1 좋아요 1 조회수 961

PostForm에서 Input이 초기화가 되지않습니다.

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

짹짹 버튼을 눌렀을 때, 처음 클릭 시에만 해당 Input이 초기화 되고, 그 뒤로는 초기화 되지 않는 오류입니다. useEffect가 addPostDone 이 바뀔 때 마다 작동이 되어야 하는데, Redux Devtool에서는 분명 변경이 되었음에도 , PostForm에서 변경이 없는걸로 감지가 됩니다. PostAction export const ADD_POST_REQUEST = 'ADD_POST_REQUEST'; export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS'; export const ADD_POST_FAILURE = 'ADD_POST_FAILURE'; const addPostRequestAction = (data) => ({ type: ADD_POST_REQUEST, data, }); export { addPostRequestAction, }; post.js (reducer) import shortId from 'shortid'; const dummyPost = (data) => ({ id: shortId.generate(), content: data, User: { id: 1, nickname: 'admin', }, Images: [], Comments: [], }); const reducer = (state = initialState, action) => { switch (action.type) { case ADD_POST_REQUEST: console.log('ADD_POST_REDUCER'); return { ...state, addPostLoading: true, addPostDone: false, addPostError: null, }; case ADD_POST_SUCCESS: return { ...state, mainPosts: [dummyPost(action.data), ...state.mainPosts], addPostLoading: false, addPostDone: true, }; case ADD_POST_FAILURE: return { ...state, addPostLoading: false, addPostError: action.error, }; default: return state; } }; ==Redux-Saga=== index.js(rootSaga) import { all, fork } from 'redux-saga/effects'; import postSaga from './post'; import userSaga from './user'; export default function* rootSaga() { yield all([ fork(postSaga), fork(userSaga), ]); } postSaga import { all, fork, takeLatest, put, delay } from 'redux-saga/effects'; import axios from 'axios'; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, } from '../reducers/Actions/post'; function* addPostRequest(action) { try { // const result = yield call(addPostAPI,action.data) delay(1000); yield put({ type: ADD_POST_SUCCESS, data: action.data, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPostRequest); } export default function* postSaga() { yield all([ fork(watchAddPost), ]); } ==Component== PostForm.js import { useCallback, useRef, useEffect, useState } from 'react'; import { Form, Input, Button } from 'antd'; import { useDispatch, useSelector } from 'react-redux'; import { addPostRequestAction } from '../reducers/Actions/post'; const PostForm = () => { const { imagePaths, addPostLoading, addPostDone } = useSelector((state) => state.post); const [text, setText] = useState(''); const dispatch = useDispatch(); useEffect(() => { if (addPostDone) { setText(''); } }, [addPostDone]); const onSubmit = useCallback(() => { dispatch(addPostRequestAction(text)); }, [text]); const onChangeText = useCallback((e) => setText(e.target.value), []); return ( <Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> <div> {imagePaths.map((v) => ( <div key={v} style={{ display: 'inline-block' }}> <img src={v} style={{ width: '200px' }} alt={v} /> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ); }; export default PostForm;

  • react
  • redux
  • express
  • nodejs
  • Next.js
댓글 1 좋아요 0 조회수 469

post 타이틀을 한글로 쓰면 경로이동이 안됩니다

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

안녕하세요 선생님 post 타이틀을 한글로 쓰면 경로이동이 안됩니다 영어로 쓰면 라우터대로 경로가 이동하는데 한글로 쓰면 이동이 안되네요... 왜이럴까요 한글타이틀 도 영어타이틀 처럼 잘 이동될순 없을까요

  • 클론코딩
  • Next.js
  • postgresql
  • docker
  • nodejs
  • react
  • typescript
레드 댓글 1 좋아요 0 조회수 395

프록시 설정했는데 localhost응답 에러 뜨는 분들

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

setupProxy.js 파일 내용을 아래처럼 바꾸시면 됩니다. 공식 문서 보니 설정 문법이 바뀌었나봐요. https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: "http://localhost:5000", changeOrigin: true, }) ); };

  • react
  • nodejs
팀오 댓글 1 좋아요 9 조회수 1275

회원가입 요청이 가지않는 이슈

미해결

Slack 클론 코딩[실시간 채팅 with React]

회원가입을 눌렀으나 회원가입이 안되고 요청이 가지 않는 것 같습니다. 에러메세지를 긁어서 확인 해보았으나 어디가 잘못된건지 모르겠고, 서버 부분의 콘솔을 확인해 보았으나 에러메세지가 나오지 않았습니다. 에러 메세지 이미지와 본문입니다. react_devtools_backend.js:4012 Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bsuccess%2C%20code%2C%20data%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at ka (react-dom.production.min.js:140:47) at react-dom.production.min.js:150:265 at Ml (react-dom.production.min.js:176:171) at Bi (react-dom.production.min.js:271:134) at Eu (react-dom.production.min.js:250:347) at wu (react-dom.production.min.js:250:278) at bu (react-dom.production.min.js:250:138) at pu (react-dom.production.min.js:243:163) at react-dom.production.min.js:123:115 at t.unstable_runWithPriority (scheduler.production.min.js:18:34 혹시나 ENV를 까먹었을까봐 다시 확인했지만 있었고, 아래는 서버쪽 터미널 이미지입니다. 감사합니다.

  • 웹팩
  • Socket.io
  • babel
  • typescript
  • react
  • 클론코딩
퀀텀에듀 댓글 1 좋아요 0 조회수 605

comment 삭제하는법

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

배포하기 전에 커뮤니티, 포스트, comment 삭제하고 다시작성하고 싶은데 어떻게해야될까요?

  • react
  • typescript
  • nodejs
  • docker
  • postgresql
  • 클론코딩
  • Next.js
이은영 댓글 2 좋아요 1 조회수 1039

Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

import React, {useState} from "react"; import "./App.css"; export default function App () { const [todoData, setTodoData] = useState([ { id:"1", title:"공부하기", completed: false, }, { id:"2", title:"청소하기", completed: false, } ]); const [Value,setValue] = useState(""); // 첫번째 인수는 변수 두번재 인수는 state를 정하는 변수 const btnStyle ={ color: "#fff", border: "none", padding: "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right", }; const getStyle = (completed) => { return{ padding:"10px", borderBottom:"1px #ccc dotted", textDecoration: completed ? 'line-through' : "none", }; }; const handleClick = (id) =>{ let newTodoData = todoData.filter(data => data.id !== id) console.log("newTodoData",newTodoData) setTodoData(newTodoData); }; const handleChange = (event) => { console.log("event",event.target.Value) setTodoData(event.target.Value); }; const handleSubmit = (event) =>{ console.log("event",event) event.preventDefault(); // reload를 막아줌 // 새로운 할일 데이터 let newTodo ={ id: Date.now(), title : Value, completed: false, }; // 원래 있던 할 일에 새로운 할일을 더해주기 setTodoData(prev => [...prev,newTodo]); setValue(""); }; const handleCompleteChange = (id) => { console.log("todoData",todoData) let newTodoData = todoData.map((data) =>{ if(data.id === id){ data.completed = !data.completed; } return data; }); setTodoData(newTodoData) }; return ( <div className="container"> <div className="todoBlock"> <div className="title"> <h1>할일 목록</h1> </div> {todoData.map((data) => ( <div style={getStyle(data.completed)} key={data.id}> <input type="checkbox" defaultChecked={false} onChange={() => handleCompleteChange(data.id)}/> {data.title} <button style={btnStyle} onClick={() => handleClick(data.id)}>x</button> </div> ))} <form style={{display:'flex'}} onSubmit={handleSubmit}> <input type="text" name="value" style={{flex:'10', pedding:'50'}} placeholder="해야 할 일을 입력하세요." value={Value} onChange={handleChange}/> <input type="submit" value="입력" className="btn" style={{flex:'1'}} /> </form> </div> </div> ); } 아래 코드에서 form에 어떠한 글자를 입력하면 Console 창에 왜 Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러가 발생하는지 도저히 모르겠습니다. 혹시 아시는분 답변 부탁드립니다. 감사합니다.

  • Next.js
  • redux
  • tdd
  • react
  • typescript
박정훈 댓글 1 좋아요 2 조회수 5446

스크롤탑 동기처리 이슈.

미해결

Slack 클론 코딩[실시간 채팅 with React]

안녕하세요 제로초님. 인피니티 스크롤 로딩 후 추가 데이터를 로딩하고 스크롤 위치를 유지하는 로직에 문제가 있어서 문의드립니다. 아래 코드에서는 setSize의 then문 안에 setTimeout으로 한 번 더 감싸주었는데 setTimeout이 없는경우 데이터가 불러와지기전에(스크롤의 높이가 늘어나지 않은 상태에서) setTimeout내부의 로직이 실행됩니다. 그로인해 스크롤의 높이는 기존높이 - 기존높이 로 scrollTop(0) 과 같은 상태가 되어버리는데요. setTimeout으로 0초의 딜레이를 주면 또 순서대로 동작을 합니다... 이런경우에 좋은 해결책이 있을까요? const onScroll = useCallback((values: positionValues) => { if (values.scrollTop === 0 && !isReachingEnd) { setSize((prevSize) => prevSize + 1).then(() => { setTimeout(() => { if (typeof scrollbarRef !== "function" && scrollbarRef?.current) { scrollbarRef.current.scrollTop(scrollbarRef.current.getScrollHeight() - values.scrollHeight); } }, 0); }); } }, []);

  • babel
  • Socket.io
  • 웹팩
  • react
  • typescript
  • 클론코딩
김영욱 댓글 2 좋아요 0 조회수 462

궁금한 점이 있어요

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

캐시 최적화 강의를 보고 난 뒤에 궁금증이 생겼습니다 app.use(express.static(path.join(__dirname, "../build"), header)); 를 통해 빌드된 것들에 대해 해더를 적용하는 것으로 이해했습니다. 근데 이렇게 빌드 된 것이 아니라 FE, BE 따로 나뉘어서 배포되어 서로 다른 도메인인 경우 어떻게 해야 하나요? BE는 static 자료가 없이 api만 보내는 기능을 하고 FE는 vercel이나 netlify 또는 다른 EC2로 배포되어 있는 경우를 말씀드립니다. app.use(header); 이렇게 하면 될까 했지만 이건 에러를 뱉어냅니다

  • devtools
  • react
Big lol 댓글 1 좋아요 1 조회수 374

axios.get 2번 불러오는데

미해결

프로젝트로 배우는 React.js

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. const getPost = () => { axios.get('http://localhost:3001/posts').then((res) => { console.log(res); }) } axios.get 하면 개발자도구에서 네트워크-> posts 2번 불러오는데 이유를 알고싶습니다.

  • es6
  • react
  • redux
cki6090 댓글 1 좋아요 1 조회수 2915

DetailVeiw 및 ListView.as_view() 파라미터 설정에 대한 질문

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

DetailVIew 및 ListView 에서 as_view() 할때 model, template_name_field, template_name 등등 상속으로 받은 클래스 변수를 초기화 해줍니다. 여기서 질문은 제가 클래스를 만들어 위 내용에 동일한 클래스 변수 생성하여 다중 상속하고 classmethod를 선언하여 메소드에 상속 된 변수를 선언할려고 하는데 코어에 as_view() 처럼 무엇이 상속되었는지 표시가 나오지 않습니다. 해당 내용에 대한 해결 방법에 대해 질문드립니다. 아래 내용은 스크린샷 입니다. 코어에서 as_view() 제가 만든 함수

  • django
  • docker
  • python
  • react
jamjameun 댓글 2 좋아요 1 조회수 347

npx sequelize db:create 오류에 대한 질문입니다.

해결됨

Slack 클론 코딩[실시간 채팅 with React]

PS C:\Projects\sleact\back> npx sequelize db:create Sequelize CLI [Node: 18.12.1, CLI: 6.2.0, ORM: 6.26.0] Loaded configuration file "config\config.js". Using environment "development". ERROR: Access denied for user 'root'@' localhost ' (using password: YES) 현재 node version은 18.12.1 npm version은 8.19.2 입니다. squelize 는 npm 을 통해서 설치하였고 cli도 설치하였습니다. config/config.js 에 string으로도 넣어보았고 .env 에도 넣어보았습니다. .env에 값이 나오는 것은 console.log로 확인하였습니다. MySQL commend clinent 에 들어가 password가 맞는지도 확인했는데 맞는 password 였습니다....! 그럼에도 불구하고 실행이 안됐습니다.. ㅠ 도움 주시면 감사하겠습니다.

  • squelize
  • react
  • typescript
  • 웹팩
  • babel
  • Socket.io
  • 클론코딩
퀀텀에듀 댓글 1 좋아요 0 조회수 521

es6 jest 미지원 오류 문의

미해결

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

안녕하세요 강의 잘 듣고 있습니다. 강의를 듣다가 axios를 설치하고 import 하는 과정에서 다음과 같은 문제가 발생했습니다. 구글링을 해보니 jest가 es6를 지원하지 않아서 발생하는 문제라고 하던데 구글링해서 찾아본 방법들은 해결이 되지 않아 문의 드립니다. FAIL src/pages/OrderPage/tests/Type.test.js ● Test suite failed to run Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node_modules" folder is ignored by transformers. Here's what you can do: • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it. • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config. • If you need a custom transformation specify a "transform" option in your config. • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option. You'll find more details and examples of these config options in the docs: https://jestjs.io/docs/configuration For information about custom transformations, see: https://jestjs.io/docs/code-transformation Details: C:\Users\multicampus\Desktop\projects\react-test-app\react-shop-test\node_modules\axios\index.js:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import axios from './lib/axios.js'; ^^^^^^ SyntaxError: Cannot use import statement outside a module > 1 | import axios from 'axios'; | ^ 2 | import React, { useEffect, useState } from 'react' 3 | import { Products } from './Products'; 4 | at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14) at Object.<anonymous> (src/pages/OrderPage/Type.js:1:1) at Object.<anonymous> (src/pages/OrderPage/tests/Type.test.js:2:1) at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13) at runJest (node_modules/@jest/core/build/runJest.js:404:19)

  • 웹앱
  • React-Context
  • react
  • jest
k915k1004 댓글 1 좋아요 0 조회수 871

안녕하세요 LocalStorage 데이터베이스 부분 오류 질문입니다.

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요 제가 이제 LocalStorage를 이용해서 하는 챕터까지 진행했는데요 전부 다 코딩치고 여러가지 테스트를 해보다가 일기를 전부 삭제를 했더니 오류가 나옵니다.. 갑자기 화면은 아무것도 안뜨고 콘솔창에서는 Uncaught TypeError: Cannot read properties of undefined (reading 'id') 이란 에러가 뜹니다. 그리고 에러위치는 App:52:1 로 dataId.current = parseInt(diaryList[0].id) + 1; 요 부분에서 에러가 나는거 같습니다.... 제가 어느부분을 잘못한걸까요??

  • react
  • nodejs
  • javascript
wjdwnsgh124 댓글 1 좋아요 0 조회수 589

npm run dev 관련 오류

미해결

따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

npm run dev를 하니 다음과 같은 오류가 납니다. PS C:\Users\82105\Downloads\boilerplate-mern-stack-master> npm run dev > react-boiler-plate@1.0.0 dev > concurrently "npm run backend" "npm run start --prefix client" [1] [1] > client@0.1.0 start [1] > react-scripts start [1] [0] [0] > react-boiler-plate@1.0.0 backend [0] > nodemon server/index.js [0] [0] [nodemon] 1.19.4 [0] [nodemon] to restart at any time, enter rs [0] [nodemon] watching dir(s): . [0] [nodemon] watching extensions: js,mjs,json [0] [nodemon] starting node server/index.js [0] (node:9916) Warning: Accessing non-existent property 'count' of module exports inside circular dependency [0] (Use node --trace-warnings ... to show where the warning was created) [0] Server Listening on 5000 [0] (node:9916) Warning: Accessing non-existent property 'findOne' of module exports inside circular dependency [0] (node:9916) Warning: Accessing non-existent property 'remove' of module exports inside circular dependency [0] (node:9916) Warning: Accessing non-existent property 'updateOne' of module exports inside circular dependency [0] MongoDB Connected... [1] [HPM] Proxy created: / -> http://localhost:5000 [1] i ｢wds｣: Project is running at http://192.168.123.163/ [1] i ｢wds｣: webpack output is served from [1] i ｢wds｣: Content not from webpack is served from C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\public [1] i ｢wds｣: 404s will fallback to / [1] Starting the development server... [1] [1] Error: error:0308010C:digital envelope routines::unsupported [1] at new Hash (node:internal/crypto/hash:71:19) [1] at Object.createHash (node:crypto:133:10) [1] at module.exports (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\util\createHash.js:135:53) [1] at NormalModule._initBuildHash (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:417:16) [1] at handleParseError (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:471:10) [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:503:5 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:358:12 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:373:3 [1] at iterateNormalLoaders (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:214:10) [1] at iterateNormalLoaders (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:221:10) [1] C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\react-scripts\scripts\start.js:19 [1] throw err; [1] ^ [1] [1] Error: error:0308010C:digital envelope routines::unsupported [1] at new Hash (node:internal/crypto/hash:71:19) [1] at Object.createHash (node:crypto:133:10) [1] at module.exports (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\util\createHash.js:135:53) [1] at NormalModule._initBuildHash (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:417:16) [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:452:10 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:323:13 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:367:11 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:233:18 [1] at context.callback (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:111:13) [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\babel-loader\lib\index.js:59:103 { [1] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], [1] library: 'digital envelope routines', [1] reason: 'unsupported', [1] code: 'ERR_OSSL_EVP_UNSUPPORTED' [1] }

  • react
  • mongodb
  • nodejs
  • redux
0724ksm 댓글 1 좋아요 0 조회수 600

react-query 에러

해결됨

풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기

3강 학습 중 react-query 버전 문제로 인한 에러가 생겨 질문합니다. 최신 버전으로 설치해서 react-query의 가이드 문서대로 코드를 수정했는데도 계속 에러가 나며 data를 가져오지 못 하고 있습니다. 어떻게 해결해야 할지 모르겠습니다ㅜ 첨부된 사진 외에는 강의대로 코드를 작성했으며 타입스크립트가 아닌 자바스크립트로 진행하고 있습니다.

  • react-query
  • react
  • graphql
  • firebase
김지현 댓글 1 좋아요 0 조회수 1081

회원가입 안되시는분들

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

https://yamea-guide.tistory.com/entry/atlas-MongoError-user-is-not-allowed-to-do-action-find-on 이거땜에 2시간을 욕하고 힘들었네요 후... 어떤글도 해결이 안됐습니다 이거 따라하세요....

  • redux
  • nodejs
  • 웹앱
  • react
  • mongodb
mafia917 댓글 0 좋아요 4 조회수 305

로그인 시도 시 타입에러 나는데 모르겠네요

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

TypeError: dispatch is not a function at handleSubmit (login.tsx?11e1:23:13) 에러나는 부분은login파일의 dispatch("LOGIN", res.data ?.user); 에서 에러가 납니다. 이 강의 듣는 몇몇분들도 동일하게 나타나는 증상같은데.. 확인 한번 부탁드립니다.

  • postgresql
  • nodejs
  • docker
  • typescript
  • react
  • Next.js
  • 클론코딩
han 댓글 3 좋아요 2 조회수 445

번들파일과 병목현상 질문

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

안녕하세요 재밌게 강의 듣고 있습니다. 번들파일을 분석하여 사용중인 모듈을 확인 하는 방법을 잘 알았습니다. code splitting을 통해 특정 페이지에서 필요없는 기능을 빼려는 이유도 잘 알겠습니다만.. 특정 페이지에서 사용하지 않는 기능은 어떻게 찾아낼 수 있을까요? 현업에선 엄청 많은 모듈과 기능들이 한 페이지 안에 담겨있을텐데 어디까지 쓰는 것이고 빼내야한다는 근거를 찾는 방법이 있나요? (시간 오래걸리는것만 빼내는건지.. 궁금합니다.) 두번 째로 병목 현상에 관련하여 GC의 경우도 이미 Article컴포넌트의 존재를 알고 그 안에 removespecial character가 1번만 일어나야된다는 것을 안다고 가정하고 GC가 여러번 일어난 것에 의심을 하는 것이 맞나요? GC랑 렌더링 성능시간이랑 크게 상관이 있는건지도 궁금합니다..!

  • react
  • devtools
세상 댓글 1 좋아요 2 조회수 415

webpack-bundle-analyzer 질문

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

안녕하세요! customize-cra 를 사용해서 config-overrides.js 파일에서 BundleAnalyzerPlugin을 불러와서 사용하는데 계속 에러가 나고 reports 파일을 확인할 수 없어서요 ㅠ addWebpackPlugin( new BundleAnalyzerPlugin({ analyzerMode: "static", openAnalyzer: true, generateStatsFile: true, statsFilename: "bundle-report.json", }) ), 위 처럼 작성하고 script에 아래를 추가하고 yarn analyze를 했는데 에러가 나네요;; 뭐가 잘못된 걸까요? 조언 부탁드립니다 "analyze": "npx webpack-bundle-analyzer build/bundle-report.json",

  • devtools
  • react
760kry@gmail.com 댓글 1 좋아요 1 조회수 801

인기 태그

인프런 TOP Writers

주간 인기글