전체 글
-
vitest에서 Found multiple elements by [data-testid= ]에러 해결하기카테고리 없음 2024. 11. 25. 07:37
문제 상황vitest로 통합테스트를 작성하고 있었습니다.이 때 Found multiple elements by [data-testid= 에러가 나타났습니다.에러를 살펴보니 spec.tsx에서 render를 한 갯수만큼 DOM이 생겨나고 있었습니다.그래서 저는 cleanup이 제대로 되고있지 않다고 생각을 했고, @testing-library/react에서 cleanup함수를 찾았습니다.이를 afterEach에 넣고 해결을 하였습니다.// setup.tsimport { afterEach } from 'vitest'afterEach(cleanup)하지만 의문점이 생겼습니다.제가 기억하기로는 자동을 cleanup을 시켜준다고 알고 있었고, 위의 문서를 보아도 테스트 프레임워크가 자동을 global afterE..
-
github actions에서 aws secrets manager 사용하기기타 2024. 11. 18. 06:59
서론어느 날 github action에서 ci를 만들고 있었습니다.이때 build를 하는 과정이 필요했는데요, 환경 변수를 aws secrets manager로 관리함에 따라 github actions에서 aws secrets manager로의 접근이 필요했습니다.검색을 해보니 github actions에서 aws secrets manager를 사용하는 것을 도와주는 configure-aws-credentials라는것이 있었습니다.사용 방법은 아래와 같이 region과 role-to-assume 즉 주입할 IAM 롤을 입력하면 되는데요, 그럼 어떤 IAM role을 넣어주어야할까요?uses: aws-actions/configure-aws-credentials@v4with: aws-region: us-e..
-
IOS기기에서 딥링크를 열었을 때 제대로 동작하지 않는 이슈카테고리 없음 2024. 11. 5. 07:18
문제보통 딥링크의 경우 모바일 기기일 경우, PC일 경우의 동작을 정의하고, 앱의 설치여부에 따라 어디로 이동할지를 정의해주어야합니다.IOS에서 딥링크를 클릭했음에도 딥링크가 PC처럼 동작하는 문제가 있었습니다. 해결 과정사용자의 환경을 판단하고 앱의 존재여부를 알기 위해 외부 sdk를 사용하고 있었습니다.하지만 오픈 소스가 아니었기 때문에 어떤 기준으로 사용자의 환경을 파악하는지는 알기 어려웠습니다. 보통 PC인지 모바일 기기인지 파악하기위해 User-Agent 를 활용합니다.때문에 문제가 되었던 기기의 네트워크 요청에서 User-Agent를 확인해보았고, macOS로 요청하는것을 알았습니다. IOS에서 User-Agent와 관련된 설정이 있는지 확인을 해보다 설정 → 앱 → 사파리 → 데스크탑 웹사이..
-
js date 객체를 사용하다 겪은 삽질 경험기기타 2024. 10. 10. 07:16
최근 프로젝트에서 날짜와 관련된 비즈니스 로직을 구현하는 중에 예상하지 못한 오류를 마주쳐 삽질을 하게 되었는데요, 이에 대해 기록해보려합니다.queryString에서 날짜 값을 가져와 작업하는 부분에서 발생했는데요, use-query-params라는 라이브러리를 통해서 원하는값을 가져오는 형태였습니다.해당 라이브러리의 사용법을 간단히 설명하자면 아래와 같습니다.import { useEffect } from "react";import { DateParam, useQueryParam } from "use-query-params";function App() { const [dateFromUseQueryParams] = useQueryParam("startDate", DateParam); // 이런 방법으..
-
tsconfig의 moduleResolution option기타 2024. 7. 21. 20:46
라이브러리들을 tsup으로 마이그레이션하고, 개선하는 작업들을 진행했었습니다.이미 다 완료했지만.. 그때 당시의 고민했던 내용을 적어보려합니다. 문서에 따르면 moduleResolution option은 typescript가 모듈을 찾는 방식을 설정하는데 사용합니다.문서를 보았지만 잘 와닿지 않아서 moduleResolution의 pr을 보았습니다. 제가 해석한 바는 아래와 같습니다.이 pr에서는 bundler option이 node또는 esm과 유사한 resolution정책을 가지고 있지만 node 또는 브라우저에서의 strict resolution rule을 강제하지 않는 번들러와 런타임들을 위해 만들어졌다.그래서 누가 사용해야되냐?✅ 런타임에 사용되기 전에 자신의 TS 또는 JS 파일에 번들러를 사..
-
tsconfig types란?기타 2024. 3. 26. 22:33
문제 googlemap을 사용하려던 도중 구글이 정의한 타입들이 추론되지 않는 이슈가 있었습니다. 분명히 googlemap이 제공하는 타입을 npm에서 잘 설치했는데, 추론이 안되니 뭔가 이상했습니다. 때문에 제가 알고 있었던 Triple-slash directives를 통해 해결하려했습니다. triple-shash directives는 뭘까요? 와 같은 형태로 사용하는것이 일반적입니다. 파일간의 종속성을 선언하는 역할을 합니다. 컴파일러가 컴파일 과정에 추가 파일을 포함하도록 지시합니다. 의 경우 패키지간의 의존성을 나타냅니다. 예를 들어 type declaration 파일에 를 포함하면 해당 파일은 @types/node/index.d.ts에서 선언된 이름을 사용하므로 컴파일에 포함됩니다. 이를 통해서..
-
github reviewers 자동으로 달아주기기타 2024. 2. 22. 20:59
문제 상황 회사에서는 현재 pr을 올리면 슬랙 깃헙봇을 활용하여 자동으로 노티를 주고 있습니다. 이에 따라 알림을 받는사람은 reviewer로 지정된 사람들과, asignee입니다. 팀에 인원이 늘어남에 따라 일일이 reviewer를 등록하는것이 번거롭게 되었습니다. step1 github에는 CODEOWNERS를 통해 코드 소유자 정보를 나타낼 수 있습니다. (docs 링크) 팀원이 2명이고(A,B), 모든 파일에 대해 수정사항이 일어났을 때 자동으로 reviewer에 포함되게 하고 싶다면, 아래와 같이 나타낼 수 있습니다. * @A @B 이렇게 작성할 경우 팀에서 다루는 모든 레포에 CODEOWNERS를 만들고 위와 같은 설정을 해주어야 되는데요, 만약에 팀원이 새로 추가가 되거나 변경이 일어나게 된..