혜르미온느

화면에서 안 보이게 하는 스타일 속성에는 여러가지가 있다. 퍼블리셔님이 width: 1px, height: 1px인 div를 overflow: hidden 처리를 하여 잡아준 스타일이 있다. 1px인 정사각형을 화면에 노출시켜주고, 넘치는 부분을 잘라줬는데, 이상하게 화면에서는 렌더링 되었다고 인지하지 못한다. 그래서 알아본 화면에서 안 보이게 하는 방법 포스팅인데, 이제 overflow를 곁들인 이야기이다. overflow overflow는 사실 화면 노출에 관한 스타일은 아니고, 콘텐츠 요소가 블록의 크기를 초과할 때 처리에 관한 속성이다. 다만 퍼블리셔님이 작성해준 것 처럼 1px 크기의 정사각형에 overflow hidden을 통해 넘치는 콘텐츠 요소를 잘라주면 마치 화면에서 사라진 듯한 효과를 ..

윗분들의 슬랙 채팅 중 나온 Retry. 뭔지 모르겠어서 한참 헤매고, 한참을 검색했는데, Re-try였다. 분명 아는 단어인데, 왜 이해하지 못했을까. 사실 이럴때가 많은데, 나의 결론은 '정확하게 알지 못하기 때문에 인지에 시간이 걸린다.' 였다. 그래서 정리해보는 Retry-! Retry란? retry는 말 그대로 재시도를 의미한다. 가령 한 사이트에 접속햇는데, 페이지가 제대로 로드되지 않았다. 이 경우 사용자는 새로고침을 하거나 해당 사이트를 나가버릴 것이다. 이것은 사용자가 직접적으로 액션을 취하는 방법인데, 만약 사용자가 아무런 액션을 취하지 않는 경우 혹은 어떠한 액션도 취할 수 없는 경우라면 어떨까. 이러한 경우 알아서 재시도 요청을 보내는 것. 이것을 retry라고 한다. 보통 클라이언..

https://velog.io/@ansrjsdn/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%B6%94%EC%B2%9C-%EC%9E%90%EB%A3%8C-%EB%AA%A8%EC%9D%8C 프론트엔드 추천 자료 모음 사이트 MDN - 가장 유명한 MDN 모던 javascript 튜토리얼 - JS 튜토리얼로 정말 좋음. 타입스크립트 핸드북 - TS 공식문서 번역 본 웹팩 핸드북 - 캡틴판교님의 웹팩 핸드북 fontawesome - 다양한 ICON을 가져 velog.io 더보기 관심있는것 https://typescript-kr.github.io/ TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io htt..

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

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

옛-날에 리액트를 처음 접할 때, 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에 최초 작성된..

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

세상은 넓고, 내가 모르는 것은 많다. 얼마나 더 열심히 공부해야 많은 것을 알게되는걸까. 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..

일단, 프리마커란? https://hyermione.tistory.com/58 Freemarker(프리마커)가 대체 뭘까 [!이시중] 2021년 10월 19일 23:02에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/37 에서 확인할 수 있음. 근래 프리마커 (freemarker)라는 단어를 많이 들었다. 말하기 부끄럽지만.. 사실 처음 들.. hyermione.tistory.com assign - 변수할당 블럭 단위의 사용도 가능함 // ${name} abcdefghigklmnop // ${alphabet} attempt, recover - try-catch문 중첩문 사용 가능 // 시도 할 로직 // 실패 시, 시도 할 로직 autoesc - 자동 이스케이핑 // 문자 ..