혜르미온느

bfcache에 관한 글을 보던 중 기억하면 좋을 것 같아 기록용으로 남겨둔다. ✔️ bfcache에 setTimeout이 있다면? 사파리의 bfcach로 스냅샷을 만드는 페이지에 setTimeout이 있다면 이의 호출 시간은 어떻게 진행될까? 사파리는 setTimeout 혹은 프라미스 등 태스크 대기열에 들어가는 보든 코드의 실행을 중지하고, 페이지가 bfcache에서 복원될 때 해당 작업을 다시 재개한다.

리액트를 위한 여러 상태관리 라이브러리 중에 recoil(리코일)이라는 친구가 있다. 리액트를 만든 페이스북에서 상태관리를 위하여 만든 라이브러리이기 때문에 가장 리액트친화적이고, 잘 이해된 상태관리 시스템이라고 이해할 수 있다. 그렇다면 굳이 라이브러리까지 설치하여 사용하는 상태관리가 왜 필요할까? 리액트의 한계성 리액트에서는 특정 상태를 공유하기 위하여 공통된 최상위 요소까지 끌어올려야 한다. 최상위 컴포넌트 -> 하위 -> 하위 -> 사용할 컴포넌트 와 같은 식으로 굳이 필요하지 않은 컴포넌트들을 거쳐 받아 사용할 수 있으며, 이 과정에서 트리 전체가 재 랜더링이되는 비효율성을 가지고 있다. 이에 따라 코드를 분할하고자 할 때, 직접적으로 상태가 사용되지 않는 컴포넌트라 하더라도 엮여있어 분할에 어..

요즘 제공하는 서비스에서 timeout이 발생하는 케이스가 자주 발생한다는 이야기를 듣고, timeout에 대하여 알아보았다. 더 세세한 종류가 있는 것 같지만 간단하게 기본이 되는 몇 가지만 정리해둔다. time out 발생 이유 client와 server가 서로 data를 주고 받기 위한 준비가 완료 되었지만 둘 중 한 곳에서 신호를 보내지 않을 경우 무한으로 기다리는 상황을 방지하고자 할 때, timeout이 발생한다. connection timeout 말 그대로 연결 시간 초과의 의미를 가지고 있다. client에서 server로 connection을 요청하지만 서버에서 response가 오지 않을 때, 발생한다. 클라이언트에서는 요청하였으나 서버에서 장애가 난 경우로 default 데이터 혹은 ..

ES2022의 신기능을 대충 정리해보았다. 아직 온전히 이해가 되지 않는 것들도 있고, 사용하면 정말 좋겠다는 것들도 있다. 하지만 옛 문법에 익숙하고, 현 시스템의 안정화를 위하여 이 문법들이 언제 일반화 되어 사용될지는 모르겠다. 그래도 분명한 것은 js는 계속해서 업그레이드 되고 있고, 그 흐름을 놓치지 말자는 것-! top level await js에서 프로미스를 더욱 쉽게 사용하기 위해 async-await 문법을 자주 사용하곤 했다. 이런식으로-! async function () { await api(); } async안에 await를 써야만 사용이 가능했는데, ES2022버전에서는 아주 심플하게 사용 방법이 바뀌었다. await api(); async 하위에 들어가지 않더라도 await의 모..

옛-날에 리액트를 처음 접할 때, react는 라이브러리라고 간단하게 이야기 한 적이 있다. 라이브러리와 프레임워크가 어떻게 다른지 왜 리액트가 라이브러리로 분리되는지 드디어 정리해본다. https://hyermione.tistory.com/27 [뷰쟁이의 리액트 시작하기] 리액트를 알아보자. [!이시중] 2021년 5월 21일 22:33에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/33 에서 확인할 수 있음. 글을 시작하며.. (첫 시작을 알리는 벅찬 잡담이 시작됩니다... 지루하신 분은 스크롤을. hyermione.tistory.com 먼저 나무위키에 소개된 프레임워크와 라이브러리의 정의를 정리해보자- 라이브러리 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발..

프리마커에서 변수를 선언하고 저장하는 방법에는 두 가지가 있다. assign local 둘의 차이는 무엇일까? assign assign은 단독으로 사용할 수 있다. 사용자가 정의한 로컬변수가 필요할 때, assign 문법을 사용한다. local assign과 같지만 다른 이 문법도 변수 선언 시 사용한다. 다만 function 또는 micro 등의 하위에서 선언되며, 해당 지역을 벗어나면 그 기능으로 사용할 수 없다. https://hyermione.tistory.com/91 알쓸신프-알아두면 쓸데있는 신비한 프리마커 문법 일단, 프리마커란? https://hyermione.tistory.com/58 Freemarker(프리마커)가 대체 뭘까 [!이시중] 2021년 10월 19일 23:02에 최초 작성된..

언어는 사용하지 않으면 녹슨다. 컴퓨터 언어도 마찬가지인데, 사용하지 않으면 아주 기본적인거라도 가끔 멈칫할 때가 있다. 오늘의 나에게는 바로 alert/comfirm/prompt의 상호작용이 그러했다. 어떻게 그럴 수가 있냐고 하면 할 말이 없다... 핑계를 대자면 컴포넌트를 만들어서 사용하느라 기본 기능을 사용 할 일이 없었다 정말! alert 단순 메세지를 보여주는 기능을 하는 알럿 띄우는 방법은 정말 간단하다. alert('알럿띄우기'); 문제는 알럿을 띄운 후, 액션 처리에 있었다. 확인을 누를 때, 무슨 코드가 필요했더라.. 결론은 딱히 "필요없다"이다. alert이 띄워졌을 시, 모든 작업의 진행을 멈추게 된다. 이후 확인을 클릭하게 된다면 멈춰있던 작업을 순서대로 진행한다. 즉, 다음과 같..

스켈레톤 UI란? 데이터가 렌딩되기 전, 사용자가 보게 될 화면의 윤곽을 먼저 그려준다는 것을 의미한다. 스켈레톤은 해골이라는 의미를 뜻하는데, 사람의 형상 전에 뼈가 되는 해골이 있는 것과 비슷한 의미라고 생각하면 이해가 쉽다. 왜 사용해야하는가? (한국 사람들에게만 특정되는 부분은 아니지만 한국에서 서비스 하는 회사/사람의 입장으로) 빨리빨리와 IT 강국의 맛에 익숙한 한국 사람들은 사이트가 조금이라도 느리면 바로 이탈해버리는 경우가 많다. 하지만 모든 애플리케이션들을 서버와 통신을 하며 로딩되는 시간이 필요할 수 밖에 없다. 이 때, 단순 흰색 화면만 노출된다면 많은 사람들이 렉먹은 줄 알고, 이탈하게 될 것이다. (일단 나부터) 스켈레톤 UI를 사용하게 되면 단순 로딩바를 돌리는 것 보다 이탈률이..

개발 코드 일부에 작은 에러가 나게되면 (warning으로 문구가 뜨고, 계속 진행이 되면 상관 없지만, 사실 이것도 문제) 다음 읽혀야 할 코드를 읽지 못해 전체 애플리케이션이 중단되는 경우가 있다. error boundary는 이러한 문제를 해결하기 위한 방법 중 하나이다. error boundary란? error boundary 컴포넌트로 감싸진 하위 컴포넌트 트리의 어디에서든지 js 에러를 기록하여 깨진 컴포넌트의 트리 대신에 fallback UI를 보여주는 react 컴포넌트이다. 이는 렌더링 도중 혹은 생명주기 메서드 등 전체 트리에서 에러를 캐치 할 수 있다. error boundary가 에러를 포착할 수 없는 경우 이벤트 핸들러 비동기 코드 (setTimeout 등) SSR (서버사이드랜더..

세상은 넓고, 내가 모르는 것은 많다. 얼마나 더 열심히 공부해야 많은 것을 알게되는걸까. IE가 서비스를 종료함에 따라 다양한 브라우저에 대하여 알아보던 중, 정말 좋아보이는 브라우저를 발견하였다. LT 브라우저 람다테스트에서 나온 LT 브라우저는 개발자들에게 꽤 사용해봄직한 브라우저가 아닐까 싶다. (나도 아직 당당하게 말 할 만큼 오랜 기간을 사용하지 않아서 확신이 어렵다.) https://www.lambdatest.com/lt-browser LT Browser for Live Mobile View Debugging | Perform Mobile Website Test Perform Live Mobile View Debugging of your website on different devices w..