173만명의 커뮤니티!! 함께 토론해봐요.
미해결
프로젝트로 배우는 React.js
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. const getPost = () => { axios.get('http://localhost:3001/posts').then((res) => { console.log(res); }) } axios.get 하면 개발자도구에서 네트워크-> posts 2번 불러오는데 이유를 알고싶습니다.
미해결
따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
docker-compose up이후에 build는 다 되서 메인페이지는 열리지만 이렇게 에러가 납니다. 제가 한게 이상한가 싶어서 깃허브에 있는 코드로 docker-compose up해도 저런 오류가 나는데 무슨 문제인지 궁금합니다..!
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
DetailVIew 및 ListView 에서 as_view() 할때 model, template_name_field, template_name 등등 상속으로 받은 클래스 변수를 초기화 해줍니다. 여기서 질문은 제가 클래스를 만들어 위 내용에 동일한 클래스 변수 생성하여 다중 상속하고 classmethod를 선언하여 메소드에 상속 된 변수를 선언할려고 하는데 코어에 as_view() 처럼 무엇이 상속되었는지 표시가 나오지 않습니다. 해당 내용에 대한 해결 방법에 대해 질문드립니다. 아래 내용은 스크린샷 입니다. 코어에서 as_view() 제가 만든 함수
해결됨
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 였습니다....! 그럼에도 불구하고 실행이 안됐습니다.. ㅠ 도움 주시면 감사하겠습니다.
미해결
따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
안녕하세요. 강의 잘 듣고 있습니다! 배포 후 AWS에서 에러난 것을 수정 해주신 코드 보며 잘 해결했습니다. 궁금한 점이 docker-compose.yml 내부 코드를 수정하고 나서 다시 터미널에 docker-compose up --build를 해서 컨테이너를 만들고 깃허브에 푸쉬를 해야 하는 지 아니면 바로 깃허브에 푸쉬하면 되는 것인지 궁금합니다. 이번에는 혹시 몰라서 빌드를 하고 푸쉬하니 배포는 잘 됐습니다!
미해결
따라하며 배우는 리액트 테스트 [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.js) : 기초부터 실전까지
안녕하세요 제가 이제 LocalStorage를 이용해서 하는 챕터까지 진행했는데요 전부 다 코딩치고 여러가지 테스트를 해보다가 일기를 전부 삭제를 했더니 오류가 나옵니다.. 갑자기 화면은 아무것도 안뜨고 콘솔창에서는 Uncaught TypeError: Cannot read properties of undefined (reading 'id') 이란 에러가 뜹니다. 그리고 에러위치는 App:52:1 로 dataId.current = parseInt(diaryList[0].id) + 1; 요 부분에서 에러가 나는거 같습니다.... 제가 어느부분을 잘못한걸까요??
미해결
따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
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] }
해결됨
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
3강 학습 중 react-query 버전 문제로 인한 에러가 생겨 질문합니다. 최신 버전으로 설치해서 react-query의 가이드 문서대로 코드를 수정했는데도 계속 에러가 나며 data를 가져오지 못 하고 있습니다. 어떻게 해결해야 할지 모르겠습니다ㅜ 첨부된 사진 외에는 강의대로 코드를 작성했으며 타입스크립트가 아닌 자바스크립트로 진행하고 있습니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
https://yamea-guide.tistory.com/entry/atlas-MongoError-user-is-not-allowed-to-do-action-find-on 이거땜에 2시간을 욕하고 힘들었네요 후... 어떤글도 해결이 안됐습니다 이거 따라하세요....
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
TypeError: dispatch is not a function at handleSubmit (login.tsx?11e1:23:13) 에러나는 부분은login파일의 dispatch("LOGIN", res.data ?.user); 에서 에러가 납니다. 이 강의 듣는 몇몇분들도 동일하게 나타나는 증상같은데.. 확인 한번 부탁드립니다.
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
안녕하세요 재밌게 강의 듣고 있습니다. 번들파일을 분석하여 사용중인 모듈을 확인 하는 방법을 잘 알았습니다. code splitting을 통해 특정 페이지에서 필요없는 기능을 빼려는 이유도 잘 알겠습니다만.. 특정 페이지에서 사용하지 않는 기능은 어떻게 찾아낼 수 있을까요? 현업에선 엄청 많은 모듈과 기능들이 한 페이지 안에 담겨있을텐데 어디까지 쓰는 것이고 빼내야한다는 근거를 찾는 방법이 있나요? (시간 오래걸리는것만 빼내는건지.. 궁금합니다.) 두번 째로 병목 현상에 관련하여 GC의 경우도 이미 Article컴포넌트의 존재를 알고 그 안에 removespecial character가 1번만 일어나야된다는 것을 안다고 가정하고 GC가 여러번 일어난 것에 의심을 하는 것이 맞나요? GC랑 렌더링 성능시간이랑 크게 상관이 있는건지도 궁금합니다..!
해결됨
코딩은 실전이다! - Git알못을 위한 깃린이코스(Git, Github 실습위주)
cyy6366469@gmail.com 입니다!
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(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",
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요, 강의를 수강하다 궁금한 점이 있어 여쭤보려합니다. React에서 배열 사용하기 1 - 리스트 렌더링(조회) 강의 16분 35초 쯤 DiaryItem에 key={it.id}값을 전달하고 뒤에 {...it}을 전달하는 코드를 작성하게 되는데 {...it}을 전달하게 되면 it 내부에 있는 id도 같이 전달되게 되는데 굳이 key값에 it.id를 중복해서 전달하는 이유가 궁금합니다. 그래서 key={it.id}를 지워보았는데 코드는 동일하게 동작하였습니다. 이유가 무엇인가요?
해결됨
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
안녕하세요. 수업을 듣던중에 같은 방법으로 uuid 라이브러리를 다운받고 실행을 하고있는데 이런 에러가 발생을 하고 있는데 혹시 어떤 부분이 문제인지 알수있을까요..? @types/uuid 로 삭제 설치 다시 해보고 진행해도 계속 같은 에러가 발생합니다 ㅠ <package.json> "dependencies": { "@types/uuid": "^8.3.4", "graphql-request": "^5.0.0", "graphql-tag": "^2.12.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-query": "^3.39.2", "react-router-dom": "^6.4.3", "sass": "^1.56.1" }, <handlers.ts> import { v4 as uuid } from "uuid"; const mock_products = Array.from({ length: 20 }).map((_, i) => ({ id: uuid(), imageUrl: `https://placeimg.com/200/150/${i + 1}`, price: 50000, title: `임시상품${i + 1}`, description: `임시상세내용${i + 1}`, createAt: new Date(1668159460287 + i * 1000 * 60 * 60 * 10).toString(), })); <에러 내용> [plugin:vite:import-analysis] Failed to resolve import "uuid" from "src\mocks\handlers.ts". Does the file exist? C:/Users/home/Desktop/배포/shop/shopping/src/mocks/handlers.ts:3:27 1 | import { graphql } from "msw"; 2 | import GET_PRODUCTS from "../graphql/products"; 3 | import { v4 as uuid } from "uuid"; | ^ 4 | const mock_products = Array.from({ length: 20 }).map((_, i) => ({ 5 | id: uuid(), at formatError (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:39971:46) at TransformContext.error (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:39967:19) at normalizeUrl (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:36835:33) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async TransformContext.transform (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:36968:47) at async Object.transform (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:40224:30) at async loadAndTransform (file:///C:/Users/home/Desktop/%EB%B0%B0%ED%8F%AC/shop/shopping/node_modules/vite/dis
해결됨
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
index.tsx에서 ProductItem부분에서 해당 반환 형식이 유효하지 않다고 하면서 화면에 Display되지 않을때 어디를 확인하면 되는지 조언 부탁드립니다~ 데이터는 BASE_URL로 부터 잘 오고 있습니다 mac에서 vsc사용하고 있습니다 아래는 해당부분입니다 import { useQuery } from "react-query" import ProductItem from "../../components/product/item" import { fetcher, QueryKeys } from "../../queryClient" import {Product} from "../../types" const ProductList = () => { const {data} = useQuery<Product[]>(QueryKeys.PRODUCTS, () => fetcher({ method: 'GET', path: '/products' }), ) /* id: 1 title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops" price: 109.95 description: "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday" category: "men's clothing" image: "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg" ▶ rating 2 items rate: 3.9 count: 120 */ return ( <div> <ul> {data?.map(product => ( <ProductItem {...product} key={product.id} /> ))} </ul> </div> ) //return (<div>상품목록</div>) } export default ProductList components/product/item.tsx 파일입니다
미해결
처음 만난 리액트(React)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 사진 첨부 순서대로 index.js, Comment.jsx, CommentList.jsx, npm start시 출력되는 크롬 화면입니다. 이전 시계 실습에서도 동일하게 빈 화면이 출력 됐는데 타 수강생님이 올려주신 코드를 적용하니 해결이 됐어서 다음 챕터를 진행하였습니다. 그런데 동일하게 빈화면이 출력되어 어떤 부분에서 문제가 있는지 도저히 찾을 수 없어서 질문드립니다.
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
강의에서 이미지url을 프리로딩하는것을 알려주셨는데 혹시 이미 리액트 폴더안에 에셋으로 넣어놓은 이미지 파일이나 폰트를 모달 띄우기 전에 미리 프리로딩 하는 방법을 알 수 있을까요?
미해결
따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
안녕하세요 Windows 환경에서 Volume 적용 후 내용을 변경하였는데 반영이 안되는데 이유가 어떻게 될까요 docker build -t smileajw1004/nodejs ./ docker run -d -p 5000:8080 -v /usr/src/app/node_modules -v ${pwd}:/usr/src/app smileajw1004/nodejs 실행은 정상적으로 이루어지나 소스 수정 후 반영이 안됩니다. 아래 글에 댓글에는 볼륨에 이상이있다 라고만 써주셔서 해결책이 없는데 혹시 방법이 없는건가요
