marvelOppa

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

위치 정보 권한 에러

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

이벤트 버스와 emit 의 차이

<pre class="language-html"><code>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 < 2) {
 this.xPos = 2;
 }

 if (this.xPos > 88) {
 this.xPos = 88;
 }

 mainElem.style.left = this.xPos + '%';

 this.rafId = requestAnimationFrame(function () {
 run(self);
 });
 }

})();


이런 식으로 작업 해 보고 있는데.. 
제대로 하고 있는 건지 잘 모르겠습니다. ㅜㅜ
 </code></pre>

질문 드립니다.

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

모바일에서 적용하기

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

포스트가 안됩니다.

결국 클론 다시해서 그 챕터 처음부터 다시 했습니다.&nbsp;

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

main 페이지로 이동

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

marvelOppa

Posts