software engineering/issue

해당 글 7건

Resolving the "use client" Directive Issue in Turborepo with tsup

2025. 1. 2. 22:15

While working on a Turborepo monorepo structure, I encountered a peculiar issue related to the "use client" directive while bundling TypeScript libraries using tsup. Here, I’ll detail the problem, my troubleshooting process, and the solution I implemented, emphasizing considerations relevant to frontend engineering.The ProblemWhile building a packages/ui library using tsup, the following error o..
software engineering/issue

Vercel 도메인이 갑자기 안들어가지는 이슈

2024. 5. 11. 15:42

커스텀 도메인 없이 Vercel에서 배포해서 사용하던 앱 도메인에 접근이 안됐다. Vercel Community에 접속해보니, 이미 올라와 있다. 어제부터 접속이 안됐던걸로 추측하고 (금요일 밤인데 😅), Vercel측 문제인줄 알았지만 한국 ISP가 무슨 이유인지 vercel.app을 차단한거 같다는 추측이다.우선 도메인이 있는 사람들은 커스텀 도메인을 사용하면 되겠지만, 급한대로 Firebase 호스팅으로 앱 하나만 이동 😅
software engineering/issue

GraphQL Apollo Error: Dynamic server usage: Page couldn't be rendered statically because it used headers

2024. 1. 10. 21:30

현 상황 Next.js 13(13.4) App Router를 통한 구성으로 React Server Component에서 Apollo Client를 쉽게 사용할 수 있는 @apollo/experimental-nextjs-app-support 를 채택했습니다. Apollo Client의 캐시 덕분에 Client Component는 Mutation의 결과로 애플리케이션의 Entity의 모든 사용을 자동으로 업데이트 할 수 있지만 Server Component는 데이터가 변경되면 수동으로 업데이트 해줘야 합니다. React Client Component "use client"; import { ApolloClient, ApolloLink, HttpLink, } from "@apollo/client"; impo..
software engineering/issue

Failed to execute 'define' on 'CustomElementRegistry'

2023. 8. 5. 16:13

오래간만에 적는 이슈해결기, 웹 컴포넌트를 개발하며 package.json dependency의 중요성 또한 얻은 이슈이다. 같은 프로젝트를 하는 팀원A분이 해당 오류를 마주치고 팀원B분이 '아 그거 dependency 문제에요' 하면서 이슈를 해결해주고 GPT 답까지 제공해줬지만 7월 25일 이번엔 해결법을 제안해준 팀원B분이 같은 문제로 하루종일 고생하고 있다는 제보가 들어왔다. 배경 설명 디자인 시스템을 웹 컴포넌트 라이브러리 lit을 통해 만들고 있고 react로 감싼 컴포넌트가 있다. lit으로 만든 컴포넌트들을 lit/component 그리고 react로 만든 컴포넌트들을 react/component로 쉽게 이야기하겠습니다. customElement는 customElementRegistry에 ..
software engineering/issue

Next Image 외부 도메인 설정

2023. 2. 4. 21:04

외부 도메인으로부터 이미지를 가져와서 사용하려 했더니 Next Image에서 외부 도메인 설정을 필요로 했다. 아래와 같은 메시지가 나왔고 External domains must be configured in next.config.js using the domains property. 아래 방법으로 해결했다. /\*\* @type {import('next').NextConfig} \*/ const nextConfig = { reactStrictMode: true, ..., images: { domains: \["search1.cdn.net"\], }, }; module.exports = nextConfig;
software engineering/issue

Emotion을 Next.js에서 사용할 때 환경 설정

2023. 2. 4. 20:57

최근에 과제를 진행하며 css in js 만을 이용해서 직접 스타일링을 하다 emotion을 선택했는데, document에 나와있는 install 절차를 진행했음에도 콘솔창에 You have tried to stringify object returned fromcssfunction. It isn't supposed to be used directly (e.g. as value of theclassNameprop), but rather handed to emotion so it can handle it (e.g. as value ofcssprop). 에러와 함께 div css="\[object Object\]"> 와 같이 렌더링이 되었다. Babel 문서에는 아래와 같이 설정하면 해결할 수 있다. 매 파일..
software engineering/issue