혜르미온느

누군가에게 받은 질문 하나. 다음 코드는 어떤 결과가 나올까요? 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'라는 이름의 이벤트를 생성하는 코드이다. ..

센트리를 보다가 발견한 오류. 무료버전을 쓰고 있어서 월 5,000건이 전부인데, 주말이 지나고 오니 한 오류에서만 3,700건을 수집해버렸다...! 용량이 있었는데, 없었습니다. 이 오류의 특이사항은 모두 Yeti에서 수집되고 있다는 점-! Yeti를 처음 들어본 나는 내 친구 예지를 생각하고 말았다.. 하여 알아보는 Yeti란 무엇인가. Yeti를 알려면 먼저 웹문서에 대하여 정리하는 것이 필요하다. 웹문서란 웹문서란 어려울 것 없이 웹 상에 존재하는 웹 페이지들을 의미한다. (페이지 = 문서) 우리가 검색했을 때, 포털 사이트들에서 보여주는 검색 결과가 웹문서들이라고 생각하면 된다. 이 중 포털사이트 NAVER는 로봇 프로그램이 인터넷을 자동으로 돌아다니며, 국내외 넓은 웹상에 뿌려진 웹문서들을 수..

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

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

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

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

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

나같은 경우에는 가끔 간단한 테스트를 하고 싶은데, 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 ..

[!이시중] 2021년 11월 20일 12:43에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/62 에서 확인할 수 있음. react CRA는... 정말 모든 게 다 있다. 코딩을 하던 중 eslint 규칙을 한 곳에서 설정해야겠다.라고 생각이 들어 package.json을 찾아보니, 웬걸. react CRA는 eslint까지 설정하고 있었다. 덕분에 손 안 대고 코 풀 정도로 쉬운 설정이 가능하였다. 보통은 명령어를 통하여 많이 설치하곤 한다. npm i eslint https://www.npmjs.com/package/eslint eslint An AST-based pattern checker for JavaScript.. Latest version: 8.18.0, la..