최근 강사님 유튜브 영상, 그리고 이 강의를 시청하면서 3d 웹 사이트 제작에 대해 더욱 더 깊이 공부하고 싶은 마음이 생겼습니다. 제가 찾아보니 높은 수준의 3d 웹 사이트 제작을 하려면, 이 강의에서처럼 css 3d를 쓰거나, three.js라는 라이브러리를 쓰는 방법이 있다고 들었습니다. 이 점을 요약하여, 두 가지 질문에 대한 강사님의 고견을 여쭙고 싶습니다. 1. 실제 업계에서 3d 웹사이트를 제작할 때 css 3d와 three.js를 병용하는지. 2. 그게 아니라면 css 3d나 three.js 둘 중 하나를 선택하여 쓰는지, 더 나아가 둘 중 하나를 쓴다면 어느 것이     좀 더 많은 기능을 구현할 수 있으며, 실제 업계에서는 무엇을 더 많이 채택하는지 궁금합니다.

48강 15분 부터 강의 싱크가 안맞아요... 

가격대를 특정 구간으로 나눌 경우 (예) 3만원 단위 구분: 10만~12.9만, 13만~15.9만~~~~). 파워쿼리에서는 조건열 말고. 조건 수식을 넣을수 있는지 문의 드립니다.  수많은 구간을 단순반복적으로 조견열 넣는것이 비효율적인것같아. M함수를 찾아봤는데. If 조건은 2가지 조건밖에 안된다고 되어있네요. 방법을찾아 고민하다가 질문글 드립니다. 

안녕하세요! 이번에 처음으로 jpa를 사용해서 토이프로젝트를 하고있습니다. 질문에 앞서서 이런 강의 만들어주셔서 너무 감사합니다 한눈에 쏙들어오고 이해가 됩니다 ㅎㅎ 제가 드릴 질문은  json방식이 Array방식일경우 dto에 자동으로 맵핑이 안되더라구요...어떤방식으로 해야자동맵핑이 될지 궁굼합니다.

Set으로 해야 즁복이 안된다고 했는데... List로 바꾸고  Sample 로 하면 중복이 안되는건가요...?

nextjs9 에서 styled-components 와 CSS를 같이 사용해서 작업중인데 (외부 스타일 라이브러리 때문에) ssr 때 지금 사용하는 css도 같이 _document 에서 서버사이드 렌더링으로 스타일 처리를 해주고 싶습니다. 또한, 이미지는 Lazy 하게 불러오더라도 해당 css 파일에 font-face 코드가 있는데 그래서 그런지 로컬 렌더링 후에 폰트가 적용되는 어색한 화면이 나옵니다. 혹시 어떻게하면 좋을지 참고할 수 있는 관련 링크라도 알려주시면 감사하겠습니다.

allocationsize를 1로했을때는 잘나오는데 50으로 바꾸니 오류가 뜹니다. ㅠㅠ 요 근래 강의를 듣게되면서 질문을 하루에 하나씩 하게되는 것 같은데 항상 빠르게 답변해주셔서 감사드립니다.

안녕하세요. 강의 잘 듣고 서울 코로나19 발생동향 분석하기 들어가서 [1/25] 판다스 단 한 줄로 서울시 코로나19 발생동향 크롤링하기 부터 막혔습니다. 만드신 시점과 현재 시점간 차이로 인해 서울시 웹페이지가 바뀐 것 같은데 필요한 정보 부분에서 읽어오지를 못하네요. table[3].T Out[3]:  Empty DataFrame Columns: [] Index: [연번, 환자, 확진일, 거주지, 여행력, 접촉력, 퇴원현황] 보시는 것처럼 DataFrame은 비어있고 Index만 읽어왔습니다. 그리고 csv 파일은 다운로드 받았더니 character set이 안맞았는지 글자가 다 깨져 있습니다. 제가 뭘 알아서 해보기에는 할 수 있는게 없어서 글 올립니다.

요새 스크류와 볼트를 많이들 만들어서 3D 프린트에 이용하던데요 스크류와 볼트를 어떻게 만들고 조작하고 디자인 할 수 있는지 강의 부탁드립니다

[root@cent7 docker-fullstack-app]# docker-compose up Creating app_backend ... Creating docker-fullstack-app_nginx_1    ... error Creating docker-fullstack-app_frontend_1 ... Creating app_backend                     ... done Creating docker-fullstack-app_frontend_1 ... done Creating app_mysql                       ... done ERROR: for nginx  Cannot start service nginx: driver failed programming external connectivity on endpoint docker-fullstack-app_nginx_1 (3488149d1b9177d6cb8475986f389295d4e1ff69f26bfdfcf7d97ede096b35c0): Error starting userland proxy: listen tcp 0.0.0.0:3000: bind: address already in use ERROR: Encountered errors while bringing up the project. 에러메세지는 위와같습니다. 포트 충돌과 같은 내용이 에러에 있어서 기존에 생성된 컨테이너들 모두 삭제하고 실행했는데도 동일하네요. 소스는 강사님 git hub 에서 가져와서 생성하였습니다.

이렇게 했더니 그냥 문자 그대로 true || true : ${true || true} 이렇게 출력이됩니다.. 달러뒤에는 true가 나와야하는데 그대로나와요 ㅠㅠ

프록시 owasp-zap이랑 브라우저 설정하고 메타스플로잇에 접속하면 이렇게 뜹니다.. 또 다른 사이트들 접속시 이렇게 뜹니다.

며칠동안 강의 잘 보고 있습니다 제로초님 ㅎㅎㅎ 너무 도움이 많이 됩니다 ! LOGIN, LOAD_MY_INFO 액션 성공시  user 리듀서의 me 값에 팔로잉, 팔로우 데이터를 가지고 있고,  FOLLOW, UNFOLLOW 액션 실행 후에도 DB, me의 팔로잉, 팔로우 값이 업데이트되기 때문에 profile 페이지에서 useEffect로 LOAD_FOLLOWERS, LOAD_FOLLOWINGS 액션을 실행해서  이미 가지고 있는 유저의 팔로잉, 팔로우 데이터를 가져올 필요가 없을 것 같고, 위 코드를 생략해도 현재 강의에선 잘 동작하는데 이렇게 코딩하신 이유가 궁금합니다.

part 4 강의 기다리고 있는데 저번에 외부강의 일정 때문에 늦춰진다고 답변 듣긴 했는데  혹시 올해 나오나요 아니면 내년에 나올 확률이 높은 건가여? 대충 일정을 알아야 저도 플랜이 달라져서 아니면 아예 part3까지만 나오고 끝날 수도 있는지 궁금하네요 ~ 여튼 강의 보고 기초적인 부분 많이 배웠습니다 감사합니다~

기본적인 tensorflow 내용은 다 알고 있습니다. 이를 웹에서 사용해보기 위해서 자바스크립트에서 어떻게 사용되는지 볼려고 했는데, 실제적인 예제는  없어보입니다. 처음에 계속 이론적인 내용만 나오길래, 뒤에는 제대로 실습이 나오겠지했는데..... 계속 나오지 않아서, 혹시 맨 뒤쪽에만 있나해서, 맨 뒤쪽 강의만 클릭해서 봤는데 실습은 아예 안나와보이네요... 최소한 돌려볼 수 있는 예제를 제공해주셨으면 합니다. 예제 코드 위치라도 알려주시면 감사하겠습니다. 

삭제된 글입니다

SelfTest.func1()라고 쳐도  unbound method func1() must be called with SelfTest instance as first argument (got nothing instead)  라는 에러메세지가 뜨네요.... 왜 그러는 걸까요?

안녕하세요 선생님 강의를 듣던 중, 저번 101 예제파일로 했을 때랑 동일하게 201파일도 명령어를 넣었을 때 찾을 수 없다고 뜨더라고요.. 뭐가 문제인 걸까요?

안녕하세요. 강의 잘 듣고있습니다 ! 그런데 콘솔창에 아래 이미지 처럼 에러가 떠서 질문 드립니다. 스크롤을 내릴때는 뜨지 않다가 전부 다 내리고 다시 올려보면 저렇게 에러가 뜹니다. 작동은 됩니다.. (스크롤 비디오 처리 부분) 혹시 빼먹은게 있나 강의도 여러번 다시 보았는데 해결이 나지 않아서 질문 드립니다 ..ㅜㅜ ----- 그리고 또 한가지가 있는데,  show scene1 에서 show scene2로 넘어갈때 아래 이미지가 잠깐 뜨고 사라집니다.   강의에서는 저와 다른 텍스트만 잠깐 뜨고 사라져서 css에서 수정하는것을 보았는데 저의 경우에는 위의 이미지처럼 저 텍스트와 이미지가 잠깐 떴다가 사라져서 이것도 해결책을 잘 모르겠습니다ㅠ 완성본에서는 콘솔창에 에러 뜨는 현상도 전혀 없고 잘 작동 됩니다. 제 코드에 문제가 있는건데 html과 css에는 문제가 없는거 같습니다..  (완성본에 적용해보았습니다) 강의는 두번째 스크롤 비디오 처리까지 들었습니다! ----- 아래는 현재 제 코드입니다. (()=>{     let yOffset = 0; // window.pageYOffset 대신 쓸 변수     let prevScrollHeight = 0; // 현재 스크롤 위치(yoffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이 값의 합     let currentScene = 0; // 현재 활성화된(눈 앞에 보고 있는) 씬(scroll-section)     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: {                 videoImagesCount: 300,                 imageSequence: [0, 299],                 canvas_opacity: [1, 0, { start: 0.9, end: 1}],                 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'),                 canvas: document.querySelector('#video-canvas-1'),                 context: document.querySelector('#video-canvas-1').getContext('2d'),                 videoImages: []             },             values: {                 videoImagesCount: 960,                 imageSequence: [0, 959],                 canvas_opacity_in: [0, 1, { start: 0, end: 0.1 }],                 canvas_opacity_out: [1, 0, { start: 0.95, end: 1 }],                 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 setCanvasImages() {         let imgElem;         for ( let i = 0; i < sceneInfo[0].values.videoImagesCount; i++) {             imgElem = new Image();             // = imgElems = document.createElement('img');             imgElem.src = `./video/001/IMG_${6726 + i}.JPG`;             sceneInfo[0].objs.videoImages.push(imgElem);         }         let imgElem2;         for ( let i = 0; i < sceneInfo[2].values.videoImagesCount; i++) {             imgElem2 = new Image();             // = imgElems = document.createElement('img');             imgElem2.src = `./video/002/IMG_${7027 + i}.JPG`;             sceneInfo[2].objs.videoImages.push(imgElem2);         }         // console.log(sceneInfo[0].objs.videoImages);     }     setCanvasImages();     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}`);         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})`;         // console.log(sceneInfo);     }     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;     }     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');                 let sequence = Math.round(calcValues(values.imageSequence, currentYOffset));                 // console.log(sequence);                 objs.context.drawImage(objs.videoImages[sequence], 0, 0);                 objs.canvas.style.opacity = calcValues(values.canvas_opacity, currentYOffset);                 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');                 let sequence2 = Math.round(calcValues(values.imageSequence, currentYOffset));                 objs.context.drawImage(objs.videoImages[sequence2], 0, 0);                 if (scrollRatio <= 0.5) {                     objs.canvas.style.opacity = calcValues(values.canvas_opacity_in, currentYOffset);                 } else {                     objs.canvas.style.opacity = calcValues(values.canvas_opacity_out, currentYOffset);                 }                 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() {         prevScrollHeight = 0;         for (let i = 0; i < currentScene; i++) {             prevScrollHeight = prevScrollHeight + sceneInfo[i].scrollHeight; // +=를 사용하고 뒤에 prevScrollHeight 지워도 동일         }         if(yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) {             currentScene++;             document.body.setAttribute('id', `show-scene-${currentScene}`);         }         if(yOffset < prevScrollHeight) {             if (currentScene === 0) return; // 브라우저 바운스 효과로 인해 마이너스가 되는것을 방지             currentScene--;             document.body.setAttribute('id', `show-scene-${currentScene}`);         }         playAnimation();     }     window.addEventListener('scroll', () => {         yOffset = window.pageYOffset;         scrollLoop();     });     window.addEventListener('load', () => {         setLayout();         sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0], 0, 0);     });     window.addEventListener('resize', setLayout);     setLayout(); })();

안녕하세요. 좋은 강의 잘 듣고 있습니다.  이미 Identity 폴더에 스캐폴딩을 했고, AspNetUsers 등의 엔티티가 생성되어 있는 상황인데, 이 강의를 보니 테이블 명도 바꾸고  하던데.. 강의에 사용된 코드들을 적용하고 마이그레이션 해도 될까요? 아니면 기존 걸 지우고 해야 하나요?  마이그레이션에서 하도 에러를 많이 겪어서 겁이 납니다. 좋은 팁이나 가이드 부탁드립니다. 감사합니다~