Lighthouse of FE beginner

개요요즘 소프트웨어 개발에 있어서 오픈소스는 빠질 수 없는 필수 불가결한 존재가 됐습니다. 웹 프론트엔드 개발에 있어서 주로 사용하는 React도 오픈소스, 상태 관리를 위해 사용하는 Zustand, Jotai, Redux 라이브러리도 오픈소스, 심지어 배포를 위한 서버의 OS로 사용하는 Linux도 오픈소스 입니다. 최근에는 오픈소스 기여 경험이 취업의 스펙이 되는 등 오픈소스 생태계가 정말 활발해지고 있는데, 여러분들은 오픈소스를 어떻게 사용 중에 계신가요? 최근 프론트엔드 개발자라면 누구나 한번은 사용해봤을 라이브러리인 eslint-config-prettier 플러그인이 해킹되는 충격적인 사건이 발생했습니다. 또 프론트엔드의 인기 프레임워크인 Next.js에서 보안 취약점이 발견이 되는 등 오픈소스..

들어가며Micro Frontend는 하나의 Host App과 여러 개의 Remote App으로 구성되어 있습니다.개별 Remote App의 라우팅은 당연하며 Host App을 통해 통합된 여러 App의 라우팅도 자연스럽게 발생해야 합니다. 각 App의 라우팅이 자연스럽게 발생하기 위해 각 App은 독자적인 라우터가 존재하며, 이 라우터들을 통합 하기 위해 Host App의 라우터가 필요하고, Host App은 통합된 App의 라우팅을 이어줄 수 있는 브릿지 역할을 해야합니다. 추상적으로 통합이지만 물리적으로는 각 App이 각자의 라우터를 소유하고 있습니다. 4개의 MFA 애플리케이션을 예시를 들어보면 다음과 같습니다. Host App은 CMP, Openstackit, PaaS, App을 통합하고 있습니다..

들어가며Vite는 번들러로 Rollup을 사용합니다.Rollup에는 manualChunks라는 옵션이 존재하는데, 해당 옵션을 사용하면 chunk 파일을 전략적으로 분리할 수 있습니다. 왜 chunk파일을 분리해야 할까?manualChunks를 사용하지 않고 빌드를 할 시 프로젝트에서 사용하는 모든 라이브러리 파일이 하나의 chunk파일로 번들링 되어 떨어집니다. 이 경우 프로젝트가 커질수록 사용자가 플랫폼에 접근할 때 리소스를 다운로드 받기 위해 기다리는 시간이 기하수급적으로 늘어납니다. 이 경우 manualChunks 기능을 활용해 라이브러리 단위로 chunk 파일을 분리하기만 해도 초기 접근 당시 필요한 파일만을 불러와 로딩 시간을 단축할 수 있어서 사용자 경험에 유리합니다. chunk 파일..

들어가며이번 사이드 프로젝트를 진행하며 Frontend 배포는 Vercel을 이용했습니다.프레임워크를 Next.js를 사용했고 Vercel에 배포 시 가장 간단하게 배포할 수 있다는 장점이 있었기 때문입니다.배포 후 당연히 Function Region을 변경했다고 생각을 했었는데, 프로덕션 환경에서의 프론트엔드가 너무 느렸습니다. 여러가지 확인해본 결과 프로젝트의 Vercel Function Region이 기본 값인 North America의 Washington, D.C로 설정이 되어있었습니다. 그럼 왜 Function Region을 변경해야 하는지,변경하는 법과 변경 전과 후 어떤 차이가 있는지 살펴보도록 하겠습니다. ssalon-de 프로젝트 인프라 구성ssalon-de 프로젝트의 서버는 AWS EC..

OverviewReact를 사용해 Web Application을 개발한다면 메모이제이션(Memoization) 이라는 단어는 익숙한 단어입니다.이번 글에서는 메모이제이션이란 무엇인지, 메모이제이션을 통해 해결하려는 것은 무엇인지 살펴보겠습니다. 메모이제이션(Memoization)메모이제이션의 사전적 의미는 컴퓨터 프로그램이 복잡한 함수 호출의 결과값을 함수에 저장해놓고, 같은 입력이 반복될 때 저장한 값을 반환하도록 하여 속도를 높이는 최적화 기술입니다. 쉽게 말하면 값 비싼 연산으로 인해 도출된 값을 캐싱한 후 같은 Input일 경우 캐싱된 값을 반환한다고 생각할 수 있습니다. 그럼 이 개념이 왜 React에 적용이 되는 것 일까요? React, Component, 살펴보기React를 사용해 Web A..

들어가며React 애플리케이션은 컴포넌트 단위로 만들어집니다.다양한 컴포넌트 중에서도 폼(Form) 컴포넌트가 존재합니다. 폼 컴포넌트는 사용자에게 값을 입력 받아 요청을 처리할 수 있는 중요한 역할을 하는 컴포넌트 입니다. React에서 폼 컴포넌트를 다루기 위한 방법은 크게 두 가지가 있습니다. 제어 컴포넌트, 비제어 컴포넌트 입니다.그럼 제어 컴포넌트는 무엇이고, 비제어 컴포넌트는 무엇일까요?이번 게시글에서는 제어 컴포넌트, 비제어 컴포넌트의 차이를 알아보고 react-hook-form 라이브러리를 사용해 비제어 컴포넌트를 살펴보도록 하겠습니다. 잠깐! JavaScript 없이 form을 다루는 법을 아시나요?JavaScript를 사용하지 않고 폼을 다루는 방법을 아시나요? 최근 면접에서 해당 질문..

ViteVite는 프로젝트 전체를 번들링하지 않고도 빠른 개발 서버를 제공합니다.Vite가 등장하기 전 많이 사용된 번들러인 Webpack은 개발 서버를 실행할 때 프로젝트 전체의 의존 그래프를 해석하고 이를 번들링한 결과물을 브라우저에 전달합니다. 반면, Vite는 Native ESM(ECMAScript Modules)을 활용하여 브라우저가 직접 모듈을 해석하도록 위임하는 방식으로 동작합니다. 예를 들어, Webpack은 진입점부터 모든 의존성을 분석해 번들링을 수행한 뒤 이를 메모리에 저장하고 개발 서버를 통해 서빙합니다. 반면 Vite는 콜드 스타트 시점에만 esbuild로 라이브러리를 사전 번들링하고, 이후에는 소스 코드를 ESM 형태로 그대로 브라우저에 전달합니다. 이로 인해 Vite는 번들링 ..

들어가며사이드 프로젝트를 진행중 매출을 등록할 때 필드가 너무 늦게 뜨거나 어떤 경우 데이터가 안나온다는 피드백을 받았습니다.이번 포스팅에서 해당 케이스를 react-query의 prefetch를 통해 해결한 과정을 남겨보겠습니다. 위 사진에서 확인할 수 있듯이 매출 화면에 접근할 때 마다 매번 필터 데이터를 호출하고 있습니다. 데이터의 성격문제가 되는 데이터들은 매출을 등록할 때, 등록된 매출을 필터링할 때 사용하는 사용자 정의 메타데이터 입니다.즉 자주 변경되지 않는 데이터이며, 사용자에 의해 데이터의 변형이 거의 일어나지 않는 데이터 입니다. 기존 구현에서는 해당 데이터를 필요로 하는 곳에서 react-query 를 통해 서버 상태로 관리하고 있었습니다.즉 해당 데이터를 사용하는 화면에 접근할 때 ..

요약엄격 모드- 엄격 모드를 사용할 경우 globalThis는 undefined를 가리킨다. 함수 선언문- 함수 선언문에서의 this는 전역 객체를 가리킨다. 단 객체의 메서드가 함수 선언문으로 작성된 경우 this는 해당 객체를 가리킨다. 화살표 함수- 화살표 함수는 this 바인딩이 존재하지 않는다. - 화살표 함수에서 사용하는 this는 화살표 함수가 정의된(코드의 위치) 스코프의 this를 캡처한다. - 이 말을 다시 말하면, 화살표 함수에서 사용하는 this는 화살표 함수의 상위 스코프의 this를 가리킨다.  - 객체의 메서드가 화살표 함수로 선언된 경우, this는 객체가 정의된 위치의 상위 스코프를 가리킨다. 여기서 상위 스코프는 객체 자신이 아닌 객체가 정의되어 있는 스코프를 말한다. -..

Micro App 간의 공통 관심사가 있고, 해당 관심사를 서로 공유해 하는 케이스 Micro Frontend Architecture에서 Micro App은 느슨하게 결합됩니다. 한 개의 Shell(Host) App과 3개의 Remote App이 있습니다. 각각의 Micro App은 특정 App에 의존하지 않고 각각의 포트에서 홀로 구동(Standalone)이 될 수 있습니다. Module Federation으로 통합될 시 구동 중인 Remote App들은 Shell App에 런타임에 통합됩니다. 이때 Remote App은 반드시 Remote App의 역할만 할 수 있는 것은 아닙니다. Remote App은 특정 모듈을 expose 하여 다른 Remote App의 Host App이 될 수 있습니다. 위 ..