묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결실전 프로젝트로 배우는 타입스크립트
esLinttrc.js 에서 에러 확인이 힘듭니다.
.eslintrc.js파일에서 복붙을한 상태에서 강의 순서대로 진행을 했습니다. 근데 특이하게 세미콜론쪽 에러가 계속 나와서, esLint가 적용되지 않는거 같아서요. 혹시 이런 현상이 있으셨나요?
-
미해결애플 웹사이트 인터랙션 클론!
video section 영역을 2개 이상 추가 했더니 첫번째 두번째 영역은 나오는데 3번째 영역부터 이미지가 그려지지 않습니다.
안녕하세요 좋은 강의 감사합니다. 예제 샘플을 이용해서 한가지 해보고 싶은게 있어 테스트 중에 있습니다. scroll section-0, scroll section-2 구간에 video-canvas-0, video-canvas-1을 main-js 샘플을 만들어 주신것처럼 똑같이 만들었습니다. 추후에 scroll-section-4를 추가 하고 video-canvas-2를 만들어 1,2와 같이 동일하게 만들었는데 3번째 영역이 보여지질 않습니다 ㅜㅜ 어떤 문제가 있는지 알고 싶습니다. index.html <!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>IKEA</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="main.css"> </head> <body> <div class="container"> <section class="scroll-section" id="scroll-section-0"> <div class="sticky-elem stick-elem-canvas"> <canvas id="video-canvas-0" width="1920" height="1080"></canvas> </div> </section> <section class="scroll-section" id="scroll-section-1"> <p class="description"> <strong>재료소개</strong> 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 </p> </section> <section class="scroll-section" id="scroll-section-2"> <div class="sticky-elem stick-elem-canvas"> <canvas id="video-canvas-1" width="1920" height="1080"></canvas> </div> </section> <section class="scroll-section" id="scroll-section-3"> <p class="description"> <strong>재료소개</strong> 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 </p> </section> <section class="scroll-section" id="scroll-section-4"> <div class="sticky-elem stick-elem-canvas"> <canvas id="video-canvas-2" width="1920" height="1080"></canvas> </div> </section> <section class="scroll-section" id="scroll-section-5"> <p class="description"> <strong>재료소개</strong> 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 재료소개 <br/><br/><br/><br/><br/><br/><br/> </p> </section> </div> <script src="js/main.js"></script> </body> </html> main.css #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, #show-scene-4 #scroll-section-4 .sticky-elem, #show-scene-5 #scroll-section-5 .sticky-elem { display: block; will-change: transform, opacity; } main.js (() => { let yOffset = 0; //window.pageYoffset 대신 쓸 변수 let prevScrollHeight = 0; //현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이값의 합 let currentScene = 0; //현재 활성화된(눈 앞에 보고있는) 씬(scroll-section) let enterNewScene = false; //새로운 scene이 시작된 순간 true let acc = 0.1; let delayedYOffset = 0; let rafId; let rafState; const sceneInfo = [ { // 0 type : 'sticky', heightNum : 8, // 브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight : 0, objs: { container : document.querySelector('#scroll-section-0'), canvas : document.querySelector('#video-canvas-0'), context : document.querySelector('#video-canvas-0').getContext('2d'), videoImages : [] }, values : { videoImageCount : 314, imageSequence : [0, 313], canvas_opacity : [1, 0, {start: 0.9, end: 1}], } }, { // 1 type : 'normal', // heightNum : 5, // 브라우저 높이의 5배로 scrollHeight 세팅 (normal에서는 필요없음) scrollHeight : 0, objs: { container : document.querySelector('#scroll-section-1') } }, { // 2 type : 'sticky', heightNum : 8, // 브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight : 0, objs: { container: document.querySelector('#scroll-section-2'), canvas : document.querySelector('#video-canvas-1'), context : document.querySelector('#video-canvas-1').getContext('2d'), videoImages : [] }, values: { videoImageCount : 471, imageSequence : [0, 470], canvas_opacity_in : [0, 1, {start: 0, end: 0.1}], canvas_opacity_out : [1, 0, {start: 0.95, end: 1}], } }, { // 3 type : 'normal', // heightNum : 5, // 브라우저 높이의 5배로 scrollHeight 세팅 (normal에서는 필요없음) scrollHeight : 0, objs: { container : document.querySelector('#scroll-section-3') } }, { // 4 type : 'sticky', heightNum : 8, // 브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight : 0, objs: { container: document.querySelector('#scroll-section-4'), canvas : document.querySelector('#video-canvas-2'), context : document.querySelector('#video-canvas-2').getContext('2d'), videoImages : [] }, values: { videoImageCount : 338, imageSequence : [0, 337], canvas_opacity_in : [0, 1, {start: 0, end: 0.1}], canvas_opacity_out : [1, 0, {start: 0.95, end: 1}], } }, { // 5 type : 'normal', // heightNum : 5, // 브라우저 높이의 5배로 scrollHeight 세팅 (normal에서는 필요없음) scrollHeight : 0, objs: { container : document.querySelector('#scroll-section-5') } }, ]; function setCanvasImages() { let imgElem1; for (let i = 1; i < sceneInfo[0].values.videoImageCount; i++) { let filenameNumber = i; let filename = ''; if ( filenameNumber < 10) { filename = '000' + filenameNumber; } else if ( filenameNumber < 100) { filename = '00' + filenameNumber; } else if (filenameNumber >= 100 && filenameNumber < 1000) { filename = '0' + filenameNumber; } else { filename = String(filenameNumber); } imgElem1 = new Image(); imgElem1.src = `./video/chapter1/img_${filename}.jpg`; sceneInfo[0].objs.videoImages.push(imgElem1); // 24프레임 } let imgElem2; for (let i = 1; i < sceneInfo[2].values.videoImageCount; i++) { let filenameNumber = i; let filename = ''; if ( filenameNumber < 10) { filename = '000' + filenameNumber; } else if ( filenameNumber < 100) { filename = '00' + filenameNumber; } else if (filenameNumber >= 100 && filenameNumber < 1000) { filename = '0' + filenameNumber; } else { filename = String(filenameNumber); } imgElem2 = new Image(); imgElem2.src = `./video/chapter2/img_${filename}.jpg`; sceneInfo[2].objs.videoImages.push(imgElem2); // 24프레임 } let imgElem3; for (let i = 1; i < sceneInfo[4].values.videoImageCount; i++) { let filenameNumber = i; let filename = ''; if ( filenameNumber < 10) { filename = '000' + filenameNumber; } else if ( filenameNumber < 100) { filename = '00' + filenameNumber; } else if (filenameNumber >= 100 && filenameNumber < 1000) { filename = '0' + filenameNumber; } else { filename = String(filenameNumber); } imgElem3 = new Image(); imgElem3.src = `./video/chapter3/img_${filename}.jpg`; sceneInfo[4].objs.videoImages.push(imgElem3); // 24프레임 } } function setLayout() { // 각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { if (sceneInfo[i].type === 'sticky') { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; //각섹션 스크롤 총 높이 = hightnum * 뷰포트 높이 } else if (sceneInfo[i].type === 'normal') { 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}`); // 캔버스에 사이즈 조정 const heightRatio = window.innerHeight / 1080; sceneInfo[0].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`; sceneInfo[2].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`; sceneInfo[4].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`; } function calcValues(values, currentYOffset) { let rv; // 현재 씬 (스크롤섹션)에서 스크롤된 범위를 비율로 구하기 const scrollHeight = sceneInfo[currentScene].scrollHeight; let 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; } function playAnimation() { const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; //섹션에 현재 yoffset 값 const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currentYOffset / scrollHeight; switch (currentScene) { case 0 : // let sequence = Math.round(calcValues(values.imageSequence, currentYOffset)); //math 반올림 처리 // objs.context.drawImage(objs.videoImages[sequence], 0, 0); objs.canvas.style.opacity = calcValues(values.canvas_opacity, currentYOffset); break; case 1 : break; case 2 : // let sequence2 = Math.round(calcValues(values.imageSequence, currentYOffset)); //math 반올림 처리 // objs.context.drawImage(objs.videoImages[sequence2], 0, 0); if (scrollRatio <= 0.3) { // in objs.canvas.style.opacity = calcValues(values.canvas_opacity_in, currentYOffset); } else { // out objs.canvas.style.opacity = calcValues(values.canvas_opacity_out, currentYOffset); } break; case 3 : break; case 4 : // let sequence4 = Math.round(calcValues(values.imageSequence, currentYOffset)); //math 반올림 처리 // objs.context.drawImage(objs.videoImages[sequence4], 0, 0); if (scrollRatio <= 0.3) { // in objs.canvas.style.opacity = calcValues(values.canvas_opacity_in, currentYOffset); } else { // out objs.canvas.style.opacity = calcValues(values.canvas_opacity_out, currentYOffset); } break; case 5 : break; } } function scrollLoop() { enterNewScene = false; prevScrollHeight = 0; for (let i = 0; i < currentScene; i++) { prevScrollHeight += sceneInfo[i].scrollHeight; } if (delayedYOffset < prevScrollHeight + sceneInfo[currentScene].scrollHeight) { document.body.classList.remove('scroll-effect-end'); } if (delayedYOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) { enterNewScene = true; if (currentScene === sceneInfo.length - 1) { document.body.classList.add('scroll-effect-end'); } if (currentScene < sceneInfo.length - 1) { currentScene++; } document.body.setAttribute('id', `show-scene-${currentScene}`); } if (delayedYOffset < prevScrollHeight) { enterNewScene = true; // 브라우저 바운스 효과로 인해 마이너스가 되는 것을 방지(모바일) if (currentScene === 0) return; currentScene--; document.body.setAttribute('id', `show-scene-${currentScene}`); } if (enterNewScene) return; playAnimation(); } function loop() { delayedYOffset = delayedYOffset + (yOffset - delayedYOffset) * acc; if (!enterNewScene) { if (currentScene === 0 || currentScene === 2 || currentScene === 4) { const currentYOffset = delayedYOffset - prevScrollHeight; const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; let sequence = Math.round(calcValues(values.imageSequence, currentYOffset)); if (objs.videoImages[sequence]) { objs.context.drawImage(objs.videoImages[sequence], 0, 0); } } } // 일부 기기에서 페이지 끝으로 고속 이동하면 body id가 제대로 인식 안되는 경우를 해결 // 페이지 맨 위로 갈 경우: scrollLoop와 첫 scene의 기본 캔버스 그리기 수행 if (delayedYOffset < 1) { scrollLoop(); sceneInfo[0].objs.canvas.style.opacity = 1; sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0); } // 페이지 맨 아래로 갈 경우: 마지막 섹션은 스크롤 계산으로 위치 및 크기를 결정해야할 요소들이 많아서 1픽셀을 움직여주는 것으로 해결 if ((document.body.offsetHeight - window.innerHeight) - delayedYOffset < 1) { let tempYOffset = yOffset; scrollTo(0, tempYOffset - 1); } rafId = requestAnimationFrame(loop); if (Math.abs(yOffset - delayedYOffset) < 1) { cancelAnimationFrame(rafId); rafState = false; } } // 페이지 로드 됐을때 // window.addEventListener('DOMContentLoaded', setLayout); window.addEventListener('load', () => { setLayout(); // 중간에 새로고침 시, 콘텐츠 양에 따라 높이 계산에 오차가 발생하는 경우를 방지하기 위해 before-load 클래스 제거 전에도 확실하게 높이를 세팅하도록 한번 더 실행 // document.body.classList.remove('before-load'); setLayout(); sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0); // 중간에서 새로고침 했을 경우 자동 스크롤로 제대로 그려주기 let tempYOffset = yOffset; let tempScrollCount = 0; if (tempYOffset > 0) { let siId = setInterval(() => { scrollTo(0, tempYOffset); tempYOffset += 5; if (tempScrollCount > 20) { clearInterval(siId); } tempScrollCount++; }, 20); } // 스크롤 했을때 window.addEventListener('scroll', () => { yOffset = window.pageYOffset; scrollLoop(); // checkMenu(); if (!rafState) { rafId = requestAnimationFrame(loop); rafState = true; } }); window.addEventListener('resize', () => { if (window.innerWidth > 900) { window.location.reload(); } }); window.addEventListener('orientationchange', () => { scrollTo(0, 0); setTimeout(() => { window.location.reload(); }, 500); }); // document.querySelector('.loading').addEventListener('transitionend', (e) => { // document.body.removeChild(e.currentTarget); // }); }); setCanvasImages(); })(); 소스는 다음과 같습니다.
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
test오류나요
삭제된 글입니다
-
미해결
교안 및 예제파일이 없네요
-쉽고 빠르게 익히는 Access 2016 수강중입니다 . 강의중에 말씀하시는 교안과 예제파일이 따로 있다고 안내되어 있는데 찾을 수가 없네요 ~~
-
미해결실전 HTML & CSS 강좌
브라우저 보기
비주얼 스튜디오 2019 사용 중인데 파일-브라우저 보기 가 안됩니다
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Github 권한 요청드립니다.
인프런 아이디 : dudrbs10400@gmail.com 인프런 이메일: dudrbs10400@gmail.com 깃헙 아이디: dudrbs10400@gmail.com 깃헙 Username : MrFabulous00
-
해결됨모든 개발자를 위한 HTTP 웹 기본 지식
중복 주문 방지를 클라이언트 차원에서 할 수 있는 방법이 궁금합니다.
안녕하세요. 7분14초 경에 나오는 설명 중, 중복 주문 방지를 클라이언트 차원에서 할 수 있는 방법이 무엇인지 궁금합니다. 아래 흐름으로 이해하였는데 맞게 이해한 것인가요?? 아래 적은 내용은 서버 차원에서 중복 주문을 방지하는 방법인가요?? - 클라이언트에서 POST 요청 - 서버에서 300대 상태 코드로 리다이렉트 - 클라이언트는 리다이렉트 된 URL로 이동하여 다시 GET 요청 - 완료 좋은 강의 정말 감사드립니다. :)
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Github 권한 요청드립니다.
인프런 아이디 : andrew.park@lgcns.com 인프런 이메일 : andrew.park@lgcns.com 깃헙 아이디 : izttotio@hanmail.net 깃헙 Username : daekyungpark
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
HelloMvc API의 model매개변수질문드립니다
삭제된 글입니다
-
미해결[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part1: C# 기초 프로그래밍 입문
브레이크 포인트 빨간점과 노란화살표 차이를 알고 싶습니다
강의 끝부분에서 브레이크 포인트를 자유자재로 다룰 수 있다고 하셨는데요, 빨간 점과 노란 화살표가 겹쳐져 있다가 노란 화살표를 위로 당기면 과거로 돌아간다고 하신 부분에서 두 기호 사이에 어떤 기능 차이가 있는지 알고 싶어서요. 빨간 점에서 멈추되 노란 화살표가 있는 곳의 조건 등을 반영하는 건가요? 검색도 해봤는데 화살표 사용법에 대해서는 나오지 않아서요 ㅠㅠ (부르는 명칭이 따로 있다면 알려주시면 감사하겠습니다) 그리고 비주얼스튜디오 최신버전을 쓰고 있는데 빨간점은 나오는데 화살표는 나오지 않습니다. 화살표 만드는 방법도 있을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
안녕하세요. 프론트에서 로그인이 안됩니다.
제 생각은 proxy setup이 조금 이상한거 같은데 혹시 아시는 분 계실까요?git: https://github.com/alsemffp82/boiler-plate/tree/master
-
미해결[2021] 요즘 누가 유료로 웹서비스 구축하나, 파이어베이스의 모든 것 - Javascript
Database활용[CRUD]-SubPart1 관련 질문
안녕하세요, 먼저 빠르게 파이어베이스 기능 파악을 할 수 있게 강의해주셔서 감사 말씀 올립니다. 다름이 아니옵고, 해당 강의 부분을 듣던 중, 마지막 부분에 onAddRecord 관련해서 아래와 같은 에러가 나는데 아무리 보아도 강사님이 주신 코드와 다른 부분이 없어보여서 어디가 문제인지 궁금하여 문의드리게 되었습니다. (index):26 Uncaught ReferenceError: onAddRecord is not defined at HTMLButtonElement.onclick ((index):26) public/pages/tables/폴더에 있는 index.html (simple.html을 변경한 것) 파일에서 26번째 줄은 아래와 같습니다. <button onclick="onAddRecord()">더미 데이터 추가</button> js파일에서 오류가 있나하여 살펴보았으나, 역시 아래와 같이 크게 다른 부분은 없었보였습니다. function onAddRecord() { db.collection("bbs").add({ name: "Ada", email: "Lovelace", eventtime: new Date() }) .then((docRef) => { console.log("Document written with ID: ", docRef.id); }) .catch((error) => { console.error("Error adding document: ", error); }); } 웹서비스 관련하여 제가 지식이 많이 부족하여 혹시라도 놓친 부분이 있을지 시간 되실 때 확인 부탁드리고자 합니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
CSR vs SSR
SSR이 로딩을 없애기에 적합하다고 하셨는데, 브라우저와 백엔드 사이에서 데이터 교환을 통해 페이지를 구성하는 CSR은 로딩이 있고, 프론트엔드와 백엔드서버 사이에서 데이터 교환을 해서 브라우저에 가공된 페이지를 전달하는 SSR은 없는 이유가 궁금한데요. 둘다 데이터 교환이 이루어지고 페이지를 구성한다는 점에서 시간이 걸릴텐데 왜 SSR은 없고 CSR은 있는거죠??
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
Next.js 동작과정 추가 질문
이전 질문에서 첫 렌더링만 서버사이드 렌더링이라고 하셨는데 첫 렌더링이라는게 http://localhost.com 또는 http://localhost.com/login 과 같이 url을 통한 첫 접속만을 이야기하시는걸까요? 아니면 예를 들어 http://localhost.com 에서 로그인 페이지로 이동하는 버튼을 클릭하였을때 즉, <Link> 태그를 이용하였을때도 서버사이드 렌더링이 되는건가요? 첫 렌더링이 유저가 처음으로 브라우저를 통해 클라이언트에 접속했을때를 이야기하는 것인지 아니면 각각의 페이지를 첫 렌더링이라고 부르는지 궁금합니다.
-
해결됨[개정판] 파이썬 머신러닝 완벽 가이드
PCA 의 적용 방안 - 전체 feature vs. 일부 feature
강사님, 안녕하세요? 좋은 강의 항상 감사드립니다. PCA 적용 실습 사례를 보다가 궁금한 점이 있어 질문을 드립니다. 본 단원 신용카드 실습 예제에서 전체 feature 에 대해서 PCA 를 진행하여 차원축소를 시도했을 때 변수를 줄여 효율성을 높이되 모델 성능에서는 약간의 손실이 발생하였는데요, 전체 feature 에 대한 PCA 적용이 아닌, 물리적인 의미에 유사성이 있으면서도 서로 상관도가 높은 feature 들끼리만그룹을 만들어서 feature 그룹 별 PCA 를 진행하는 경우, 변환된 PC score 중 변동성이 높은 상위 feature 일부만 선택하더라도 모델의 예측성능이 향상될 가능성이 있지는 않을지 문의드립니다. 예를 들어 PAY0~PAY6 끼리 묶어서 첫번째 PCA 를 돌리고, BILL_AMT1~BILL_AMT6끼리만 묶어서 두번째 PCA 를 돌려서 전체 데이터셋의 feature 간 다중공선성을 없애는 방식으로 PCA 를 활용하는 방법을 문의드리는 것이구요, 본 예제에서 사용된 신용카드 데이터셋을 가지고 이렇게 변환해서 feature 재정의를 한 경우와 하지 않은 경우에 대한 모델 예측성능을 비교해 보면 train / test set 분류 상황에 따라서 유사하거나 약간 좋아지는 경향도 보이는 것도 같은데... 예제를 가지고 해 본 것이다보니 .. 현업 데이터분석에 활용시 이렇게 접근하는 것이 실제로 의미가 있는 접근 방법일 수 있는 것인지, 혹은 방법론 상 문제는 없을지요..? (전체 feature가 아닌 부분적인 feature 집합에 한정한 PCA 적용 방안) 감사합니다. from sklearn.preprocessing import StandardScaler from sklearn.decomposition import PCA credit_ds = pd.read_csv('pca_credit_card.csv', header=1) # 1은 연체, 0은 연체 아님 SS_pay = StandardScaler() SS_bill = StandardScaler() pca_pay = PCA() pca_bill = PCA() SS_pay.fit(credit_ds.iloc[:,5:11]) pay = SS_pay.transform(credit_ds.iloc[:,5:11]) pca_pay.fit(pay) pay_transformed = pd.DataFrame(pca_pay.transform(pay), columns=['pay_PC1','pay_PC2','pay_PC3','pay_PC4','pay_PC5','pay_PC6']) credit_ds.iloc[:,5:11] = pay_transformed SS_bill.fit(credit_ds.iloc[:,11:17]) bill = SS_bill.transform(credit_ds.iloc[:,11:17]) pca_bill.fit(bill) bill_transformed = pd.DataFrame(pca_bill.transform(bill), columns=['bill_PC1','bill_PC2','bill_PC3','bill_PC4','bill_PC5','bill_PC6']) credit_ds.iloc[:,11:17] = bill_transformed credit_ds['class'] = credit_ds['default payment next month'] credit_ds = credit_ds.drop(['ID', 'default payment next month'], axis=1) plt.figure(figsize=(15,15)) sns.heatmap(credit_ds.corr(), annot = True)
-
미해결모든 개발자를 위한 HTTP 웹 기본 지식
캐시에 대해서
안녕하세요 영한님 기타 리다이렉션에서 304가 캐시에 있는 데이터를 그대로 사용하라는 서버의 응답이라고 하셨는데 서버는 어떻게 서버의 데이터와 클라이언트의 캐시 데이터가 같은지 알 수 있나요?
-
미해결홍정모의 따라하며 배우는 C++
왜 저는 클래스의 변수가 안불러와지죠..?
삭제된 글입니다
-
미해결실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
영속성 컨텍스트 관련 질문 드립니다!
선생님 안녕하세요^^ 강의 너무 잘 듣고 있는 수강생 입니다. API 개발 부분 수강하던 중 궁금증이 생겨 문의 드립니다. 기존 JPA 활용1 강의에서는 @Transactional이 적용되어있는 Service를 통해 Repository에 접근하여 해당 메서드의 트랜잭션 관리를 해주었었는데요. 이번 강의 같은 경우 Controller로 직접 관리를 하다보니 어느 시점에 트랜잭션 커밋이 되는지 좀 헷갈려 질문 드립니다. 추가로, Controller -> Service -> Repository 순으로 접근한다고 가정하여 프로젝트를 만든다고 할 때, Controller : api 요청/반환 관리, requestForm. responseForm 변형 관리 Service : 비즈니스 로직 관리, Repository 접근 관리 Repository : DB 접근 관리 라고 컨셉을 잡은 후 강의와 같이 구현한다고 생각해보았는데요. 이 때, Controller에서 Form 변형 관리를 한다고 하면 Service에서 Repository에 접근해 Lazy loading으로 데이터를 부른 후 Controller에 전달 했을 때, 불러온 데이터가 준영속 상태가 되어 V2 형식에서의 Form 변형은 사용하지 못하는게 아닌가 하는 생각이 들었습니다. 이럴 때를 대비하여 V3 같은 방식을 사용한다 라고 이해하였는데 잘 이해한 것일까요??
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
build 생성 오류 다시 질문드립니다.
진행이 막혀 전부 삭제 후 다시 깔아서 실행하는데 아래같은 오류에는 어떻게 하면 될까요?? Java SE 11을 사용할 수 없다는 말인가요? file메뉴에서 setting > gradle의 설정을 InteliJ IDEA로 바꿔주고, Gradle JVM도 11로 설정해주고 Compiler > Java Compiler도 11버전인것을 확인해주고 file메뉴 > project Structure에서 project설정에 project SDK도 11로 맞춰주었습니다. 이렇게 해보고 실행해 보아도 사진과 똑같은 오류가 뜹니다.
-
미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
지도 마커표시가 안됩니다.
오류는 없는것 같은데, 실행하면 마커가 나오지 않습니다. 다시 처음부터 다시 강의를 들으면서 해봐도 계속 똑같은 오류가 나옵니다. css도 올려봅니다
