혜르미온느

문득 useEffect return과 beforeunload의 실행 순서가 궁금해져서 직접 실험해보았다. useEffect의 개념과 beforeunload 개념을 안다는 조건으로 포스팅을 작성해본다. ✔️ useEffect 관련 링크 https://hyermione.tistory.com/56 [뷰쟁이의 리액트 시작하기] react useEffect로 랜더링 상태 관리하자 [!이시중] 2021년 11월 1일 22:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/44 에서 확인할 수 있음. react에서 hook을 도입하면서 제일 좋아진 이점은 바로 함수형 컴포넌트 + 상태 관리가 한 번 hyermione.tistory.com https://hyermione.tistory...

이번 배포건에 포함되는 업무 중 하나는 개선된 ui를 적용하는 것이었다. 정말 단순하게 생각하면 디자인 -> 퍼블리싱 -> 개발로 나는 변경된 마크업만 적용시켜주면 되었다. 근데 여기서 lottie가 사용되는 조건이 있었다. 버튼을 눌러 레이어를 오픈한다. 레이어 닫기 버튼이 lottie로 animation 동작을한다. 레이어 닫기 버튼이 유지된다. 레이어가 닫힐 때, lottie로 animation 동작을 한다. 의 시나리오를 가지고 있었다. 여기서 문제가 발생했는데, 레이어가 열고 닫힐 때마다 로띠를 실행시켜주려면 play 후, onComplate 되었을 때 destroy를 시켜주어야한다. 이때, destroy되며 lottie svg가 사라진다. (json을 svg형식으로 랜더링함) 멈추어있는 버전의..

윗분들의 슬랙 채팅 중 나온 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..

가끔 개발을 진행하며 데브툴에 뜨는 에러를 보다보면 clean-up이라는 경고가 표기된다. 다행스럽게도 '경고'이기 때문에 기능에는 문제가 없으나 잡고가는게 당연히 좋을 것이다. 하여 clean-up이 무엇을 뜻하는 에러인지 정리해보고자한다. ✔️ Clean-up 경고 문구 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. ✔️ Clean-up 경고 ..

TMI. 자꾸 날리는 바람에 이 주제 관련 포스팅만 몇 번째 쓰는지 모르겠다 ㅠㅠ 리액트 공식 홈페이지에서는 create Potals를 다음과 같이 설명하고 있다. Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Potals는 부모 컴포넌트의 DOM 계층 구조의 밖에 존재하는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다는 의미이다. 이게 무슨 의미일까? 내 식대로 해석해보자면 다음과 같다. 게임을 많이 하는 편은 아니지만 RPG게임에서 미션을 받으면 [ㅇㅇ으로 이동하세요. 포털을 이용하면 더욱 빠릅니다]와 같..

[!이시중] 2021년 11월 1일 22:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/44 에서 확인할 수 있음. react에서 hook을 도입하면서 제일 좋아진 이점은 바로 함수형 컴포넌트 + 상태 관리가 한 번에 된다는 점이었다. hook에 대한 자세한 사항은 다음 포스팅을 읽으면 좋을 듯 하다 -! https://yuniel.tistory.com/42 [뷰쟁이의 리액트 시작하기] 리액트 hook 이란? React는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 있습니다. 그 중 클래스형 컴포넌트를 사용했던 이유는 코드 내의 상태 변화나 라이프 사이클(componentDidMount 등)을 사용하기 위함이 yuniel.tistory.com 아무튼 개인적으로 그..

[!이시중] 2021년 10월 28일 21:55에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/43 에서 확인할 수 있음. 뷰쟁이가 react를 처음 맞이하고 가장 적응이 안 되었던 부분은 바로 변수의 선언이다. 우선 react hook에서는 useState를 통하여 변수를 선언하고, 초기화시키고, 변형시킬 수 있다. 물론 흔히 아는 방식처럼 const test = ‘테스트입니다’; 라는 식으로도 선언과 초기화를 시킬 수 있지만, 이는 변형시킬 수 없다는 문제가 있다. 뒤의 글을 읽으면 자연스레 이해하게 되리라. 먼저 useState를 쓰는 형식이 있다. const [ 변수명, 변수정의함수 ] = useState(기본값); const [ count, setCount ] = ..

JS 공부를 하면서 혼자 네이버 쇼핑 따라 하기를 진행하던 중 슬라이더 구현에서 멈칫하게 되었다. 네이버처럼 자연스러운 기능을 구현하려 하니 코드가 점점 꼬이는 기분이 들어서이다. https://hyermione.tistory.com/category/Challenge/%EB%84%A4%EC%9D%B4%EB%B2%84%EC%87%BC%ED%95%91 'Challenge/네이버쇼핑' 카테고리의 글 목록 해르미온느같은 혜르미온느 hyermione.tistory.com 여러 슬라이더 관련 오픈 소스를 참고하려고 알아보던 중, 네이버에서 직접 사용하고 관리하는 Flicking에 대하여 발견하게 되었다..! 두둥 호기심이 생겨 간단하게 정리한 바를 포스팅으로 남겨본다-! Flicking 내가 이해한 바가 맞다면, ..

센트리를 구축하고 나면 생각보다 많은 에러들이 수집된다. 오류를 조금 보고 싶다 혹은 할당량 제한으로 인하여 적게 받아야만 한다 등 오류를 줄이고 싶은 경우가 많은데, 사실 제일 베스트는 모든 오류를 처리하는 방법이다-! 만, 쉽지 않다. 그럴때 말 이 기능을 사용하면 말 그대로 오류를 적게 수집할 수 있다. https://docs.sentry.io/platforms/javascript/configuration/options/#sample-rate Basic Options for JavaScript Learn more about how to configure the SDK. These options are set when the SDK is first initialized, passed to the in..