묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨설계독학맛비's 실전 Verilog HDL Season 1 (Clock부터 Internal Memory까지)
수체계와 반올림
아으니.. 질문을 지우시고 유튭에다 적으셨군요. 업로드 하려고 눌렀더니 안되서 봤더니.. ㅎ 되도록이면 인프런을 활용해주세요. 유튭 글쓰기 불편해요 ㅜ ============== 질문 ================= 개인공부를 하다 궁금증이 생겨 질문드립니다 !! fixed point 수 체계에서 반올림은 어떤식으로 구현되는지 궁금합니다. 검색 해보니까 Rounding down, Rounding up, Rounding away from zero, Rounding towards zero 이런 식으로 종류가 많던데 혹시 HW에서 특별이 선호되는 방법이 있나요?. ============== 답변 =================반올림을 결정하는건 알고리즘 엔지니어의 역할 같아요 :) 왜냐하면, 반올림 여부에 따라 결과 값이 달라지기 때문에, 이를 보장하는 거는 HW 설계 엔지니어의 역할이라 생각되진 않습니다. HW 엔지니어는 정답지와 동일하게 답을 내는 설계를 해야한다고 생각해요. 만약 반올림을 HW 엔지니어가 정할 수 있으면, 제가 굳이 하나 고른다면, 구현이 가장 쉽고 logic size 가 작은 "버림" 을 취하지 않을까 싶습니다.
-
미해결홍정모의 따라하며 배우는 C언어 (부록)
링크드 리스트 질문 드립니다.
while (search != NULL) search = search->next; search = new_node; new_node->next = NULL; 이 코드에서 search가 링크드 리스트의 마지막 노드의 next 주소를 가지고 있는거 아닌가요? 그래서 new_node의 주소를 대입하는 것과while (search->next != NULL) search = search->next; search->next = new_node; new_node->next = NULL;이코드에서 search가 마지막 노드의 주소를 가지고 있고, 그래서 next에 new_node의 주소를 넘겨주는 것과 무슨 차이가 있는지 모르겠습니다. 아래코드는 정상 작동하고 위에 코드가 작동하지 않습니다.
-
해결됨코딩은 실전이다! - Git알못을 위한 깃린이코스(Git, Github 실습위주)
슬랙 초대 부탁드려요
eden.tictoc@gmail.com 입니다. 부탁드려요~
-
미해결리액트로 나만의 블로그 만들기(MERN Stack)
바벨 없이 진행을 했는데요
안녕하세요 다름이 아니고 바벨없이 노드 최신버전 16. 으로 개발을 진행해서 막힘 없이 모든 튜토리얼들을 구현 했는데요 (찾아보면서 모든 에러들을 해결 했구요 바벨 없이 "type" : "module" 정의 해주고 난후 마지막 배포 부분 중간 까지 진행 하였습니다) 지금 현재 한부분에서 막혀있습니다. 지금 putty로 모든 AWS EC2 에 필요한 부분들을 진행 한후에 client 폴더에서 build까지 되는데요, 다만 튜토리얼 마지막 부분쯤에 AWS 에서 제공한 public IP 주소로 웹사이트를 키실때 "sudo node build/server.js" 를 치시는데 저는 지금 바벨 없이 진행을 했기때문에 root folder package.json 안에 "dev": "nodemon ./server/server.js" "prebuild": "cd client && npm run build" 이 두개만 정의가 되어 있고 아래 두개는 정의 되어 있지 않습니다 (필요 없다고 판단되어서요) "build" : "babel server --out-dir build""build:sever" : "babel server --out-dir build" 다만, 저 부분들이 없기때문에 "sudo node build/server.js" 를 못하고 있는데요. 어떻게 진행하면 될까요 ?
-
미해결AWS 클라우드 서비스 인프라 구축 이해와 해킹, 보안
질문 icmp
ICMP 핑 날리기 위해 인바운드 규칙에서 IP 허용을 0.0.0.0/0 으로 전체로 해놓았는데, 프라이빗은 오직 퍼블릭에서 접근해야 하니깐 사용자 IP를 퍼블릭의 private 주소 즉, 여기서는 프라이빗 IPv4주소인 10.0.0.41 로 해야 하는거 아닌가요? 왜 0.0.0.0/0 으로 해서 모든 사용자가 프라이빗 대역(10.0.1.0/24)에 접근 하게 되는거 아닌가요?
-
미해결[라즈베리파이] IoT 딥러닝 Computer Vision 실전 프로젝트
ModuleNotFoundError: No module named 'cv2' (해결)
도움이 될까 싶어서 글 남깁니다! 가상환경에서는 잘 돌아갔었는데 라즈베리파이안에서 Thonny Python IDE 로 실행했을 때, ModuleNotFoundError: No module named 'cv2' 라는 에러가 떴었는데 가상환경에서만 설치를 해줘서인지 pip install opencv-python pip install numpy —upgrade pip install firebase-admin 이명령어 세개를 가상환경이아닌 기본cmd창에서 설치를 해줘야 Thonny Python IDE 에서도 잘 돌아가더라구요!
-
미해결만들면서 배우는 HTML/CSS
그냥 body에 적용
삭제된 글입니다
-
미해결자바 ORM 표준 JPA 프로그래밍 - 기본편
영속성 컨텍스트 1차 캐시가 비워지는 시점은 언제인가요?
안녕하세요, 영속성 컨텍스트 1차 캐시에 대한 질문이 있습니다. 새로운 트랜잭션이 시작되는 시점에서도 1차 캐시가 유지되는 건가요? 만약 맞다면 1차 캐시가 비워지는 시점이 언제인가요? 강의를 보면 영속성 컨텍스트 1차 캐시는 flush 시점(커밋 시점) 이후에도 내용을 유지한다고 합니다. 그렇다면 새로운 트랜잭션이 시작되는 시점에서도 1차 캐시가 유지되는 건지가 궁금하구요. 궁금한 이유는,새로운 트랜잭션이 시작되었는데도 이전 트랜잭션 시점의 데이터가 담긴 1차 캐시를 계속 바라보면 문제가 될 수 있을 것 같아서요. 답변해주시면 감사하겠습니다!
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
프로필 페이지에서 새로고침 시 오류
안녕하세요, 처음에 로그인하고 프로필로 들어가면 에러가 안나는데, 프로필페이지에서 새로고침을하면 이런 에러가뜹니다. 팔로워 팔로잉 없을때 오류인줄알고 한명씩 넣어봐도 똑같이 뜨네요,, 그래서 제로초님 코드 복붙해봐도 그대로인거 보면 코드오류는 아닌거같은데 혹시 프로필페이지 에서 새로고침시 오류뜨는거 이거 왜그럴까요..??
-
미해결자바 ORM 표준 JPA 프로그래밍 - 기본편
Enum 관련 질문드립니다.
아무래도JPA 보다는 DB쪽 질문에 가까운거같은데 이해해주시면 감사합니다. Enum이라는게 결국 어떤 카테고리의 역할을 할때가 많은거같은데요 이런경우 보통 인덱스를 걸어주는게 맞나요? db이론상으론 카디널리티가 낮은경우 인덱스를 걸면 효과가 적다고 해서 좀 혼란스럽더라구요. 그리고 강의중간에 말씀하신걸로 보면 그냥 String 형태로 저장해도 된다고 하고 차이가 적다구 하셨긴했는데 카테고리 역할을 할때 의 컬럼이 조건식도 그렇고 많이 쓰이는거 같아서 String비교보단 int비교가 빠르지 않나? 라는 생각이 좀 들었어서 혹시 int값을 주고 다른테이블로 외래키를 연결해서 id값과 String값을 주고 이어준다던가 이럴 필요는 없다고 생각해도 될까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
에러 질문
첨부하는 사진과 같은 에러가 어쩔때는 발생하고 어쩔때는 발생하지 않습니다. 서버 응답은 제대로 받았는데 왜 해당에러가 발생하는것일까요??
-
미해결스프링 핵심 원리 - 기본편
@Autowired를 보다보니 질문이 있습니다.
안녕하세요, 1년차 웹개발자로 일하고있는 영한님 제자입니다. 역할과 구현체에 대한 부분이 객체지향에서 가장 중요한 것 같은데 제가 하는 업무에서는 @Autowired로 퉁쳐서 하나의 역할에 하나의 구현체만 묶는? 경우가 많은 것 같아요. 이게 웹개발 SI 업계의 특징인지 아님 제가 잘못 코딩하고있는 건 지 궁금합니다. 게시판을 만들 때 제가 본 대부분의 코드는 하나의 컨트롤러에서 여러개의 Interface를 @Autowired하는 경우를 많이 봤습니다. 글 게시판, 사진 게시판, 익명 게시판 등 여러개의 게시판이 있다면 그 여러가지 게시판의 기능의 최소공배수를 준비해두거나(영한님 강의 중 자동차 I/F) 각 게시판 별 I/F가 하나씩 생기는(영한님 강의 중 소나타I/F, 그랜져I/F, 테슬라I/F) 경우를 많이 봐왔어요. 그러다 보니 객체지향 언어를 다루고 있으면서도 이게 객체지향인가? 싶고 영한님 강의를 볼때 ?? 내가 보던 코드에 저걸 어떻게 써먹지? 싶었거든요. 그래서 든 생각이 위와 같은 게시판을 만든다고 했을 때, 게시판 관리 I/F(게시글 조회 I/F, 게시글 상세보기 I/F, 게시글 작성 I/F)등을 만들어 두고 각각 익명 게시글 조회 구현체, 사진게시글 조회 구현체, 이런식으로 만들어두는 것이 바람직한 객체지향 설계인가? 하는 궁금증이 생겨서 확인 차 글을 남깁니다. 질문이 두서없지만 답변 미리 감사드립니다.
-
미해결리액트로 나만의 블로그 만들기(MERN Stack)
jwt.sign 에 대해 질문이 있습니다.
ex) jwt.sign( { id: user.id }, JWT_SECRET, { expiresIn: 3600 }, (err, token) => { if (err) throw err; res.json({ token, user: { id: user.id, name: user.name, email: user.email, }, }); } ); 질문1 jwt.sign()이 로그인 함수 인가요? 질문2 jwt.sign() 함수에 id와 JWT_SECRET 는 왜 넘기는건가요? 질문3 토큰은 왜 응답해주는건가요? 질문4 expiresIn 이 3600이면 3600 초인가요? 3600초 이후에는 뭐가 달라지는건가요?
-
미해결[개정판] 파이썬 머신러닝 완벽 가이드
BaseEstimator 질문드립니다 !
선생님 MyDummyClassifier 에서 BaseEstimator의 역할이 궁금합니다.. 아무리 검색해도 잘모르겠네요 ㅠ 그리고 fit 메서드는 아무것도 학습을 하지 않는데 굳이 학습/검증 세트로 나눈다음 fit(X_train, y_train) 을 수행한 이유도 잘모르겠습니다 ㅠㅠ
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
axios로 네트워크 통신하기 수업에서 막혔어요
axios로 네트워크 통신하기 수업에서 막혔습니다 결론부터 정리하면 typeerror 가 뜨고 있습니다 61,62번 줄이 에러라고 뜨는대 그 줄에 작성한 코드는 이거입니다 .catch(function (error) { 가 61번줄 console.error이 62번 줄입니다. index.html:32 는 products.length; 작성된 줄입니다. 이외에 코드도 수업보면서 틀린부분을 확인했는대 없었습니다. 잘따라가다가 처음으로 막혔습니다 문제가 될만한 부분은 저 사진 3개중에 있을거같은대 어디가 문제가 되는건지 모르겠어요 목업서버도 하라고 나온거처럼 그대로 작성해놨습니다;
-
미해결
유니티 vscode 빨간줄이 제대로 뜨지 않습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 유니티로 c#강의를 듣고 공부하는 학생입니다. 다름이 아니라 c#익스텐션을 제대로 설치했음에도 불구하고 계속 자동완성이 제대로 안뜨거나, 빨간줄이 제대로 작동을 하지 않습니다. c#익스텐션도 제대로 깔았고 Debug는 D를 치건 De를 치건 아예 자동완성될 기미가 없고 ㅍvoid의 철자를 틀려도 아무런 표시(빨간 줄 ) 이 나타나지 않고.. 왠만하면 그냥 하려했는데 사소한 오타때문에 오랜시간을 잡아먹어서 최대한 빨리해결하고 싶습니다. 전부 다지우고 다깔아도 계속이런데 어떻게 하면 좋을까요? 가르쳐주시면 정말로 감사하겠습니다 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
-
미해결파이썬(Python)으로 데이터 기반 주식 퀀트 투자하기 Part1
[Chapter 5] 투자전략20. 그레이엄의 마지막선물 업그레이드(188p)
선생님이 올려주신 위에 코드 (위)와 제가 짠 코드 (아래)의 길이가 다른데 이유가 왜인지 모르겠습니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
윈도우에서 nodemon 실행 안되시는 분
VScode 에서 터미널은 기본값이 powershell 로 되어 있습니다. 이 터미널을 cmd 로 바꿔주시면 정상적으로 작동합니다. 아마 powershell 에서 경로나 권한 이슈가 있는 모양입니다.
-
미해결[C++과 언리얼로 만드는 MMORPG 게임 개발 시리즈] Part2: 게임 수학과 DirectX12
vertex의 z축 좌표가 1을 넘으면 화면에서 사라지네요
z축의 좌표를 1이상 설정하면 해당 vertex와 mesh의 일부가 화면에서 사라집니다. 혹시 그 이유가 무엇때문인가요??
-
미해결애플 웹사이트 인터랙션 클론!
강의에서 잠깐 나오는 desc 메시지 와 다르게 캔버스가 잠깐 보입니다..
현제 제가 section-1에서 2로 넘어갈때 위 처럼 캔버스와 main텍스트가 번쩍 하고 보입니다. 둘다 opacity를 줘도 해결되지 않고 자바스크립트 문제인 것 같은데 어디가 문제인지 도저히 모르겠습니다.. 아래에 제 자바스크립트 코드입니다. (() => { let yoffset = 0;//현재 스크롤된 높이 let prevScrollHeight = 0; // 이전 씬의 총 높이 let currentScene = 0;//현재 활성화된 씬 const sceneInfo=[ //0 { type: 'sticky', scrollHeight: 0, heightNum: 5, 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'), videoImage: [] }, //모든 애니메이션 정보를 담음 values:{ //이미지의 갯수 videoImageCount : 300, imageSequence: [0,299], //message A messageA_opacity_in : [0,1,{ start : 0.1, end: 0.2 }], messageA_opacity_out : [1,0,{ start : 0.25, end: 0.3 }], messageA_translate_in: [20,0, { start: 0.1,end: 0.2 }], messageA_translate_out: [0,-20, { start: 0.25,end: 0.3 }], //message B messageB_opacity_in : [0,1,{ start : 0.3, end: 0.4 }], messageB_opacity_out : [1,0,{ start : 0.45, end: 0.5 }], messageB_translate_in: [20,0, { start: 0.3,end: 0.4 }], messageB_translate_out: [0,-20, { start: 0.45,end: 0.5 }], //message C messageC_opacity_in : [0,1,{ start : 0.5, end: 0.6 }], messageC_opacity_out : [1,0,{ start : 0.65, end: 0.7 }], messageC_translate_in: [20,0, { start: 0.5,end: 0.6 }], messageC_translate_out: [0,-20, { start: 0.65,end: 0.7 }], //message D messageD_opacity_in : [0,1,{ start : 0.7, end: 0.8 }], messageD_opacity_out : [1,0,{ start : 0.85, end: 0.9 }], messageD_translate_in: [20,0, { start: 0.7,end: 0.8 }], messageD_translate_out: [0,-20, { start: 0.85,end: 0.9 }], //canvas_Opacity canvas_opacity : [1,0,{ start:0.9, end: 1 }], } }, //1 { type: 'normal', scrollHeight: 0, objs: { container : document.querySelector('#scroll-section-1'), } }, //2 { type: 'sticky', scrollHeight: 0, heightNum: 5, objs: { container : document.querySelector('#scroll-section-2'), messageA: document.querySelector('#scroll-section-2 .main-message.a'), messageB: document.querySelector('#scroll-section-2 .desc-message.b'), messageC: document.querySelector('#scroll-section-2 .desc-message.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'), videoImage: [] }, values: { //이미지의 갯수 videoImageCount : 960, imageSequence: [0,959], //messageA messageA_opacity_in: [0,1,{ start: 0.25, end: 0.3 }], messageA_opacity_out: [1,0,{ start: 0.4, end: 0.45 }], messageA_translate_in: [20,0,{ start: 0.15, end: 0.2 }], messageA_translate_out: [0,-20,{ start: 0.4, end: 0.45 }], //messageB messageB_opacity_in: [0,1,{ start: 0.6, end: 0.65 }], messageB_opacity_out: [1,0,{ start: 0.68, end: 0.73 }], messageB_translate_in: [30,0,{ start: 0.6, end: 0.65 }], messageB_translate_out: [0,-20,{ start: 0.68, end: 0.73 }], //messageC messageC_opacity_in: [0,1,{ start: 0.87, end: 0.92 }], messageC_opacity_out: [1,0,{ start: 0.95, end: 1 }], messageC_translate_in: [30,0,{ start: 0.87, end: 0.92 }], messageC_translate_out: [0,-20,{ start: 0.95, end: 1 }], //pin pinB_scaleY: [0.5, 1, { start: 0.6, end: 0.65 }], pinC_scaleY: [0.5, 1, { start: 0.87, end: 0.92 }], //canvas_Opacity canvas_opacity_in: [0, 1, { start: 0, end: 0.1 }], canvas_opacity_out: [1, 0, { start: 0.95, end: 1 }], }, }, //3 { type: 'sticky', scrollHeight: 0, heightNum: 5, objs: { container : document.querySelector('#scroll-section-3'), } }, ] function setCanvasImages(){ let imgElem; let imgElem2; for(let i =0; i < sceneInfo[0].values.videoImageCount; i++){ //이미지 객체 새성 imgElem = new Image; imgElem.src = `./video/001/IMG_${6726 + i}.JPG`; sceneInfo[0].objs.videoImage.push(imgElem); } for(let i =0; i < sceneInfo[2].values.videoImageCount; i++){ //이미지 객체 새성 imgElem2 = new Image; imgElem2.src = `./video/002/IMG_${7027 + i}.JPG`; sceneInfo[2].objs.videoImage.push(imgElem2); } } setCanvasImages(); function setLayout(){ const heightRatio = window.innerHeight / 1080; //각 스크롤 섹션의 높이 세팅 for(let i =0; i < sceneInfo.length; i++){ if( sceneInfo[i].type === 'sticky' ){ sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; }else{ sceneInfo[i].scrollHeight = sceneInfo[i].objs.container.offsetHeight; } sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } let totalScrollHeight = 0; yoffset = window.pageYOffset; for(let i =0; i < sceneInfo.length; i++){ totalScrollHeight += sceneInfo[i].scrollHeight; if( totalScrollHeight >= yoffset ){ currentScene = i; break; } } document.querySelector('body').id = `show-scene-${currentScene}` sceneInfo[0].objs.canvas.style.transform = `translate3d(-50%,-50%,0) scale(${heightRatio})`; sceneInfo[2].objs.canvas.style.transform = `translate3d(-50%,-50%,0) scale(${heightRatio})`; } //values = 값 변화의 시작과 끝, 현재 씬의 높이 비율 currentYoffset = 현재 씬의 스크롤한 높이 //scrollRatio = 현재 씬의 스크롤 비율 function calcValues(values,currnetYoffset){ let rv; const scrollHeight = sceneInfo[currentScene].scrollHeight; let scrollRatio = currnetYoffset / scrollHeight; //start와 end의 원소가 있는 배열의 적용 if( values.length === 3 ){ const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if( currnetYoffset >= partScrollStart && currnetYoffset <= partScrollEnd ){ rv = (currnetYoffset - partScrollStart) / partScrollHeight * (values[1] - values[0]) + values[0]; }else if( currnetYoffset < partScrollStart ){ rv = values[0]; }else if(currnetYoffset > partScrollEnd){ rv = values[1]; } }else{ rv = scrollRatio * (values[1] - values[0]) + values[0]; } return rv; } function playAnimation(){ const values = sceneInfo[currentScene].values; const objs = sceneInfo[currentScene].objs; const currnetYoffset = yoffset - prevScrollHeight; const scrollHeight = sceneInfo[currentScene].scrollHeight; const scrollRatio = currnetYoffset / scrollHeight; if( currnetYoffset < 0 ) return; switch (currentScene){ case 0: let sequence = parseInt(calcValues(values.imageSequence,currnetYoffset)); objs.context.drawImage(objs.videoImage[sequence],0,0); objs.canvas.style.opacity = calcValues(values.canvas_opacity,currnetYoffset); if( scrollRatio <= 0.22 ){ objs.messageA.style.opacity = calcValues(values.messageA_opacity_in,currnetYoffset); objs.messageA.style.transform = `translateY(${calcValues(values.messageA_translate_in,currnetYoffset)}%)`; }else{ objs.messageA.style.opacity = calcValues(values.messageA_opacity_out,currnetYoffset); objs.messageA.style.transform = `translateY(${calcValues(values.messageA_translate_out,currnetYoffset)}%)`; } if( scrollRatio <= 0.42 ){ objs.messageB.style.opacity = calcValues(values.messageB_opacity_in,currnetYoffset); objs.messageB.style.transform = `translateY(${calcValues(values.messageB_translate_in,currnetYoffset)}%)`; }else{ objs.messageB.style.opacity = calcValues(values.messageB_opacity_out,currnetYoffset); objs.messageB.style.transform = `translateY(${calcValues(values.messageB_translate_out,currnetYoffset)}%)`; } if( scrollRatio <= 0.62 ){ objs.messageC.style.opacity = calcValues(values.messageC_opacity_in,currnetYoffset); objs.messageC.style.transform = `translateY(${calcValues(values.messageC_translate_in,currnetYoffset)}%)`; }else{ objs.messageC.style.opacity = calcValues(values.messageC_opacity_out,currnetYoffset); objs.messageC.style.transform = `translateY(${calcValues(values.messageC_translate_out,currnetYoffset)}%)`; } if( scrollRatio <= 0.82 ){ objs.messageD.style.opacity = calcValues(values.messageD_opacity_in,currnetYoffset); objs.messageD.style.transform = `translateY(${calcValues(values.messageD_translate_in,currnetYoffset)}%)`; }else{ objs.messageD.style.opacity = calcValues(values.messageD_opacity_out,currnetYoffset); objs.messageD.style.transform = `translateY(${calcValues(values.messageD_translate_out,currnetYoffset)}%)`; } break; case 1: break; case 2: let sequence2 = parseInt(calcValues(values.imageSequence,currnetYoffset)); objs.context.drawImage(objs.videoImage[sequence2],0,0); if (scrollRatio <= 0.5) { // in objs.canvas.style.opacity = calcValues(values.canvas_opacity_in, currnetYoffset); } else { // out objs.canvas.style.opacity = calcValues(values.canvas_opacity_out, currnetYoffset); } if( scrollRatio <= 0.32 ){ objs.messageA.style.opacity = calcValues(values.messageA_opacity_in,currnetYoffset); objs.messageA.style.transform = `translateY(${calcValues(values.messageA_translate_in,currnetYoffset)}%)`; }else{ objs.messageA.style.opacity = calcValues(values.messageA_opacity_out,currnetYoffset); objs.messageA.style.transform = `translateY(${calcValues(values.messageA_translate_out,currnetYoffset)}%)`; } if( scrollRatio <= 0.67 ){ objs.messageB.style.opacity = calcValues(values.messageB_opacity_in,currnetYoffset); objs.messageB.style.transform = `translateY(${calcValues(values.messageB_translate_in,currnetYoffset)}%)`; }else{ objs.messageB.style.opacity = calcValues(values.messageB_opacity_out,currnetYoffset); objs.messageB.style.transform = `translateY(${calcValues(values.messageB_translate_out,currnetYoffset)}%)`; } if( scrollRatio <= 0.93 ){ objs.messageC.style.opacity = calcValues(values.messageC_opacity_in,currnetYoffset); objs.messageC.style.transform = `translateY(${calcValues(values.messageC_translate_in,currnetYoffset)}%)`; }else{ objs.messageC.style.opacity = calcValues(values.messageC_opacity_out,currnetYoffset); objs.messageC.style.transform = `translateY(${calcValues(values.messageC_translate_out,currnetYoffset)}%)`; } break; case 3: break; } } function scrollLoop(){ prevScrollHeight = 0; for(let i=0; i < currentScene; i++){ prevScrollHeight += sceneInfo[i].scrollHeight; } if( yoffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight){ currentScene++; document.querySelector('body').id = `show-scene-${currentScene}` } if( yoffset < prevScrollHeight ){ if( currentScene === 0 ) return; currentScene--; document.querySelector('body').id = `show-scene-${currentScene}` } } //윈도우의 창 사이즈 변경시 다시 높이를 세팅함 window.addEventListener('scroll',() => { yoffset = window.pageYOffset; scrollLoop(); playAnimation(); }); window.addEventListener('resize',setLayout); window.addEventListener('load', () => { setLayout(); sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImage[0],0,0); }); })()