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-2월 목표 중 하나로 네트워크 공부를 세웠다. 올해는 cs 지식을 튼튼히 해보려는 계획을 세웠는데 그 계획 중 첫 목표인 것이다! 그러던 중 우연히 네트워크 면접 스터디를 알게 되어 참여하였다. 나는 회사 지원을 많이 한 편이 아니라 제대로 된 기술 면접 경험이 딱 두번 있다. 그중 한 번도 기술면접 뿐만 아니라 수학문제, 라이브 코딩 이 나와서 기술 면접이라고 보기 애매한 것 같고.. (제대로 죽쑤고 왔던 기억이 있다... ) 생판 모르는 사람들과 면접 스터디를 하는 건 굉장히 어색하고도 새로운 경험이었다. 신기한 건 면접관으로도 참여해보고 처음 보는 사람과도 15분 넘게 인터뷰를 보고 나니, 대충 나에게도 인터뷰이가 어떤 성향인지 대강의 분위기가 그려졌다. 내가 그려졌다는 건 분명 실제 면접.. 네트워크 5주차 스터디 IP주소에 대해서 설명해주세요. Internet Protocol 에서 Host에 대한 식별자 IPV4와 IPV6는 어떤 차이점이 있을까요? 가장 큰 차이점은 주소의 길이이다. IPV4는 32bit로 약 43억개의 호스트를 가질 수 있고 IPV6는 128 bit이다. 서브넷과 서브넷 마스크에 대해 설명해주세요. 서브넷 마스크는 ip주소의 네트워크 id를 표기한다. ip주소와 서브넷 마스크를 &연산의 결과가 네트워크 아이디이다. Public IP와 Private IP 차이는 뭘까요? public ip (global ip): 인터넷에서 유일한 주소로 ipv4 기준 43억개로 제한적인 개수를 가진다. 라우터가 라우팅을 할 때 ip패킷 목적지 주소가 global ip일 때만 라우팅한다. private ip : i.. 네트워크 4주차 스터디 TCP에 대해 설명해주세요. 신뢰성 있는 통신을 가능하게 해주는 트랜스포트 레이어 프로토콜 pdu : 세그먼트 그외) tcp header 포트를 기준으로 통신하기 때문에 source port, dest port가 있음 Sequence number : 바이트 스트림 번호 (세그먼트 데이터의 첫바이트) tcp는 데이터를 바이트들로 쪼개게 되는 게 이게 세그먼트이고 각 세그먼트마다 seq#이 붙는다. 나중에 수신 측에 데이터 재조립할 때 사용함. Acknowledgement number 안전한 데이터 전달을 위해, 데이터를 잘 받았을 때 seq에 +1을 해준 번호. flags syc, ack, fin 등이 있음 window size 수신측의 윈도우 사이즈. 흐름 제어에 사용된다. Flow control(흐름 .. 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
