묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결애플 웹사이트 인터랙션 클론!
안녕하세요 꼭 좀 부탁드려요..4시간째 검색해도 답이없네요..
// (function() {}) (); 아래 함수와 같은 뜻 // (() => { // })(); (() => { //함수 안에 작성(전역변수 피하기 위함(지역변수)) 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, //창 사이즈 변경 대응해야해서 0값주고 따로 함수 처리 objs: { //html dom객체 요소들 container: document.querySelector('#scroll-section-0'), messageA: document.querySelector('#scroll-section-0 .main-massage.a'), //에니메이션 조작할 css들 가져옴 messageB: document.querySelector('#scroll-section-0 .main-massage.b'), messageC: document.querySelector('#scroll-section-0 .main-massage.c'), messageD: document.querySelector('#scroll-section-0 .main-massage.d') }, values: { messageA_opacity: [0, 1] } }, { //1 type: 'normal', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, //창 사이즈 변경 대응해야해서 0값주고 따로 함수 처리 objs: { container: document.querySelector('#scroll-section-1') } }, { //2 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, //창 사이즈 변경 대응해야해서 0값주고 따로 함수 처리 objs: { container: document.querySelector('#scroll-section-2') } }, { //3 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, //창 사이즈 변경 대응해야해서 0값주고 따로 함수 처리 objs: { container: document.querySelector('#scroll-section-3') } } ]; function setLayout() { // 각 스크롤 섹션의 높이 세팅 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`; } yOffset = window.pageYOffset; let totalScrollHeight = 0; for (let i = 0; i < sceneInfo.length; i++) { totalScrollHeight += sceneInfo[i].scrollHeight; //각 신의 scrollHeight를 더해서 넣어주고있음 if (totalScrollHeight >= yOffset) { //토탈스크롤에 들어가는 값이랑 현재y스크롤 위치를 비교해서 더 커지면 currentScene = i; //현재 i를 세팅하고 break; //for문을 멈추고 빠져나옴 } } document.body.setAttribute('id', `show-scene-${currentScene}`); } function calcValues(values, currentYOffset) { let rv; //현재 씬(스크롤섹션)에서 스크롤된 범위를 비율로 구하기 let scrollRatio = currentYOffset / sceneInfo[currentScene].scrollHeight; 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; switch (currentScene) { case 0: // console.log('0 play'); let messageA_opacity_in = calcValues(values.messageA_opacity, currentYOffset); objs.messageA.style.opacity = messageA_opacity_in; break; case 1: // console.log('1 play'); break; case 2: // console.log('2 play'); break; case 3: // console.log('3 play'); break; } } function scrollLoop() { prevScrollHeight = 0; for ( let i = 0; i < currentScene; i++) { prevScrollHeight += sceneInfo[i].scrollHeight; } if (yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) { currentScene++; document.body.setAttribute('id', `show-scene-${currentScene}`); //변수랑 문자열 섞여 있으니까 (``백틱 사용) } if (yOffset < prevScrollHeight) { if (currentScene === 0) return; //0이면 리턴 보낸다는 뜻으로 스트롤 위쪽으로 -되는거 방지(모바일에서) currentScene--; document.body.setAttribute('id', `show-scene-${currentScene}`); //변수랑 문자열 섞여 있으니까 (``백틱 사용) } playAnimation(); } window.addEventListener('scroll', () => { yOffset = window.pageYOffset; scrollLoop(); }); // window.addEventListener('DOMContentLoaded', setLayout); //DOMContentLoaded가 load보다 실행 시점이 빠르나 이미지 및 영상 출력 전에 HTML실행 window.addEventListener('load', setLayout); //load 되면 setLayout을 실행하는걸로 window.addEventListener('resize', setLayout); //윈도우 창의 사이즈에따라 setLayout대응 })(); 안녕하세요현재 스크롤 애니메이션 구현3를 들으면서코딩 따라하고 있는 도중에switch (currentScene) { case 0: // console.log('0 play'); let messageA_opacity_in = calcValues(values.messageA_opacity, currentYOffset); objs.messageA.style.opacity = messageA_opacity_in; break; 여기 부분에서objs.messageA.style.opacity = messageA_opacity_in;이 코드 를 빼면 에러표시가 안뜨는데추가하면 마우스 스크롤시 에러 표시가 이렇게 뜨네요...Uncaught TypeError: Cannot read properties of null (reading 'style')도움좀 부탁드려요..html에 스크립트 위치도 body 최하단에 잘 위치해 있어요.. - 질문에 대한 답변은 강의자가 하는 경우도 있고, 수강생 여러분들이 해주시는 경우도 있습니다. 같이 도와가며 공부해요! :)- 작성하신 소스코드 자체의 오류보다는, 개념이나 원리가 이해되지 않는 부분을 질문해주시는게 좋습니다. 그대로 따라했는데 소스코드에서 버그가 나는 경우는 99%가 오타에 의한거라서, 완성된 소스랑 찬찬히 비교해보시면 직접 찾으실 수 있을 거예요. 개발자도구 console에 오류로 표시된 부분만 완성 코드에서 복사->붙여넣기를 해보시는 것도 방법입니다.- 먼저 유사한 질문이 있었는지 검색해보세요.- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결Do it! 자바 프로그래밍 입문 with 은종쌤
인터페이스와 가상 메서드
아래 코드에서 Customer 클래스는 Buy, Sell 인터페이스를 구현하고 buy, sell, order 메서드를 갖고 있는데,buyer.sell()은 왜 실행되지 않는건지 궁금합니다.가상메서드에 의해 Customer 클래스의 sell 메서드가 불리는 것이 아닌가요?public class CustomerTest { public static void main(String[] args) { Customer customer = new Customer(); Buy buyer = customer; buyer.buy(); Sell seller = customer; seller.sell(); // 가상 메서드 : 인스턴스의 메서드가 불림 customer.order(); buyer.order(); seller.order(); } }
-
미해결[개정판] 파이썬 머신러닝 완벽 가이드
교재 해외 배송 혹은 e-book 출간
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 강의 내용을 질문할 경우 몇분 몇초의 내용에 대한 것인지 반드시 기재 부탁드립니다. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 해외 수강생입니다.몇 달 전 올라온 e북 출간 관련 질문에 계획 없으시다는 답변은 보았습니다만,혹시 개정판을 출간하시면서 e북 관련해 재고하신 부분은 없는지 여쭙고 싶습니다.아니면 인터넷 서점 등에서 해외 배송이라도 가능하도록 하실 계획은 없으신지요..! 양질의 강의 감사드리며, 반복되는 질문에 번거로우시겠으나그만큼 강의에 관심이 많아서 그러는 것이니 너그러이 양해 부탁드리겠습니다^^;;
-
미해결면접과 취업을 부르는 '퍼블리셔 개인 포트폴리오 홈페이지' 제작
개인포토폴리오 해상도문제요..!
선생님 덕분에 개인 포토폴리오를 완성할수 있었습니다..! 문제는 제가 노트북으로 퍼블리싱을 햇는데 데스트탑 모니터 여러개로 개인 홈페이지를 들어가보니 , 모니터마다 보이는게 달라서 이것을 해결하고싶은데, 노트북 해상도를 달리해서 작업을 다시해야할까요?.? 픽셀로 잡은 가로세로 부분을 퍼센트나 vw,vh로 해결해야할까요?.?
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
debug_toolbar나, django_extensions을 어디서 app추가 하는 것이 효율적인 것인가요?
debug_toolbar나, django_extensions은개발 단계에서만 쓰는 것으로 알고 있는데 맞나요?그러면 settings/common.py에 작성하는 것보다는settings/dev.py에INSTALLED_APPS += [ 'debug_toolbar', 'django_extensions' ]이렇게 추가해주는 것이 개념적으로 더 맞는 것인지 문의드려요!메리 크리스마스입니다. 진석쌤! 덕분에 장고에 흥미를 많이 가지게 되었어요. 감사드려요!
-
미해결마케터를 위한 구글 애널리틱스 실무
pdf 강의북 요청 드립니다.
메일에 파일이 첨부되지 않은 것 같아pdf 강의북 다시 요청 드립니다.juwyro@naver.com
-
미해결파이썬 무료 강의 (활용편4) - 업무자동화 (RPA)
파이썬 코드가 완료되면 브라우저가 닫힙니다.
셀레늄으로 브라우저를 실행하고작업을 하게 될 경우,코드가 모두 완료되면 브라우저가 닫힙니다. 강의영상에서는 닫히지 않던데, 어떤 차이가 있는걸까요?
-
미해결파이썬 무료 강의 (활용편4) - 업무자동화 (RPA)
find_element_by_id, find_element_by_link_text 등의 함수가 존재하지 않습니다.
셀레늄의 browser에 find_element, find_elements만 존재합니다.원인을 모르겠습니다.
-
미해결스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
웹 백엔드 개발 진행 순서
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.1. 강의 내용과 관련된 질문을 남겨주세요.2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.(자주 하는 질문 링크: https://bit.ly/3fX6ygx)3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오) 예2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예[질문 내용]여기에 질문 내용을 남겨주세요.처음으로 프론트와 협업을 해서 제대로 된 프로젝트를 진행할 기회가 생겼는데 혹시 프로젝트 기획부터 배포까지 백엔드가 어떤일을 계획하고 해야하는지 가이드 라인을 알수 있을까요? 웹페이지에서 구현할 기능들을 모두 생각해서 정리하고 api 명세작성과 db 설계를 한후에 코드를 짜면 되는건가요?
-
미해결파이썬을 활용한 머신러닝 딥러닝 입문
Dense 레이어의 units 질문입니다!
안녕하세요.좋은 강의 열심히 듣고 있습니다. 선생님께서 시퀀셜 모델의 히든 레이어에 Dense(32, input_shape ...)Dense(16, ...)Dense(1, ...) 이런 식으로 3개의 레이어를 추가하셨는데, 32나 16이라는 값은 어디서 왔는지 잘 모르겠습니다. 임의대로 해도 되는 건지, 값을 크게 줄 때와 작게 줄 때의 장단점 등.. 궁금합니다 감사합니다!
-
미해결지금 바로 D3.js 시작하기 : 웹 데이터 시각화
지도 관련 질문입니다.
선생님, 안녕하세요. 수업 잘 듣고 있습니다.수업 듣다보니 몇가지 질문 있어서 문의 드립니다.세계지도도 예제 하나 얻을 수 있을까요? 한국지도 수업 응용해서 어떻게든 해보려고 하는데 스케일값, 위치값부터 막히네요.수업에선 다루지 않던데 확대/축소, 화면이동 하려면 어떻게 하나요?수업에서 지역 추출하려면 대한민국은 행정구역 파일 다운받아서 하던데 세계에서 구역 따로 나누려면 다운받는 파일이 있나요? (예: 아시아 로 묶는다든지)
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useCallback 최적화 질문입니다.
안녕하세요.useCallback 으로 함수 최적화하는것에 대한 질문입니다.어떠한 함수를 만들때마다 useCallback으로 감싸도 되나요?useCallback을 남용했을때 어떤 문제가 생기는지 궁금합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
데이터베이스와 앱연결 강의까지들었습니다.
좀 혼란스럽네요ㅠ..도커를 데스크탑에 깔았는데 이거는 몽고db데스크탑처럼 편리하게 데이터를 보여주는 앱인가요? server.ts 부분에서 app.listen(port, async () => { console.log(`server running at http://localhost:${port}`); // 도커 데이터베이스 연결코드 AppDataSource.initialize() .then(async () => { console.log('database initialized'); }) .catch((error) => console.log(error)); });AppDataSource는 제가 주석단것처럼 도커 데이터베이스를 node.js에 연결해주는건가요?
-
미해결[왕초보편] 앱 8개를 만들면서 배우는 안드로이드 코틀린(Android Kotlin)
Implement Members 추가가 안됩니다 ㅠ
커맨드 엔터를 눌러서 Implement Members에서 3가지 항목 선택하고 OK를 눌러도 아무런 변화가 이루어지지 않습니다. 왜 그런 것일까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
도포자료 pdf
도포 자료 pdf파일 안에 혹시 파일이없나요?다운받았는데 폴더는있는데 폴더안에 파일이없는거같은데.. 제 컴퓨터문제일까요?ㅠㅠ
-
미해결윤재성의 Oracle SQL Database 11g PL/SQL Developer
오라클 설치 마지막에 비밀번호 설정 시 무한로딩
비밀번호 관리에서 SCOTT 계정 잠금 풀고 비번거는거 까지 하고 확인 버튼 누르니 무한로딩 걸리고 그 다음으로 진행이 안됩니다.ㅠㅠ
-
해결됨[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
Padding 이 아닌 SliverPadding 을 사용한 이유는 무엇인가요?
Padding 이 아닌 SliverPadding 을 사용한 이유는 무엇인가요?ProductCard 를 Padding 으로 감싸는데 거기에 한번에 넣어주어될 것 같습니다.
-
미해결모든 개발자를 위한 HTTP 웹 기본 지식
HTTP API설계, API설계의 의미
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예)[질문 내용]안녕하세요. 매번 친절한 설명 감사드립니다.' HTTP API 설계 '의 의미가 무엇인지 궁금하여 질문드립니다. 단순히 URI를 설계하는것을 뜻한다. (ex. /members)URI + HTTP메서드를 설계하는것을 뜻한다. (ex. POST /members)HTTP요청메시지 전체를 설계하는것을 뜻한다. 강의를 듣다가 헷갈려서 생각해봤는데 이중에 있을까요 ?
-
해결됨로그프레소 엔터프라이즈 - 데이터 수집과 파싱
시스로그 수집기 수집 설정 중 시스로그 설비 목록 설정 문의
안녕하세요.https://docs.logpresso.com/ko/enterprise/3.10/ui/subsection-syslog-logger시스로그 설비 목록 공식 docs를 봐도 어떤식으로 설정해야할지 감이 오지 않습니다. 추가설명 부탁드리겠습니다. 감사합니다.
-
미해결AWS(Amazon Web Service) 중/상급자를 위한 강의
elasticbeanstalk.com/ 접속시
http://scorekeep-env-1.eba-np5d5i23.us-east-1.elasticbeanstalk.com/ 접속시 저는 이렇게 나옵니다 더이상 진행이 안되어서 서비스맵에 저런 화면이 안뜹니다..