FE 개발에서 Single Source of Truth (SSOT) 알아보기 👍

현대 웹 애플리케이션 개발에서 데이터 관리의 복잡성은 날로 증가하고 있다.  특히 React와 같은 UI 라이브러리를 사용할 때, 점점 더 많은 데이터들을 FE에서 관리함에 따라, 데이터 흐름을 효과적으로 관리하는 것은 필수가 되었다.  이때 등장하는 개념 중 하나가 바로 Single Source of Truth (SSOT)이다. 나도 개인적으로 몇번 들어봤던 개념인데, 정확하게 이해하고 넘어가고자 글로 남겨보기로 했다 👍 이 글에서는 SSOT의 기본 개념, React 앱에서 이를 구현하는 방법, 그리고 장단점을 알아보았다. Single Source of Truth란?  Single Source of Truth는 간단히 말해 애플리케이션의 데이터가 단 하나의 신뢰할 수 있는 출처에서 관리된다는 것을 의..

• format_list_bulleted 웹 개발
• · 2025. 1. 2.
• textsms

FE 검색 구현에서 검색어와 타겟의 유사성 체크하기 - 레벤슈타인 거리 (Levenshtein Distance) ♥️ With 타입스크립트

프론트엔드 개발자로서, 우리는 사용자의 오타를 교정하거나 비슷한 단어를 찾는 기능을 종종 구현한다.  예를 들어, 검색 창에서 "javascipt"라고 입력하면 "javascript"를 추천해주는 기능은 흔하게 찾을 수 있다 👍(r이 빠졌는데도 찾아준다)이처럼 두 문자열의 차이를 계산하는 알고리즘 중 하나가 바로 레벤슈타인 거리(Levenshtein Distance)입니다. 이번 글에서는 레벤슈타인 거리란 무엇인지, 그리고 이를 타입스크립트로 구현하는 방법을 단계별로 알아보았다.리벤슈타인 거리란?리벤슈타인 거리는 두 문자열 사이의 최소 편집 거리를 계산하는 알고리즘이다. 여기서 [편집]은 다음 세 가지 작업을 의미한다.삽입 (Insertion): 문자 하나를 추가삭제 (Deletion): 문자 하나를 ..

• format_list_bulleted 웹 개발
• · 2024. 12. 28.
• textsms

[Javascript] 이벤트의 실행순서 파악하기 (onMouseDown은 onClick보다 먼저 실행된다 👻)

프론트엔드 개발을 할 때 많이 사용되는 이벤트들이 있다. 그중에 onClick 이벤트가 있는데, onClick은 사용자가 마우스로 무언가를 클릭했을 때 이벤트가 발생하도록 하는 것이다. 다만, onClick 이외에도 또 다른 마우스 클릭 관련 이벤트들이 있고, 때로는 더 섬세한 동작을 위해서 onMouseDown, onMouseUp과 같은 이벤트들을 사용할 수 있다. 여기서, 더 생각해볼만한 점은 이 셋이 모두 한번에 사용되었을 때이다. 세 개의 이벤트는 어떤 순서로 동작할까?  사용자가 UI 요소와 상호작용할 때 마우스 이벤트가 실행되는 일반적인 순서는 다음과 같다.onMouseDown사용자가 마우스 버튼을 누를 때 발생한다.onMouseUp사용자가 마우스 버튼을 놓을 때 발생한다.onClick마우스 ..

• format_list_bulleted 웹 개발
• · 2024. 12. 21.
• textsms

React Compiler를 직접 사용해보기 🎶 (with. next 15)

복잡한 React 컴포넌트를 작성할 때, 은근 골치아픈게 memo, useMemo, useCallback과 같은 최적화이다. 물론, 최적화에 신경쓰지 않는다면 안써도 되는 경우도 많지만.useEffect 내부에서 상태를 변화시키는 함수를 호출시키는 경우에 이 함수는 useCallback으로 감싸져야 하며, 때때로 조건부 렌더링 컴포넌트는 memo로 최적화 시켜야 무한 렌더링을 방지할 수 있는 등등 여러 경우에 이런 최적화 코드는 필수가 될 때가 있다. (lint가 함수를 새빨갛게 표시하는 순간, useCallback을 써야하는 상황이라는 걸 바로 알 수 있다.... 💧) 때문에!React 19 버전의 발표를 유심히 본 사람들이라면, React Compiler의 존재를 보고 매우 기뻤을지도 모른다.(그리..

• format_list_bulleted React
• · 2024. 12. 10.
• textsms

[javascript 안전한 이벤트] event.isTrusted를 활용해 이벤트 보안과 무결성 지키기

웹페이지에서 입력이나 이벤트가 일어날 땐, 민감한 사용자의 정보들이 포함될 수도 있다.때문에, 보안을 잘 지키는 것이 중요한데.이번엔 이벤트에서 보안을 잘 유지하기 위한 방법중 하나인 event.isTrusted에 대해서 알게되어 글을 남기고자 한다 👍(이벤트 이름부터 믿음직하다 🐈) event.isTrusted를 사용하면, 이벤트가 사용자에 의해 생성된 것인지 아니면 스크립트에 의해 인위적으로 생성된 것인지 확인할 수 있다.이를 통해 악의적인 스크립트 또는 의도하지 않은 코드가 이벤트를 트리거했는지 검증할 수 있다고 한다 🎨 event.isTrusted === true이벤트가 사용자의 직접적인 동작(예: 마우스 클릭, 키보드 입력)에 의해 발생한 경우event.isTrusted === false이..

• format_list_bulleted 웹 개발
• · 2024. 12. 1.
• textsms

bfcache를 사용하면, 브라우저 속도 최적화를 할 수 있다 ! 👻

웹 페이지에서 링크를 클릭하거나 브라우저의 '뒤로' 버튼을 누를 때, 페이지가 빠르게 로드되는 것을 경험한 적이 있으신가요? 뒤로가기, 앞으로가기 성능의 최적화를 위해서 브라우저가 제공하는 캐싱 기능이 있는데, 이것이 바로 BFCache이다! 이번엔 BFCache가 무엇인지 알아보고, 어떻게 활용할 수 있는지에 대해서 스터디를 진행했다. 👍 ✨ BFCache(Back-Forward Cache)란?BFCache(Back-Forward Cache)는 사용자가 브라우저의 '앞으로', '뒤로' 버튼을 눌렀을 때 페이지 로딩 시간을 단축해주는 브라우저의 캐시 기능이다. 일반적으로 페이지를 새로 로드하면 서버와 데이터를 다시 주고받아야 하지만, BFCache를 사용하면 기존에 로드된 페이지가 메모리에 저장되어 있..

• format_list_bulleted 웹 개발
• · 2024. 11. 20.
• textsms