전체 글48 Typescript Can't be found in the cache and wil 버셀을 이용하여 서비스를 배포하던 중 다음과 같은 에러가 나타났다. error: Command failed with exit code 1.Error: Command "yarn install" exited with 1 로컬에서 해당 에러를 재현해 보기 위해 yarn install을 시도해 보았다. 모노레포에서 타입스크립트를 사용하던 중 충돌이 발생한 것 같다. yarn.lock 파일을 삭제하고, `yarn cache clean` 커맨드를 입력 후 다시 yarn install 해주었다. https://learn-dev.tistory.com/9 위 블로그를 통해 yarn 3.3.0 버전과 타입스크립트 4.9.4 이후 버전의 이슈가 있다는 것을 알게 됐다. 모든 워크스페이스의 타입스크립트 버전을 4.9.3 버.. 2023. 8. 28. 모노레포에서 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 README를 천천히 읽어보는데.. 2023. 8. 10. setState의 효율적인 사용 방법과 React-Query의 initialData, placeholderData useState const [userInfo, setUserInfo] = useState() const onChangeUsername = (e: React.ChangeEvent) => { setUserInfo({ ...userInfo, username: e.target.value }); }; userInfo가 속성이 많은 큰 객체인 경우 스프레드 연산자를 사용하면 전체 객체의 얕은 복사본을 만들 수 있으며 이는 메모리 사용량 및 처리 시간 측면에서 성능에 악영향을 끼칠 수 있다. 따라서 다음과 같이 사용하는 것이 좋다. const onChangeUsername = (e: React.ChangeEvent) => { setUserInfo((prevUserInfo) => ({ ...prevUserInfo, u.. 2023. 8. 2. padding값에 따라 요소의 크기가 변하는 이슈 해결 padding-top 30px을 기준으로 보다 높아지면 배경 애니메이션이 안 보이고, 30px보다 낮아지면 애니메이션이 보이는 문제가 발생했다. 먼저 배경의 height를 확인해 봤다. 그리고 배경 안의 컨텐츠의 height를 확인했다. padding 30px을 기준으로 버그가 발생하고 있었는데, 884px - 854px = 30px과 연관이 있을 것이라는 생각이 들었다. 그리고 pdding 값의 변화에 따라 star의 크기가 달라지고 있었다. star의 크기를 고정시켜 줘야겠다는 생각이 들었다. div로 감싸준 후 height에 100%를 줬다. padding값을 아무리 늘려도, star의 크기가 변하지 않게 되었다. 2023. 7. 19. 이전 1 2 3 4 5 6 7 8 다음
