Front End Develop Front End Develop

데이터가 중요한 세상에서 데이터를 효과적으로 검색하고 분석하는 능력은 비즈니스 모델에서 매우 중요한 요소가 되었습니다. Full-Text 검색은 사용자가 부분만 입력해도 전체 검색 결과를 낼 수 있는 기술입니다. Docker에서 Node.js 및 ElasticSearch로 Full-Text 검색을 사용하는 방법을 살펴 보도록 하겠습니다 : ) Full-Text란? Full-Text란 매우 방대한 양의 문서에서 텍스트를 검색하는 데 사용되는 방법입니다. 구글과 같은 검색 엔진은 텍스트를 분석한 다음에 개별 용어와 단어로 인덱싱을 하고 사용자의 검색 쿼리에 따라서 인덱스를 통해 가장 관련성이 높은 문서를 결과로 보여줍니다. ElasticSearch란? ElasticSearch는 매우 수준 높은 텍스트 검색을..

이벤트 전파를 막기 위해서 event.stopPropagation()을 많이 사용하곤 합니다. 주로, 모달과 같은 대화 상자를 만들 때 dimmed 영역(흐린 배경 영역)을 클릭하여 해당 모달을 감추고 싶은데, 그 영역을 포함하고 있는 컨텐츠를 클릭했을 때 이벤트 전파를 통해서 의도치 않게 닫혀버릴 때 사용할 수 있습니다. document.querySelector('html').addEventListener('click', () => { // 모달을 닫기 }); document.querySelector('#someMenus')?.addEventListener('click', (event) => { event.stopPropagation(); // 해당 요소 내부에는 도달하지 않도록 합니다. }); 당장은..

리액트를 사용함에 있어서 여러가지 performance 측면의 개선 방법에 대한 글들이 많습니다. 그 중에서 많이 사용되고 있는 React memo에 대한 이야기입니다. 리액트 메모를 사용하기 전에 체크해볼 수 있는 몇 가지 사항들은 다음과 같습니다. production 빌드를 실행 중인지 확인합니다. (개발 빌드는 매우 느립니다.) 상태를 렌더링 트리에서 불필요하게 상속받고 있는지 확인합니다. React DevTools Profiler를 실행해서 리렌더링 되는 부분을 확인해보세요. (Highlight 옵션을 통해서 확인 가능) 만약에 비용이 비싸다면, 컴포넌트 자체를 memo()로 감쌉니다. 그리고 필요한 함수에 useMemo도 추가합니다. 그 외에도, 심각하게 느린 컴포넌트 환경은 많습니다. 그 때,..

다크모드를 관리할 때 일반적으로 Context API를 통해서 전체 테마를 바꾸는 ThemeProvider 기법을 많이 사용하게 됩니다. 여전히 CSS-in-JS는 최근 몇 년동안 CSS 사양이 많이 발전하고 개선되고, 최신 브라우저들도 발전함에 따라(Internet explorer의 변명은 더 이상 충분치 않습니다.) ThemeProvider를 사용하지만 많은 사용 사례에서 많은 이점만 있는 것이 아니라는 것을 깨닫게 됩니다. 이모션을 사용한 ThemeProvider의 예시를 살펴보시죠. import * as React from "react"; import styled from "@emotion/styled"; import { ThemeProvider } from "emotion-theming"; co..

오늘은 랜딩페이지 디자인에 있어서 13가지 팁이 있는 좋은 글이 있어 소개 드리려고 합니다. 01. 텍스트가 있는 이미지에 색상 오버레이 사용 02. 공간의 여백을 과도하게 사용하지 말 것 디자이너는 공간이 있는 디자인을 좋아하며 웹에서 더 많은 공간을 확보해야 한다는 의견을 항상 듣습니다. 그러나 함께 속한 요소 사이에 과도한 공간이 있으면 눈은 연결된 요소 위로 쉽게 흐르지 않고 더듬거리고 빈 공간에서 헤매게 됩니다. 03. 무리하게 장황한 워딩을 사용하지 말 것 웹사이트 분석을 본 사람이라면 누군가의 관심을 끌 시간이 매우 적다는 것을 알고 있습니다. 요점을 파악하세요. 04. 텍스트만 있는 레이아웃도 시각적으로 매력적이어야 합니다 랜딩 페이지의 텍스트 전용 섹션은 디자인하기 어려울 수 있습니다. ..

최신 CSS 문법들은 여러 가지 들을 제공합니다. 물론, 하위 버전의 지원이 어느정도 되어야 하기 때문에 fallback으로 사용하거나, can I use 사이트에서 확인 후에 사용하는 것도 좋은 방법일 것입니다. 최근에는 media query로 체크해서 실용적으로 사용할 수 있는 여러 대안들도 나왔습니다. 따라서 ecma script의 최신 문법에 babel이 존재하듯이, css도 최신 문법에 따라서 작성할 수 있는 환경을 만들어서 더 좋은 아이디어를 낼 수 있는 방법을 모색하는 것 또한, 프론트엔드 개발자의 몫입니다. :is 선택자 기존에 다음과 같이 작성하던 코드를 개선 할 수 있습니다. /* 기존 */ .main_contents h1, .main_contents h2, .main_contents ..

ECMASCRIPT 2022가 나와있고, ES13에 대해서도 다루겠지만, 오늘은 ES12에서 잘 정착되어, 가장 유용하게 사용하고 있는 3가지 기능에 대해서 소개해보려고 합니다. 1. Logical Assignment Operator(논리 할당 연산자) 논리할당연산자는 논리 연산을 결합할 수 있습니다. // 컨벤션을 고수하는 방식 if (!a) { a = b; } // 또는 간략하게 a = a || b; a = a && b; a = a ?? b; // 새로운 방식 a ||= b; a &&= b; a ??= b; a &&=b 는 a가 참이면 b가 할당되고, a가 거짓이면 a가 할당됩니다. a ??= b 는 a가 null이거나 undefined 이면, b가 할당되고, 아니라면 a가 할당됩니다. 처음에는 이해..

Axios란 무엇인가? Axios는 브라우저 및 node.js에서 Promise 기반의 HTTP 클라이언트 입니다. JSON 응답을 자동으로 감지하고 일반 텍스트 대신에 response.json()과 같은 구문 없이도 객체를 반환하고 응답 상태 코드가 400 보다 큰 경우 자동으로 오류를 발생시켜주는 등 다양한 기능들이 있습니다. Axios Interceptor란 무엇인가? Axios 인터셉터는 요청을 보내거나 받을 때마다 라이브러리가 호출하는 함수입니다. "then" 또는 "catch"로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다. // request interceptors 사용 axios.interceptors.request.use((config) => { // request를 보내기 전에 사..