172만명의 커뮤니티!! 함께 토론해봐요.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
serve -s build 후 localhost :3000으로 접속하면 404 에러가 뜹니다 어떻게 해결 할 수 있을까요?
해결됨
따라하며 배우는 리액트 테스트 [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} />; }
미해결
나도코딩의 자바 기본편 - 풀코스 (20시간)
해당 강의 8:50 정도 부분에서 double convertedScoreDouble = score; 이 부분이 191 -> 191.0 으로 변환되었다고 해주셨는데 그 다음 줄에 sout(score) 를 입력하니 191 그대로 나옵니다. 제가 실수 한 부분이 무엇인가요??
미해결
실전! Querydsl
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 여기에 질문 내용을 남겨주세요. 안녕하세요 :) 계묘년 새해 복 많이 받으시길 바랍니다. 강의 도중 allEq와 같은 메서드를 where()메서드에 넣게 되면 null 체크를 주의해야 한다고 하셔서 여러가지 Test를 돌려보았는데요 그 결과, return usernameEq(usernameCond).and(ageEq(ageCond));와 같이 체이닝을 하게되면 제일 첫 번째 메서드(여기서는 usernameEq(usernameCond))가 null일 경우 NullPointerException이 발생하는 것을 알았습니다. 이걸 어떤 방식으로 처리해야할까요? 맨앞에 있는 것이 null인지 체크하고 그것을 제외한 조건들만 return 하는 방법도 생각했으나, 이 역시도 조건이 여러개라면 다시 첫번째 조건이 null인지 체크해야한다는 맹점이 있어서, 코드가 길어질것 같다는 생각이 듭니다. 통상적으로 이런 경우 어떻게 대처하는 지 알려주시면 감사하겠습니다! 다시 한 번 새해복 많이 받으세요!
미해결
따라하며 배우는 리액트 네이티브 기초
안드로이드 에뮬레이터를 실행하려고하는데 에러가 나서 첨엔 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 버전을 맞춰야 하는건가요?
미해결
스프링 시큐리티 OAuth2
https://www.inflearn.com/questions/693312/profile-email-%EA%B6%8C%ED%95%9C%ED%8E%98%EC%9D%B4%EC%A7%80%EA%B0%80-%EB%82%98%EC%98%A4%EC%A7%80-%EC%95%8A%EC%8A%B5%EB%8B%88%EB%8B%A4 해당 페이지에 있는 해결 방법 그대로 consent required를 킨 후에 access token을 받아오는 것 까지는 잘 되는데, 마찬가지로 userinfo 요청시 http://localhost:8080/realms/oauth2/protocol/openid-connect/userinfo 에 Authorization에 Bearer Token타입 체크 후 Token값도 받아온 access_token값으로 잘 넣어줬는데도 403 forbidden 에러가 뜨네요 무엇이 잘못된걸까요 keycloack버전은 20.0.2입니다
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
tdd 앱 개발 초입 강의에서 질문 있습니다. App.test.js에서는 screen.getByTestId("counter")를 했고, App.js 에서는 <h3> 내부에 data-testid="counter" 라고 되어 있는데요. 어떻게 App.js 내부의 <h3> 태그의 data-testid가 getByTestId로 불릴 수 있는지 궁금합니다..! 그리고 넘어간 정보가 왜 0이 아니라 TextContent가 맞는걸까요?
해결됨
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] html코드 중 <tr th:each="member : ${members}">의 members는 controller 코드의 members로부터 오는 것으로 알고 있습니다. List<Member> members = memberService.findMembers(); model.addAttribute("members", members); return "members/memberList"; 그런데 members의 값이 memberService.findMembers(); 부터 오는 것이여서 MemoryMemberRepository.java의 findAll()를 찾아봤습니다. @Override public List<Member> findAll() { return new ArrayList<>(store.values()); } 여기서 values() method로 인해서 map의 값만 추출되어 list로 변환해서 받는 것으로 알고 있습니다. 그래서 저는 controller의 members가 값만 list로 나열된 것으로 생각했는데 memberList.html에서 "member : ${members}" member가 list의 value가 아닌 domain.Member class라는 것이 잘 이해가 안됩니다.
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(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"`, 이부분이 좀 이해가 안가는게 백틱에 또 큰따옴표를 감싸주셔서..
미해결
나도코딩의 자바 기본편 - 풀코스 (20시간)
자바 강의 잘 듣고 있습니다! 저 같은 경우는 자바는 처음이 아니지만 이번 기회에 자바를 되돌아보려고 강의를 구매하게 되었습니다 !! 다름이 아니오라 공부한것을 개인 블로그에 작성하고 싶은데 출처 밝히고 올려도 될까요 ?? 출처 예시도 알려주시면 감사하겠습니다 !!
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
yarn add node-sass를 실행했을 때 gyp 에러가 발생합니다.
미해결
스프링 데이터 JPA
다른 테이블을 추가로 만들어서 post table에 매핑을 해봤더니 id값이 3부터 시작하더라구요? id값은 각 테이블 pk라서 각 테이블 처음인 1부터시작해야하는것아닌가요? 이게 Generatevalue 어노테이션과 관계가있는건가요?
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. 새해 복 많이 받으세요 ! 열심히 강의를 수강중인 학생 입니다. updateItemDTO 관련하여 궁금한게 생겨서 문의 남깁니다. 영한님이 말씀해주신 의견에 따라 소스를 변경해보았습니다. Controller updateItemDto (service package안에 뒀습니다) Service Item book 소스는 이런식으로 변경해서 잘 동작 하는 것 확인 했습니다. 궁금점 영한님이 다른 분에게 남겨 준 글을 봤을 때 DTO가 생성되는 계층에 dto class를 작성하라고 쓰여있었습니다. 저의 소스 같은 경우 Controller 에서 인스턴스화 되고 있는데 이럴 때는 Controller 밑에 dto package를 만들었어야 하는건가요? Service 쪽에서 Item findItem = itemRepository.findOne(itemId); findItem.changeItem(updateItemDto); 이 로직을 실행하게 되면 Book, Album , Movie 다 똑같이 changeItem override 해주었습니다. 이후에 Controller에서 Album , Movie 에 필요한 필드 값 세팅 후 Service로 넘겼습니다. 3개의 자식 중에 Book 호출 되게 되는데 이 점이 궁금합니다 (기본적인 자바 지식 일수도 있지만, 구글링을 하여도 적합한 글을 찾지 못해서 글 남겼습니다) 3. 2번과 이어지는 질문인데, 혹시 movie , album , book 을 다 수정할 수 있게 된다면 어떤 식으로 구성해야 좋은지 궁금합니다! 4.처음 view에서 넘겨 받은 BookForm을 itemService.updateItem() 인자로 넘기지 않고 중간에 변환해서 넘긴 이유가 궁금합니다! 5번 질문과 같은 맥락일까요 5.service 계층에서 dto를 의존하게 되는 경우는 어떤 경우인지도 궁금합니다 ! 좋은 강의 잘 보고 있습니다. 항상 감사합니다!
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 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; 이렇게 작성하고 끝내도 괜찮을까요?
미해결
나도코딩의 자바 기본편 - 풀코스 (20시간)
안녕하세요 나도코딩님 새해복 많이받으세요! 전달값(Parameter) 강의 듣고있는데 public static void powerByExp(int number, int exponent) { // 전달값을 2개 받는경우 int result = 1; for (int i = 0; i < exponent; i++) { result = result * number; } System.out.println(number + " 의 " + exponent + " 승은 " + result); powerByExp(3,3); // 3 * 3 * 3 = 8 여기서 for문의 사용법이 이해가 안가는데 result = result * number; 3의 3승을 한다고했을때 3 * 1, 3 * 3, 9 * 3는 이렇게 3번 계산하는거잖아요? 그러면 이걸 출력한다고하면 System.out.println(number + " 의 " + exponent + " 승은 " + result); result는 27이 나오는데 마지막 9 * 3 만 result라고 해석하는건가요? 3*1, 3*3 은 왜 result 라고 해석을 안하는건가요? 매소드 너무 어렵습니다.. ㅠㅠ
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] allocationSize를 50정도로 설정해서 여러서버에서 사용하더라도 동시성 이슈 없이 사용한다고 하셔서 생각해봤는데... sequence를 얻기위해 호출시에 50씩 증가되서 메모리에 가지고 있고 여러 서버에서 자주 호출되는 서비스의 경우 중간에 빈 숫자가 정말 많을 것 같습니다;; 1번의 트랜잭션에서 다음시퀀스를 받아오는 쿼리를 여러번 수행하는게(allocationsize를 1로 해두고 여러번 nextval 여러번 수행) 성능상으로 차이가 클까요? 실제 배민과 같이 트래픽이 많은 현업에서도 50정도로 잡아서 사용하는지 궁금합니다!(long사이즈도 결국 한계가 있지 않나요?ㅠㅠ)
