혜르미온느

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

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

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

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

console이란 JS를 실행 시, 실시간으로 에러 메시지 혹은 정의한 어떤 것들을 출력해주는 기능을 말합니다. 가장 많이 사용하는 대표적인 예는 console.log가 있어요. console API란 콘솔 API는 개발자가 사용할 수 있는 디버깅 기능을 제공하는데, 상단에서 언급한 변수의 값을 기록해주는 console.log도 그 예 중에 하나이며, 이 뿐만 아니라 다양한 메소드로 디버깅을 도와줍니다. 동작 방식은 브라우저마다 조금씩 다른 부분이 있지만 console API 명세에 일관적인 동작 방식이 정의되어 있어 최신 브라우저는 조금의 차이는 있겠지만 거의 같은 동작을 따르고 있습니다. console methods 1. console.assert() 첫 번째 매개변수가 false인 경우 메시지와 스..

누군가에게 받은 질문 하나. 다음 코드는 어떤 결과가 나올까요? var x = true; setTimeout(() => { x = false; }, 2000); while(x) { console.log('hello'); } 다행인지? 나는 정답을 바로 맞출 수 있었다. setTimeout setTimeout은 다음과 같은 형식으로 작성한다. 뜻은 5000ms 후에 "첫 번째 메시지"라는 문구를 콘솔에 띄워준다는 뜻이다. var timeoutID = setTimeout(function[, delay]); setTimeout(() => {console.log("첫 번째 메시지")}, 5000); 이렇듯 setTimeout은 설정한 시간이 흐른 후에 작성한 함수를 실행시켜주는 web API이다. 또한 setT..

나같은 경우에는 가끔 간단한 테스트를 하고 싶은데, VS 혹은 인텔리J를 열어 실행시키기가 귀찮을 때가 있다. (귀차니즘 ㅜㅜ) 그러할 때 사용하기 좋은 리액트 온라인 코드 편집기를 소개한다! 이는 리액트 기반으로 세팅되어있는 URL이며, 별도의 설치 및 실행 등의 과정이 없이도 리액트가 돌아가는 환경을 제공해준다. CodePen https://ko.reactjs.org/redirect-to-codepen/hello-world https://ko.reactjs.org/redirect-to-codepen/hello-world Redirecting to Codepen... ko.reactjs.org CodeSandBox https://codesandbox.io/s/new React - CodeSandbox ..

어느 날 들어온 요건 하나. 'nextTick 시점에서 실행해주세요.' vue를 익숙하게 써왔던 나는 vue 프로젝트에서 nextTick을 정말 요긴하게 잘 사용했었는데, 현재 react에서 진행하고 있는 프로젝트에 nextTick을 넣으려니 가만있어보자... 어떻게 표현하는 거였더라? 막히게 되었다. 그래서 정리해본 useEffect와 useLayoutEffect. 사실 실무에서는 useEffect를 압도적이게 많이 사용하긴 했는데, 둘이 어떻게 다른지 한 번 살펴보자- 먼저 nextTick이란 화면이 랜더링 될 때, js의 비동기성 특징으로 접근하고자 하는 DOM을 찾지 못하는 현상을 해결해주는 callBack 함수이다. updateMessage: function () { this.message = ..

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

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