혜르미온느

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

TMI. 자꾸 날리는 바람에 이 주제 관련 포스팅만 몇 번째 쓰는지 모르겠다 ㅠㅠ 리액트 공식 홈페이지에서는 create Potals를 다음과 같이 설명하고 있다. Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Potals는 부모 컴포넌트의 DOM 계층 구조의 밖에 존재하는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다는 의미이다. 이게 무슨 의미일까? 내 식대로 해석해보자면 다음과 같다. 게임을 많이 하는 편은 아니지만 RPG게임에서 미션을 받으면 [ㅇㅇ으로 이동하세요. 포털을 이용하면 더욱 빠릅니다]와 같..

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

빠름의 민족인 우리는 웹사이트가 조금만 느려도 매우 화를 내며 사이트를 이용하지 않는다.( = 는 나) 그래서 프론트앤드 개발자는 성능에 민감하게 반응하는 편이라 사이트가 무거운 것을 두고 볼 수가 없다.(이것도 나) 여러 코드를 통해 SPA를 개발하고 나면 웹팩을 이용하여 번들링 하고, 번들된 자바스크립트 파일을 html에서 불러와 실행하는 코스는 웹을 공부해본 사람이라면 몰라도 아는(?) 개념이다. 번들링이란 여러 작업 코드를 하나의 파일로 병합해주는 것을 의미한다. 그런데 코드가 점점 많아지면 번들 파일도 함께 커지면서 성능이 현저하게 느려질 수 밖에 없다. 여담으로 현직에서 보면 라이브러리를 사용하길 싫어하는 개발자들을 꽤나 만날 수 있는데, 많은 라이브러리 혹은 무거운 라이브러리를 사용하게 되면..

리덕스 공식 홈페이지에 가면 이런 말이 있다. A Predictable State Container for JS AppsGet Started 바로 자바스크립트를 위한 예측 가능한 상태의 저장소라는 의미이다. 프로그램의 몸집이 커질수록 여러가지의 상태와 컴포넌트들이 생겨나고, 이들이 서로 유기적으로 얽혀있어 거대한 복잡도를 가지게 된다. 리덕스는 이러한 복잡성을 해소해주고, 상태들을 예측 가능하게 해준다는 의미이다. 1. 단 하나의 상태를 갖는다. 하나의 객체(store) 안에 프로그램에서 필요한 모든 상태를 넣는다. 2. 예고없이 상태값을 변경하는 행위를 사전에 차단한다. (읽기 전용이다) dispatcher/reducer를 통해서만 객체를 수정할 수 있으며, 스테이트 값이 바뀔 때 마다 각 상태 사용처..

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'라는 이름의 이벤트를 생성하는 코드이다. ..

프론트앤드 상태관리 라이브러리는 여러가지가 있고, 그 중 리액트 상태관리 라이브러리의 대표주자는 아마 redux가 아닐까 한다. 그 뒤를 바짝 추격하는 친구는 mobx. 하지만 리액트를 만든 페이스북에서 또 만들어준 상태관리 라이브러리가 있는데, 이름하여 recoil이다. 리액트를 만든 곳에서 리액트를 위한 상태관리를 만들었다니 얼마나 리액트 친화적으로 만들었을까? 실제 사용 경험은 mobx밖에 없지만 redux와 mobx 그리고 recoil의 차이를 정리해보려고 한다-! 참고로 2022년 2분기 기준 근 1년간 추세는 다음과 같다. 리덕스가 압도적이며, 보이지는 않지만 리코일이 미미하게나마 상승곡선을 그리고 있다. https://www.npmtrends.com/recoil-vs-redux-vs-mobx..

원하는 기능을 구현하기 위하여 syntheticEvent를 체크하던 중 싹 한 번 정리했으면 좋겠다는 생각이 들어 포스팅을 작성한다. syntheticEvent는 한국말로 하면 합성 이벤트라는 뜻인데, 왜 react syntheticEvent가 생겨났을까? 이벤트 핸들러는 (사실 이벤트 핸들러 뿐 만 아니라 다른 것들도) 브라우저마다 이름이나 처리 방식등이 조금씩 다르다. 어떠한 브라우저에서 잘 동작하던 기능이 다른 브라우저에서는 오류나는 것이 그 이유이다. 이를 해결하기 위하여 리액트에서는 브라우저마다 서로 다른 이벤트를 모아 하나의 합성 이벤트로 제공해준다. 즉, 합성 이벤트를 사용하면 모든 브라우저에서 동일하게 동작하기 때문에 크로스 브라우징 문제를 해결할 수 있게된다. 즉, 다양한 브라우저들에서 ..