Web19 모노레포에서 Typescript 사용중 발생한 vscode 에러 어느 날 갑자기 vscode에서 아래와 같은 에러가 발생했다. The JS/TS language service immediately crashed 5 times. The service will not be restarted. This may be caused by a plugin contributed by one of these extensions: styled-components.vscode-styled-components. Please try disabling these extensions before filing an issue against VS Code.This workspace contains a TypeScript version. Would you like to use the workspac.. 2023. 8. 20. 모노레포에서 ui 패키지를 사용하면서 발생한 이슈 해결 과정 모노레포인 레포지토리에 새로운 서비스를 추가하고, ui 패키지에서 컴포넌트를 불러오는데 다음과 같은 에러가 발생했다. 구글링 결과 타입스크립트의 interface를 해석하지 못하는 것으로 파악했다. 하지만 다른 서비스에서는 정상 작동하는데, 왜 새 서비스에서는 에러를 뿜는지 이해할 수 없었다. 디펜던시도 똑같이 맞춰보았지만 해결되지 않았다. 그리고 마지막으로 next.comfig.js 코드를 똑같이 맞춰보기로 했다. 시도해 본 것들 1. next 다운 그레이드 // 기존 next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { swcMinify: true, compiler: { styledComponents: true, },.. 2023. 8. 15. Styled-Components에서 갑자기 자동 완성이 안되는 경우 styled-components에서 css 자동 완성을 위해 vscode-styled-components라는 extension을 사용하고 있었다. 그런데 어느 날 갑자기 뭔가 불편하다 싶더니 css 자동완성이 되고 있지 않았다. 처음에는 익스텐션끼리 충돌이 발생했을 거라 생각했고 익스텐션을 하나씩 비활성화 시켜가면서 확인했다. 하지만 여전히 문제가 해결되지 않았고, vscode의 setting까지 만져봤지만 변화는 없었다. 도저히 모르겠다 싶어 등록된 이슈가 있는지 확인해 보기 위해 vscode-styled-components의 repository에 들어가 봤다. https://github.com/styled-components/vscode-styled-components read.me를 천천히 읽어보는.. 2023. 8. 10. Webpack 5 Module Federation을 통한 Micro-Frontend 모놀리식(Monolithic)이냐 마이크로(Micro) 서비스냐 하는 애플리케이션 아키텍처 스타일은 팀의 컨벤션과 애플리케이션의 요구 사항에 따라 달라진다. 그럼에도 마이크로서비스 아키텍처가 대세로 떠오르고, 사용이 증가하고 있는데 그 이유가 무엇일까? 모놀리식 아키텍처는 하나의 패키지안에 여러 서비스(기능)가 포함된 구조를 말한다. 대부분의 개발자가 모놀리식 아키텍처에서 작업을 시작하곤 하지만, 이러한 구조에는 몇 가지 문제점이 있다. 피쳐 간 의존성 문제 1. 특정 피쳐에 버그 발생 시 다른 피쳐에도 문제가 발생할 수 있다. 2. 서로 의존하고 있는 피쳐들 사이에 발생한 문제의 원인이 어디에 있는지 파악하기 힘들 수 있다.3. 특정 피쳐가 수정되었을 때 다른 피쳐에서 문제가 발생할 수 있다. 비효율.. 2023. 3. 1. Next.js 13 pages 라우터에서 app router로 마이그레이션하기 - style-components ssr방식에서 style-components기존 pages 라우터 방식에서는 server side rendering을 위해 아래 코드를 추가하여 사용했다. // _document.tsxexport default class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const sheet = new ServerStyleSheet() const originalRenderPage = ctx.renderPage try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) =>.. 2023. 2. 6. Next.js 13 pages 라우터에서 app router로 마이그레이션하기 - Routing Hooks Migrating Routing Hooks app router에서는 기존 next/router대신 next/navigation의 useRouter(), usePathname(), useSearchParams()를 사용한다. 만약 app 디렉토리에서 기존 next/router을 임포트할 경우 다음과 같은 에러가 발생할 수 있다. Error: Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted Uncaught Error: Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted useRout.. 2023. 2. 2. 이전 1 2 3 4 다음
