혜르미온느

한때 뷰쟁이었던 나는 작년을 기점으로 vue를 청산했다. 하지만 vue로 작업한 세월이 아직은 더 길어서인지 주변 지인들은 모두 뷰쟁이이다. 오랜만에 만난 그들과의 대화 중에 가장 화두가 된건 vue3. vue3를 직접 다룬적은 없지만 알음알음 들었던 것과 지인들의 이야기를 듣다보니 한 번 정리해보면 좋겠다는 생각이 들었다. (..만! 이미 너무 정리를 잘 해주신 분들이 많으시고, 나는 vue를 기본 지식 정도로만 체크하려고 했기 때문에 링크만 첨부하였다) ✔️ 참고링크 https://joshua1988.github.io/web-development/vuejs/vue3-as-default/ Vue 3, 기본 버전이 되다 22년 초에 일어난 Vue.js 진영의 큰 변화를 살펴봅니다. 라이브러리 기본 버전이..

create portal은 정말 도움이 될까? create portal을 사용하는 가장 특징, 이유는 특정 컴포넌트를 부모 노드 밖에 존재하는 노드에서 랜더링하기 위함이다. 이를 통한 가장 큰 이점은 DOM 트리를 정리할 수 있다는 점이다. DOM 트리를 왜 정리해야할까? 네크워크 효율성 및 성능 부하 많은 노드를 필요로 하는 DOM트리는 사용자가 페이지를 처음 로드 할 때, 필요로 하지 않는 트리까지 그려야하기 때문에 많은 데이터 비용을 필요로 하여 결과적으로 로드 시간이 증가한다. 런타임 성능 사용자와 스크립트가 상호 작용을 할 때는 노드의 위치와 스타일을 지속적으로 계산한다. 따라서 복잡한 트리를 가지고 있으면 체크해야 하는 노드가 많아지고 이는 결과적으로 렌더링 속도의 저하가 된다. 메모리 성능 ..

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

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

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

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

2022년 3월 말에 리액트 18이 출시되었다. 근 1년만의 첫 업데이트였다. 리액트 자체를 익히는데 급급했던 나에게는 큰 이슈가 아니었으나 지금 생각해보니 업그레이드 된 기능을 인지하고, 적용하는 것도 좋을거라는 생각이 들었다. 참고 링크들만 수집해두고, 하나씩 하나씩 꺼내어 공부해보아야겠다. ✔️ 참고링크 https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022 GitHub - facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces. A declarative, efficient, and flexi..

이전에 custom hook을 만들며, hook의 특징을 간략하게 포스팅 한 적이 있다. (https://hyermione.tistory.com/89) 많은 특징들과 규칙이 있었는데, 그 중 하나인 hook이 컴포넌트 최상위에서 로드 되어야 하는 이유에 대하여 정리해 보려고 한다. ✔️ Hook에 대한 궁금증 한 컴포넌트에서는 여러개의 hook을 사용할 수 있음은 우리 모두가 알고 있다. 그렇다면 여러가지 hook 중에서 어떤 state가 어떤 useState에 해당하는지 등에 대한 것은 어떻게 알 수 있는지 궁금해 해 본 적이 (나는 없지만...) 있는가? 모든 랜더링에서 hook의 호출 순서는 동일하고, 리액트는 hook이 호출되는 순서에 의해 전적으로 의지하고 있기 때문에 가능한 것이다. ✔️ Ho..

가끔 개발을 진행하며 데브툴에 뜨는 에러를 보다보면 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 경고 ..

경력의 대부분을 Vue로 보내다가 react 잠깐 react Native 잠깐 발을 담구었던 나는 리액트에 대해서 아직 모르는게 한 가득이다. 그 중 리액트의 꽃(내 마음대로)인 Hook. 커스텀 훅을 작성하여야 하는데, hook을 Hook답게 사용하는 방법에 대하여 궁금해졌다. 참고로 나는 리액트도 뷰처럼 쓰는 것 같다ㅠㅠ ✔️ Hook의 규칙 최상위 레벨에서만 호출하기 hook은 반복문, 조건문 또는 중첩된 함수 내에서 hook 호출이 금지된다. 그래야 컴포넌트가 랜더링 될 때마다 동일한 순서로 Hook이 호출되는 것을 보장할 수 있다. React 함수 내에서 호출하기 JS 함수 내에서 호출은 불가하다. ✔️ Hook의 특징 함수 앞에 use를 붙인다. JSX가 아닌 [] 혹은 {}의 형식으로 ret..