Look and Find what i've done. 분류 전체보기 TIL Front javascript CS ps special scroll 이벤트가 발생하지 않는 경우 문제 원인: 팝업 레이어에서 스크롤 이벤트를 감지해서 lazy-loading으로 캐싱된 이미지를 스크롤 시마다 변경해주는 메서드가 발생하지 않음. but 팝업 레이어 바깥에서는 scroll Event가 발생하는 데에 문제가 없었다. 문제원인은 팝업 전체의 overflow: hidden 문제 해결: 내부 내부 레이어단의 height: 100% (overflow-y: auto) 였기 때문에 팝업 레이어 내부에서만 스크롤 이벤트가 발생하는 것이다. 그러나 팝업의 height를 변경하거나 팝업 스크롤 시 바깥의 스크롤이 fire 되는 것은 의도한 바가 아니기 때문에 팝업에 ref를 걸어 scroll 이벤트를 캡처해서 처리하였다. import React, { useEffect, useRef } from 'reac.. 타입스크립트에서 상수를 안전하게 쓰는 법 1. as const 객체 리터럴이나 배열의 내부 프로퍼티에 접근하는 것을 막아준다. 접근하면 에러! Readonly, ReadonlyArray 같은 것도 똑같은 역할을 해준다. https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html#readonly-and-const Documentation - TypeScript for Functional Programmers Learn TypeScript if you have a background in functional programming www.typescriptlang.org 2. type typeof keyof typeof, keyof 모두 타입을 반환한다. typeof는.. Presentational and Container 패턴과 리액트에 대한 고찰. 해당 패턴에 대해서 아는 것이 없었는데 이번에 구매레이어 쪽 유지보수를 하면서 setShowLoading(true) 이런 로직들이 여러군데 산재해 있어 어지러워서 react의 suspense를 도입하고 싶어 찾아보다가... 결국은 현재 구조로는 도입이 불가능함을 깨닫고 슬퍼하면서 쓰는 글이다 ㅜㅜ 일단 내 수준에서는 그렇다.. 그래서 결론적으로 해당 패턴은 현재의 리액트와 정말정말 어울리지 않는 것 같다. 내가 작업하고 있는 구매레이어는 분석해보니 현재 presentational and container 패턴으로 구성되어있다고 볼 수 있다. 모노레포로 되어있는 프로젝트에서 lib 공통모듈에 몰아두고 Context API를 사용하여 구매레이어에 필요한 함수나 상태들을 가지고 있다. 구매 레이어에 표현하는 .. 1.30 string을 다이나믹하게 type checking 하려고 했다가.. 신기한거 많이 배웠다 Documentation - Narrowing Understand how TypeScript uses JavaScript knowledge to reduce the amount of type syntax in your projects. www.typescriptlang.org Checking validity of string literal union type at runtime? I have a simple union type of string literals and need to check it's validity because of FFI calls to "normal" Javascript. Is there a.. 업무 중 참고한 사이트 01.26 https://github.com/BetterTyped/react-zoom-pan-pinch/issues/143 Is there a way to disable panning only if am not zoomed in? · Issue #143 · BetterTyped/react-zoom-pan-pinch github.com 또 cors 에러랑 캐시.. https://toss.tech/article/smart-web-service-cache 웹 서비스 캐시 똑똑하게 다루기 웹 성능을 위해 꼭 필요한 캐시, 제대로 설정하기 쉽지 않습니다. 토스 프론트엔드 챕터에서 올바르게 캐시를 설정하기 위한 노하우를 공유합니다. toss.tech 업무 중 참고한 사이트 1.29 https://github.com/BetterTyped/react-zoom-pan-pinch/issues/143 Is there a way to disable panning only if am not zoomed in? · Issue #143 · BetterTyped/react-zoom-pan-pinch github.com 지난 주에 이어 cors https://toss.tech/article/smart-web-service-cache 웹 서비스 캐시 똑똑하게 다루기 웹 성능을 위해 꼭 필요한 캐시, 제대로 설정하기 쉽지 않습니다. 토스 프론트엔드 챕터에서 올바르게 캐시를 설정하기 위한 노하우를 공유합니다. toss.tech https://fe-developers.kakaoent.com/2023/2307.. 업무 중 참고한 사이트 01.26 https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver - Web APIs | MDN The ResizeObserver interface reports changes to the dimensions of an Element's content or border box, or the bounding box of an SVGElement. developer.mozilla.org https://developer.mozilla.org/ko/docs/Web/CSS/transition transition - CSS: Cascading Style Sheets | MDN transition CSS속성은 transition-propert.. 크롤링용 API 제공을 위한 API ROUTE 트러블 슈팅 기록 (Nextjs) API를 제공하는 Nextjs 기능. 백엔드에서 별도 API를 만들 필요 없이, 기존 API를 조합해서 프론트에서 새로운 API를 제공할 수 있다는 장점이 있어 개발수행사 측에서 크롤링 업체에 제공하는 API를 API Route로 만들었다.(급하게..) 이슈 상황 다만 기존 api를 사용하는 것이기 때문에 api에 필요한 uuid 발급절차가 필요하고 최초 진입시 401 에러 발생은 불가피하나, 모든 호출 시 401 에러로 떨어지는 현상이 있었다. 네트워크 상 304 error 로컬 확인 시 API resolved without sending a response for /api/data, this may result in stalled requests. 해당 에러가 찍혀있는 것을 확인하였다. 모든 api ..
