개발이슈

웹 스토리지 유틸 함수에 대한 테스트 코드를 작성하다가 조금 헤매고 난 후에 해결해서 그 과정을 글로 남기고자 합니다. 스토리지 유틸 함수를 만든 이유 스토리지 API를 이용해서 바로 특정 값을 가져올 수도 있을 텐데요. 그럼에도 불구하고, 유틸 함수를 별도로 만드는 이유는 스토리지가 문자열 값만 저장하기 때문입니다. 특히 스토리지에 객체를 JSON 형태의 문자열로 저장하는 것이 유용할 텐데요. 객체를 바로 스토리지에 저장하게 되면 [object Object] 형태의 문자열로 변환되어 저장되기 때문에 유틸 함수에서 JSON 문자열로 변환시켜서 스토리지에 저장하려는 것입니다. (toString의 동작방식 때문) // 스토리지 유틸 함수 예시 export const getSessionStorageItem =..

문제 발생 웹 서비스를 개발하던 중에, 다음과 같이 특정 API를 호출하고 실패했을 때 window.alert로 사용자에게 오류 메시지를 보여주는 기능을 구현했습니다. 버튼을 클릭하면 로딩이 보이면서, API 호출이 마무리될 때까지 기다렸다가 성공하면 다음 페이지로 이동하고, 실패하면 오류 메시지를 보이는 형태입니다. 위의 기능과 관련된 컴포넌트에 대한 테스트 코드를 작성하고 있던 중이었습니다. API를 모킹해서 실패하도록 처리한 후, 오류 메시지를 보이는 것. 즉, window.alert가 실행되었는 지 검증하는 중이었는데요. 다음과 같은 오류가 발생했습니다. Jest의 테스트 환경 (testEnviroment)는 jest-environment-jsdom 으로 셋팅되어 있는데요. JSDOM 환경에는 w..

이슈 발생 Storybook에서 SVG 아이콘을 사용하는 컴포넌트로 스토리를 만들고 있었는데요. 갑자기 위와 같은 오류가 발생했습니다. Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 구글링도 해보고, Github Issue를 여러 개 살펴본 뒤에 file-loader 관련 이슈라는 것을 알게 되었습니다. Storybook은 Webpack을 사용하고 있고 기본적으로 file-loader가 사용되고 있는데, SVG 파일을 import하는 과정에서 file-loader가 객체 형태로 변환한 것으로 보입니다. File-lo..

회사에 새로 입사하신 분이 오셔서, GitLab 그룹에 초대했는데요. 새로 오신 분이 GitLab에 커밋을 push하니까 GitLab 파이프라인이 실행되지 않는 현상이 발생했습니다. GitLab runner 문제인 줄 알고, 삽질하다가... 파이프라인 에러에 마우스를 올려보니... 아래와 같은 오류 메시지를 확인할 수 있었습니다. 오류 메시지 The pipeline failed due to the user not being verified 원인 명확한 원인인지는 모르겠습니다. 추측되는 것은... GitLab에서 Shared Runner에 대한 일정 시간을 무료 제공하는데요. 그 이상부터는 결제가 필요한데, 카드등록을 안해서 발생하는 오류인듯 합니다. 그래서 Shared Runner를 Off하면 문제가 해..

create-next-app을 이용해서 새로운 Next.js 프로젝트를 만들고, 개발을 진행했습니다. 프로젝트에서는 Emotion.js를 사용하고 있는데요. 개발을 잘 진행하고 있다가, 다음과 같은 문제가 발생했습니다. 다음과 같은 코드를 보시면, HTML 요소를 스타일링 해줄 때, 다음과 같이 CSS 선택자를 이용하는데요. ...생략 하이 div p { color: red; font-weight: bold; } Component Selector(컴포넌트 선택자)란 상위의 컴포넌트에서 스타일링을 적용을 할 때, 하위의 컴포넌트를 선택해서 스타일링을 하는 것을 의미합니다. import styled from '@emotion/styled'; const Child = styled.div` color: red;..

Next.js 환경에서 Jest + Cypress를 구축하는 도중에 문제가 발생했습니다. Jest로 만든 테스트 코드 (*.test.ts | tsx) 는 문제없이 타이핑 및 자동완성이 잘 되는데, Cypress로 테스트 코드 (*.spec.ts) 를 작성할 때 타이핑 및 자동완성이 되지가 않습니다. Cypress를 이용한 E2E 테스트 코드는 보통 cypress 디렉토리 내에 작성하게 되는데, cypress 디렉토리 내부의 테스트 코드들이 루트 디렉토리의 tsconfig.json의 설정에 영향을 받고 있기 때문입니다. // /tsconfig.json { "compilerOptions": { ... // 다른 설정 }, "exclude: [ ... // 다른 설정 "cypress" ] } 루트 디렉토리의 ..