173만명의 커뮤니티!! 함께 토론해봐요.
미해결
스프링 프레임워크는 내 손에 [스프2탄]
안녕하세요 선생님. jQuery로 긴 a태그를 대체해서 form에서 input hidden으로 처리하시는데 그냥 원래 긴 a태그 있는 상태에서도 페이지 번호 유지할 수 있는 건가요? 아니면 페이지 번호 유지하기 위해서 form input hidden 방식으로 하는 게 맞나요?? 지금 해봤는데 a태그 뒤에 ?page=${pageMaker.cri.page} 이런식으로 넘기면 되네요?
해결됨
따라하며 배우는 리액트 테스트 [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} />; }
해결됨
[코드캠프] 시작은 프리캠프
복습하다가 코드를 새로 적어봤는데. 이렇게 해도 동작은 되는데 혹시 문제가 있을까요..!?
미해결
R로 하는 텍스트마이닝 (Top keyword부터 감성분석까지)
안녕하세요! 설치할 패키지들 다 설치하고, 이틀동안 인터넷 찾아가면서 따라했는데 KoNLP 만 설치하려고 하면 지원하는 버전이 아니라고 뜹니다ㅠㅠㅠㅠ 어떻게 해야할까요?
해결됨
SW 개발자를 위한 성능 좋은 SQL 쿼리 작성법
where LEN(일련번호) = 8 에서 함수를 쓰지 않고 구하는 방법은 또 어떤게 있나요??
미해결
프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
강의 자료 압출 파일이 열리지 않아 이메일로 발송 부탁드리겠습니다! leeyuyoun@naver.com
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
<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+JS 포트폴리오 실전 퍼블리싱(시즌1)
■ 질문 남기실 때 꼭! 참고해주세요. - 먼저 유사한 질문이 있었는지 검색해주세요. - 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다. - 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> css body { 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 속성을 가지게 되는데 이런 건 전혀 문제될게 없는걸까요???
미해결
Vue.js 시작하기 - Age of Vue.js
event.preventDefault();를 사용했는데 콘솔창에 test 1234가 남지 않고 여전히 새로 고침이 됩니다. 구글링을 해봤지만 답을 찾는데 시간이 너무 소모되서 질문게시판에 올립니다 ㅠ 아래는 제가 작성한 App.vue와 콘솔창 캡처본입니다
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요 선생님! 혹시 pdf자료 중 nextJs13 다이어그램에 대한 PDF자료는 어디에 있는지 알 수 있을까요? 기존 자료에는 빠져있는거 같습니다!
미해결
Vue.js + TypeScript 완벽 가이드
첫번째, 두번째 프로젝트 권한 요청 드립니다. 깃헙 계정: joie.huiju@gmail.com
미해결
스프링 프레임워크는 내 손에 [스프2탄]
안녕하세요 선생님 페이징처리할 때 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 사용 유무와 파라미터를 통해 정보를 서비스 계층에 넘기는 거랑 무슨 상관이 있는 거죠 ...?
미해결
홍정모의 따라하며 배우는 C++
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 해서 사용해도 괜찮은건가요??
미해결
따라하며 배우는 HTML, CSS
강의시작 눌렀는데 까만 화면만 나오네요 소스받기등은 눌러봐도 빈 압축폴더만 다운로드 되고요 진행관련 자세하게 방법을 알려주면 좋으련만...
미해결
스프링 프레임워크는 내 손에 [스프1탄]
안녕하세요 선생님!! 그동안 저혼자 프로젝트 만들어보면서 선생님 도움 많이 받았습니다. 감사합니다. 하면서 보니 배웠던 것도 써봐야 진짜 제 것이 되더라구요. 감사합니다. 그리고 Transaction 처리에 대해서 궁금한 게 있습니다. 프로젝트에 만약에 service말고 controller단에서 처리를 할 때에는 컨트롤러 class위에 @Transactional을 붙여주면 Transaction 처리가 되는 건가요? 아니면 추가로 더 해줘야 할 것이 있을까요??
미해결
이전에 아이디에 무료 수강코드를 등록하였는데 어제 밤11시경에 강의들으려 로그인을 하는 중, 로그인 통합을 시도하게되었고 이후 등록했던 수강코드 효력이 사라졌습니다... 확인 부탁드립니다.
해결됨
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 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에 쿼리를 날리는건데 이거도 안됩니다. 어떻게 오류를 해결해야할까요?
미해결
10주완성 C++ 코딩테스트 | 알고리즘 코딩테스트
구현 부분을 듣고나서 구현 파트가 많이 부족하다고 생각이 들어거 백준에 구현으로 분류되어있는 부분들을 풀고있는데 "프린트 큐"라는 문제를 풀면서 우선순위 큐를 사용하는 방법에 대해서 궁금증이 있어 질문드립니다. http://boj.kr/a01cae8418e74d5c908d6fbc3b64173e 이렇게 제출했는데 제가 궁금한점은 cmp라는 구조체안에 연산자를 pair의 first값이 같으면 second값을 비교해서 내림차순으로 정렬되도록 했는데 문제의 예시처럼 3 1 0 5 4 2 1 2 3 4 6 0 1 1 9 1 1 1 에서 1 1 9 1 1 1 을 입력하고 디버깅을 하면 second값이 내림차순으로 정렬되지 않는것을 확인을 했는데 왜이런식으로 계속 나오고 틀린 것인가요..??ㅠㅠ (저는 우선순위 큐 하나만을 사용하여 값이 top과 일치하면 바로 출력할 수 있도록 의도한 것입니다)
