http://practice.codebootcamp.co.kr/graphql fetchBoard 1번 데이터 값이 null이 나옵니다.

안녕하세요 선생님. jQuery로 긴 a태그를 대체해서 form에서 input hidden으로 처리하시는데 그냥 원래 긴 a태그 있는 상태에서도 페이지 번호 유지할 수 있는 건가요? 아니면 페이지 번호 유지하기 위해서 form input hidden 방식으로 하는 게 맞나요?? 지금 해봤는데 a태그 뒤에 ?page=${pageMaker.cri.page} 이런식으로 넘기면 되네요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 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} />; }  

 복습하다가 코드를 새로 적어봤는데. 이렇게 해도 동작은 되는데 혹시 문제가 있을까요..!?

안녕하세요!설치할 패키지들 다 설치하고, 이틀동안 인터넷 찾아가면서 따라했는데 KoNLP 만 설치하려고 하면 지원하는 버전이 아니라고 뜹니다ㅠㅠㅠㅠ어떻게 해야할까요?

where LEN(일련번호) = 8 에서 함수를 쓰지 않고 구하는 방법은 또 어떤게 있나요??

 강의 자료 압출 파일이 열리지 않아 이메일로 발송 부탁드리겠습니다! leeyuyoun@naver.com

<template> <div class="inputBox shadow"> <input type="text" v-model="newTodoItem" placeholder="Type what you have to do" v-on:keyup.enter="addTodo"> <span class="addContainer" v-on:click="addTodo"> <i class="addBtn fa fa-plus" aria-hidden="true"></i> </span> <Modal> v-if="showModal" @close="showModal = false"> <h3 slot="header"> 경고! </h3> </Modal> </div> </template> <script> import Modal from './common/Modal.vue' export default{ data: function(){ return { newTodoItem:'', showModal: false } }, methods: { addTodo: function(){ if(this.newTodoItem !== ''){ this.$emit('addTodoItem', this.newTodoItem); this.clearInput(); }else{ this.showModal = !this.showModal; } }, clearInput(){ this.newTodoItem = ''; } }, components:{ Modal: Modal } } </script>위에는 TodoInput.vue 부분입니다. <template> <Transition name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header">default header</slot> </div> <div class="modal-body"> <slot name="body">default body</slot> </div> <div class="modal-footer"> <slot name="footer"> default footer <button class="modal-default-button" @click="$emit('close')" >OK</button> </slot> </div> </div> </div> </div> </Transition> </template> <style> .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: table; transition: opacity 0.3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } .modal-container { width: 300px; margin: 0px auto; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); transition: all 0.3s ease; } .modal-header h3 { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .modal-default-button { float: right; } /* * The following styles are auto-applied to elements with * transition="modal" when their visibility is toggled * by Vue.js. * * You can easily play with the modal transition by editing * these styles. */ .modal-enter-from { opacity: 0; } .modal-leave-to { opacity: 0; } .modal-enter-from .modal-container, .modal-leave-to .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); } </style> 위에는 Modal.vue 부분입니다. 위는 프로젝트 구조입니다. 모달창이 저렇게 계속 띄어져있습니다. 그냥 실행하자마자 띄어져있고 OK를 눌러도 닫혀지지가 않습니다. 왜 그런지 혹시 알 수 있을까요? 

프로젝트 파일을 받을수 있는것도 없고....기능에 대한 강의 업데이트도 안하고;;;;이거참....

■ 질문 남기실 때 꼭! 참고해주세요.- 먼저 유사한 질문이 있었는지 검색해주세요.- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.html <div class="container"> <input type="checkbox" id="trigger"> <label for="trigger"> <span></span> <span></span> <span></span> </label> <div class="sidebar"></div> </div>cssbody { height: 100vh; /* display: flex; justify-content: center; align-items: center; */ color: #fff; margin:0; padding:0; } a { color: #222; text-decoration: none; } .container {} input[id=trigger] { display: none; } label[for=trigger] { /* border: 1px solid red; */ width: 40px; height: 30px; display: block; position: absolute; cursor: pointer; right: 10px; top:50%; transform: translateY(-50%); transition: 0.3s; } label[for=trigger] span { position: absolute; height: 2px; background-color: #000; width: 100%; transition: 0.3s; } label[for=trigger] span:nth-child(1){ top:0; } label[for=trigger] span:nth-child(2){ top:50%; } label[for=trigger] span:nth-child(3){ top:100%; } input[id=trigger]:checked + label[for=trigger] span:nth-child(1){ top:50%; transform: rotate(45deg); } input[id=trigger]:checked + label[for=trigger] span:nth-child(2){ opacity: 0; } input[id=trigger]:checked + label[for=trigger] span:nth-child(3){ top:50%; transform: rotate(-45deg); } .sidebar { width: 300px; height: 100vh; background-color: #000; position: absolute; right: -300px; transition: 0.3s; } input[id=trigger]:checked ~ .sidebar { right: 0; } input[id=trigger]:checked + label[for=trigger] { right: 310px; }혼자 다시 연습하다 6:50초 경에 나온 사이드바 부분의 position을 fiexd 가 아닌 absolute 로 한 뒤 right: -300px 로 가렸더니 숨겨지는게 아니라 가로스크롤이 생기면서 옆을 볼 수 있게 되는데, 애초에 부모의 값이 따로 없고 100% 라 그런거라면 왜 fiexd는 가려지는데 absolute 는 옆에 공간이 따로 생겨서 사이드바가 생기는 걸까요?그리고 높이는 둘다 똑같이 100vh 인데 왜 세로 스크롤도 생기는걸까요??? 그리고 또 하나 궁금한게 이전에 햄버거 버튼을 만들때 label에 position : relative; 를 주고 span에 position : absolute; 를 줘서 배치를 했는데, 사이드바 생성시 햄버거 버튼의 위치 조정을 위해 label을 absolute로 변경 하게 되면 부모자식 관계였던 lable과 span이 모두 absolute 속성을 가지게 되는데 이런 건 전혀 문제될게 없는걸까요???

event.preventDefault();를 사용했는데 콘솔창에 test 1234가 남지 않고 여전히 새로 고침이 됩니다. 구글링을 해봤지만 답을 찾는데 시간이 너무 소모되서 질문게시판에 올립니다 ㅠ아래는 제가 작성한 App.vue와 콘솔창 캡처본입니다 

안녕하세요 선생님! 혹시 pdf자료 중 nextJs13 다이어그램에 대한 PDF자료는 어디에 있는지 알 수 있을까요? 기존 자료에는 빠져있는거 같습니다!

첫번째, 두번째 프로젝트 권한 요청 드립니다.깃헙 계정: joie.huiju@gmail.com

 안녕하세요 선생님 페이징처리할 때 jsp에서 <! -- 페이징 START --><div class="pull-right"> <ul class="pagination"><! -- 이전처리 --><! -- 페이지번호 처리--> <c:forEach var="pageNum" begin="${pageMaker.startPage}" end="${pageMaker.endPage}"> <c:if test="${pageMaker.cri.page != pageNum}"> <li class="page-item"><a class="page-link" href="${cpath}/board/list?page=${pageNum}">${pageNum}</a></li> </c:if> <c:if test="${pageMaker.cri.page == pageNum}"> <li class="page-item active"><a class="page-link" href="${cpath}/board/list?page=${pageNum}">${pageNum}</a></li> </c:if> </c:forEach><! -- 다음처리 --> 이런식으로 할 때요 ${cpath}/board/list?page=${pageNum}이 부분이 ?page=${pageNum} 이렇게 이용을 하는데컨트롤러에서는 RequestParam이 없는데 되네요?이 부분 헷갈리는데 설명 부탁드립니다!

request scope 사용 유무와 파라미터를 통해 정보를 서비스 계층에 넘기는 거랑 무슨 상관이 있는 거죠 ...?

auto doSomething2(std::unique_ptr<Resource> res){ res->setAll(10); return res;}...int main(){... res1 = doSomething2(std::move(res1));}이부분에서 res1를 R-value로 전환하여 doSomething2함수의 파라미터인 L-value res에 주소의 소유권을 넘겨준 것 까진 이해했습니다,그리고 doSometing의 함수가 끝나면 res라는 unique_ptr 변수는 해제되는 거 아닌가요?? 해제 된 변수를 return 해서 사용해도 괜찮은건가요?? 

 강의시작 눌렀는데 까만 화면만 나오네요소스받기등은 눌러봐도 빈 압축폴더만 다운로드 되고요진행관련 자세하게 방법을 알려주면 좋으련만...

안녕하세요 선생님!! 그동안 저혼자 프로젝트 만들어보면서 선생님 도움 많이 받았습니다. 감사합니다. 하면서 보니 배웠던 것도 써봐야 진짜 제 것이 되더라구요. 감사합니다. 그리고 Transaction 처리에 대해서 궁금한 게 있습니다.프로젝트에 만약에 service말고 controller단에서 처리를 할 때에는 컨트롤러 class위에 @Transactional을 붙여주면 Transaction 처리가 되는 건가요? 아니면 추가로 더 해줘야 할 것이 있을까요??

이전에 아이디에 무료 수강코드를 등록하였는데어제 밤11시경에 강의들으려 로그인을 하는 중, 로그인 통합을 시도하게되었고 이후 등록했던 수강코드 효력이 사라졌습니다...확인 부탁드립니다.

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.1. 강의 내용과 관련된 질문을 남겨주세요.2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.(자주 하는 질문 링크: https://bit.ly/3fX6ygx)3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)[질문 내용]상품주문 메소드 마지막줄에서 nullpointerException이 발생합니다.OrderService의 order 메소드까지 id값이 들어가는데 memberrepository에서 find를 할때 값을 찾지를 못하는거 같습니다.OrderService에 order메소드 하면 memberrepository에서 null값을 반환합니다.em.persist로 하면 db안 들어가도 1차 캐싱이랑 sql구문 모으는곳에 값이 저장되어있고 그 값을 찾아와야하는데 그 값을 못 찾고 null을 반환합니다.em.flush를 해도 db에 쿼리를 날리는건데 이거도 안됩니다.어떻게 오류를 해결해야할까요?