혜르미온느

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

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

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

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

프론트앤드 개발을 하다보면 각 컴포넌트간의 데이터 교환을 해야하는 상황이 정말 많다. 가장 보통은 props로 하위 컴포넌트에 데이터를 전달해 주는 방식을 택할 것이다. 다만 전달하려는 데이터가 컴포넌트의 하위의 하위에서만 쓰인다면 props는 한 곳에서 사용되기 위하여 여러개의 컴포넌트를 거쳐야 할 것이다. 혹은 전달하려는 데이터가 여러 컴포넌트에서 필요로 하는 정보라면 같은 데이터를 각각의 컴포넌트에 중복적으로 내려주어야 할 것이다. 물론 상태관리 시스템을 이용하여 데이터를 저장하는 것도 하나의 방법이지만, 이러한 불필요한 공수를 줄이기 위해 react에서 직접 기본기능으로 제공하는것이 있었으니 바로 react context이다. - context 사용 시, 장점 react context를 이용하면 ..

[!이시중] 2021년 11월 24일 21:40에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/65 에서 확인할 수 있음. 개발을 하다 보면 잘 나가다가 어느 순간 막힐 때가 있다. 갑자기. 지난 토요일의 나는 토이 프로젝트를 진행하며, 네이버 api 중 영화 검색 api를 연결하려고 시도했다. 이제 와서 왜였을까? 라고 생각하지만 그 당시에 갑자기 api를 연결해야 하니까 express를 설치하자!라는 생각이 들었다. 개발을 잘하시는 분들은 그게 왜?라고 생각하실 수도 있지만 나는 node.js를 통하여 백엔드를 구현해 본 적도 없을뿐더러 이미 다른 곳에서 제공하는 api들은 axios를 통해서 데이터를 잘 불러오고 있었기 때문이다. https://hyermione.tis..

프론트엔드를 접해보신 분들은 누구나 다음과 같은 고민을 해보신 적 있을겁니다. 상태관리 여기서 관리 대상인 상태란 무엇일까요? 개인적으로 고민했을 때에는 언제든지 변경될 수 있는 데이터를 '상태'라고 일컫는 것 같아요. 변경의 여지가 있으니 관리를 해 주어야 하는 데이터가 되니까요. 그럼 여기서 프론트엔드적 측면에서 관리해야하는 데이터는 크게 두가지가 있습니다. 서버 데이터와 클라이언트 데이터. 서버에서 받는 데이터의 특징 클라이언트와 다른 공간에서 관리되어짐 get/update 과정에서 비동기 API가 필요함 불특정 다수와 공유되는 데이터로 사용자가 의도하지 않은 변경들이 일어날 수 있음 클라이언트에서 받는 데이터의 특징 클라이언트 소유의 공간에서 관리되어짐 비동기적 API가 필요하지 않음 다른 사람과..

[!이시중] 2021년 10월 26일 21:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/41 에서 확인할 수 있음. 지난번 프론트에서 에러를 로깅하는 방법 중 하나인 sentry 관련 포스팅을 진행하며, 프론트엔드에서 에러 처리하는 방법에 대하여 정리해 봐야겠다는 생각이 들었다. 막상 정리하고 보니 너무나 기본 문법들이었는데, 안일한 마음에 나도 많이 놓치고 있었던 부분들이었다. 다만, 프론트엔드 내부에서의 일시적인 에러 처리이며, 에러 관련 데이터 수집 등에는 다소 비효율적이라는 한계가 있다. https://hyermione.tistory.com/5 프론트엔드에서 에러 처리하기 - SENTRY [!이시중] 2021년 10월 23일 23:24에 최초 작성된 글로써 원..

일반 과목들을 공부할 때, 개념서를 먼저 훑는 편이다. 한 번 훑는 것에 그치지 않고 몇 회독씩 반복하며 공부하는 타입이라 대학 다니면서 전공과목 시험공부도 실습보다는 전공서적을 몇 번씩 읽으며 준비하곤 하였다. 그런 방법으로 꽤 좋은 성적을 받으며 다녔다. 막상 사회에 나와보니 무조건 개념서 회독이 답이 아님을 하루하루 느낀다. 개념이 중요하지 않다는 말은 절대 아니고, 개념만 이해했을 때 분명 한계가 있다는 뜻인데, 이게 개발에서는 더욱 많이 적용되는 것 같다. 기능의 비즈니스 로직을 구현하는 알고리즘에는 단순 개념의 100 회독보다는 10번의 노하우가 더 유용할 때가 많기 때문이다. 그런 면에서 '백문이 불여일견'이라는 말을 공부법에 적용시키는게 좋다고 생각했는데, 직접 부딪히며 코딩해보는 방법이다..

JavsScript에서 물음표를 사용하는 사례가 몇 가지 있는데, 예를 들어 삼항연산자 / null 병합 연산자 등, 그 중에 하나가 바로 optional chainig 이다. 나는 사실 옵셔널 체이닝이라는 단어를 잘 몰라서 물음표 연산자라고만 생각했었는데, 이게 잘 사용하면 코드가 간결해지는 효과가 탁월한 것 같다. 예를들어 깊이 중첩된 오브젝트 내의 한 데이터에 접근한다고 하자. 그럼 다음과 같이 표현하는게 일반적인데, let nestedProp = obj.first && obj.first.second; 이 뜻은 obj.first.second에 접근하기 전에 obj.first가 존재하는지 먼저 확인하라는 의미이다. 만약 다음과 같이 코드를 작성하게 된다면 obj.first가 없을 때, 에러를 발생시키..