172만명의 커뮤니티!! 함께 토론해봐요.
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
안녕하세요. 모바일 웹 퍼블리싱 수업을 차근차근 잘 듣고 있습니다. 강의 중간중간 설명해주시는 부분이 많은 도움이 되고 있습니다. ^^ 오늘 프리로딩 퍼블리싱 파트를 들었는데요, 배경 이미지가 피그마에서 완성한 디자인과 배율이 달라보이는데 이 부분을 효과적으로 조절하려면 css background 에서 어떻게 조절하면 좋은지 궁금합니다.
미해결
초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
안녕하세요, 수식 설명 강좌까지도 몇번이고 돌려봐도, 브러우저 스크롤 관점에서도, 애니메이션되는 요소 관점에서도 당최 명확하게 이해가 되지 않아서요, 브라우저 스크롤 애니메이션 관련해서 이 강좌만큼 자세한 내용의 것이 없어서, 꼭 이해하고 싶어 이렇게 문의 드립니다. 제가 이해한 것은 1. 요소의 offsetTop과 scrollTop 값을 통해서 계산한 위치값 포인트에서, 모든 애니메이션이 시작한다(모든 애니메이션의 시작) 2. 패럴럭스 애니메이션을 위해서, 해당 이미지가 일어날 섹션이 아닌, 그 위의 섹션 위치에서 애니메이션을 실행한다. 3. 값은 1000이든 2000이든 어떤 값에서 0으로 줄어드는 로직으로 계산한다. 이 세가지 내용입니다. parallaxThisTop = winScrollTop - parallaxOffsetTop; //패럴럭스가 시작될 위치값을 구함. 해당 구문 이후로는 계속 이해가 가질 않아서요 텍스트로 길게 장황하게 라도 설명해주시면, 작성해주신 텍스트 내용 안에서 다시 이해해보는데 큰 도움이 될 듯합니다. 감사합니다. var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드 [질문] parallaxSpeed를 거리라고 강좌에서 말씀해주셨는데, 1200로 초기화 될 때, 이때 1200이란 어디를 start로, 기준으로 해서 이미지 요소가 반응하는 걸까요? 숫자 1200은 브라우저를 스크롤 할 경우, 이미지 요소들이 반응?하기까지의 간격, 거리 라고 이해하고 있습니다. 혹시 이 1200이란 숫자가 작동하기 시작하는 출발점이 parallaxThisTop인가요? 거리라고 말씀하셨는데, parallaxSpeed 어디에서 어디까지의 거리를 의미하는지 궁금합니다. parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음 [질문] 여기서 이동할 거리가 브라우저 스크롤를 할 수 있는 거리라는 의미일까요?, 이동하는 거리라면, 어디를 출발점으로 시작되는 간격(거리)일까요? 강의에서 말씀하시는 거리라는 의미가 브라우저가 스크롤되는 거리와 이미지 요소가 반응하는 거리를 구분해서 의미하면 될까요 var parallaxStartValue = 1000; //패럴럭스요소가 200 위치에서 시작하도록 설정합니다. [질문] 패럴럭스 요소라 함은 이미지 요소라고 이해하고 있는데요, 200 위치라고 하는 게 어디를 시작점으로 200만큼 y축 아래로 내려온 것인가요? 변수명의 의미와 용도에 대해서 다시 한번 설명 해주실 수 있을까요? 패럴럭스가 시작할 위치라고 강좌에서 설명해주셨는데요, parallaxThisTop도 패럴럭스가 시작된 위치인 것과 어떤 차이점이 있는지요? var parallaxSpeed = 1200; // 패럴럭스 요소의 스피드 var parallaxMoveDistance; // 패럴럭스 요소가 움직일 거리를 담을 변수 선업합니다 [질문] 첫번째 변수(parallaxSpeed)를 강좌에서 거리라고 설명해주셨는데, 변수명 parallaxMoveDistance의 거리랑 각각 어떤 다른의미의 거리인가요? parallaxPercent = parallaxThisTop / parallaxSpeed * 100; // 이동할 거리 백분율 값을 담음 parallaxMoveDistance = Math.max(parallaxStartValue - parallaxStartValue, Math.min(parallaxStartValue, parallaxStartValue - (parallaxStartValue * (parallaxPercent/100)))); //패럴럭스 요소가 움직일 거리를 구함 [질문] parallaxPercent는 브라우저의 스크롤되는 거리는 구하는 것이고, parallaxMoveDistance는 브라우저 스크롤 할때, 패럴럭스 되는 요소의 거리를 구하는 것인지요? 모든 변수명에 para~가 있어서 어떤 요소의 거리를 의미하는지 헷갈립니다.
해결됨
[코드캠프] 강력한 CSS
제가 06-04-z-index 실습을 진행하다가 position 속성에 대해 의문이 들어서 글을 쓰게 됐습니다. <body> <div class="container"> <div class="item item1"> z-index: 4 </div> <div class="item item2"> z-index: 2 </div> <div class="item item3"> z-index: 1 </div> <div class="item item4"> z-index: auto </div> </div> </body> .container { width: 100%; height: 400px; border: 2px solid blue; padding: 30px; } .item { width: 160px; height: 140px; border: 2px solid black; background: #dddddd; } .item1 { position: relative; z-index: 4; } .item2 { position: absolute; top: 70px; left: 70px; z-index: 2; } 제가 추가적으로 웹 서핑을 통해 position: absolute와 position: relative의 차이를 공부하였고 'absolute'는 "가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록 을 기준으로 삼습니다."의 특성을 가진다는 것을 학습하였습니다. 그런데 item1의 css 코드에 position:relative가 부여되는 것에 대해 강사님께서 item1이 기준이 된다고 말씀하셔서 item2가 상위 요소인 container가 아닌 item1을 기준으로 한 것인가 생각이 들었는데, 웹페이지의 배치를 보니 item2는 container를 기준으로 한 것으로 보입니다. 그래서 item1이 "기준"이 되게 한다는 설명이 어떤 요소의 기준이 되는 것인지 자세히 알고 싶어 질문 드립니다! 참고로 해당 부분은 position 강의 21분경에 언급되었습니다
미해결
[웹 개발 풀스택 코스] HTML&CSS 기초
spellcheck 를 true로 놓고 저장해도 밑줄이안생겨요
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
1:1 연관관계인 두 엔티티가 존재할 경우, 사실 1개의 테이블로 관리할 수 있고, 2개의 테이블 분리해서 관리할 수 있는데, 두 엔티티를 분리하는게 더 나을 것 같아서 2개의 엔티티로 분리하는 걸까요?
미해결
처음 만난 리액트(React)
같은 실습 코드를 mac에서 돌렸을 경우에는 잘 작동되고 윈도우에서 돌리면 오류는 뜨지 않으나 작동되지 않고 빈화면만 출력되는데 이유가 무엇인가요?
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
강의듣고 자바스크립트로 코드 변경해보고싶은데... 질문글에 있는글을 보니 제이쿼리뿐아니라 제이쿼리를 사용한 플로그인을 사용한다고 되어있던데 제이쿼리를 사용한 플로그인을 사용하나요?... 제이쿼리를 사용한 플로그인은 따로 자바스크립트로 교체가 안되는건가요?
미해결
처음 만난 리액트(React)
3번째 줄 "./Notification"에 왜 경고창이 뜨는걸까요? 실행은 잘 됩니다
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
이 코드를 처음 보는데 이게 왜 여기에 넣어지는지 모르겠어요. content: attr(data-char); *혹시 이 선생님 수업 영상 중에 기초가 될 수 있는 강의가 있을까요. 처음 보는 코드가 많이 보여서 공부를 해보고 싶습니다.
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
JPQL를 데이터를 조회하면, DB에 먼저 조회한 후, 영속성 컨텍스트에 이미 동일한 엔티티가 있으면, DB에서 조회한 데이터를 버리고, 이미 있는 엔티티를 반환한다고 알고 있습니다. 만약, 기존 엔티티를 새로 검색한 엔티티로 대체한다면, 영속성 컨텍스트에 수정 중인 데이터가 사라질 수 있어, 위험하다고 하는데, 그러면, 조회시 수정 중인 데이터가 조회되어서, 의도치 않는 데이터가 조회될 수 있지 않나요? 오히려 수정 중인 데이터 대신 새로 조회한 데이터로 대체하는게 좋지 않을까 싶은데, 혹시, DB에서 조회한 데이터를 버리고, 이미 있는 엔티티를 반환하는게 더 장점인 구체적인 예시가 있을까요?
미해결
[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>조이컨트리클럽</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"><img src="images/logo.png" alt="조이컨트리클럽"></div> <div class="navi"> <!-- navigation --> <ul class="menu"> <li> <a href="#">CLUB</a> <div class="sub-menu"> <a href="#">클럽소개</a> <a href="#">시설안내</a> </div> </li> <li> <a href="#">BOOKING</a> <div class="sub-menu"> <a href="#">요금안내</a> <a href="#">예약안내</a> <a href="#">위약안내</a> </div> </li> <li> <a href="#">INFORMATION</a> <div class="sub-menu"> <a href="#">명예의전당</a> <a href="#">이벤트</a> <a href="#">자료실</a> <a href="#">포토갤러리</a> </div> </li> <li> <a href="#">COMMUNITY</a> <div class="sub-menu"> <a href="#">공지사항</a> <a href="#">Q&A</a> </div> </li> </ul> </div> <div class="spot-menu"> <a href="#">로그인</a> <span>|</span> <a href="#">회원가입</a> </div> </header> </div> <div class="right"> <!-- 슬라이드 비주얼 --> <div class="slide"> <div class="slide-image"> <div class="slide-image-inner slide-items"> <a class="slide-item" href="#"><img src="images/slide_01.png" alt="slide1"></a> <a class="slide-item" href="#"><img src="images/slide_02.png" alt="slide2"></a> <a class="slide-item" href="#"><img src="images/slide_03.png" alt="slide3"></a> </div> </div> <!-- 슬라이드 배너 --> <div class="slider-banner"> <a href="#"><img src="images/icon_01.png" alt="예약일정">예약일정</a> <hr> <a href="#"><img src="images/icon_02.png" alt="멤버십">멤버십</a> <hr> <a href="#"><img src="images/icon_03.png" alt="오시는길">오시는길</a> <!-- 이미지만 고퀄로 변경 --> </div> </div> <div class="items"> <div class="shortcut"> <img src="images/ad.png" alt="카카오광고"> <div class="shortcut-content"> <h3>조이컨트리클럽 X 카카오골프</h3> <p>국내 최대 규모 골프장 조이컨트리 클럽과 카카오골프가 함께하는 10주년 행사! 카카오골프로 조이컨트리 클럽 신규가입시 라운드 30만원 상당의 쿠폰과 카카오골프 굿즈를 선물드려요.</p> </div> <a href="#"><img src="images/more_button.png" alt="더보기버튼"></a> </div> <div class="new"> <!-- 탭메뉴 --> <div class="tab-inner"> <div class="btn"> <a href="#" class="active">공지사항</a> <a href="#">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a href="#" class="open-modal">가을 맞이 신규 회원가입 특전을 안내드립니다.<b>2023.10.01</b> </a> <a href="#">9월 임시휴무 안내<b>2023.08.11</b> </a> <a href="#">카카오 골프 제휴 이벤트 안내<b>2023.05.11</b> </a> <a href="#">사이트가 리뉴얼 되었습니다.<b>2023.01.11</b> </a> </div> <div class="tab2"> <a href="#"> <img src="images/gallery-01.png" alt="이미지1"> <span>이미지1</span> </a> <a href="#"> <img src="images/gallery-02.png" alt="이미지2"> <span>이미지1</span> </a> <a href="#"> <img src="images/gallery-03.png" alt="이미지3"> <span>이미지1</span> </a> <a href="#"> <img src="images/gallery-04.png" alt="이미지4"> <span>이미지1</span> </a> <a href="#"> <img src="images/gallery-05.png" alt="이미지5"> <span>이미지1</span> </a> </div> </div> </div> </div> </div> </div> </div> <footer> <div class="foot-logo"> <a href="#"><img src="images/foot_logo.png" alt="조이컨트리클럽"></a> </div> <div class="copyright"> (주)조이컨트리클럽 | 대표자 : 전현무 | 개인정보관리책임자 : 박나래 | 사업자등록번호 : 000-000-0000 | 주소 : 서울특별시 송파구 송파대로 22길 조이컨트리클럽 copyright(c)2023.(주)조이컨트리클럽 </div> <div class="sns"> <a href="#"><img src="images/youtube.png" alt="유튜브"></a> <a href="#"><img src="images/facebook.png" alt="페이스북"></a> <a href="#"><img src="images/twitter.png" alt="트위터"></a> </div> </footer> </div> <!-- 팝업창 --> <div class="modal"> <div class="modal-content"> <h2>가을 맞이 신규 회원가입 특전을 안내드립니다.</h2> <p>조이컨트리 클럽은 가을맞이 신규회원 가입 특전을 실시합니다.<br/> 주요 특전혜택은 아래와 같으니 참고 부탁드립니다.<br/> <br/> - 가입 특전 -<br/> 1. 라운딩 오후4시 이후 무료입장 가능<br/> 2. 캐디비용 지원<br/> 3. 식사 쿠폰 10매 제공<br/> <br/> 감사합니다. </p> <a class="close-modal" href="#none">닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/main.js"></script> </body> </html> @charset "utf-8"; body{ margin: 0; color:#333; background-color:#fff; font-size: 16px; } a{text-decoration:none; color:inherit;} /* Entire Layout */ .container{ } .main-content{ display:flex; } .main-content > div{ } .main-content > div{ } .main-content .left{ width: 200px; background-color:#eee; } .main-content .right{ flex:1; } /* header */ header{} header > div{} header .header-logo{ border:1px solid #000; } /* Navigation */ header .navi{ height: 300px; width: 200px; } header .menu{ list-style:none; padding:0; margin:0; } header .menu li{ width: 200px; box-sizing:border-box; text-align:center;} header .menu li > a{ display:block; width: 200px; border:1px solid #444; transition:0.5s; padding:5px; background-color:#fff; color:#333; } header .menu li:hover > a{ color:#fff; background-color:#333; } header .menu .sub-menu{ display:none; } header .menu .sub-menu a{ display:block; padding:5px; box-sizing:border-box; } header .menu .sub-menu a:hover{ background-color:#333; color:#fff; } header .spot-menu{ text-align:center; margin-top:30px; font-size: 14px; } header .spot-menu a:hover{ text-decoration:underline; } /* shortcut */ .right{} .right .slide{ height: 400px; } /* 슬라이드이미지 */ .slide { height: 400px; position: relative; } .slide-image{ height: 400px; position: relative; overflow: hidden; } /* Slide Animation */ .slide-image-inner { /* 실제로 움직이는 요소 */ position: absolute; top: 0; left: 0; font-size: 0; animation: slide 0.5s linear ease-in-out; height: inherit; } .slide-image-inner a { /* 움직이는 .slide-image-inner에 포함된 요소 */ height: inherit; } .slide-image-inner a img { width: 100%; height: inherit; /* 부모요소인 a의 너비에 유동적으로 맞춰지게 하는 속성 */ object-fit: cover; } .slide .slider-banner{ background-color:#efefef; position:absolute; top: 0; right: 0; width: 50px; height:250px; padding:10px; text-align:center; } .slide .slide-banner hr{ } .slide .slider-banner a{ font-size:12px; font-weight:500; } .slide .slider-banner a:nth-child(3){ border-bottom:none; } .slide .slider-banner img{ width:50px; display:block; } /* shortcut */ .items{} .items .shortcut{display:flex; align-items:center;height:200px;} .items .shortcut img{} .items .shortcut a{position:absolute; right:20px;} .items .shortcut .shortcut-content{} .items .shortcut .shortcut-content h3{font-size: 20px;font-weight:900;} .items .shortcut .shortcut-content p{font-size:16px; font-weight:200;} /* news&gallery */ .items .new{ height: 250px; } .items .new .tab-inner{ width: 95%; margin: 0 auto; margin-top: 25px; } .items .new .tab-inner .btn{} .items .new .tab-inner .btn a{ border:1px solid #000; display:inline-block; width: 100px; padding: 5px; border-radius:5px 5px 0 0; margin-right: -6px; border-bottom:none; margin-bottom:-1px; background-color:#000; color:#fff; text-align:center; font-size: 14px; padding:8px; box-sizing:border-box; } .items .new .tab-inner .btn a.active{ background-color:#fff; color:#000; } .items .new .tab-inner .tabs{border:1px solid #333;} .items .new .tab-inner .tabs .tab1 a{ display:block; padding:3px; border-bottom:1px dashed #bbb; font-size: 15px; margin:10px; } .items .new .tab-inner .tabs .tab1 a:first-child{margin-top:20px;} .items .new .tab-inner .tabs .tab1 a:last-child{ border-bottom:none; } .items .new .tab-inner .tabs .tab1 a b{ float:right; font-weight: normal; } .items .new .tab-inner .tabs .tab2{ display:none; height: 170px; text-align:center; padding-top: 20px; box-sizing:border-box; } .items .new .tab-inner .tabs .tab2 a{ display:inline-block; text-align:center; margin:0 18px; } .items .new .tab-inner .tabs .tab2 a img{ height:120px; border-radius:5px; } .items .new .tab-inner .tabs .tab2 a span{ display:block; } /* footer */ footer{ display:flex; background-color:#222; align-items:center; color:#666; height:100px; } footer .foot-logo{ width: 200px; } footer .copyright{ padding:10px; flex:1; } footer .sns{ width: 230px; text-align:center; } footer .sns a img{ width: 35px; border-radius:10px; margin-right:10px; } /* 팝업 */ .modal { background-color: rgba(0, 0, 0, 0.19); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; display: none; } .modal-content { width: 450px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.13); } .close-modal { float: right; border: 1px solid #000; padding: 5px 10px; } /* 이건 하면 좋고 안해도 괜찮습니다. */ .modal-content h2 { text-align: center; font-size: 18px; color: #111; padding: 7px; } .modal-content p{ text-align:center; } .modal-content .close{ background-color:#000; color:#fff; padding:5px; font-size: 15px; } // Navigation (1차메뉴 색상 활성화 고정) $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() }) // 메인비주얼슬라이드 // setInterval(콜백함수, 시간); // animate(속성값, 콜백함수); setInterval(function(){ $('.slide-item').animate({top: '-100%'}, function(){ $('.slide-item').css({top: 0}); $('.slide-item:first-child').appendTo('.slide-item'); }); }, 3500); // Tab Menu $('.items .new .tab-inner .btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.items .new .tab-inner .btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) // 팝업창 열고닫기 $('.open-modal').click(function(){ $('.modal').fadeIn() }) $('.close-modal').click(function(){ $('.modal').fadeOut() })
미해결
처음 만난 리액트(React)
안녕하세요 강사님. chapter03을 할때도 있던 문제와 더불어, chapter04를 진행할때도 문제가 생겨 질문드립니다. 제가 궁금한 내용은 port 3000번이 이미 사용중이라는 메세지가 뜨는이유(초반에 create ~~명령어를 사용해 my-app 폴더를 만들어 cd my-app , npm start를 쓸땐 port 3000번에 강의영상과 같은 화면이 잘 나왔습니다.) 이것 때문에 실행할때마다 포트번호가 3001, 3002, ... 3010 이런식으로 계속 증가합니다 chapter3를 실행할땐 나오지 않던 에러페이지가 chapter4를 실행할때 나오는 이유입니다.(2번문제는 해결해서 에러는 확인해서 처리했습니다. 리턴할때 괄호를 붙이고 써서 나온 에러같아서 수정해보니 되더군요) 우선 아래는 Clock.jsx파일입니다. import React from "react"; function Clock(props){ return( <div> <h1>안녕, 리액트!</h1> <h2>현재 시간: {new Date().toLocaleDateString()}</h2> </div> ); } export default Clock; 그리고 index.js파일입니다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter_03/Library'; import Clock from './chapter_04/Clock'; const root = ReactDOM.createRoot(document.getElementById('root')); setInterval(()=>{ root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); }, 1000) // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 이를 새 터미널을 활용해 실행시켜보면 다음과 같이 뜨는데요, 여기서 y를 눌러 실행을 해보면 아래와 같이 에러가 뜹니다. 에러가 나는 이유와 해결방안이 궁금합니다 감사합니다.
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
custom.js에서 $(function(){ $('.trigger').click(function(){ $(this).toggeClass('active') $('.gnb').toggeClass('active') }) $('section, .menu a').click(function(){ $('.gnb').removeClass('active')}) $('.menu a').click(function(e) { e.preventDefault(); $.scrollTo(0, 900); }); }) 제이쿼리스크롤을 index.html에 링크 건 후에 custom.js의 click 부분들에 줄이 그어졌습니다."선언이 여기에 사용되지 않음으로 표시되었습니다" 라고 뜨는데 어떻게 해결해야 할까요?
해결됨
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
2023-10-09T19:14:55.542+09:00 INFO 2455 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring DispatcherServlet 'dispatcherServlet' 2023-10-09T19:14:55.542+09:00 INFO 2455 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Initializing Servlet 'dispatcherServlet' 2023-10-09T19:14:55.542+09:00 INFO 2455 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Completed initialization in 0 ms 2023-10-09T19:14:55.660+09:00 DEBUG 2455 --- [nio-8080-exec-1] org.hibernate.SQL : select o1_0.order_id, o1_0.delivery_id, o1_0.member_id, o1_0.order_date, o1_0.status from orders o1_0 offset ? rows fetch first ? rows only 2023-10-09T19:14:55.662+09:00 INFO 2455 --- [nio-8080-exec-1] p6spy : #1696846495662 | took 0ms | statement | connection 7| url jdbc:h2:tcp://localhost/~/jpanew select o1_0.order_id,o1_0.delivery_id,o1_0.member_id,o1_0.order_date,o1_0.status from orders o1_0 offset ? rows fetch first ? rows only select o1_0.order_id,o1_0.delivery_id,o1_0.member_id,o1_0.order_date,o1_0.status from orders o1_0 offset 0 rows fetch first 100 rows only; 2023-10-09T19:14:55.668+09:00 DEBUG 2455 --- [nio-8080-exec-1] org.hibernate.SQL : select m1_0.member_id, m1_0.city, m1_0.street, m1_0.zipcode, m1_0.name from member m1_0 where array_contains(?,m1_0.member_id) 2023-10-09T19:14:55.672+09:00 INFO 2455 --- [nio-8080-exec-1] p6spy : #1696846495672 | took 0ms | statement | connection 7| url jdbc:h2:tcp://localhost/~/jpanew select m1_0.member_id,m1_0.city,m1_0.street,m1_0.zipcode,m1_0.name from member m1_0 where array_contains(?,m1_0.member_id) select m1_0.member_id,m1_0.city,m1_0.street,m1_0.zipcode,m1_0.name from member m1_0 where array_contains('ar0: ARRAY [CAST(1 AS BIGINT), CAST(2 AS BIGINT)]',m1_0.member_id); 2023-10-09T19:14:55.674+09:00 DEBUG 2455 --- [nio-8080-exec-1] org.hibernate.SQL : select d1_0.id, d1_0.city, d1_0.street, d1_0.zipcode, d1_0.status from delivery d1_0 where array_contains(?,d1_0.id) 2023-10-09T19:14:55.674+09:00 INFO 2455 --- [nio-8080-exec-1] p6spy : #1696846495674 | took 0ms | statement | connection 7| url jdbc:h2:tcp://localhost/~/jpanew select d1_0.id,d1_0.city,d1_0.street,d1_0.zipcode,d1_0.status from delivery d1_0 where array_contains(?,d1_0.id) select d1_0.id,d1_0.city,d1_0.street,d1_0.zipcode,d1_0.status from delivery d1_0 where array_contains('ar1: ARRAY [CAST(1 AS BIGINT), CAST(2 AS BIGINT)]',d1_0.id); 2023-10-09T19:14:55.676+09:00 DEBUG 2455 --- [nio-8080-exec-1] org.hibernate.SQL : select o1_0.order_id, o1_0.delivery_id, o1_0.member_id, o1_0.order_date, o1_0.status from orders o1_0 where o1_0.delivery_id=? 2023-10-09T19:14:55.677+09:00 INFO 2455 --- [nio-8080-exec-1] p6spy : #1696846495677 | took 0ms | statement | connection 7| url jdbc:h2:tcp://localhost/~/jpanew select o1_0.order_id,o1_0.delivery_id,o1_0.member_id,o1_0.order_date,o1_0.status from orders o1_0 where o1_0.delivery_id=? select o1_0.order_id,o1_0.delivery_id,o1_0.member_id,o1_0.order_date,o1_0.status from orders o1_0 where o1_0.delivery_id=1; 2023-10-09T19:14:55.677+09:00 DEBUG 2455 --- [nio-8080-exec-1] org.hibernate.SQL : select o1_0.order_id, o1_0.delivery_id, o1_0.member_id, o1_0.order_date, o1_0.status from orders o1_0 where o1_0.delivery_id=? 2023-10-09T19:14:55.678+09:00 INFO 2455 --- [nio-8080-exec-1] p6spy : #1696846495678 | took 0ms | statement | connection 7| url jdbc:h2:tcp://localhost/~/jpanew select o1_0.order_id,o1_0.delivery_id,o1_0.member_id,o1_0.order_date,o1_0.status from orders o1_0 where o1_0.delivery_id=? select o1_0.order_id,o1_0.delivery_id,o1_0.member_id,o1_0.order_date,o1_0.status from orders o1_0 where o1_0.delivery_id=2; 2023-10-09T19:14:55.680+09:00 DEBUG 2455 --- [nio-8080-exec-1] org.hibernate.SQL : select o1_0.order_id, o1_0.order_item_id, o1_0.count, o1_0.item_id, o1_0.order_price from order_item o1_0 where array_contains(?,o1_0.order_id) 2023-10-09T19:14:55.686+09:00 INFO 2455 --- [nio-8080-exec-1] p6spy : #1696846495686 | took 5ms | statement | connection 7| url jdbc:h2:tcp://localhost/~/jpanew select o1_0.order_id,o1_0.order_item_id,o1_0.count,o1_0.item_id,o1_0.order_price from order_item o1_0 where array_contains(?,o1_0.order_id) select o1_0.order_id,o1_0.order_item_id,o1_0.count,o1_0.item_id,o1_0.order_price from order_item o1_0 where array_contains('ar2: ARRAY [CAST(1 AS BIGINT), CAST(2 AS BIGINT), NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL]',o1_0.order_id); 2023-10-09T19:14:55.687+09:00 DEBUG 2455 --- [nio-8080-exec-1] org.hibernate.SQL : select i1_0.item_id, i1_0.dtype, i1_0.name, i1_0.price, i1_0.stock_quantity, i1_0.artist, i1_0.etc, i1_0.author, i1_0.isbn, i1_0.actor, i1_0.director from item i1_0 where array_contains(?,i1_0.item_id) 2023-10-09T19:14:55.688+09:00 INFO 2455 --- [nio-8080-exec-1] p6spy : #1696846495688 | took 0ms | statement | connection 7| url jdbc:h2:tcp://localhost/~/jpanew select i1_0.item_id,i1_0.dtype,i1_0.name,i1_0.price,i1_0.stock_quantity,i1_0.artist,i1_0.etc,i1_0.author,i1_0.isbn,i1_0.actor,i1_0.director from item i1_0 where array_contains(?,i1_0.item_id) select i1_0.item_id,i1_0.dtype,i1_0.name,i1_0.price,i1_0.stock_quantity,i1_0.artist,i1_0.etc,i1_0.author,i1_0.isbn,i1_0.actor,i1_0.director from item i1_0 where array_contains('ar3: ARRAY [CAST(1 AS BIGINT), CAST(2 AS BIGINT), CAST(3 AS BIGINT), CAST(4 AS BIGINT)]',i1_0.item_id); 이 결과값에서 강의랑 다른 부분이 있어서 질문 드립니다 하이버네이트 6.2 라서 array_contains 인거 아는데 아래 부분이 이해가 안됩니다. select o1_0.order_id, o1_0.delivery_id, o1_0.member_id, o1_0.order_date, o1_0.status from orders o1_0 where o1_0.delivery_id=? 2023-10-09T19:14:55.677+09:00 INFO 2455 --- [nio-8080-exec-1] p6spy : #1696846495677 | took 0ms | statement | connection 7| url jdbc:h2:tcp://localhost/~/jpanew select o1_0.order_id,o1_0.delivery_id,o1_0.member_id,o1_0.order_date,o1_0.status from orders o1_0 where o1_0.delivery_id=? select o1_0.order_id,o1_0.delivery_id,o1_0.member_id,o1_0.order_date,o1_0.status from orders o1_0 where o1_0.delivery_id=1; 2023-10-09T19:14:55.677+09:00 DEBUG 2455 --- [nio-8080-exec-1] org.hibernate.SQL : select o1_0.order_id, o1_0.delivery_id, o1_0.member_id, o1_0.order_date, o1_0.status from orders o1_0 where o1_0.delivery_id=? 2023-10-09T19:14:55.678+09:00 INFO 2455 --- [nio-8080-exec-1] p6spy : #1696846495678 | took 0ms | statement | connection 7| url jdbc:h2:tcp://localhost/~/jpanew select o1_0.order_id,o1_0.delivery_id,o1_0.member_id,o1_0.order_date,o1_0.status from orders o1_0 where o1_0.delivery_id=? select o1_0.order_id,o1_0.delivery_id,o1_0.member_id,o1_0.order_date,o1_0.status from orders o1_0 where o1_0.delivery_id=2; orders 를 처음에 조회하고 나서 또 추가적으로 o1_0.delivery_id=? 이걸로 조회하는 결과가 왜 생기는걸까요?.. (배치사이즈도 강의랑 똑같이 100입니다) OrderApiController.java @GetMapping("/api/v3.1/orders") public List<OrderDto> ordersV3_page(@RequestParam(value ="offset",defaultValue = "0") int offset, @RequestParam(value ="limit",defaultValue = "100") int limit) { List<Order> orders = orderRepository.findAllWithMemberDelivery(offset,limit); List<OrderDto> result = orders.stream() .map(o -> new OrderDto(o)) .collect(Collectors.toList()); return result; } OrderRepository.java public List<Order> findAllWithMemberDelivery(int offset, int limit) { return em.createQuery( "select o from Order o" , Order.class ).setFirstResult(offset) .setMaxResults(limit) .getResultList(); } 이렇게 바꾸고 난 이후에 일어난 결과입니당.. 강의랑 In말고도 추가적으로 다른 부분이 있어서 질문드립니다 일단 제 스프링부트 버전은 3.1.3 입니다.
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
자동으로 위로 줄이 올라가는데 어떻게 해결해야 하나요?..
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
안녕하세요! 강의영상에서는 가능한 많은 예제를 보여주려고 다양한 연관관계 매핑을 사용했다고 하셨는데 단방향을 지향하는 실무 관점에서 궁금한게 있습니다. Order N:1 Member => 다대일 단방향이 가능한지 OrderItem N:1 Order => 다대일 단방향이 가능한지 Order와 Delivery 관계에서 단방향이 안되는 이유 Item과 Category를 일대다, 다대일로 풀어내는게 맞는지 답변해주시면 감사하겠습니다!!
미해결
처음 만난 리액트(React)
설명보고 따라하였는데 시계가 아닌 오류문구만 뜹니다.. 무엇이 문제일까요?ㅠㅠ
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
강의보는중에 workbench 에서 hostname을 작성하고 나머지 정보도 작성해서 test Connection을 해줘도 비밀번호가 틀리다고 하여 노션에 있는 방법대로 비밀번호를 초기화하는 중에 사진과 같이 신택스 오류가 났다고 하는데 도저희 어디가 잘못되었는지 몰라서 남겼습니다. 비밀번호는 강의 내용 그대로 따라 했습니다
미해결
Kevin의 알기 쉬운 Spring Reactive Web Applications: Reactor 1부
안녕하세요. Backpressure의 Drop 전략에서 버퍼가 비워질 때까지 Emit된 데이터가 Drop이 된다는 것은 이해했습니다. 그런데 1번 데이터가 subscriber에게 전달되어서 처리가 되면 버퍼에 자리가 한 자리 비게 되는데 왜 데이터가 계속 Drop이 되는건가요? (코드 실습에서 onNext()함수가 호출이 되어도 255,256,257 ~ 1024까지 모두 드랍됨) | 1, 2 | <-------- 3 듣랍 | 2, |. <-------- 4 드랍 (여기서 왜 4번 데이터는 안들어가나요?) | 5, 6 | Buffer DROP-LATEST를 보면 | 1, 2 | <---- 3들어오는 중 버퍼 가득 차서 drop | 2, 4 | <------ 1번이 버퍼에서 나가고 한 자리가 비어서 4번이 들어와짐 이런식으로 동작을 하는데 Drop은 이렇게 동작하지 않는 것 같아 버퍼가 어떻게 동작하는지 궁금하여 질문드립니다.
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
코드 스니펫은 어떤걸 사용하시나요. 추천하는게 있나요?
