next.js2 Next.js로 크롬 익스텐션 빌드시 CSP에러 Next.js에 익숙해질 겸 크롬 익스텐션에 사용할 웹파일을 Next.js로 빌드해서 정적 파일로 export 했다. 그런데 익스텐션의 default_popup으로 등록한 스크립트가 실행되다가 도중에 멈췄다. 아래는 크롬이 보여준 오류다 크롬 익스텐션에서 "inline script" 에러는 보안 정책 때문에 발생한다. 크롬 익스텐션의 Content Security Policy (CSP)는 기본적으로 인라인 스크립트의 실행을 허용하지 않는다. Next.js가 빌드 과정에서 인라인 스크립트를 생성한것으로 보고 export된 파일을 확인해보았다. 확인해본 결과 13버전에 업데이트 된 `app` 디렉토리 구조를 사용할때 export된 html 하단에 인라인 스크립트가 삽입되는 현상을 확인했다. 최신 업데이트된 .. 2023. 8. 7. [Next.js] per-page layout을 이용해서 백엔드 socket.io 연결하기 Next.js 를 사용하면서 별도의 백엔드에서 돌아가고 있는 socket.io 웹소켓에 연결을 할 필요가 있었다. const socket = io("https://server-domain.com"); 그런데 각페이지에서 socket 연결을 만들면 페이지 이동 시 socket의 연결이 끊어졌다 다시 재연결하는 문제가 생긴다 이 문제를 해결하기위해 useContext를 이용해보자고 생각했다. lib/socketContext.tsx import { Manager, Socket, io } from "socket.io-client"; interface SocketContextValue { chatSocket: Socket | null; } const SocketContext = createContext({ cha.. 2023. 5. 16. 이전 1 다음
