혜르미온느

코드를 작성하던 중 갑자기 onClick 처리의 늪에 빠져버렸다. 그래서 알아보는 시간 onClick에 화살표 함수를 사용해야하는 이유. 하단과 같은 형식으로 onClick 이후 화살표함수 없이 함수를 소환하게 된다면 button이 로드 되며, click 여부와 상관없이 해당 함수가 실행된다. // 잘못된 방법 버튼 따라서 onClick 사용의 올바른 방법은 다음과 같다 // 올바른 방법 {함수명()}}>버튼 버튼 onClick으로 변수 넘겨주기 구글에서 보던 중 생각보다 이 부분에 대한 질문을 많이 발견하였다. 결론적으로 말하면 onClick으로 변수를 넘겨주려면 화살표 함수를 사용하여 함수 호출 시 넘겨주어야 정상 동작한다. // 잘못된 방법 버튼 // 올바른 방법 {함수명('인자')}}>버튼 // ..

web api에는 history라는 개념이 있다. 이를 MDN에서는 다음과 같이 정의하고 있다. History 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다. 즉, 사용자가 브라우저에서 활동한 세션을 기록하고, 이 기록을 조작할 수 있는 방법을 제공한다는 의미이다. history의 속성과 메서드는 그 어떤 것도 상속하지 않으며, 종류는 다음과 같다. 속성 (property) history.length : 현재 페이지 포함, 세션 기록의 길이 (read only) history.scrollRestoration : 기록 탐색 시, 스크롤 위치 복원 여부 명시 history.state : 스택 최상단의 스테이트 값 반환. popst..

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

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이 띄워졌을 시, 모든 작업의 진행을 멈추게 된다. 이후 확인을 클릭하게 된다면 멈춰있던 작업을 순서대로 진행한다. 즉, 다음과 같..

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

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

JS는 내장되어있는 click, mouseover 등의 이벤트 뿐 만 아니라 커스텀 이벤트를 생성하여 핸들러를 할당할 수 있다. 이는 루트 혹은 특정 엘리먼트에 이벤트 핸들러를 달아 이벤트 리스닝을 통하여 사용된다. 이벤트란 JS 내에서 말하는 event란 어떤 HTML 요소에 대해 사건이 발생한다는 것을 의미한다. 이 사건은 'click'일 수도 있고, 'mouseover'일 수도 있으며, 그 외 다른 어떤 것일 수 있는데, 이 이벤트들은 js에 기본적으로 내장되어있다. 커스텀 이벤트 기본적으로 내장된 이벤트 외에 직접 이벤트를 생성할 수도 있는데, 이를 커스텀 이벤트라고 일컫는다. custom Event는 다음과 같이 생성한다. 다음은 'animalfound'라는 이름의 이벤트를 생성하는 코드이다. ..

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