묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결애플 웹사이트 인터랙션 클론!
저는 pin이 안나올까요 ㅠㅠ
@charset 'utf-8'; html { font-family: 'Noto Sans KR', sans-serif; font-size: 14px; } body { overflow-x: hidden; color: rgb(29, 29, 31); letter-spacing: -0.05em; background: white; } p { line-height: 1.6; } a { color: rgb(29, 29, 31); text-decoration: none; } .global-nav { position: absolute; top: 0; left: 0; width: 100%; height: 44px; padding: 0 1rem; } .local-nav { position: absolute; top: 45px; left: 0; width: 100%; height: 52px; padding: 0 1rem; border-bottom: 1px solid #ddd; } .global-nav-links, .local-nav-links { display: flex; align-items: center; max-width: 1000px; height: 100%; margin: 0 auto; } .global-nav-links { justify-content: space-between; } .local-nav-links .product-name { margin-right: auto; font-size: 1.2rem; } .local-nav-links a { font-size: 0.8rem; } .local-nav-links a:not(.product-name) { margin-left: 2em; } .scroll-section { padding-top: 50vh; border: 3px solid red; } #scroll-section-0 h1 { font-size: 4rem; text-align: center; } .main-message { top: 35vh; display: flex; align-items: center; justify-content: center; margin: 5px 0; height: 3em; font-size: 2.5rem; opacity: 0; } .main-message small { display: block; font-size: 1.2rem; margin-bottom: 0.5em; } #scroll-section-2 .main-message { font-size: 3.5rem; } .desc-message { font-weight: bold; width: 50%; } .pin { width: 1px; height: 100px; background: rgb(29, 29, 31); } #scroll-section-2.b { top: 10%; left: 40%; } #scroll-section-2.c { top: 15%; left: 45%; } .mid-message { max-width: 1000px; margin: 0 auto; padding: 0 1rem; font-size: 2rem; color: #888; } .mid-message strong { color: rgb(29, 29, 31); } .canvas-caption { max-width: 1000px; margin: 0 auto; padding: 0 1rem; color: #888; font-size: 1.2rem; } .footer { display: flex; align-items: center; justify-content: center; height: 7rem; color: white; background: darkorange; } .main-message p { line-height: 1.2; font-weight: bold; text-align: center; } .description { max-width: 1000px; margin: 0 auto; padding: 0 1rem; font-size: 1.2rem; color: #888; } .description strong { float: left; margin-right: 0.2em; font-size: 3rem; color: rgb(29, 29, 31); } .sticky-elem { position: fixed; left: 0; width: 100%; display: none; } #show-scene-0 #scroll-section-0 .sticky-elem, #show-scene-1 #scroll-section-1 .sticky-elem, #show-scene-2 #scroll-section-2 .sticky-elem, #show-scene-3 #scroll-section-3 .sticky-elem { display: block; } @media (min-width:1024px) { #scroll-section-0 h1 { font-size: 9vw; } .main-message { font-size: 2rem; } .description { font-size: 2rem; } .description strong { font-size: 6rem; } #scroll-section-2 .main-message { font-size: 6vw; } .main-message small { font-size: 1.5vw; } .desc-message { width: 20%; } #scroll-section-2.b { top: 20%; left: 53%; } #scroll-section-2.c { left: 55%; } .mid-message { font-size: 4vw; } canvas-caption { font-size: 2rem; } } <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>AirMug Pro</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;900&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/default.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="container"> <nav class="global-nav"> <div class="global-nav-links"> <a href="#" class="global-nav-item">Rooms</a> <a href="#" class="global-nav-item">Ideas</a> <a href="#" class="global-nav-item">Storeds</a> <a href="#" class="global-nav-item">Contact</a> </div> </nav> <nav class="local-nav"> <div class="local-nav-links"> <a href="#" class="product-name">Airmug pro</a> <a href="">개요</a> <a href="">제품사양</a> <a href="">구입하기</a> </div> </nav> <section class="scroll-section" id="scroll-section-0"> <h1>AirMug Pro</h1> <div class="sticky-elem main-message a"> <p>온전히 빠져들게 하는<br>최고급 세라믹</p> </div> <div class="sticky-elem main-message b"> <p>주변 맛을 느끼게 해주는<br>주변 맛 허용 모드</p> </div> <div class="sticky-elem main-message c"> <p>온종일 편안한<br>맞춤형 손잡이</p> </div> <div class="sticky-elem main-message d"> <p>새롭게 입가를<br>찾아온 매혹</p> </div> </section> <section class="scroll-section" id="scroll-section-1"> <p class="description"> <strong>보통 스크롤 영역</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam praesentium ducimus odio, eveniet eaque soluta aliquid animi unde inventore est sapiente fugit laboriosam voluptatum ipsum quidem illum molestiae obcaecati ut voluptas assumenda quae. Rerum hic, odio unde eum quod? Inventore eius provident vel impedit veniam incidunt at voluptatibus facere odio totam iure ipsam libero, sit eligendi nostrum velit laborum quaerat ipsum ut consectetur. Quos voluptatibus pariatur, accusantium laborum iusto, impedit. Ex enim veritatis nesciunt reprehenderit architecto reiciendis amet cum nihil aut beatae itaque, nulla labore eum quaerat facilis dolorem veniam! Consequatur aliquam placeat dicta voluptas nam recusandae quibusdam nostrum, culpa! Blanditiis in ipsa quaerat dolorem tempore velit, deleniti, excepturi placeat eum facilis officia recusandae praesentium nesciunt porro quibusdam debitis consequuntur, nobis saepe? Fugit voluptates consectetur sapiente maxime dolore, hic, esse laborum expedita eligendi natus cum dolor pariatur qui dicta, minus. Repudiandae architecto, sit et similique odio corrupti repellat. Id iusto perferendis dolores quos non aliquid quis officia, voluptatibus odio. Tenetur fugit repellat quas, consectetur explicabo nihil labore optio molestias, omnis minima dolorum! Expedita corporis beatae, inventore porro nostrum tempora rem. Eligendi, rerum? Quaerat eaque deserunt animi, voluptatibus, quis accusantium fuga recusandae temporibus deleniti ipsa ut laborum, magni cupiditate, illo. Corporis. </p> </section> <section class="scroll-section" id="scroll-section-2"> <div class="sticky-elem sticky-elem-canvas"> <canvas id="video-canvas-1" width="1920" height="1080"></canvas> </div> <div class="sticky-elem main-message a"> <p> <small>편안한 촉감</small> 입과 하나 되다 </p> </div> <div class="sticky-elem desc-message b"> <p> 편안한 목넘김을 완성하는 디테일한 여러 구성 요소들, 우리는 이를 하나하나 새롭게 살피고 재구성하는 과정을 거쳐 새로운 수준의 머그, AirMug Pro를 만들었습니다. 입에 뭔가 댔다는 감각은 어느새 사라지고 오롯이 당신과 음료만 남게 되죠. </p> <div class="pin"></div> </div> <div class="sticky-elem desc-message c"> <p> 디자인 앤 퀄리티 오브 스웨덴,<br>메이드 인 차이나 </p> <div class="pin"></div> </div> </section> <section class="scroll-section" id="scroll-section-3"> <p class="mid-message"> <strong>Retina 머그</strong><br> 아이디어를 광활하게 펼칠<br> 아름답고 부드러운 음료 공간. </p> <canvas class="image-blend-canvas" width="1920" height="1080"></canvas> <p class="canvas-caption"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet at fuga quae perspiciatis veniam impedit et, ratione est optio porro. Incidunt aperiam nemo voluptas odit quisquam harum in mollitia. Incidunt minima iusto in corporis, dolores velit. Autem, sit dolorum inventore a rerum distinctio vero illo magni possimus temporibus dolores neque adipisci, repudiandae repellat. Ducimus accusamus similique quas earum laborum. Autem tempora repellendus asperiores illum ex! Velit ea corporis odit? Ea, incidunt delectus. Sapiente rerum neque error deleniti quis, et, quibusdam, est autem voluptate rem voluptas. Ratione soluta similique harum nihil vel. Quas inventore perferendis iusto explicabo animi eos ratione obcaecati. </p> </section> <footer class="footer">2020 영주마실</footer> </div> <script src="js/main.js"></script> </body> </html> (() => { //전역변수를 피하기 위해서 씀. (function()) let yOffset = 0; // window.pageYOffset 대신 쓸 변수 let prevScrollHeight = 0; //현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합 let currentScene = 0; //현재 활성화된(눈 앞에 보고있는) 씬(scroll-section) let currenYOffset = yOffset - prevScrollHeight; let enterNewScene = false; // 새로운 씬에 들어갔다. // sceneInfo 추가내용 적용 후 const sceneInfo = [ { // 0 type: 'sticky', heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-0'), messageA: document.querySelector('#scroll-section-0 .main-message.a'), messageB: document.querySelector('#scroll-section-0 .main-message.b'), messageC: document.querySelector('#scroll-section-0 .main-message.c'), messageD: document.querySelector('#scroll-section-0 .main-message.d') }, values: { messageA_opacity_in: [0, 1, { start: 0.1, end: 0.2 }], messageB_opacity_in: [0, 1, { start: 0.3, end: 0.4 }], messageC_opacity_in: [0, 1, { start: 0.5, end: 0.6 }], messageD_opacity_in: [0, 1, { start: 0.7, end: 0.8 }], messageA_translateY_in: [20, 0, { start: 0.1, end: 0.2 }], messageB_translateY_in: [20, 0, { start: 0.3, end: 0.4 }], messageC_translateY_in: [20, 0, { start: 0.5, end: 0.6 }], messageD_translateY_in: [20, 0, { start: 0.7, end: 0.8 }], messageA_opacity_out: [1, 0, { start: 0.25, end: 0.3 }], messageB_opacity_out: [1, 0, { start: 0.45, end: 0.5 }], messageC_opacity_out: [1, 0, { start: 0.65, end: 0.7 }], messageD_opacity_out: [1, 0, { start: 0.85, end: 0.9 }], messageA_translateY_out: [0, -20, { start: 0.25, end: 0.3 }], messageB_translateY_out: [0, -20, { start: 0.45, end: 0.5 }], messageC_translateY_out: [0, -20, { start: 0.65, end: 0.7 }], messageD_translateY_out: [0, -20, { start: 0.85, end: 0.9 }] } }, { // 1 type: 'normal', // heightNum: 5, // type normal에서는 필요 없음 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-1') } }, { // 2 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-2'), messageA: document.querySelector('#scroll-section-2 .a'), messageB: document.querySelector('#scroll-section-2 .b'), messageC: document.querySelector('#scroll-section-2 .c'), pinB: document.querySelector('#scroll-section-2 .b .pin'), pinC: document.querySelector('#scroll-section-2 .c .pin') }, values: { messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }], messageB_translateY_in: [30, 0, { start: 0.6, end: 0.65 }], messageC_translateY_in: [30, 0, { start: 0.87, end: 0.92 }], messageA_opacity_in: [0, 1, { start: 0.25, end: 0.3 }], messageB_opacity_in: [0, 1, { start: 0.6, end: 0.65 }], messageC_opacity_in: [0, 1, { start: 0.87, end: 0.92 }], messageA_translateY_out: [0, -20, { start: 0.4, end: 0.45 }], messageB_translateY_out: [0, -20, { start: 0.68, end: 0.73 }], messageC_translateY_out: [0, -20, { start: 0.95, end: 1 }], messageA_opacity_out: [1, 0, { start: 0.4, end: 0.45 }], messageB_opacity_out: [1, 0, { start: 0.68, end: 0.73 }], messageC_opacity_out: [1, 0, { start: 0.95, end: 1 }], pinB_scaleY: [0.5, 1, { start: 0.6, end: 0.65 }], pinC_scaleY: [0.5, 1, { start: 0.87, end: 0.92 }] } }, { // 3 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-3'), canvasCaption: document.querySelector('.canvas-caption') }, values: { } } ]; function setLayout() { //각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { if (sceneInfo[i].type === 'sticky') { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; }else if(sceneInfo[i].type === 'nomarl'){ sceneInfo[i].scrollHeight = sceneInfo[i].objs.container.offsetHeight; } sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } yOffset = window.pageYOffset; let totalScrollHeight = 0; for (let i = 0; i < sceneInfo.length; i++) { totalScrollHeight += sceneInfo[i].scrollHeight; if (totalScrollHeight >= yOffset) { currentScene = i; break; } } document.body.setAttribute('id', `show-scene-${currentScene}`); } function calcValues(values, currentYOffset) { let rv; const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; // 현재 씬(스크롤섹션)에서 스크롤된 범위를 비율로 구하기 if (values.length === 3) { // start ~ end 사이에 애니메이션 발생 const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if (currentYOffset >= partScrollStart && currentYOffset <= partScrollEnd) { rv = (currentYOffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0]; } else if (currentYOffset < partScrollStart) { rv = values[0]; } else if (currentYOffset > partScrollEnd) { rv = values[1]; } } else { rv = scrollRatio * (values[1] - values[0]) + values[0]; } return rv; // 안써주면 undefined } // playAnimation 추가내용 적용 후 function playAnimation() { const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; switch (currentScene) { case 0: // console.log('0 play'); if (scrollRatio <= 0.22) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.42) { // in objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.62) { // in objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.82) { // in objs.messageD.style.opacity = calcValues(values.messageD_opacity_in, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageD.style.opacity = calcValues(values.messageD_opacity_out, currentYOffset); objs.messageD.style.transform = `translate3d(0, ${calcValues(values.messageD_translateY_out, currentYOffset)}%, 0)`; } break; case 2: // console.log('2 play'); if (scrollRatio <= 0.32) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_in, currentYOffset)}%, 0)`; } else { // out objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageA.style.transform = `translate3d(0, ${calcValues(values.messageA_translateY_out, currentYOffset)}%, 0)`; } if (scrollRatio <= 0.67) { // in objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_in, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } else { // out objs.messageB.style.transform = `translate3d(0, ${calcValues(values.messageB_translateY_out, currentYOffset)}%, 0)`; objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); objs.pinB.style.transform = `scaleY(${calcValues(values.pinB_scaleY, currentYOffset)})`; } if (scrollRatio <= 0.93) { // in objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_in, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_in, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } else { // out objs.messageC.style.transform = `translate3d(0, ${calcValues(values.messageC_translateY_out, currentYOffset)}%, 0)`; objs.messageC.style.opacity = calcValues(values.messageC_opacity_out, currentYOffset); objs.pinC.style.transform = `scaleY(${calcValues(values.pinC_scaleY, currentYOffset)})`; } break; case 3: // console.log('3 play'); break; } } function scrollLoop() { enterNewScene = false; prevScrollHeight = 0; for (let i = 0; i < currentScene; i++) { prevScrollHeight += sceneInfo[i].scrollHeight; } if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) { enterNewScene = true; currentScene++; document.body.setAttribute('id', `show-scene-${currentScene}`); } if (yOffset < prevScrollHeight) { enterNewScene = true; if (currentScene === 0) return; // 브라우저 바운스 효과로 인해 마이너스 되는것을 방지 currentScene--; document.body.setAttribute('id', `show-scene-${currentScene}`); } if (enterNewScene) return; playAnimation(); } window.addEventListener('resize', setLayout); //세로크기에 따라 height 반응형 window.addEventListener('scroll', () => { yOffset = window.pageYOffset; scrollLoop(); }); window.addEventListener('load', setLayout); window.addEventListener('resize', setLayout); setLayout(); })();
-
해결됨현존 최강 크롤링 기술: Scrapy와 Selenium 정복
scrapy startproject ecommerce 썼는데 error가 뜨고 폴더 생성이 안돼요.
어떻게 해결할수 있을까요?
-
해결됨더 자바, Java 8
강의 잘못올라온것 같아요.ㅜㅜ
4강 람다 표현식과 내용이 같아요 ㅜㅜ 처음엔 복습인줄 알았는데... 4강이랑 5강이랑 비교했을때 다를게 없어요..ㅜㅜ; 완전히 똑같아여..ㅜㅜ
-
미해결[개정판] 딥러닝 컴퓨터 비전 완벽 가이드
질문드립니다
오늘 수강신청 후 막 시작한 학생입니다. 혹시 구글클라우드 플랫폼 사용하지 않고, 파이참으로 따라할 수도 있는지 질문 드립니다. GPU는 gtx1080 사용 중 입니다. 실질적으로 파이참을 많이 사용할것 같아서 질문 드립니다.
-
미해결React로 NodeBird SNS 만들기
newPost.addHashtags에 대해서 질문드립니다.
post 와 hashtag의 관계 설정에 의해 posthashtag table까지 만들어졌는데, post를 생성하는 router에서 newPost.addHashtag 함수가 undefined라는 오류가 발생하고 있습니다. 혹시 오타가 있는지 확인해보았는데 이상이 없어서 어떨때 오류가 발생하는지 알수 있을까요??
-
미해결Flutter 입문 - 안드로이드, iOS 개발을 한 번에 (with Firebase)
Android sdkmanager 액세스 거부 오류
안녕하세요 강의수강후, 꼭 따라해보고 싶은데.. flutter 설치가 안되서 못하고 있는 상황이라, 혹시 비슷한 이슈 보셨는지 여쭐 수 있을까하여 질문 올립니다. 하기 그림과 같이, flutter doctor --android-licenses 실행시, android sdkmanger가 찾아지는데, 액세스가 계속 거부되어서 설치를 못하고 있습니다.. 인터넷에 유사한 케이스도 별로 없어니와, 'hide obsolete packages' 체크해제해서 Android SDK Tools (Obsolete) 살펴보는 것도 안통하네요 ㅠㅠ 혹시나 어떻게 설치할 수 있는 방법이 없을까 질문드립니다
-
미해결공공데이터로 파이썬 데이터 분석 시작하기
ProfileReport(df) 시 FileNotFoundError 발생
(사진)
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
useEffect오류
React Hook "useEffect" is called in function "landingpage" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks 위와같은 오류가 발생하는데, 어떻게 해야하나요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
CORS를 사용한 로그아웃 관련 질문입니다(해결완료)
https://github.com/loy124/express-mongodb-template 위의 주소는 backend 서버의 주소입니다. 프론트쪽예제는 cors를 사용해서 해당과 같이 요청을 보내고있구요 다른 요청은 정상적으로 동작하는거 같은데 cookie쪽에 문제가 생긴거 같다고 생각이 되어 질문드립니다. 안녕하세요 강의 정말 잘 듣고있습니다!!. 해당 코드는 cors를 사용해서 mongodb를 연동해둔 예제입니다.promise 패턴을 사용해서 조금은.. 리팩토링을 진행시켜서 강의해주신 내용을 조금 바꿔서 사용하고있는데 vscode의 debug 모드를사용해서 POSTMAN을 사용해서 로그아웃시 토큰이 정상적으로 있는것을 확인하였는데(auth.js의 token) React 프론트서버단에서 axios를 통해 해당 요청을 수행할때는 auth.js의 token이 조회가 되지 않더라구요 리액트에서 요청시 왜 리액트 부분에서 진행할때는 auth.js의 토큰이 조회가 되지않나.. 고민하다 질문드립니다..
-
미해결선형대수학개론
linearly independent
15분 19초 즈음 v1, v2를 서로 multiple할 수 없다고 가정했는데 multiple 형태가 나왔다는 게 왜 linearly independent하다는 게 되나요?ㅠㅠ x1과 x2가 모두 0이면 linearly independent이고 v1, v2 모두 서로의 multiple 형태가 될 수 없어서 그렇다고 봐야하나요? 이 부분이 뭔가 이해가 안되어서 질문 드립니다.
-
미해결웹 개발자와 정보보안 입문자가 꼭 알아야 할 웹 해킹 & 시큐어 코딩
이 실습 말고 또 다른 질의
burp 사용중에 intercept on 후 request to 에서 forword를 하면 request from으로 바뀌어야한다는데 저는 브라우저에 정보만 나오더라고요 혹시 이부분을 할 수 있는 방법을 알 수 있을까요
-
해결됨스프링 웹 MVC
add Configuration에서 Tomcat server
Tomcat Server가 없으면 어떻게 해야 할까요?
-
미해결MQTT 사물인터넷 통신 프로젝트 (Arduino, MQTT, Node.js, mongoDB, Android)
dht11 센서데이터를(온도,습도) mongodb에 저장하기에서 막혀서 질문드립니다.
이전의 127.0.0.1:3000/ 까지는 실행이 되었습니다. 하지만 이후에 하는부분에서 아래와 같은 오류가 떠서 어떻게 해결할 수 있을지 여쭤보고싶습니다. C:\MQTTproject\IOTServer\bin\www:42 var dht11=dbObj.collection("dht11");TypeError: Cannot read property 'collection' of null부분입니다.
-
미해결자바 ORM 표준 JPA 프로그래밍 - 기본편
객체지향 쿼리 언어1 - 기본 문법 소개부분에서 코드를 따라하던 도중 에러가 발생하여 질문남깁니다!
QUERY DSL 파트를 따라하던 도중 아래와 같은 에러가 발생하였습니다. Unable to resolve column "..." Unable to resolve table "MEMBER" 쿼리문은 정상적으로 날라갑니다. DB 사진 입니다. 간단한 이슈인거같은데 에러를 해결할 방법을 찾지못해 질문남깁니다. 답변달아주시면 정말 감사하겠습니다!
-
미해결퍼펙트 슬라이드 클리닉 with 파워포인트 특강
ppt 2010버전 이상이면 된다고 하지않았나요
지금 2013버전 쓴는데 폭포형 차트가 없네요 ?
-
미해결바닥부터 시작하는 STM32 드론 개발의 모든 것
Double PID 제어는
안녕하세요. 수업 잘 듣고 있는 1인입니다. 충실한 내용에 들을 때마다 감탄하고 있습니다. 듣다 보니 Double PID 제어에 대한 강의는 아직 준비중이신 것 같은데, 혹시 언제쯤 추가될런지요? 아울러, 강의가 완성되는 시점도 궁금합니다. 멋진 강의 만들어주셔서 감사합니다.
-
미해결[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part4: 게임 서버
캐스팅 질문 드려요.
Connect 구현 중에 캐스팅 코드관련해서 궁금한 것이 있습니다. 명시적 캐스팅을 진행할 때 Socket socket = (Socket) args.UserToken; 이렇게 진행한다고 배웠는데 Socket socket = args.UserToken as Socket; as 키워드로 하는 캐스팅이 나와 당황스러웠어요. 둘 차이점이 있나요?
-
미해결공공데이터로 파이썬 데이터 분석 시작하기
Heatmap으로 밀집도 그리기 표현이 안됩니다.
Chapter3. 프랜차이즈 입점 분석(리뉴얼) 강의에서 [10/10] MarkerCluster, Heatmap 으로 위치별 매장의 밀집도 표현하기에서 주피터 노트북으로 Heatmap의 밀집도로 표현하기가 그림으로 표현이 안됩니다. 메세지가 Make this Notebook Trusted to load map: File -> Trust Notebook 이렇게 표시됩니다.
-
미해결실전! 스프링 데이터 JPA
fetch join 시 child table 조건이 실제 쿼리에 반영이 안되네요..
[LneQuest] @Entity(name = "LneQuest") @Table(name = "lne_quests") @Cacheable @JsonInclude(JsonInclude.Include.NON_NULL) //@NamedEntityGraph(name = "LneQuest.all", attributeNodes = [NamedAttributeNode("quizList")]) class LneQuest ( var type: String, var title: String, var description: String?, @Column(name = "user_constraints") var userConstraints: String = "{}", @Column(name = "reward_total") var rewardTotal: Double, @Column(name = "reward_remain") var rewardRemain: Double, @Column(name = "reward_amount") var rewardAmount: Double, @Column(name = "reward_currency") var rewardCurrency: String, @Column(name = "thumbnail_url") var thumbnailUrl: String, @Column(name = "start_at") var startAt: LocalDateTime, @Column(name = "end_at") var endAt: LocalDateTime, @Column(name = "deleted_at") var deletedAt: LocalDateTime? = null, @OneToMany(fetch = FetchType.LAZY, mappedBy = "quest" /* , cascade = [CascadeType.ALL] */) var quizList: MutableList<LneQuiz> = mutableListOf() ): AbstractJpaPersistable1() { // 연관관계 추가 method 는 만들어 놓는게 편리하다. fun addQuiz(quizz: LneQuiz) { quizz.quest = this quizList.add(quizz) } } @Entity(name = "LneQuiz") @Table(name = "lne_quizzes") @Cacheable @JsonInclude(JsonInclude.Include.NON_NULL) open class LneQuiz( @JsonIgnore @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "quest_id") var quest: LneQuest, var type: String, var title: String, var description: String? = null, var answers: String? = null, @Column(name = "correct_answer") var correctAnswer: String, @Column(name = "deleted_at") var deletedAt: LocalDateTime? = null ): AbstractJpaPersistable() { } @Query("select q " + " from LneQuest q INNER JOIN FETCH LneQuiz qz where 1=1 " + " and (:type is null or qz.type = :type) " + " and (:from is null or :from < q.createdAt) " + " and (:to is null or q.createdAt < :to)", nativeQuery = false) fun findAllByJpql(@Param("type")type: String?, @Param("from")from: LocalDateTime?, @Param("to")to: LocalDateTime?, pageable: Pageable): Page<LneQuest> 페치 조인하니까 N+1 문제가 없이 쿼리 1번만 가는데요 조인되는 Child 테이블 컬럼 조건이 반영이 안되네요...;;; qz.type = :type Child 테이블 컬럼 조건을 넣어도 페치 조인 쿼리의 경우 Main 테이블 조건으로 들어가네요... 컬럼명이 같은게 있어서 그런건지요??? SELECT lnequest0_.id AS id1_0_0_, quizlist1_.id AS id1_1_1_, lnequest0_.created_at AS created_2_0_0_, lnequest0_.updated_at AS updated_3_0_0_, lnequest0_.deleted_at AS deleted_4_0_0_, lnequest0_.description AS descript5_0_0_, lnequest0_.end_at AS end_at6_0_0_, lnequest0_.reward_amount AS reward_a7_0_0_, lnequest0_.reward_currency AS reward_c8_0_0_, lnequest0_.reward_remain AS reward_r9_0_0_, lnequest0_.reward_total AS reward_10_0_0_, lnequest0_.start_at AS start_a11_0_0_, lnequest0_.thumbnail_url AS thumbna12_0_0_, lnequest0_.title AS title13_0_0_, lnequest0_.type AS type14_0_0_, lnequest0_.user_constraints AS user_co15_0_0_, quizlist1_.created_at AS created_2_1_1_, quizlist1_.updated_at AS updated_3_1_1_, quizlist1_.answers AS answers4_1_1_, quizlist1_.correct_answer AS correct_5_1_1_, quizlist1_.deleted_at AS deleted_6_1_1_, quizlist1_.description AS descript7_1_1_, quizlist1_.quest_id AS quest_i10_1_1_, quizlist1_.title AS title8_1_1_, quizlist1_.type AS type9_1_1_, quizlist1_.quest_id AS quest_i10_1_0__, quizlist1_.id AS id1_1_0__ FROM korbit.lne_quests lnequest0_ LEFT OUTER JOIN korbit.lne_quizzes quizlist1_ ON lnequest0_.id = quizlist1_.quest_id WHERE lnequest0_.type = 'multiple-choice' AND ( lnequest0_.created_at BETWEEN '2019-03-10T02:00:00.000+0000' AND '2020-03-10T02:00:00.000+0000' );
-
미해결[개정판 2023-11-27] Spring Boot 3.x 를 이용한 RESTful Web Services 개발
internalization 구현 시 @RequestHeader의 required 옵션을 false로 설정해도 무조건 400 에러가 발생합니다.
@GetMapping(path = "/hello-world-internationalized") public String helloWorldInternationalized(@RequestHeader(name = "Accept-Language", required = false) Locale locale) { System.out.println(locale.getLanguage()); return messageSource.getMessage("greeting.message", null, locale); } 위처럼 HelloWorldController에 helloWorldInternationalized()를 구현했으나 포스트맨으로 [GET]http://localhost:8080/hello-world-internationalized 을 호출 시 header로 "Accept-Language"를 날리지 않으면 무조건 400 에러가 발생합니다. "Accept-Language"값을 "en"이나 "fr"로 설정시에는 정상적으로 메세지를 반환합니다. required를 false로 설정한 후 추가로 해야 할 작업이 있는지 문의드립니다.
