220308 개발일지

핸드폰으로 nextjs localhost 접속

그동안 리액트에서 localhost:3000으로 서버를 띄우고

회사 와이파이를 같은 것으로 둔 후 

모바일에서 주소창에 localhost:3000으로 접속해서 테스트 하곤 했다.

 

Next.js로 변경 후 한동안 안되는 문제가 있다가

오늘 해결했다.

npx next dev -p 3000

이렇게 터미널에 치고는

같은 와이파이로 연결해서 예전처럼 접속할 수 있었다.

---

모바일에서 터치 이벤트

 

wheelEvent를 이용해서

웹에서 

delta.Y > 0 혹은 delta< 0 로 이벤트 처리하는게 있었는데

모바일에선 안됬다.

 

모바일은 touchEvent가 있었다..

touchEvent를 웹에선 하기 어려워서 방법을 찾았다. 

아이폰을 맥에 연결하여

사파리에서 ios 테스트를 할 수 있었다. 

touchstart, touchend등의 속성을 콘솔로그로 찍어보다가 

원하던 코드를 구현하는데 조금 다가갈 수 있었다. 

 

const [tStart, setTstart] = useState<any>();
  const [tEnd, setTEnd] = useState<any>()

  useEffect(() => {
    document.addEventListener(
      'touchstart',
      (event) => {
          var touchStart = event.touches[0].clientY;
         console.log('touchstart', touchStart)
         console.log('target start',event.target)
         setTstart(touchStart)
      },
  
    );
  }, []);



  useEffect(() => {
    document.addEventListener(
      'touchend',
      (event) => {
          var touchEnd = event.changedTouches[0].clientY;
         console.log('touchend', touchEnd)
         console.log('target end',event.target)

         setTEnd(touchEnd)
       },
      false
    );
  }, []);

   useEffect(()=>{
    if(tStart > tEnd){
      console.log('tStart > tEnd')
      setTransparent(false)
    }
    if(tStart < tEnd){
      console.log('tStart < tEnd')
      setTransparent(true)
    }
  },[tStart, tEnd])