혜르미온느

어느날 들어온 질문 하나. 전체 문구와 일부 단어를 드리면 해당 부분만 볼드처리해주실 수 있나요? 아마 될 것 같지만 확인은 한 번 해보겠다고 하고, 어떻게 풀어나갈까 생각했다. 생각해보니 검색창에 검색어를 입력할 때, 해당 부분만 표시된다거나 하는 코드라고 생각하면 쉬울 것 같아 어떻게 풀어내었는지 메모삼아 작성한다. ✔️ 정규식을 이용하자 // const text = '웹 애플리케이션 보안 완벽 가이드'; // const bold = '보안'; if (text.includes(bold)) { // 매치되는 단어가 있는지 확인한다. // true일 때, const regex = new RegExp(bold, "g"); text.replace(regex, "" + bold + ""); // 전체문장.re..

프론트엔드에서 많이 사용되는 lodash. 몇 년을 들어왔지만 막상 정의하려 하니 뭐라고 정의할지 모르겠는 막막함에 갇혔다.(아무도 정의하라고 한 적 없음) 그래서 정리해보는 로다쉬! 혹은 로대쉬? https://lodash.com/ Lodash _.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn lodash.com lodash란? 모듈..

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

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

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

어느날 마주한 한 커밋 내용 'tree shaking'을 위한 수정. tree Shaking이 뭐지? Tree Shaking tree shaking이란 나무를 흔든다는 뜻을 그대로 적용시켰다고 할 수 있다. 나무를 흔들었을 때, 약한 나뭇잎들이 떨어지고 알짜만 남듯 실제로 사용하지 않은 코드들은 제하고, 사용되는 코드들만 빌드시킨다는 의미이다. 'build'에서 알 수 있듯이 이는 webpack에 들어있는 기능이다. 예를들어 import * from './utils'; 라는 코드가 있다. 하지만 import 한 곳에서 utils 안에 있는 것 중에 하나만 사용한다면? 굳이 모든 코드를 다 불러서 import 시켜야할까? 이러한 경우를 해결해 주는 방법이 tree shaking이라고 할 수 있다. 하지만 ..

리덕스 공식 홈페이지에 가면 이런 말이 있다. 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인 경우 메시지와 스..

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

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