173만명의 커뮤니티!! 함께 토론해봐요.
미해결
따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options). registerPage에서 넘어가지 않고 이런 오류가 계속 뜨는데 아무리 찾아봐도 안 나오네요,,
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
serve -s build 후 localhost :3000으로 접속하면 404 에러가 뜹니다 어떻게 해결 할 수 있을까요?
미해결
파이썬/장고로 웹채팅 서비스 만들기 (Feat. Channels) - 기본편
웹소켓부분은 처음 배워봐서 조금 헷갈리네요 ㅠㅠ app의 views에서 렌더링 된 echo_page.html은 클라이언트를 의미 그 클라이언트에서 ws객체를 이용해 여러가지 이벤트 핸들러 처리와 메세지를 웹소켓 서버(ws:// localhost:8000/ws/echo/)로 전송할 수 있음 웹소켓 서버로 전송된 메세지는 routing.py에 등록된 path에 맞게 매칭된 Consumer를 호출 호출된 Consumer는 receive 오버라이딩을 통해 클라이언트에서 보낸 메세지에 대해 후속 처리 이 프로세스로 흘러가는게 맞나요? 한 가지 더 궁금한 점은 이번 예제의 EchoConsumer에서 send로 보낸 메세지는 단순히 '메세지 전송 요청을 보냈던' 클라이언트에게 되돌아가는데 만약 서로 다른 여러 클라이언트에서 요청이 들어오면 각 클라이언트는 어떻게 구별하나요? http의 헤더처럼 요청 주체를 구별하는 방법이 웹소켓 통신에도 따로 있는건가요?
해결됨
QGIS 파이썬 자동화 (벡터편) Ver.2
안녕하세요 동영상을 보고 파이썬 콘솔에서 shp파일로는 불러와서 작업하는 아주 유용하게 사용하고 있습니다~ 그런데 궁금한건 외부데이터(csv,txt .. )등의 x,y값을 이용하여 python으로 포인트를 만들고자 한다면 어떻게 하나요???
해결됨
따라하며 배우는 리액트 테스트 [2023.11 업데이트]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 선생님 안녕하세요! 강의 너무 잘 듣고 있습니다! 감사해요 오류를 잡으려고 노력해봤는데도 잘 안돼서 질문 남깁니다 calculate.test.js파일의 toHaveTextContent()부분에서 모두 오류가 나고 있습니다. 선생님이 주신 소스코드와 제 코드를 모두 비교해봤는데 다 똑같더라구요. 제가 인지하지 못한 오류가 있는지 한 번 봐주실 수 있으실까요? 부탁드립니다ㅜ 오류 부분 calculate.test.js import { 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.js import 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.js import { 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 명령어도 안되서 brew install android-platform-tools 명령어로 설치한담에 위 제목같이 명령어 실행후 다시 해봤는데도 안되네요. 어떻게 해야 에뮬레이터가 실행 될까요? ㅠㅠ -> 아예 지우고 2강 전부터 다시 만들어서 실행하니 되는거같네요 ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
그대로 따라한거 같은데 태그마다 빨간 줄이 있는 이유가 뭔지 모르겠어요 ㅜ 작동은 잘 됩니다! 항상 감사합니다
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
안녕하세요, 강의를 시작할려고하는 학생입니다!! 현재 lecture-1 강의를 clone 받고 실행을 시킬려고 하는데 Error: error:0308010C:digital envelope routines::unsupported 해당 오류 코드를 뱉으면서 npm run start가 되지가 않습니다. 현재 mac, node v18.12.1을 사용하고 있는데 node 버전을 맞춰야 하는건가요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
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개발자)
yarn add node-sass를 실행했을 때 gyp 에러가 발생합니다.
해결됨
퀀트 투자를 위한 파이썬 트레이딩룸 만들기 - Part 1
StockListing 함수를 직접 제작해서 조회하는 부분 질문입니다. 22년 1월 KRX 데이터와 23년 1월 현재 KRX 데이터가 많이 다른거 같습니다. 그래서 StockListing 함수를 동일하게 제작하면 전혀 다른 결과가 나옵니다. KRX 데이터가 변동이 생길때마다 StockListing 함수를 수정해야 하는 상황인데 해결 방법 문의드립니다.
해결됨
프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
안녕하세요 먼저 좋은 강의 감사드립니다 강의자료가 비어있어 글 남깁니다 onething42@naver.com 으로 보내주시면 감사하겠습니다
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
profile의 저장되어있는 first_name의 키 값을 찾아내려고 하니깐 해당 오류가 발생합니다. 어떻게 접근해서 가져와야할까요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
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; 이렇게 작성하고 끝내도 괜찮을까요?
해결됨
[코드캠프] 시작은 프리캠프
완벽하지는 않지만, 이미 올려주셨던 분들의 코드까지 참조해서 좀 더 나은 버전으로 만들어 봤습니다. 100% 완전하지는 않은 코드지만 그래도 가시적으로 보기에는 더 나은 것 같아서 코드 공유 드립니다. <!-- test.html --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>회원가입</title> <link rel="stylesheet" href="./test.css"> </head> <body> <div> <div class="container"> <h2>회원가입을 위해<br>정보를 입력해주세요.</h2> <!-- input도 inline요소중에 하나다. --> <!-- inline이란 하나의 태그가 레코드(가로)방향을 모두 차지하는게 아니라, 자신이 속한 영역만 가지게 되는 것이다. --> <label for="email">* 이메일<br> <input type="text" id="email"><br><br> </label> <label for="name">* 이름<br> <input type="text" id="name"><br><br> </label> <label for="password1">* 비밀번호<br> <input class="pw" id="password1" type="password"><br><br> </label> <label for="password2">* 비밀번호 확인<br> <input class="pw" id="password2" type="password"><br><br> </label> <!-- 선택 영역 두번째 --> <!-- name을 부여함으로 인하여 radio의 선택 가능한 것들을 하나의 그룹으로 묶어준다. --> <form> <input type="radio" class="radio" name="gender">  여성 <input type="radio" class="radio" name="gender">  남성 </form> <br><br> <form> <input type="checkbox" class="agree">  이용약관 개인정보 수집 및 정보이용에 동의합니다. </form> <hr> <hr> <button>가입하기</button> <!-- 기능자체는 input의 타입을 button으로 하면 사용은 가능하지만, 굳이 button 태그를 사용하는 이유는 --> <!-- 커스터마이징이 button 태그가 더 용이하기 때문이다. --> <!-- <input type="button" value="가입하기"> --> </div> </div> </body> </html> /* test.css */ div { /* 바로 상위 태그인 body를 기준으로 맞춰주게끔 */ /* position의 absolute라는것이, 설정하게 되면 바로 직계부모 태그의 영향아래 놓이게 된다는 말이다. 더불어서 네모를 영역으로 봤을때 왼쪽 상단 꼭지점을 기준으로 움직이게 된다. */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 670px; height: 960px; background: #FFFFFF; border: 1px solid #AACDFF; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); border-radius: 20px; /* 이것의 의미는 타겟팅된 영역에 대해 지정된 만큼 움직여주는 거라고 한다. */ /* justify-content: space-evenly; align-content: column; */ margin: 0px; padding: 100px; box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: nowrap; } h2 { width: 466px; height: 94px; left: 725px; top: 132px; font-family: 'Noto Sans CJK KR'; font-style: normal; font-weight: 700; font-size: 32px; line-height: 47px; color: #0068FF; justify-content: space-evenly; } button { width: 400px; height: 50px; left: 725px; top: 875px; background-color: #FFFFFF; color: royalblue; border-radius: 8px; border: #0068FF solid 1px; } input { padding: 0px; border: none; border-bottom: 1px solid #CFCFCF; width: 466px; height: 30px; } label { color: lightgrey; } .radio { align-items: center; font-size: 20pt; width: 15px; height: 15px; } /* div.container { justify-content: space-between; flex-direction: row; align-items: center; } */ input.agree { align-items: center; font-size: 20pt; width: 15px; height: 15px; }
해결됨
[코드캠프] 시작은 프리캠프
안녕하세요? 개발자 도구 console창에서 let persons로 객체 배열을 선언하고 반복문 초기식에 선생님처럼 let count가 아닌 int i로 하여 만들었더니 Unexpected identifier 'i' 오류가 뜨더라구요. 객체 배열 선언할 때 사용했던 변수 선언 방식? 데이터 타입?을 for문에 넣을 때도 그대로 사용해야하는건가요? 덧붙여, 쉽게 설명해주시는 좋은 강의 잘 듣고 있습니다. 새해 복 많이 받으세요 :) !!
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
장고 4.0때부터 이상에서는 CSRF_TRUSTED_ORIGINS를 수정해줘야한다고 들었습니다. 그런데 수정하고서도 여전히 csrf 토큰 오류가 발생하네요.
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
지금은 pickle에서 장고 모델 지원되는거 같습니다!! json은 여전히 Not Serializable 에러 뜹니다 신기해서 공유드립니다
