묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
serve -s build 후 localhost:3000으로 접속하면 404 에러가 뜹니다
serve -s build 후 localhost:3000으로 접속하면 404 에러가 뜹니다 어떻게 해결 할 수 있을까요?
-
해결됨따라하며 배우는 리액트 테스트 [2023.11 업데이트]
toHaveTextContent 에서 에러가 자꾸 나는데 아무리 찾아도 잘 모르겠습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 선생님 안녕하세요! 강의 너무 잘 듣고 있습니다! 감사해요오류를 잡으려고 노력해봤는데도 잘 안돼서 질문 남깁니다calculate.test.js파일의 toHaveTextContent()부분에서 모두 오류가 나고 있습니다. 선생님이 주신 소스코드와 제 코드를 모두 비교해봤는데 다 똑같더라구요. 제가 인지하지 못한 오류가 있는지 한 번 봐주실 수 있으실까요? 부탁드립니다ㅜ오류 부분calculate.test.jsimport { render, screen } from "../../../test-utils"; import userEvent from "@testing-library/user-event"; import Type from "../Type"; import OrderPage from "../OrderPage"; test("update products total when products change", async () => { render(<Type orderType="products" />); const productsTotal = screen.getByText("상품 총 가격: ", { exact: false }); expect(productsTotal).toHaveTextContent("0"); // 아메리카 여행 상품 한개 올리기 const americaInput = await screen.findByRole("spinbutton", { name: "America", }); userEvent.clear(americaInput); userEvent.type(americaInput, "1"); // 이 상품을 하나 산다는 뜻 expect(americaInput).toHaveTextContent("1000"); }); - Type.jsimport React, { useContext, useEffect, useState } from "react"; import Products from "./Products"; import axios from "axios"; import ErrorBanner from "../../components/ErrorBanner"; import Options from "./Options"; import { OrderContext } from "../../contexts/OrderContext"; const Type = ({ orderType }) => { const [items, setItems] = useState([]); const [error, setError] = useState(false); const [orderDatas, updateItemCount] = useContext(OrderContext); // OrderContext.js의 return [{ ...orderCounts, totals }, updateItemCount]; 을 구조분해 useEffect(() => { loadItems(orderType); }, [orderType]); const loadItems = async (orderType) => { try { let response = await axios.get(`http://localhost:5000/${orderType}`); setItems(response.data); } catch (error) { setError(true); } }; if (error) { return <ErrorBanner message="에러가 발생했습니다" />; } const ItemComonents = orderType === "products" ? Products : Options; const optionItems = items.map((item) => ( <ItemComonents style={{ border: "2px solid red" }} key={item.name} name={item.name} imagePath={item.imagePath} updateItemCount={(itemName, newItemCount) => updateItemCount(itemName, newItemCount, orderType) } /> )); let orderTypeKorean = orderType === "products" ? "상품" : "옵션"; return ( <div> <h2>주문종류</h2> <p>하나의 가격</p> <p> {orderTypeKorean} 총 가격: {orderDatas.totals[orderType]} </p> <div style={{ display: "flex", flexDirection: orderType === "options" && "column", // }} > {optionItems} </div> </div> ); }; export default Type; orderContext.jsimport { createContext, useState, useMemo, useEffect } from "react"; export const OrderContext = createContext(); const pricePerItem = { products: 1000, options: 500, }; function calculateSubtotal(orderType, orderCounts) { let optionCount = 0; for (const count of orderCounts[orderType].values()) { optionCount += count; } return optionCount * pricePerItem[orderType]; } export function OrderContextProvider(props) { const [orderCounts, setOrderCounts] = useState({ products: new Map(), options: new Map(), }); const [totals, setTotals] = useState({ products: 0, options: 0, total: 0, }); useEffect(() => { const productsTotal = calculateSubtotal("products", orderCounts); const optionsTotal = calculateSubtotal("options", orderCounts); const total = productsTotal + optionsTotal; setTotals({ products: productsTotal, options: optionsTotal, total, }); }, [orderCounts]); const value = useMemo(() => { function updateItemCount(itemName, newItemCount, orderType) { const newOrderCounts = { ...orderCounts }; const orderCountsMap = orderCounts[orderType]; orderCountsMap.set(itemName, parseInt(newItemCount)); setOrderCounts(newOrderCounts); } return [{ ...orderCounts, totals }, updateItemCount]; }, [orderCounts, totals]); return <OrderContext.Provider value={value} {...props} />; }
-
미해결따라하며 배우는 리액트 네이티브 기초
adb kill-server 후 adb start-server 해도 실행이 안되네요..
안드로이드 에뮬레이터를 실행하려고하는데 에러가 나서첨엔 adb 명령어도 안되서 brew install android-platform-tools 명령어로 설치한담에 위 제목같이 명령어 실행후 다시 해봤는데도 안되네요.어떻게 해야 에뮬레이터가 실행 될까요? ㅠㅠ-> 아예 지우고 2강 전부터 다시 만들어서 실행하니 되는거같네요 ㅠㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
태그에 빨간 줄이 쳐지는 이유
그대로 따라한거 같은데 태그마다 빨간 줄이 있는 이유가 뭔지 모르겠어요 ㅜ 작동은 잘 됩니다! 항상 감사합니다
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
node version으로 인한 오류
안녕하세요, 강의를 시작할려고하는 학생입니다!!현재 lecture-1 강의를 clone 받고 실행을 시킬려고 하는데Error: error:0308010C:digital envelope routines::unsupported해당 오류 코드를 뱉으면서 npm run start가 되지가 않습니다.현재 mac, node v18.12.1을 사용하고 있는데 node 버전을 맞춰야 하는건가요?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
getByTestId
tdd 앱 개발 초입 강의에서 질문 있습니다.App.test.js에서는 screen.getByTestId("counter")를 했고, App.js 에서는 <h3> 내부에 data-testid="counter" 라고 되어 있는데요.어떻게 App.js 내부의 <h3> 태그의 data-testid가 getByTestId로 불릴 수 있는지 궁금합니다..!그리고 넘어간 정보가 왜 0이 아니라 TextContent가 맞는걸까요?
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
[서버 실행해서 지금까지 나오는 에러 해결] 부분 진행 중 에러
import "reflect-metadata";^^^^^^SyntaxError: Cannot use import statement outside a module 해당 에러 발생 후 , package.json 파일에type 을 추가 후 실행 하였더니, 충돌 에러가 발생합니다 ㅠ 어떻게 해결 해야 하는지 조언좀 부탁드립니다.https://github.com/bottlesun/study/tree/master/09-redditClone-nextjs
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강사님 이 코드에서 백틱과 따옴표들이요..
const subs = await AppDataSource.createQueryBuilder() .select( `s.title,s.name,${imageUrlExp} as "imageUrl", count(p.id) as "postCount"` ) .from(Sub, 's') .leftJoin(Post, 'p', `s.name = p."subName"`) .groupBy('s.title, s.name, "imageUrl"') .orderBy(`"postCount"`, 'DESC') .limit(5) .execute(); 위의 코드에서 백틱 ``과 따옴표들 '', "" 사용방식들에대한 기초적인 지식을 쌓으려면 어떻게 검색해보면될까요?일단 제 나름대로 접근식으로는 .from이나 .orderBy 이런건 typeORM 문법인거같아서 찾아보니 문서에는 백틱은 안적혀있는거같고 따옴표로만 작성해준거같아서요.. 혹시 변수가 들어가있으면 ``를써주는게맞나요?근데 .orderBy부분에서 `"postCount"`, 이부분이 좀 이해가 안가는게 백틱에 또 큰따옴표를 감싸주셔서..
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
node-sass를 했을 때 에러가 발생합니다.
yarn add node-sass를 실행했을 때 gyp 에러가 발생합니다.
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
안녕하세요 useaxios에서 data값을 변수에 담는법이 궁금합니다.
profile의 저장되어있는 first_name의 키 값을 찾아내려고 하니깐 해당 오류가 발생합니다. 어떻게 접근해서 가져와야할까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강사님 req.header.cookie에 언제 쿠키를 담아줬는지 궁금합니다.
export const getServerSideProps: GetServerSideProps = async ({ req, res }) => { try { const cookie = req.headers.cookie; console.log(req.headers.cookie); // 쿠키가 없다면 에러를 보냄 if (!cookie) throw new Error('Missing auth token cookie'); // 쿠키가 있다면 그 쿠키를 이용해서 백엔드에서 인증 처리하기 await axios.get('/auth/me', { headers: { cookie } }); return { props: {} }; } catch (error) { // 백엔드에서 요청에서 던져준 쿠키를 이용해 인증 처리할 때 에러가 나면 // login 페이지로 이동 res.writeHead(307, { Location: '/login' }).end(); return { props: {} }; } }; axios.get에 파라미터로 헤더.쿠키 로 넣어준걸까요?근데 순서대로 코드가 동작하게되면 if문에 걸려서 영원히 쿠키가 없어 페이지가 로그인페이지로 이동될텐데 제가 잘못생각한걸까요?두번쨰로 리턴 props:{}로 해주신 이유에대해서 궁금합니다. 다른식으로 그냥 return; 이렇게 작성하고 끝내도 괜찮을까요?
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
app serivce에서 CSRF 검증에 실패했습니다. 가 뜹니다
장고 4.0때부터 이상에서는 CSRF_TRUSTED_ORIGINS를 수정해줘야한다고 들었습니다. 그런데 수정하고서도 여전히 csrf 토큰 오류가 발생하네요.
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
Pickle load
지금은 pickle에서 장고 모델 지원되는거 같습니다!! json은 여전히 Not Serializable 에러 뜹니다신기해서 공유드립니다
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
무한스크롤 관련 질문
안녕하세요 멘토님. 알려주신대로 무한스크롤 부분을 구현하였는데, 브라우저에 떠있는 꽃무늬 ReactQuery 마크를 클릭해야 무한스크롤이 구현됩니다. 그리고 상품리스트 페이지는 그냥 할때는 구현이 안되고, 희한하게 관리자페이지의 상품리스트는 구현이 100개 상품중 60번? 정도까지만 되다 안되다 합니다.혹시 브라우저의 문제가 있는걸까요? 재남님 깃헙리포지토리를 보며 10번정도는 코드에러가 있나 확인해봤지만 문제가 없는거 같아서요! 혹시 어떤 원인이 있을 수 있을까요?
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
12:42분에서 403 Forbidden가 뜹니다!
윈도우11 home을 사용하고있고 C:\html 경로에서 docker run 명렁어를 입력하였습니다.혹시 틀린 부분이 있을까요? 위 방법으로 해결은 되었습니다. 다만 무슨차이가 있는것이고 왜 문제가 발생한지 모르겠어요 그리고 또하나 질문이 있습니다. docker run으로 실행하였을때 위에 이미지 처럼 뜨게되는데 이 상태에서 컨트롤 + c / 컨트롤 + d를 입력해도 명령이 종료가 되지않는데 어떻게 종료할 수 있을까요?
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
antd 디자인에서 Comment import가 안됩니다.
antd 디자인 홈페이지에서도 똑같이 from 'antd'에서 가져오는데 최신버전이라 안먹히는것인지 Comment가 안불러와지네요. 자동완성도 지원이 안되고요
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
useSelector 두번(중복)실행해도 괜찮은가요?
const id = useSelector((state) => state.user.user?.id); const { addCommentDone } = useSelector( (state) => state.post );위에 코드처럼 state 단계에서 갈리게되면 2번 실행하게되는데 성능엔 문제 없나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql-codegen 설치 에러
강의를 보고 graphql-codegen 설치를 진행하는데 yarn generate 명령어를 입력하니 아래와 같은 에러가 발생합니다. 수업 자료를 보고 다시 설치해봐도 동일한 오류가 계속 발생합니다.
-
미해결프로젝트로 배우는 React.js
useParams
useParams hook을 사용할때 import를 react-router 에서 하시는데 react-router-dom에서 하든 react-router에서 하든 별 상관 없는건가요?강의에서는 react-router-dom을 사용하고 있는걸로 있는데 react-router와의 차이와 import할 때 이 둘을 구분하지 않아도 되는지 궁금합니다.
-
해결됨따라하며 배우는 리액트 A-Z[19버전 반영]
에러 질문드립니다
next13 학습을 진행하고 있는데 오류가 발생해서 질문드립니다.기본적으로이 상태에서는이런 오류가 발생하고<Link>를 사용을 하게 되면이런 오류가 발생합니다..어떻게 해야하나요?