Lighthouse of FE biginner

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

들어가며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이 될 수 있습니다. 위 ..

Overview이번 게시글에서는 AI 제품을 활용해 MVP를 만들어본 과정을 정리하고 과정을 통해 느꼈던 저의 생각을 정리합니다. 글의 서두에서 노코드툴을 이용한 것이 아니며 AI 제품을 활용한다고 해도 개발 지식이 필요 하다는 것을 밝힙니다. MVP를 시작하기 전까지의 과정나의 여자친구는 미용사다. 매일 매출을 엑셀 장표에 입력하고 한 달 매출을 계산하는 것을 보고 매출을 관리할 수 있는 무엇인가를 만들어주면 좋겠다는 생각을 했다. 사실 이 생각은 작년 이맘때쯤 했던 생각이다.프론트엔드 개발자니깐 화면 개발은 쉽게 할 수 있을 것 이라고 생각을 했고, 서버는 Nest.js를 배워서 구현하면 된다고 생각했다.그렇게 막연하게 개발을 시작했지만 디자인에 재능이 없는 나에겐 아주 쉽지 않은 작업이었다.디자인이..

여러 Git 계정을 사용하고 싶은 경우가 있습니다. 이런 경우 ssh 키를 저장소 (Github, Gitlab, Bitbucket ...)에 등록해 사용할 수 있습니다. Windows에서 ssh를 사용해 여러가지 Git 프로필을 사용하는 법을 살펴보겠습니다.Linux나 mac OS에서도 마찬가지의 방식으로 ssh 키 생성, 깃 허브에 ssh키 등록, config 파일을 사용해 ssh 연결 과정을 Git 프로필을 사용할 수 있습니다. 키 파일 생성먼저 키 파일을 생성해주세요. 사용하실 이메일을 입력해 생성하시면 됩니다.ssh-keygen -t ed25519 -C "your_email@example.com" Ed25519 알고리즘을 지원하지 않는 레거시 시스템은 아래의 방식으로 생성해주세요. ssh-keyg..

Overview이번 포스팅에서는 합성 컴포넌트에 대해서 살펴보도록 하겠습니다.합성 컴포넌트는 컴포넌트를 조합하여 UI를 만드는 것으로 컴포넌트의 재사용성을 극대화 시키는 패턴입니다.합성 컴포넌트 패턴을 활용하면 여러가지 이점을 볼 수 있습니다 합성된 컴포넌트들은 독립적으로 유지되지만 서로 상태를 공유하며 긴밀하게 연결된다.비지니스 로직이 섞이지 않으며 비지니스 로직이 컴포넌트 단위로 잘게 쪼개진다.컴포넌트를 잘 쪼개고 상태 관리를 최적화 할 수 있어서 랜더링 최적화가 된다.예제를 살펴보며 합성 컴포넌트를 자세히 살펴봅시다. 예제일반 컴포넌트리스트를 구현해야 하는 상황이 발생 했습니다. 초기에는 단순히 라벨만 노출시키면 되는 단순한 리스트입니다.type Props = { items: Item[];};co..

Overview자바스크립트는 소스코드를 4가지 타입으로 구분한다.전역 코드전역에 존재하는 소스코드, 전역에 정의된 함수, 클래스 등 내부 코드는 포함되지 않는다.전역 스코프를 생성하며 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다.함수 코드함수 내부에 존재하는 소스코드, 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함하지 않는다.지역 스코프를 생성하며 지역변수, 매개변수, arguments 객체를 관리한다. 생성한 지역 스코프를 전역 스코프에서 시작하는 스코프 체인의 일원으로 연결한다. 함수 코드가 평가되면 함수 실행 컨텍스트가 생성된다.eval 코드: eval 함수에 인수로 전달되어 실행되는 소스코드모듈 코드: 모듈 내부에 존재하는 소스코드, 모듈 내부의 함수, 클래스 등 내부 코드는 포..