혜르미온느

옛-날에 리액트를 처음 접할 때, react는 라이브러리라고 간단하게 이야기 한 적이 있다. 라이브러리와 프레임워크가 어떻게 다른지 왜 리액트가 라이브러리로 분리되는지 드디어 정리해본다. https://hyermione.tistory.com/27 [뷰쟁이의 리액트 시작하기] 리액트를 알아보자. [!이시중] 2021년 5월 21일 22:33에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/33 에서 확인할 수 있음. 글을 시작하며.. (첫 시작을 알리는 벅찬 잡담이 시작됩니다... 지루하신 분은 스크롤을. hyermione.tistory.com 먼저 나무위키에 소개된 프레임워크와 라이브러리의 정의를 정리해보자- 라이브러리 소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발..

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

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

며칠 전, 전 직장 사수와 이야기 하다가 나온 개념. 미래에 어떻게 될 지 모르겠지만 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이라고 할 수 있다. 하지만 ..

프론트앤드 개발을 하다보면 각 컴포넌트간의 데이터 교환을 해야하는 상황이 정말 많다. 가장 보통은 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..

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

요새 웹접근성에 관한 프로젝트가 한창이다. 웹 접근성을 처리하는 방법은 이미지에 alt를 추가하는 정도밖에 몰랐는데, 정말 복잡하고 세심한 처리가 필요함을 느끼고 있는 요즘. 이를 정리해보려한다. 웹 접근성(web accessibility)은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다. - 위키백과- ARIA 상단에 언급한 image에 alt 속성을 추가하는 것은 이미지를 설명하기 위한 대체 텍스트를 넣는다는 의미이다. 만약 시각적으로 이미지를 볼 수 없는 상황에서 alt에 설정된 속성을 읽음으로써 image를 파악할 수 있는 것이다. 현..