Frontend
-
[Nextjs]Webview로 Flutter과 소통하기 JavaScriptChannelFrontend/nextjs 2024. 9. 26. 03:51
flutter로 웹뷰를 만들 때 소통을 javascript channel로 할 수 있다. 굳이 서버로 하지 않고, 웹페이지내에서 javascript를 감지해서 기능을 실행시키는 것이다. 나는 이를 로컬푸쉬알람 설정으로 이용했다. 1. Next.js이런 식으로 하면 된다.declare var initializeLocalAlarm: { postMessage: (message: string) => void;}; 원래 위의 것을 정의하면 아래거는 인식을 해야 하는데 인식을 하지 못하는 문제가 발생하였다. 그럴때에는 다음과 같이 하면 된다.if (typeof window.initializeLocalAlarm !== 'undefined') { window.initializeLocalAlarm.post..
-
crossbrowsing -reactFrontend/nextjs 2023. 1. 12. 16:41
회사 홈페이지에서 모바일 페이지를 따로 만들고, pc용 페이지를 따로 만들었다. 그래서 이걸 적용을 어떻게 할까 했는데 생각보다 간단했다. react-device-detect 라이브러리를 사용하면 간단했다. ... import { isMobile } from 'react-device-detect'; ... useEffect(()=>{ if(isMobile) { window.location.replace(`${process.env.NEXT_PUBLIC_MOBILE_URI}`) } }) .. 이렇게하면 내가 원하는 페이지로 자동으로 이동이 된다.
-
Nextjs hydrate 오류Frontend/nextjs 2022. 12. 6. 15:52
이런 식으로 오류가 나온다. lazyloading을 이용해서 해결하라는 소리도 있는데, 이걸 해결하는 가장 간단한 방법은 _app.tsx에 다음과 같이 코드를 작성하는 것이다. ... useEffect(() => { setIsSSR(false); }, []); return ( {!isSSR && 내가 쓰려는 코드들... } ) ... reference https://github.com/vercel/next.js/discussions/35773