묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결언리얼 엔진4 (Unreal Engine) 3D 횡스크롤 게임 만들기
Collision 관련 질문
안녕하세요 궁금한게 있어서 문의 드립니다😀 Launch Character 노드를 추가하기 전에도 몬스터가 죽으면 몬스터에게 붙어 있는 Collision 들을 No Collision으로 비활성화 하도록 스크립팅 되어 있던 상태였잖아요! 그러면 몬스터가 죽으면 Collision이 꺼지는건 마찬가지니까 Launch Character 를 추가하기 전에도 몬스터가 죽으면 Collision이 꺼져 땅을 뚫고 중력에 의해 떨어졌어야 했었을 것 같은데 왜 그 전까지는 몬스터가 죽어서 Collision 들이 No Collision으로 비활성화 되어도 사망 애니메션 후 땅에 누워있고, 땅을 뚫고 떨어지지 않았었는지 의문점이 생겨서 질문 드립니다! 근데 갑자기 오늘 수업에서 Launch Character 노드 추가하니깐 Collision 들이 No Collision으로 비활성화 되서 죽으면 땅을 뚫고 떨어지게 되는지 이해가 안되서요 ㅠ ㅜ 감사합니다
-
해결됨[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part7: MMO 컨텐츠 구현 (Unity + C# 서버 연동 기초)
Arrow 함수 에서의 Push 사용
안녕하세요 Arrow의 Update에서 궁금한점이 있어서 문의드립니다. Arrow.cs에서 LeaveGame을 처리할 때 Push함수를 사용하도록 변경을 했는데 Arrow의 부모클래스인 Projectile의 Update 실행을 GameRoom의 Update 함수내에서 projectile.Update(); 의 호출로 실행해주고 있기 때문에 이미 Push가 Job으로 관리되고 있을것 같습니다. 그렇다면 혹시 Room.Push(Room.LeaveGame, Id); 부분도 Room.LeaveGame(Id); 로 사용해도 되는건지 궁금합니다~! public override void Update() { if (Data == null || Data.projectile == null || Owner == null || Room == null) return; if (_nextMoveTick >= Environment.TickCount64) return; long tick = (long)(1000/Data.projectile.speed); _nextMoveTick = Environment.TickCount64 + tick; Vector2Int destPos = GetFrontCellPos(); if (Room.Map.CanGo(destPos)) { CellPos = destPos; S_Move movePacket = new S_Move(); movePacket.ObjectId = Id; movePacket.PosInfo = PosInfo; Room.Broadcast(movePacket); Console.WriteLine("Move Arrow"); } else { GameObject target = Room.Map.Find(destPos); if (target != null) { target.OnDamaged(this, Data.damage + Owner.Stat.Attack); } //소멸 Room.Push(Room.LeaveGame, Id); }
-
해결됨[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part7: MMO 컨텐츠 구현 (Unity + C# 서버 연동 기초)
HandleSkill 내 Push(EnterGame, arrow) 함수 사용
안녕하세요 HandleSkill함수는 PacketHandler.cs에서 room.Push(room.HandleSkill, player, skillPacket);에 의해서 호출되고 있는것 같습니다. 그렇다면 HandleSkill함수에 포함된 Push(EnterGame, arrow); 는 이미 Job으로 관리되고 있기 떄문에, (기존의 방식대로) EnterGame(arrow); 로 호출해도 되는건지 궁금합니다~ public void HandleSkill(Player player, C_Skill skillPacket) { if (player == null) return; ObjectInfo info = player.Info; if (info.PosInfo.State != CreatureState.Idle) return; // TODO : 스킬 사용 가능 여부 체크 info.PosInfo.State = CreatureState.Skill; S_Skill skill = new S_Skill() { Info = new SkillInfo() }; skill.ObjectId = info.ObjectId; skill.Info.SkillId = skillPacket.Info.SkillId; Broadcast(skill); Data.Skill skillData = null; if (DataManager.SkillDict.TryGetValue(skillPacket.Info.SkillId, out skillData) == false) return; switch (skillData.skillType) { case SkillType.SkillAuto: { Vector2Int skillPos = player.GetFrontCellPos(info.PosInfo.MoveDir); GameObject target = Map.Find(skillPos); if (target != null) { Console.WriteLine("Hit GameObject !"); } } break; case SkillType.SkillProjectile: { Arrow arrow = ObjectManager.Instance.Add<Arrow>(); if (arrow == null) return; arrow.Owner = player; arrow.Data = skillData; arrow.PosInfo.State = CreatureState.Moving; arrow.PosInfo.MoveDir = player.PosInfo.MoveDir; arrow.PosInfo.PosX = player.PosInfo.PosX; arrow.PosInfo.PosY = player.PosInfo.PosY; arrow.Speed = skillData.projectile.speed; Push(EnterGame, arrow); } break; } }
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
제로초님 제가 module.css로 개인 프로젝트를 작성하려고하는데요.
next는 module.css 따로 서버사이드렌더링 해주어야하나요?? 검색하고는 있는데 잘 안 찾아지네요.
-
미해결초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트
visibility와 opacity
ggang_lesson.section4,step3.index.html의 css에 질문이 있습니다. motion_moon과 motion_moon.active에서 visibility와 opacity 는 동일한 특성을 나타내는것 같은데. 왜 이렇게 사용하신건지 궁금해서 질문남깁니다. opacity만 사용할 경우 달 사진이 부드럽게 사라지지 않는 것은 확인하였는데, visibility만 사용할 경우는 opacity와 같이 사용하는 경우와 동일한거 같습니다. 두개를 다 기입해야하는 이유가 무엇인가요?
-
미해결[구버전] 웹 애플리케이션 개발을 위한 IntelliJ IDEA 설정 (2020 ver.)
인텔리제이 프로젝트 생성시
영상보고 인텔리제이 설치 했는데요.. 새로운 프로젝트 생성시 오른쪽 Addition Libraries and Frameworks에 Groovy,코틀린,SQL서포트 세가지 선택만 뜨고 라이브러리 없음 이라고 아무것도 뜨지 않는데 어떻게 해야할까요 ㅠㅠ
-
미해결화이트해커가 되기 위한 8가지 웹 해킹 기술
IP 할당 관련
IP할당 관련으로 첫번째 방법은 이상하게 나와요 eth1 과 eth0이 나와 야하는 데 전 eth0 이 두개 가 나와서 안될거 같아요.. 그래서 2번째 방법으로 할건데 VI나 gedit 좀 다운로드좀 하게 좀 링크좀요...............
-
미해결화이트해커가 되기 위한 8가지 웹 해킹 기술
칼라리눅스 버추얼박스 해도 되요?
기본적으로 메모리가 2048mb라고 되어있잖아요... 그럼 그및 애를들어 1048또는 1548은 안돼나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
객체의 마지막 프로퍼티 끝에 ',' 붙이는거에 대한 질문
// action creator const changeNickname = (data) => { return { type: 'CHANGE_NICKNAME', data, } } 이런식으로 data가 마지막 프로퍼티인데 끝에 ','를 붙이시는데 안붙이는거랑 붙이는거랑 어떤 차이가 있나요?
-
미해결스크래치 3.0 - 입문부터 실전 게임 개발까지
이미지
이미지는 어디서 구했나요?
-
미해결인터랙티브 웹 개발 제대로 시작하기
선생님 css의 display: inline-flex관련 질문입니다.
선생님 추석 잘 보내고 계신지요?? 오늘 객체4를 공부하다가 flex관련 궁금증이 생겼습니다. 강의 객체4에서 card instance를 여러개 생성했는데요, instance는 각각 div tag로 생성되는데, 여기서 div가 원래 block요소의 성질을 가지고 있다는 것 까지는 이해를 했습니다. .card 에서 display: inline-flex; 로 설정해 주셨는데 여기서 좀 헷갈리는 게 있습니다. display를 그냥 flex로 해주니까 card instance들이 가로정렬(main-axis?)이 안되고 block level처럼 세로로 죽 나열이 됩니다.이게 갑자기 무엇이랑 헷갈렸냐면 "3개의 문" 강의에서는 container인 .stage에 display: flex만 해줘도 각각의 door item들이 div요소로 이루어 졌음에도가로로 정렬이 되었다는 것이 지금 머릿속에서 명확히 정리가 되지 않습니다.그래서 선생님 이론 강의 flex 도 찾아봤는데 flex와 inline-flex의 차이를 명확히 이해를 못하겠습니다. 선생님께 도움을 구합니다.
-
미해결[라즈베리파이] IoT 딥러닝 Computer Vision 실전 프로젝트
databaseURL 과 storageBucket
안녕하세요 databaseURL 과 storageBucket 은 앞에다 아이디만 써주면 되나요? 저같은 경우는 firebase_admin.initialize_app(cred, { 'databaseURL': 'https://please-7e966.firebaseio.com/', 'storageBucket': 'please-7e966.appspot.com/' }) 이런식으로 했거든요 이게 맞는지 모르겠네요.. 계속 연동이 안되서요 ㅠㅠ
-
미해결따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
window 10 home toolbox에서 실행이 안되네요..
혹시 아래 같이 docker-compose up 할 때 에러 보신 분 계신가요? 빌드까지는 되는데 실행할때 에러가 발생하네요..큭 docker-compose.yml # 버전을 항상 지정해줘야 한다. version: "3" # docker compose option services: # 실행하려는 컨테이너 정의 react: # 컨테이너이름 build: # 현재 디렉토리에 있는 Dockerfile 사용 context: . # 도커 이미지를 구성하기 위한 파일과 폴더들이 있는 위치 dockerfile: Dockerfile.dev # 도커 파일 지정 ports: - "3000:3000" # 포트 매핑(호스트포트:컨테이너포트) volumes: # 호스트 머신에 있는 파일 매핑 - /usr/src/app/node_modules # 이건 호스트 디렉토리를 참조히지 않음 - ./:/usr/src/app stdin_open: true # 리액트 앱을 끌 때 필요(버그수정)
-
미해결화이트해커가 되기 위한 8가지 웹 해킹 기술
버추얼박스가 설치가 잘 안되서 vm웨어 로 할려고 하는데
그 책에 있는데로 할려 했는데 예전에 있던거라더고요.. 책에 나와있는그 자체 가 달라요... produsk download가 아니라 produsd a-z 이런식으로요... 범웨어 요즈음 2020거 쫌 알려줘요................. 제발좀요.............
-
미해결[개정판] 딥러닝 컴퓨터 비전 완벽 가이드
윈도우 환경에서 경로가 이상하게 설정됩니다.
FileNotFoundError Traceback (most recent call last) <ipython-input-41-928a18d63e66> in <module> 11 print(ANNO_DIR) 12 ---> 13 files = os.listdir(ANNO_DIR) 14 print('파일 개수는:',len(files)) 15 print(files) FileNotFoundError: [WinError 3] 지정된 경로를 찾을 수 없습니다: 'C:\\Users\\admin\\DLCV/data/raccoon/annotations' HOME_DIR = str(Path.home()) HOME_DIR = str('/Users/admin/Desktop/') 으로 바꿔서 불러왔는데 xml_to_csv 과정에서 다시 /Users/admin/Desktop\DLCV/data/raccoon/images\raccoon-1.jpg 경로 중간에 \로 아어집니다. /Users/admin/Desktop/DLCV/Detection/yolo/keras-yolo3\\model_data/raccoon_class.txt'라쿤 클래스 텍스트 불러올 때도 다시 \ 로 이어집니다..
-
미해결애플 웹사이트 인터랙션 클론!
자꾸 에러가 뜨는데 모르겠습니다ㅠㅠ
안녕하세요 선생님. 강의 너무 유용하고 재밌게 듣고 있습니다. 자꾸 오류가 뜨는데 무슨 문젠지 모르겠어서 너무 답답해서 질문 남깁니다.ㅠㅠ opacity가 정의되어 있지 않다그러고 Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas) 이런 오류가 뜨네요.. 분명 캔버스로 잘 정의한 것 같 은데요...ㅠㅠㅠㅠㅠ 분명 선생님을 다 따라 쳤는데도 어디서 문제가 생긴건지 모르겠습니다.. 도와주시면 감사하겠습니다.흑흑 (() => { 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, imageSequence: [0, 299], canvas_opacity: [1, 0, { start: 0.8, 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, // 브라우저 높이의 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'), canvas: document.querySelector('#video-canvas-1'), context: document.querySelector('#video-canvas-1').getContext('2d'), videoImages: [], }, values: { videoImageCount: 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, // 브라우저 높이의 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 = new Image(); // imgElem = 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[0].values.videoImageCount; i++) { imgElem2 = new Image(); // imgElem = document.createElement('img'); imgElem2.src = `./video/002/IMG_${7027 + i}.JPG`; sceneInfo[2].objs.videoImages.push(imgElem2); } } 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 / 1000; //캔버스 원래 height = 1000 sceneInfo[0].objs.canvas.style.transform = `scale(${heightRatio}) translate(-50%,-50%)`; sceneInfo[2].objs.canvas.style.transform = `scale(${heightRatio}) translate(-50%,-50%)`; } 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 = currentYOffset / scrollHeight; switch (currentScene) { case 0: let sequence = Math.round( calcValues(values.imageSequence, currentYOffset) ); 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: let sequence2 = Math.round( calcValues(values.imageSequence, currentYOffset) ); objs.context.drawImage(objs.videoImages[sequence2], 0, 0); if (scrollRatio <= 0.5) { // in objs.context.style.opacity = calcValues( values.canvas_opacity_in, currentYOffset ); } else { // out objs.context.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: 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('DOMcontentLoaded', setLayout) // 이미지가 업로드 되기 전에 실행 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); setCanvasImages(); })();
-
따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
왜 무한로딩이 될까요...
삭제된 글입니다
-
해결됨실전 리액트 프로그래밍
죄송하지만 Button.js 내용은 어디서 확인할 수 있나요?
죄송하지만 Button.js 내용은 어디서 확인할 수 있나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
차트 라이브러리 response는 어떻게 받아야하나요?
스트리밍때 여쭤보려고 했는데 못물어봐서 강의 질문으로 여쭤봅니다. echart 사용중인데 request 받고 response를 서버에서 보내줄때 echart에 필요한 데이터 형식으로 맞춰서 보내주는 방식으로 코드 작성했는데요, json으로 response 전달되다 보니까 함수코드를 어떻게 전달해야 할지 모르겠습니다 db에서 조회한 데이터를 그냥 client로 넘겨주고 client 단에서 map 이나 filter로 받은 데이터를 echart 형식에 맞게 바꿔주는 방식으로 해야하나요?
-
미해결실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
spring-boot-devtools 사용시 recompile하면 서버가 재시작되나요?
안녕하세요, html 파일 수정시 ctrl + shift + f9 단축키로 recompile하면 서버 재시작 없이 변경사항이 적용 되는줄 알았는데 리컴파일 할때마다 서버자체가 재시작 되면서 데이터베이스의 테이블도 다 드랍했다 생성합니다. ddl-auto: create으로 해놓긴 했지만 리컴파일 할때 서버 재시작이 안되고 반영되는줄 알았는데 무조건 서버 재시작이 되는건가요?