본문 바로가기

분류 전체보기418

Browser B/F cache 💰 B/F cache는 Back/Forward Cache라는 뜻을 가지고 있습니다. 브라우저에서 뒤,앞으로 이동할때 로드를 빠르게 하기위한 동작입니다. 브라우저에서는 이전 페이지를 snap shot을 찍어서 메모리에 올려놓습니다. 사용자가 뒤로 가기를 하면 메모리에서 가져와 그대로 보여주는 것입니다. 이렇게 하면 이전 페이지에서 리소스들의 요청을 보내지 않을 수 있고, 스크립트의 재실행 또한 하지 않습니다. 따라서 사용자에게 빠르게 보여줄 수 있습니다. 브라우저 호환성 safari, firefox에서는 전부 지원되어 왔었고 chrome에서는 버전 86부터 점진적으로 적용해왔다가 버전 96부터는 모든 chrome 유저가 사용할 수 있도록 지원되고 있다고 합니다. bfcache 기본 사항 bfcache는 페이지.. 2022. 4. 22.
네트워크 Browser 요청의 제한🌱 (HTTP/1.1, HTTP/2) HTTP/1.0, HTTP/1.1 프로토콜을 이용할때는 브라우저에서 동시에 요청을 보내는 개수에 제한이 있습니다. 그래서 HTTP/1.0, HTTP/1.1 프로토콜을 이용할때는 외부 resource를 요청할때 예상치 못한 delay를 경험할 수 도 있습니다. css, js일 경우에는 inline으로 변경을 하거나 npm을 이용하거나 webpack과 code split을 적절히 이용, http/2 프로토콜로 변경, 브라우저 요청 제한은 한 도메인에만 해당하므로 여러 도메인에서의 요청으로 변경하면 이를 해결할 수 있습니다. * http/2는 nginx에 http2 모듈을 설치하면 적용할 수 있습니다. 아래의 글은 http/1.1을 이용할 때 브라우저에서의 요청 제한에 대해 알아보고 그 외에 의식의 흐름대로 .. 2022. 4. 21.
React 글자 4개로 React 컴포넌트 최적화 가능(번역글) 🤔 제목이 클릭을 유발하는 자극적인 글일 수 있지만 부분적으로는 사실이다. 아래 두개의 예제를 살펴보자 // 예제 1 const Counter = () => { const [count, setCount] = useState( Number.parseInt(window.localStorage.getItem(cacheKey)) ) useEffect(() => { window.localStorage.setItem(cacheKey, count) }, [cacheKey, count]) return ( Count: {count} setCount((prevCount) => prevCount - 1)}>- setCount((prevCount) => prevCount + 1)}>+ ) } // 예제 2 const Counte.. 2022. 4. 20.
디자인 패턴/싱글턴 패턴 🆘 (최근에 이벤트 루프를 디자인 패턴으로 잘못 설명하여 다음엔 그러지 않기 위하여 이 포스트를 포스팅 합니다.) 디자인 패턴이란 객체 지향 프로그래밍 설계를 할 때 사용되는 패턴으로 자주 발생하는 문제를 피하기 위해 사용됩니다. 제가 이해한 흐름은 객체 지향 프로그래밍 설계를 할때 반복하여 발생하는 문제들에 직면하는 상황이 생겼습니다. 이러한 문제를 해결하는 방식들은 고착화 되었을 것입니다. 예를 들면 '메모리를 save하기 위해 전역 범위에 객체 인스턴스를 생성해두고 의존성이 주입되면 그때 이미 생성된 인스턴스를 참조할 수 있도록 하는 방법'이 있을 것입니다. 자주 발생하는 문제를 해결하기 위해 위와 같이 매번 말하는 방법도 있을 수 있고 이러한 패턴에 이름을 붙여 좀 더 간단하게 소통할 수 도 있을 것.. 2022. 4. 20.
Javascript intersection observer api 👀 1번 상황 서비스하고 있는 사이트에 이미지가 2200개가 있다고 가정하겠습니다. 웹의 로드와 동시에 2200개의 이미지를 전부다 받아와야 한다면 사용자는 기다리는 동안 커피를 사올수 있고 세차도 가능할 지도 모릅니다. 2번 상황 3500개의 DOM 객체가 있고 이들이 화면에 나타나면 색깔이 변해야 한다는 기획이 있다고 가정해 보겠습니다. css의 animation 속성을 이용해 색깔을 계속 바꿔지도록 할 수도 있어서 화면에 나타나고 딱 한번만 색깔이 바뀌어야 한다고 조건을 추가하겠습니다. scroll 이벤트를 걸고 모든 DOM 객체들의 getBoundingClientRect를 이용하여 뷰포트 내의 위치를 가져오고 이를 이용하여 클래스를 변경해주는 방식도 있을 수 있을것 같습니다. getBoundingCl.. 2022. 4. 20.
Ios webview에서 javascript를 통해 ios 기능 호출하기 ℡ WKWebView와 UiWebView의 차이점 원래 UiWebView가 존재하였지만 ios8에서 WKWebView가 등장하였습니다. 이 과정에서 UiWebView는 deprecated 되었습니다. WKWebView는 UiWebView 보다 성능이 좋고 효율적으로 동작합니다. WKWebView는 javascript를 비동기 적으로 처리합니다. Javascript와 네이티브 코드 간의 통신은 비동기 적으로 처리되고 일반적으로 더 빠르게 실행이 됩니다. 하지만 WKWebView에서는 쿠키를 직접 관리해야 합니다. 쿠키 설정이 필요해서 쿠키를 설정하는 스크립트를 시작시에 실행시켜 주어서 원했던 동작을 구현했던 경험이 있습니다. (이 부분은 좀 더 develop 예정입니다.) Ios의 Webview를 이용할때 w.. 2022. 4. 20.

티스토리툴바