useCallback과 인자 전달 고차함수는 동시에 못쓰나요 ? 계속 이런  [React Error] Rendered fewer hooks than expected   에러가 나네요 ㅜㅜ const onCancel=(followingid)=useCallback( () => { dispatch({type:UNFOLLOW_REQUEST,data:followingid}); }, [], )

안녕하세요. 김영한 강사님. 이번 강의를 듣던 도중 실무 이야기를 몇번 하셨는데요. sequence 변수에 대해 궁금하 점이 생겼습니다. Member를 save할때마다 id 값을 1씩 증가시켜주는데요. 이건 DB기반이 아니라 메모리 기반이기 때문에 id값을 이렇게 임의로 정해주는 것인가요? 실무에서 DB는 id 값을 auto increment를 주지 않고 이런 식으로 sequence를 올려가며 회원 저장마다 id값을 지정해주는 건가요? 제가 이해한것이 맞다면 서버가 재가동 될때마다 모든 회원 DB를 다 읽어와야 하는 시스템인것 같은데 제가 이해한바가 맞는지요.. 너무 궁금해서 그냥 넘어갈수가 없었습니다. 감사합니다. 

finance-datareader 패키지를 설치하였는데도 모듈이 없다는 에러메세지가 뜹니다.ㅠㅠ conda list를 통해 제대로 패키지가 설치되었음을 확인하였고, 패키지 삭제후 다시 설치하였는데도 여전히 에러가 뜹니다. 이유가 무엇일까요? 구글링한 결과 비슷한 예들이 보이긴 했는데.. 정확히 어떻게 해야할지 모르겠습니다. ModuleNotFoundError: No module named 'FinanceDataReader'

주피터의 루트폴더는 어떻게 바꾸나요??

시퀄라이즈  함수 //post.addUser ,/post.setUser /post.getUser단수로 생성된다 등을 통해서 디비에 추가 삭제 등등을 하시던게  혹시 어떤 관계 일 경우에 가능하나요 ? 모든 associate 한 관계에서 생기는 건가욤 ?

안녕하세요. 강의를 수강하는 학생입니다. document.body.setAttribute 를 이용하여 scene 을 보이게 하는데 있어서 문제가 생겨 문의를드립니다. display:none이 block으로 변경되는 부분에 있어서 잘되지 않아 질문을 올려봅니다. 해당문제 아래와 같이 깃헙 주소로 공유해봅니다. https://github.com/Mr-SY/CloneAppleSite 확인 바랍니다! 감사합니다!

 const rendorRadioBox=()=>(         props.lists&&props.lists.map(value=>(              <Radio key={value._id} value>                       {/*key는 오류를 없애기 위해서 준다. */}               {value.name}              </Radio>         ))     ) 이 부분에서 const rendorRadioBox=()=>{         props.lists&&props.lists.map(value=>(              <Radio key={value._id} value>                       {/*key는 오류를 없애기 위해서 준다. */}               {value.name}              </Radio>         ))         } 처럼 renderRadioBox를 { 가 아닌 ( 로 해야지만 제대로 동작하던데 지금껏 습관적으로 { 를 썻는데 { 와 (는 무슨 차이인거죠..ㅠ

빨간 테두리도 메인화면에서 브라우저에 선생님처럼 꽉 차게 나오지 않고.. 어떤 씬은 맞게 바뀌고 어떤 씬은 따로 바뀌고 제각각인데 왜이런거죠ㅠ //js코드 (() => {     let yOffset = 0;     let prevScrollHeight = 0; // 현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이 합     let currentScene = 0;   // 현재 활성화된 scroll-section     const sceneInfo = [         { // currentScene 0             type: 'sticky',             heightNum: 5, // 브라우저 높이의 5배로 총 scrollHeight 세팅             scrollHeight: 0,             objs: {                 container: document.querySelector('#scroll-section-0')             }         },         { // currentScene 1             type: 'normal',             heightNum: 5,              scrollHeight: 0,             objs: {                 container: document.querySelector('#scroll-section-1')             }         },         { // currentScene 2             type: 'sticky',             heightNum: 5,             scrollHeight: 0,             objs: {                 container: document.querySelector('#scroll-section-2')             }         },         { // currentScene 3             type: 'sticky',             heightNum: 5,             scrollHeight: 0,             objs: {                 container: document.querySelector('#scroll-section-3')             }         }     ];     function setLayout() {         // 각 스크롤 섹션의 높이 세팅         prevScrollHeight = 0;         for(let i=0; i<sceneInfo.length; i++) {             sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;             sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`;         }     }     function scrollLoop() {         prevScrollHeight = 0;         for(let i=0; i<currentScene; i++) {             prevScrollHeight += sceneInfo[i].scrollHeight;         }         if (yOffset > sceneInfo[currentScene].scrollHeight + prevScrollHeight) {             currentScene++;         }         if (yOffset < prevScrollHeight) {             currentScene--;         }         console.log(`prevScrollHeight = ${prevScrollHeight}, pageYOffset=${yOffset}, currentScene=${currentScene}`);     }     // 리사이징 하면 그에 맞는 높이 다시 세팅     window.addEventListener('resize', setLayout);     window.addEventListener('scroll', () => {         yOffset = window.pageYOffset;         scrollLoop();     });     setLayout(); })(); // css 코드 @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; } .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 {     max-width: 1000px;     display: flex;     align-items: center;     height: 100%;     margin: 0 auto; } .global-nav-links {     justify-content: space-between; } .global-nav-links a {     font-size: 1.2rem; } .product-name {     margin-right: auto;     font-size: 1.4rem;     font-weight: bold; } .local-nav-links a:not(.product-name) {     margin-left: 2em;     font-size: 1rem; } a {     color : rgb(29, 29, 31);     text-decoration: none; } .scroll-section {     padding-top: 50vh;     border: 3px solid red; } #scroll-section-0 h1 {     font-size: 4rem;     text-align: center; } .main-message {     display: flex;     align-items: center;     justify-content: center;     margin: 5px 0;     height: 3em;     font-size: 2.5rem; } .main-message p {     line-height: 1.2;     font-weight: bold;     text-align: center; } .main-message small{     display: block;     margin-bottom: 0.5em;     font-size: 1.4rem; } #scroll-section-2 .main-message {     font-size: 3.5rem; } .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); } .desc-message {     font-weight: bold;     width: 50%;     max-width: 385px; } .pin {     width: 1px;     height: 100px;     background-color: rgb(29, 29, 31); } .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;     background-color: tan;     color: white; } .sticky-elem {     display: none;     position: fixed;     top: 0;     left: 0;     width: 100%; } #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: 4vw;     }     .description {         font-size: 2rem;     }     .description strong{         font-size: 6rem;     }     #scroll-section-2 .main-message {         font-size: 6vw;     }     .main-message small {         font-size: 2vw;     }     .desc-message {         width: 20%;     }     .mid-message {         font-size: 4vw;     }     .canvas-caption {         font-size: 2rem;     } }

tmBase와 tm의 cellBounds를 비교하여 더 큰 값을 취하면 되나요?

Tilemap_Collision의 영역이 저렇게 크게 설정되어있는데, 저 네모 영역을 줄이고 싶으면 어떻게 설정해야 하나요?

안녕하세요. profileReport 생성시, 한글이 부분만 깨지는 경우가 있는데, 혹시 보신적이 있나요? 실행은 아래 그림처럼 했습니다. 실행은 되고, 파일은 저장이 되었습니다.

 사진이 안올라가서 무슨오류인지 안알려주신거 같아요 바로 이 오류에요  그리고 %ls data 를 쓰면 C 드라이브의 볼륨에는 이름이 없습니다. 볼륨 일련 번호: C442-F4C0 C:\Users\LGPC\Downloads 디렉터리 파일을 찾을 수 없습니다. 이것만 나오구요ㅠㅠ 윈도우라 그냥 여긴 넘어갔는데  데이터를 못불러온건가요?? 데이터를 못가져오겠어요  ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

안녕하세요 영한님 수업 듣는도중에 EntityManager를 사용하시는데 설명 도중에 스프링 빈? 스프링이 생성한 EntityManager에 주입한다?라고 하시는데 이게 무슨말인지 잘 모르겠습니다 jpa의 EntityManager를 스프링이 생성한 빈즈에 주입하는건가요?

안녕하세요 강사님 강의 잘듣고 있습니다. 그런데 제가 React기초는 알고 있어, 빠르게 실습적인 강의를 듣고 싶은데  다음 강의 계획이 있으신지 궁금합니다.

File "<ipython-input-10-1748e36fecc8>", line 1 pd.read_csv("data/전국 신규 민간 아파트 분양가격 동향_20200331.csv" ^ SyntaxError: unexpected EOF while parsing 그리구 맥북은 자동완성이되는데 윈도우는 안되거든요 그런데 자꾸 자동완성하셔서 혼자 빨리진행하셔서 햇갈려요  윈도우는 어떤방식으로 하라고 정확하게 알려주셔야지 질문창들 보고야 알았어요 ㅜ  데이터불러오는것도 그냥 업로드로 하구요 

다른강의는 ..create-react-app 만써대서 저걸왜하는지 이해가안갔는데 고맙습니당!

(() => {     let yOffset = 0; // window.pageYOffset 대신 쓸 변수     let prevScrollHeight = 0; // 현재 스크롤 위치 (yOffset) 보다 이전에 위치한 스크롤 섹션들의 스크롤 높이 합     let currentScene = 0; // 현재 활성화 된(눈 앞에 보고 있는) 씬 (scroll-section)     let enterNewScene = false; // 새로운 씬이 시작 된 순간 true     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'),                 canvas: document.querySelector('#video-canvas-0'),                 context: document.querySelector('#video-canvas-0').getContext('2d'),                 videoImages: []             },             values: {                 videoImageCount: 300,                 imageSequenc: [0, 299],                 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 }],                 // 20=> translateY를 20%만큼 조정, %는 밑에 playAnimation()에서 붙여줄 거임                 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, // 브라우저 높이의 5배로 scrollHeight 세팅             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, // 브라우저 높이의 5배로 scrollHeight 세팅             scrollHeight: 0,             objs: {                 container: document.querySelector('#scroll-section-3'),                 canvasCaption: document.querySelector('.canvas-caption')             },             values: {             }         }     ];     function setCanvasImages() {         let imgElem;         for (let i = 0; i < sceneInfo[0].values.videoImageCount; i++) {             // imgElem = document.createElement('img');             imgElem = new Image();             imgElem.src = `./video/001/IMG_${6726 + i}.JPG`;             sceneInfo[0].objs.videoImages.push(imgElem);         }     }     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 === '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}`);     }     function calcValues(values, currentYOffset) {          let rv;         //  현재 씬(스크롤섹션)에서 스크롤 된 범위를 0~1 사이의 비율로 구하기         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;     }     function playAnimation() {         const objs = sceneInfo[currentScene].objs;         const values = sceneInfo[currentScene].values;         const currentYOffset = yOffset - prevScrollHeight;    // 현재 씬에서 얼만큼 스크롤했는지를 확인         const scrollHeight = sceneInfo[currentScene].scrollHeight;         // const scrollRatio = yOffset / 현재 씬의 scrollHeight;         const scrollRatio = currentYOffset / scrollHeight;         switch (currentScene) {             case 0:                 // console.log('0 play');                 let sequence = Math.round(calcValues(values.imageSequenc, currentYOffset));                 objs.context.drawImage(objs.videoImages[sequence], 0, 0);                 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('scroll', () => {         yOffset = window.pageYOffset;         scrollLoop();     });     // window.addEventListener('DOMcontentLoaded', setLayout)     // 이미지가 업로드 되기 전에 실행     window.addEventListener('load', setLayout);     window.addEventListener('resize', setLayout); })();

사가 가 실행이 안되네요 ㅠㅠ 콘솔창에 확인해보니 아래와 같이 에러가 납니다 loginForm에서 dispatch로 data는 잘 넘겨줬는데 왜 이럴까요..?

여러 이벤트를 콜백함수로 처리해주는 이유가 다른 곳에서도 쉽게 사용하기 위해서 Action.Invoke으로 호출해주는건가요??

(() => { let yOffset = 0; //window.pageOffset 대신 쓸 수 있는 변수 let prevScrollHeight = 0 // 현재 스크롤 (yOffset)보다 이전에 위치한 스크롤 높이값의 함 let currentScene = 0; // 현재 활성화된 (눈앞에 보고 있는) 씬(scroll-section) let enterNewScene = false; 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 }], messageA_opacity_out: [1, 0, { start: 0.25, end: 0.3 }], } }, { // 1 type: 'normal', heightNum: 5, //브라우저 높이의 5배로 scrollheight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-1') } }, { // 2 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollheight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-2') } }, { // 3 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollheight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-3') } }, ]; function setLayout() { // 각 section 의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; // sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px` } let totalScrollHeight = 0; let yOffset = window.pageYOffset; // 새로고침 버튼 눌렀을때 그 씬 장면이 유지 될 수 있게 해주는 역할 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 partStart = values[2].start * scrollHeight const partEnd = values[2].end * scrollHeight const partScrollHeight = partEnd - partStart; if (currentYOffset <= partEnd && currentYOffset >= partStart) { rv = (currentYOffset - partScrollHeight) / partScrollHeight * (values[1] - values[0] + values[0]); } else if (currentYOffset < partStart) { rv = values[0]; } else if (currentYOffset > partEnd) { rv = values[1]; } } else { rv = scrollRatio * (values[1] - values[0] + values[0]); } return rv; } function playAinmation() { const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = (yOffset - prevScrollHeight) / scrollHeight; console.log(currentScene) switch (currentScene) { case 0: // calcValues = (values의 선명도, 현재 스크롤의 위치) const messageA_opacity_in = calcValues(values.messageA_opacity_in, currentYOffset) const messageA_opacity_out = calcValues(values.messageA_opacity_out, currentYOffset) if (scrollRatio <= 0.22) { // in objs.messageA.style.opacity = messageA_opacity_in; } else { // out objs.messageA.style.opacity = messageA_opacity_out; } break; case 1: break; case 2: break; case 3: 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; playAinmation() } window.addEventListener('scroll', () => { yOffset = window.pageYOffset; scrollLoop() }); window.addEventListener('resize', setLayout); window.addEventListener('load', setLayout); })()