`프론트엔드 개발자` 개형이의 벽돌집

개발하다보면 이게 왜 안될까? 이걸 왜 몰랐지? 하는 순간이 있다. Next의 Image 컴포넌트를 사용하려고 하는데 여기에 별칭을 붙이고 싶었다. 근데 as로 단순하게 붙이려고 했더니 위처럼 syntax error가 잡혔다. 단순 export된 모듈은 import { ImageProps as NextImageProps } from 'next/image'로 사용 가능하지만 export default 모듈은 방식이 다르다. 정답은 아래와 같다. import { default as NextImage, ImageProps as NextImageProps } from 'next/image' 위처럼 default as {모듈} 로 사용하면 된다! 짧은 포스팅 끝.

프로젝트 빌드 과정 중에 에러가 또 발견됐다. 위 코드에서 'Component' cannot be used as a JSX component 에러가 잡히며 빌드가 되지 않았다. 원인을 찾아보니 react 버전이 18로 업데이트되면서 @type/react도 18로 업데이트 됐을 텐데, 해당 버전에 발생할 수 있다며 17 버전으로 변경해줘야 한다고 하여 바꿨지만 해결되지 않았다. 씁...! 초기에 nextjs 앱 생성을 create-next-app 로 해줬는데, package.json에 dependencies안에 "@types/react": "^18.2.46", "@types/react-dom": "^18.2.18" 위 항목들이 포함되어 있었다. 혹시 해당 타입 라이브러리들이 devDependencies 안..

프로젝트를 빌드하려고 했더니 계속해서 에러가 발생하는 고충을 겪는 중이다. 그 중, "Expression produces a union type that is too complex to represent" 에러가 발생하며 vs code에서 mui의 Box에 에러를 표시했다. 그래서 "Expression produces a union type that is too complex to represent"를 서치하여 1. > typescript: Select Typescript Version 옵션에서 Use Workspace Version 2. tsdk에 node_modules/typescript/lib 명시 위 옵션을 vscode에 적용했지만, 문제는 해결되지 않았다. 씁! 문제를 해결하기 위해 Box에 c..

next-pwa로 첫 구축을 해보고 테스트를 해보기 위해 Lighthouse로 분석해봤다. 위처럼 세팅하고 Analyze page load를 했는데, 다른건 다 정상적으로 pwa 설정이 완료 되었지만 Manifest doesn't have a maskable icon 조건은 fail이 되었다. 이유는 크롬 공식문서에서 확인할 수 있었다. manifest.json에 마스크 가능한 아이콘으로 설정하지 않았기 때문이다. 마스크 가능한 아이콘은 무엇일까? 이는 web.dev에서 확인할 수 있다. 대략 위와 같은 차이라고 보면 된다. 그리고 Lighthouse는 마스크 가능한 아이콘을 지원하지 않을 경우 경고를 띄우는 것으로 보인다. 해결하기 위해서는 manifest.json에 마스크 가능한 아이콘이라는 것을 알..