혜르미온느

JS 공부를 하면서 혼자 네이버 쇼핑 따라 하기를 진행하던 중 슬라이더 구현에서 멈칫하게 되었다. 네이버처럼 자연스러운 기능을 구현하려 하니 코드가 점점 꼬이는 기분이 들어서이다. https://hyermione.tistory.com/category/Challenge/%EB%84%A4%EC%9D%B4%EB%B2%84%EC%87%BC%ED%95%91 'Challenge/네이버쇼핑' 카테고리의 글 목록 해르미온느같은 혜르미온느 hyermione.tistory.com 여러 슬라이더 관련 오픈 소스를 참고하려고 알아보던 중, 네이버에서 직접 사용하고 관리하는 Flicking에 대하여 발견하게 되었다..! 두둥 호기심이 생겨 간단하게 정리한 바를 포스팅으로 남겨본다-! Flicking 내가 이해한 바가 맞다면, ..

B.F.F란 Best Friend Forever 이라는 뜻의 약어인데, 개발계에서 영원히 함께 할 수밖에 없는 짝꿍을 뽑으라면 Backend와 Frontend가 아닐까 싶다. 개발에서의 BFF란 Backend For Frontend라는 뜻으로 해석 그대로 프론트엔드를 위한 백엔드를 의미한다. 나름대로 자료를 많이 읽어보았지만 읽으면 읽을수록 광범위하고 섬세한 범위를 포함하고 있어 다 풀기에는 아직 더 많은 공부가 필요할 듯싶다. 이번 포스팅은 많은 자료를 기반으로 이해해 본 BFF의 개념을 소개해보고자 한다. 10년 전 즈음, 모바일이 활성화 되기 이전에는 거의 모든 개발 플랫폼은 웹에 한정되어있었다. 당시에는 하나의 백엔드를 통하여 하나의 플랫폼이 1:1 매칭 되어 서비스해도 전혀 무리가 되는 시절이 ..

센트리에는 할당량 개념이 존재한다. sentry 공식 문서에는 Quota라고 표현하는데, 기업버전을 제외하고는 모든 버전에서 제한이 걸려있어 할당량 관리가 매우 중요하다. 이렇게 엔터프라이즈버전을 제외하고는 모두 제한이 걸려있다. 그래서 오류를 수집 할 때, 꼭 필요한 알짜들을 잘 필터링하여 수집하고 고쳐나가는게 중요하다. 그러나 아무렇게나 하게 된다면 나는 제외를 하였다고 생각했는데, 수집되는 경우가 더러있다. denyUrls 관련 기능을 설명하며 잠시 언급 한 적이 있는데, 예를 들어 에러 리스트에서 특정 에러를 ignored 시켰고, 이후 Unresolved 리스트로 들어오는 것이 아니라 ignored로 들어오는 것도 확인하였는데, 할당량이 가득 차는 경우가 있다. 왜냐하면 리스트에서 설정한 ign..

센트리를 구축하고 나면 생각보다 많은 에러들이 수집된다. 오류를 조금 보고 싶다 혹은 할당량 제한으로 인하여 적게 받아야만 한다 등 오류를 줄이고 싶은 경우가 많은데, 사실 제일 베스트는 모든 오류를 처리하는 방법이다-! 만, 쉽지 않다. 그럴때 말 이 기능을 사용하면 말 그대로 오류를 적게 수집할 수 있다. https://docs.sentry.io/platforms/javascript/configuration/options/#sample-rate Basic Options for JavaScript Learn more about how to configure the SDK. These options are set when the SDK is first initialized, passed to the in..

sentry에는 다양한 기능들이 많은데, 오늘 포스팅 해 볼 주제는 inbound filter에 대한 이야기이다. 사실 이 기능의 일부는 유료버전에서 사용이 가능하지만 무료로 사용할 수 있는 범위도 강력하거니와 나는 급할 때, 트라이얼 버전으로 해당 기능의 도움을 받은 경험이 있어 함께 소개해보고자 한다. https://docs.sentry.io/product/data-management-settings/filtering/ Inbound Filters Learn about the different methods for filtering data in your project. docs.sentry.io 그간 직접 코딩을 하면서 여러 조건의 에러를 필터링 하는 방법들을 소개했는데, 이번에 소개할 방법은 프로..

denyUrls는 말 그대로 sentry 프로젝트로 수집하지 않을 경로에서 생성된 오류를 막을 때 사용하는 옵션이다. https://docs.sentry.io/platforms/react-native/configuration/options/#deny-urls Basic Options for React Native Learn more about how to configure the SDK. These options are set when the SDK is first initialized, passed to the init function as an object. docs.sentry.io 간혹 검색하다보면 ignoreUrls이라는 옵션이 검색되기도 하는데, 이는 옛 버전으로 더이상 동작하지 않으니 반드시..

센트리를 세팅하고 이슈를 받아보면 당황스러울 때가 있다. 이렇게 많은 에러가 숨어있었다고!? 라는 마음 때문이다. 수집된 에러들을 천천히 살펴보면 사실 (이유가 어찌 되었건) 불필요한 에러들도 꽤 많이 자리를 차지하고 있다. 딱히 체크하지 않아도 되는 에러 일 수도 있고, 센트리가 init 된 이후의 모든 에러를 수집하기 때문에 의도되지 않은 페이지에서의 에러일 수도 있다. 아무튼 그럴 때, 이 전에 포스팅 한 beforeSend 함수를 이용하여 오류를 필터링 하는 방법도 좋지만 더 간단한 방법이 있어 소개해 보려고 한다. https://hyermione.tistory.com/20 센트리(sentry) BeforeSend 함수 활용 - 용량 조절, 슬랙 전송 등 참새가 방앗간을 들리듯이 센트리가 에러를 ..

참새가 방앗간을 들리듯이 센트리가 에러를 프로젝트로 보내기 전에 반드시 방문하게 되는 HOOK이 있다. https://docs.sentry.io/platforms/javascript/guides/electron/configuration/options/#before-send Basic Options for Electron Learn more about how to configure the SDK. These options are set when the SDK is first initialized, passed to the init function as an object. docs.sentry.io 바로 BeforeSend 라는 함수인데, 말 그대로 이슈를 보내기 전에 무조건 실행되는 함수이다. 가령 이슈를..

먼저 나는 CRA(create-react-app)를 통하여 react 기반의 프로젝트를 세팅해두었다. 하단의 코드를 이용하여 스토리 북을 설치해준다. npx sb init 잘 설치되었는지 확인하려면 package.json에 storybook이 들어왔나 확인하거나 폴더 구조에서 storybook 폴더의 생성을 확인하는 것도 간단한 방법이다. .storybook 폴더 하위에는 main.js와 preview.js라는 두 파일이 생성되어있는데, main.js는 스토리북 config 설정들을 하는 스트립트 파일이며, preview.js는 모든 스토리들에 공통적으로 적용할 포맷 등을 세팅하는 곳이라고 생각하면 된다. 이는 조금 더 공부한 후에 따로 포스팅을 할 예정이다. 각설하고, 스토리북 설치 확인의 가장 좋은 ..

센트리를 프로젝트에 연결하기 위해서는 각각의 프로젝트에 부여되는 DSN을 연결시켜야 한다. DSN은 오류 이벤트를 보낼 위치를 SDK에 알려주는 역할을 하는데, 프로젝트 생성 직후에 한 번 알려주고 이후에는 꽁꽁 숨어있어서 찾기가 힘들다. (dsn 사용 예시) import * as Sentry from "@sentry/browser"; import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ dsn: "https://examplePublicKey@o0.ingest.sentry.io/0", // Alternatively, use `process.env.npm_package_version` for a dynamic release version // i..