혜르미온느

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 경고 ..

일단, 프리마커란? 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 - 자동 이스케이핑 // 문자 ..

애플의 WWDC22가 2022년 6월 6일부터 10일까지 개최되었다. (한국시간 7일 새벽 2시~) 2022 Apple Worldwide Developers Conference 말 그대로 개발자 컨퍼런스인데, 애플이 향후 진행할 전략들에 대하여 염탐할 수 있는 컨퍼런스이다. https://developer.apple.com/wwdc22/ WWDC22 Join the Apple worldwide developer community for an all-online WWDC22. developer.apple.com 이번 2022 WWDC에서 기대되었던 AR/VR/MR 등의 언급은 없었고, M2에 대한 이야기, 맥북에서 new 디자인에 대한 이야기 등이 언급되었다고 한다. 그 중에서도 웹 개발자로써 알고있으면 ..

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

며칠 전, 전 직장 사수와 이야기 하다가 나온 개념. 미래에 어떻게 될 지 모르겠지만 Shadow Dom이 뜰 수도 있고, 이대로 가라앉을수도 있고. 아니 무슨 말이 이렇게 애매모호해? 그리고 shadow Dom이 뭔데? 라고 생각하고 알아보던 중, 이 친구가 근래에 나온 개념은 아니라서 상식 차원에서 알고 있으면 좋을 것 같아 간단하게나마 정리해 본다. 먼저 DOM이란? (막상 적으려니 어떻게 정리해야할지 모르겠지만-) DOM은 Document Object Model의 약자이다. 여기서 Document는 웹 페이지/웹 문서를 의미한다. 웹 문서(document)는 objects들로 구성되어진다. 즉, DOM이란 HTML문서의 태그들이 JS가 이용할 수 있는 Object형식으로 모델링 된 것을 의미한다...

어느날 마주한 한 커밋 내용 'tree shaking'을 위한 수정. tree Shaking이 뭐지? Tree Shaking tree shaking이란 나무를 흔든다는 뜻을 그대로 적용시켰다고 할 수 있다. 나무를 흔들었을 때, 약한 나뭇잎들이 떨어지고 알짜만 남듯 실제로 사용하지 않은 코드들은 제하고, 사용되는 코드들만 빌드시킨다는 의미이다. 'build'에서 알 수 있듯이 이는 webpack에 들어있는 기능이다. 예를들어 import * from './utils'; 라는 코드가 있다. 하지만 import 한 곳에서 utils 안에 있는 것 중에 하나만 사용한다면? 굳이 모든 코드를 다 불러서 import 시켜야할까? 이러한 경우를 해결해 주는 방법이 tree shaking이라고 할 수 있다. 하지만 ..

실무에서 git 없이 일을 진행하는 회사는 거의 없다. 물론 git 외의 비슷한 서비스를 사용하는 곳들도 있겠지만 전세계적으로 git의 사용률이 압도적이다. git이란 무엇인가. 위키백과에 따르면 git은 다음과 같이 정의되어있다. 깃은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템이다. 또는 이러한 명령어를 가리킨다. - 위키백과 git을 써야하는 이유 git을 써야하는 이유를 나는 크게 두 가지로 볼 수 있다고 생각한다. 그리고 두 가지의 관점에서 볼 때, 위키백과는 git을 아주 잘 설명하고 있다고 생각한다. 버전 관리를 위해 여러 개발자들과 협업을 위해 먼저 깃은 컴퓨터 파일의 변경사항을 추적할 수 있는데, 이러한 기능을 통하..

회사에서 팀 내 기술 세미나를 듣던 중, 우연히 netflix oss라는 것을 접하게 되었다. N년 전, 넷플릭스는 기존 레거시 시스템을 모두 MSA로 바꾸는 혁신이 있었다고 한다. 실제 실리콘밸리에서는 기존 체계를 무너뜨리고 혁신하는 것을 netflixed라는 신조어로 표현할 정도로 넷플릭스는 변화의 중심에 서있다. 넷플릭스가 이러한 변화 가운데 MSA 시스템을 구성하는데 있어서 라이브러리를 만들었고, 그 시행착오를 정리하여 이것을 오픈소스로 공개하였다. Netflix Open Source Software. 이것이 줄여져 netflix OSS라고 불리우고 있다. 보통 포스팅을 하기 전에 여러 자료들을 찾아보고, 그 자료로 공부하여 나름 이해한 버전으로 적어보려하는데 왜인지 netflix oss는 모든게..