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..
들어가기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 ..
[프로그래머스 LV1] 숫자 문자열과 영단어 https://school.programmers.co.kr/learn/courses/30/lessons/81301 문제 설명 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요...
https://school.programmers.co.kr/learn/courses/30/lessons/77884 문제 설명 두 정수 `left`와 `right`가 매개변수로 주어집니다. `left`부터 `right`까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 `solution` 함수를 완성해주세요. 제한사항 1 ≤ left ≤ right ≤ 1,000 입출력 예 left right result 13 17 43 24 27 52 시도한 방식 첫 풀이는 약수의 개수를 구하고 짝수인지 홀수인지 판단했었습니다. function solution(left, right) { var answer = 0; for (let i = left; i
[프로그래머스 LV1] 부족한 금액 계산하기 https://school.programmers.co.kr/learn/courses/30/lessons/82612 [문제 설명] 새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다. 놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요. 단, 금액이 부족하지 않으면 0을 return 하세요. 제한사항 놀이기구의 이용료 price : 1 ≤ price ≤..
charAt 문자열에서 특정 인덱스에 위치한 문자를 반환한다. let str = "Hello World"; console.log(str.charAt(0)); // "H" concat 하나 이상의 문자열을 기존 문자열에 연결하여 새 문자열을 반환한다. let hello = "Hello"; let world = "World"; console.log(hello.concat(world)); // HelloWorld console.log(hello.concat("", world)); // HelloWorld console.log(hello.concat(" ", world)); // "Hello World" console.log(hello.concat(",", world)); // Hello,World includ..
