React 18 프로젝트에서 Sentry로 에러로깅을 하는데 이상하게 2번 로깅되는 문제가 있었다. 우리 서비스의 에러처리 프로세스는 다음과 같다api 에러가 발생 → axios interceptor가 AxiosError 인스턴스 반환 → react-query에서 throwOnError 옵션으로 인해 가까운 에러바운더리로 에러 던짐 → Errorboundary에서 에러캐치해서 error fallback과 에러를 센트리에 로깅함 Errorboundary에서 에러를 캐치할 때 로깅하도록 설정이 되어있었는데, 콘솔로그엔 Errorboundary에 전달되기도 전에 에러가 로깅되는 것이였다. 그 후에 Errorboundary에서 로깅 로직이 실행되고 있었다. 결론적으로 원인은, React Errorboundary..
TurboRepo로 구성한 프로젝트에서 크로마틱(Chromatic)으로 스토리북을 배포하는 방법을 정리하고자 합니다. 준비물github repostorybook chromaticchromatic과 github 연동Chromatic에 로그인한 후, 배포할 레포지토리를 선택하세요. Chromatic을 통해 스토리북을 자동으로 배포하고 Visual Regression Test도 수행할 수 있습니다. chromatic 설치스토리북이 설치된 레포지토리로 이동해 Chromatic을 설치합니다.pnpm --filter {스토리북이 설치된 레포} add -D chromatic chromatic 배포설치된 레포지토리에서 Chromatic을 빌드하고 배포합니다. 아래 명령어에서 {project-token} 부분은 Ch..
TurboRepo로 Monorepo를 구성하면서 pre-commit 단계에서 타입 체크를 위해 husky와 lint-staged를 사용했습니다.프로젝트마다 독립적인 tsconfig.json 설정을 유지하려다 보니, lint-staged에서 루트에 없는 tsconfig를 참조하지 못해 에러가 발생했습니다. 이에 대한 문제 해결 과정과 추가로 겪은 문제 상황을 공유하고자 합니다. 초기 설정프로젝트 구성은 다음과 같습니다.├── apps│ └── client├── packages│ └── ui├── package.json기존 package.json 설정은 다음과 같았습니다.// ./package.json{ "lint-staged": { "*.{ts,tsx}": [ "eslint --ca..
위와 같이 하단에 고정시킨 영역이 키보드가 열렸을 때 키보드 위에 위치하도록 구현해야 했다.하지만 iOS에서 키보드가 열리면 position: fixed 요소가 키보드에 가려지는 문제가 자주 발생한다.이 문제를 해결하면서 공부한 내용을 정리하고자 한다. 플랫폼 마다 다른 키보드 열림 시 페이지 처리방식안드로이드와 ios는 가상키보드가 열릴 때 페이지를 차지하는 방식이 다른데,안드로이드는 키보드가 열릴 때 viewport를 키보드를 제외한 영역만큼의 height를 설정해준다.ios는 viewport가 아닌 document를 키보드 영역 만큼 밀어버린다. → fixed 요소가 키보드 아래에 갇히는 문제 발생 여러가지 구현 방법이 있겠지만, 나는 키보드 높이와 키보드 유무에 따라 하단 요소의 위치를 변경해주..
토스에서 개발자 컨퍼런스(SLASH24)를 진행한다고 한다슬로건 부터 "no limit" 풀지 못하는 문제는 없다니 ㄷㄷ.. 심장떨려여러 파트에서 다양한 세션을 진행하고 있다. 나는 시간표 꽉꽉 채워 들을 예정 ㅎㅎㅎ~가서 많이 배우고 많이 깨닫고 이야기 나누고 싶다 🥺!!!
들어가기React 애플리케이션에서 예기치 못한 에러는 애플리케이션의 안정성을 해치고 사용자 경험을 저하시킬 수 있습니다. 이러한 에러들을 효과적으로 처리하고 관리하기 위해 React는 ErrorBoundary라는 컴포넌트를 사용할 수 있습니다.Error Boundary란 에러에 대한 경계를 의미합니다. 즉, 특정 `Error Boundary`로 감싸여진 구간에서 에러가 발생하면 그 에러를 잡아내서 처리할 수 있습니다. 선언적으로 에러를 처리할 수 있는 ErrorBoundary 컴포넌트는 크게 두 가지 방식으로 구현할 수 있습니다Class Component로 선언해서 사용하는 법라이브러리를 통해 Function Component로 사용하는 법 1. Class Component로 ErrorBoundary 구..
AsProps 타입type AsProp = { as?: C;};선택적으로 as 속성을 받을 수 있는 타입.`as` 속성은 `ElementType`을 상속받는 타입 `C`로 지정된다. 이 속성을 통해 사용자가 컴포넌트를 어떤 요소나 다른 컴포넌트로 렌더링할지 결정할 수 있다. PropsToOmit 타입type PropsToOmit = keyof (AsProp & P);`AsProp`와 추가적인 프로퍼티 `P`를 결합한 타입에서 키를 추출한 타입.컴포넌트가 기본적으로 가지는 프로퍼티(`C`) 중에서 `Props`로 지정된 사용자 정의 프로퍼티와 충돌할 수 있는 프로퍼티를 제거할 때 사용한다. PolymorphicComponentProp 타입export type PolymorphicComponentProp ..
이번 프로젝트에선, S3와의 통신을 모두 클라이언트단에서 처리하기로 했습니다.업로드를 구현하는 과정에서 Multipart Upload라는걸 알게되었고 적용시켜보았습니다⛳️ taskAWS SDK for JavaScript 사용하여 대용량 파일을 청크로 나누어 업로드(MultiPart Upload)한다.✅ task flowMultipart upload 구현 작업Multipart upload initiation: 고유한 upload id를 반환받는 단계Parts upload: 업로드 할 파일을 chunk로 쪼개서 각각 요청을 보내는 단계Multipart upload completion: chunk를 결합하고, src를 반환받는 단계Abort Upload: 예외처리Multipart upload Progress..
[프로그래머스 LV1] 숫자 문자열과 영단어 https://school.programmers.co.kr/learn/courses/30/lessons/81301 문제 설명 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요...
