위치 정보 권한 에러

앗 선생님. 해결했습니다 (__)

이벤트 버스와 emit 의 차이

3분 57초 정도 구간에서 이벤트 버스라고 말씀 하시네요~

질문 드립니다.

index.html에 캐릭터 코드를 살렸구요. wall3d.js (function () { const stageElem = document.querySelector('.stage'); const houseElem = document.querySelector('.house'); const barElem = document.querySelector('.progress-bar'); // const selectCharacterElem = document.querySelector('.select-character'); const mousePos = { x: 0, y: 0 }; let maxScrollValue; function resizeHandler() { maxScrollValue = document.body.offsetHeight - window.innerHeight; } window.addEventListener('scroll', function () { const scrollPer = pageYOffset / maxScrollValue; const zMove = scrollPer * 980 - 490; houseElem.style.transform = 'translateZ(' + zMove + 'vw)'; // progress bar barElem.style.width = scrollPer * 100 + '%'; }); window.addEventListener('mousemove', function (e) { mousePos.x = -1 + (e.clientX / window.innerWidth) * 2; mousePos.y = 1 - (e.clientY / window.innerHeight) * 2; stageElem.style.transform = 'rotateX(' + (mousePos.y * 5) + 'deg) rotateY(' + (mousePos.x * 5) + 'deg)'; }); window.addEventListener('resize', resizeHandler); resizeHandler(); })(); character.js (function () { const mainElem = document.querySelector('.character'); init(); function init() { let scrollState = false; let lastScrollTop = 0; let xPos = 0; let speed = 0.3; let runningState = false; let direction; let rafId; window.addEventListener('scroll', function () { clearTimeout(this.scrollState); if (!scrollState) { mainElem.classList.add('running'); } scrollState = setTimeout(function () { scrollState = false; mainElem.classList.remove('running'); }, 200); // 이전 스크롤 위치와 현재 스크롤 위치를 비교 if (this.lastScrollTop > pageYOffset) { // 이전 스크롤 위치가 크다면: 스크롤 올림 mainElem.setAttribute('data-direction', 'backward'); } else { // 현재 스크롤 위치가 크다면: 스크롤 내림 mainElem.setAttribute('data-direction', 'forward'); } this.lastScrollTop = pageYOffset; }); window.addEventListener('keydown', function (e) { if (runningState) return; if (e.keyCode == 37) { // 왼쪽 this.direction = 'left'; mainElem.setAttribute('data-direction', 'left'); mainElem.classList.add('running'); run(self); this.runningState = true; } else if (e.keyCode == 39) { // 오른쪽 this.direction = 'right'; mainElem.setAttribute('data-direction', 'right'); mainElem.classList.add('running'); run(self); this.runningState = true; } }); window.addEventListener('keyup', function (e) { mainElem.classList.remove('running'); cancelAnimationFrame(this.rafId); this.runningState = false; }); } function run(self) { if (this.direction == 'left') { this.xPos -= this.speed; } else if (this.direction == 'right') { this.xPos += this.speed; } if (this.xPos 88) { this.xPos = 88; } mainElem.style.left = this.xPos + '%'; this.rafId = requestAnimationFrame(function () { run(self); }); } })(); 이런 식으로 작업 해 보고 있는데.. 제대로 하고 있는 건지 잘 모르겠습니다. ㅜㅜ

질문 드립니다.

조금 더 디테일 하게 말씀 드리면 페이지 로드시 아래 가운데에 캐릭터가 있는 상태로 시작 하고 싶습니다. 헌데 생성자 함수로 되어있는 부분을 일반 함수로 변경하는 로직이 어떻게 되는지 잘 모르겠습니다 OTL

모바일에서 적용하기

솨랑합니다

포스트가 안됩니다.

헤더에 토큰이 안 실리는건 왜 그런건가요?

main 페이지로 이동

결국 클론 다시해서 그 챕터 처음부터 다시 했습니다. 그래도 다시 정리해서 올리면.. this.$router.push('/main'); 로그인을 할 때, main페이지로 이동하기 위해 위의 코드를 작성 했는데요. 실제 페이지에서 main 페이지로 이동이 되지 않아서 개발툴에서 소스를 봤는데요. this.$router.push('/main'); 이 코드가 계속 안 올라가더라구요. 그래서 결국 클론 다시해서 그 챕터 처음부터 다시 했습니다. (__);;

eslint 와 prettier 설정시 오류

vs code 맨 아래 부분 상태바에 eslint 가 붉은색으로 표시 되어있으면 클릭해서 활성화 시켜주시면 해결 됩니다... 방법 찾는데 3시간 걸렸네요.