분류 전체보기12 Oxlint 등 oxc 간단하게 소개 Oxlint최근 오랜만에 create vue를 사용해 Vue 기반 프로젝트를 생성하던 중, ESLint 설정 단계에서 Oxlint라는 새로운 옵션을 발견했습니다. Oxlint는 ESLint를 더 빠르게 실행할 수 있도록 돕는 실험적인 도구라고 소개되어 있었는데, 이에 흥미를 느껴 관련 내용을 간단히 조사해보았습니다.Oxlint란?공식 문서에 따르면, Oxlint는 다음과 같이 설명됩니다:Oxlint는 기본적으로 추가 설정 없이 오류가 있거나 불필요한 코드를 감지하도록 설계되었습니다.참고(INFO)현재 Oxlint는 ESLint를 완전히 대체하는 것을 목표로 하지 않습니다. 대신, ESLint의 속도가 워크플로에서 병목 현상이 될 때 이를 보완하는 도구로 작동합니다.Oxlint는 대규모 코드베이스에서도 몇.. 2024. 11. 29. Vue.js / computed의 변경 감지 방법 알아보기 React에서는 useEffect나 useMemo 등에서 deps를 등록하여 해당 값의 변경 유무를 판단하고, 그에 따라 내부 함수를 실행합니다. 반면, Vue에서는 computed나 watchEffect에서 deps를 별도로 등록하지 않아도, 내부에서 사용한 반응형 값이 변경되었을 때 이를 자동으로 감지하고 내부 함수를 실행합니다.deps를 등록하지 않고도 이러한 방식이 가능한 이유를 지금부터 내부 코드를 보며 알아보겠습니다.Vue의 변경 감지 방법Vue에서 ref를 사용해 반응형 값을 생성하면, 내부적으로 다음과 같은 클래스 형태로 동작합니다. 여기서 주목할 부분은 get 메서드의 this.dep.track()과 set 메서드의 this.dep.trigger()입니다.get 메서드에서는 해당 ref .. 2024. 11. 24. React-Router 기본 원리 알아보기 useNavigate를 중심으로 React-Router의 내부 코드 살펴보기 React-Router는 SPA(Single Page Application)를 멀티 페이지처럼 느껴지도록 만드는 라우팅 라이브러리입니다. 이번 글에서는 React-Router의 방대한 코드 중 페이지 이동에 사용되는 useNavigate Hook과 관련된 내부 동작을 중심으로 실제 구현을 살펴보겠습니다. 라우터 설정과 RouterProvider React-Router의 기본 사용법은 routes를 정의한 뒤 createBrowserRouter와 RouterProvider를 이용해 라우팅 기능을 프로젝트에 추가하는 것입니다. const routes: RouteObject[].. 2024. 11. 18. FSD (Feature-Sliced Design) 패턴 맛보기 근래에 원티드 프리온보딩 챌린지(2024-11) 강의를 듣다가 FSD 패턴에 대해 관심을 가지게 되었습니다. 이 패턴의 이론적인 개념에 대해서는 처음 접한 것은 아니지만 실제로 어떻게 적용해야 할지에 대해서는 감이 잘 잡히지 않았습니다. 이번 강의의 사전 과제를 FSD 패턴을 통해 적용해보며 맛보기를 시도했고, 그 과정에서 느낀 개인적인 생각을 공유드리려 합니다. 본 게시글에서는 FSD 패턴의 이론적인 개념도 어느 정도 다루겠지만, 특히 적용 과정에서 개인적으로 어려웠거나 고민이 되었던 부분에 대한 이야기가 주를 이룰 예정입니다. FSD 패턴이란? FSD 패턴에 대해 공식 문서에서는 Feature-Sliced Design (FSD) 는 프론트엔드 애플리케이션의 구조를 잡는 아키텍처 방법론 이.. 2024. 11. 13. 이전 1 2 3 다음
