xeunnie

🎭 Mocking 및 Spying: 테스트에서 가짜 데이터와 동작을 조작하는 법테스트에서 Mocking과 Spying은 필수적인 개념입니다. 특히, 외부 API 요청, 데이터베이스 호출, 의존성 있는 함수 등의 실제 동작을 대체하여 테스트를 수행할 수 있도록 도와줍니다.📌 1. Mocking이란?Mocking은 특정 함수나 모듈의 동작을 가짜(mock)로 대체하는 기술입니다.✔️ 외부 API 호출 없이 테스트 가능✔️ 실제 데이터베이스가 없어도 비즈니스 로직 테스트 가능✔️ 실행 시간을 줄이고, 테스트의 신뢰성 향상Mocking 예제: Jest를 활용한 API 요청 Mockingimport { render, screen } from "@testing-library/react";import axios ..

React Testing Library(RTL) 톺아보기! 🧪 “컴포넌트가 사용되는 방식 그대로 테스트하라!” React Testing Library(RTL)은 사용자 관점에서 테스트를 작성할 수 있도록 돕는 라이브러리입니다.단순히 컴포넌트가 렌더링되는지 확인하는 것이 아니라, 사용자의 행동을 고려하여 테스트를 작성하는 것이 목표입니다.1️⃣ React Testing Library(RTL)이란?💡 RTL은 단순히 UI의 DOM 요소를 확인하는 것이 아니라,“사용자가 웹을 실제로 사용할 때처럼 테스트를 작성하는 것”을 목표로 합니다. 💡기존의 Enzyme과 비교하면?✅ Enzyme: 컴포넌트의 내부 구현을 중점적으로 테스트✅ RTL: 사용자의 행동을 기반으로 테스트✔ Jest vs RTL 비교항목Je..

프론트엔드 테스팅 Jest 톺아보기! 🧪  프론트엔드 개발에서 테스팅은 우리가 만든 코드가 의도한 대로 동작하는지 검증하는 중요한 과정이에요.코드의 품질을 높이고, 버그를 사전에 예방하며, 유지보수를 용이하게 만드는 데 필수적입니다. 하지만 많은 개발자가 테스트를 귀찮아하고, 필요성을 잘 느끼지 못하는 경우가 많죠. 🤔 (제가 그랬네요,,,) 의외로 막상 시작해보면 꽤 재밌는 부분들이 많습니다!자, 이제 Jest부터 시작해봅시다! 🚀🎯  왜 테스트가 필요할까?프론트엔드에서 테스트를 하지 않아도 당장 동작하는 UI를 만들 수 있어요. 하지만 다음과 같은 문제들이 발생할 수 있죠.😱 예기치 않은 버그 발생: 작은 변경이 전체 기능을 망가뜨릴 수도 있음🛠 리팩토링이 어려움: 코드 수정할 때마다 정상..

SSG(Static Site Generation)란?🚀 Next.js에서 SSG(Static Site Generation, 정적 사이트 생성)빌드 시점에 HTML을 생성하여, 요청 시 빠르게 제공할 수 있도록 하는 렌더링 방식입니다. 즉, 페이지를 서버에서 미리 렌더링해놓고 정적인 HTML 파일로 저장하여, 사용자가 접속할 때 즉시 제공하는 방식이에요. 이렇게 하면 사용자에게 빠른 로딩 속도를 제공하고, 검색 엔진 최적화(SEO)에도 유리하다는 장점이 있습니다.🥸 SSG는 왜 생겨났을까요?과거에는 동적 콘텐츠를 제공하기 위해 서버사이드 렌더링(SSR)이나 클라이언트사이드 렌더링(CSR) 방식이 주로 사용되었습니다.그러나 이 방식은 페이지 로딩 시간이나 서버 부하 문제 등에서 한계를 드러냈습니다. 특히..

React Transition 톺아보기! 🌟React에서 useTransition과 같은 Transition 기능은 사용자 경험(UX)을 부드럽게 유지하면서 상태 업데이트를 효과적으로 관리하는 도구입니다. 버벅거림 없이 매끄럽게 동작하게 하는 것이 고민이라면 꼭 알아보면 좋을 기능입니다. Transition을 이해하려면 그 단계와 React의 내부 동작 원리를 살펴보는 것이 필요한데요, Rendering, Pending, 그리고 Completed단계들을 중심으로 톺아보도록 할께요.🌈 Transition의 단계와 흐름React Transition은 상태 업데이트를 🔴 긴급 작업(Urgent)과 🔵 비긴급 작업(Non-Urgent)으로 나누어 처리합니다. 이 과정에서 주요 단계는 다음과 같습니다:1️..

React Suspense의 동작 방식 및 비동기 처리 톺아보기 🎭React에서 Suspense는 비동기 작업을 효과적으로 처리해 사용자 경험(UX)을 한 단계 끌어올리는 데에 중요한 역할을 합니다. 비동기 데이터를 처리하는 방식이 로딩 상태를 관리하고, 컴포넌트를 적절히 렌더링하는 데 있어 복잡성을 동반하는데요,이 과정에서 상태 관리, 에러 핸들링, 로딩 UI 표시 등이 프론트엔드 개발에 필수적으로 요구됩니다.  Suspense는1. 비동기 컴포넌트를 쉽게 정의하고, 2. 데이터가 로드되는 동안 사용자에게 적절한 로딩 상태를 제공함으로써매끄러운 사용자 경험을 유지할 수 있도록 합니다. React의 Suspense를 활용하면,1. 비동기 작업의 진행 상태를 시각적으로 표현하고, 2.사용자가 기다리는 동..

Waterfall 현상 톺아보기!💧웹 퍼포먼스 최적화 이야기에서 종종 등장하는 “Waterfall 현상”은 네트워크 요청이 마치 폭포처럼 순차적으로 이루어지는 현상을 가리킵니다.  웹 페이지가 로드될 때, 각 자원(이미지, 스크립트, 스타일시트 등)의 요청이 발생하는 방식은 사용자 경험에 큰 영향을 미칠 수 있어요.이것이 무조건 나쁜 건 아니지만, 잘못 관리되면 성능 저하와 사용자 경험 악화로 이어질 수 있습니다! 이 현상이 발생하는 이유는 여러 가지가 있지만, 주로 요청 간의 의존성과 브라우저의 요청 처리 방식이 원인입니다.특히, 동기적 요청이 많거나 자원이 서로 의존적인 경우, 특정 자원이 로드될 때까지 다음 요청이 지연될 수 있습니다.이로 인해 페이지 로딩 시간이 늘어나고, 사용자는 지루함을 느낄..

데이터 로딩 전략의 모든 것 톺아보기 🛠️React 앱을 개발하다 보면 데이터를 로드하는 과정에서 다양한 접근 방식을 고민하게 됩니다.데이터 로딩 전략은 사용자 경험, 성능, 유지 보수성에 큰 영향을 미치므로 신중하게 선택해야 합니다! 오늘은 “Fetch on Render”, “Fetch then Render”, 그리고 “Render as You Fetch”라는 세 가지 데이터 로딩 전략을 파헤쳐 보려고 합니다.🌟 1. Fetch on Render🧐 무엇인가요?"Fetch on Render" 전략은 컴포넌트가 렌더링될 때 API를 호출하여 데이터를 가져오는 방식입니다.이 방법은 React의 useEffect 훅을 사용하여 컴포넌트가 마운트될 때 데이터를 로드합니다. 가장 기본적인 접근법으로, 다음과..

🚀 React Fiber 톺아 보기! 🚀React Fiber는 React가 UI 업데이트를 처리하는 새로운 코어 알고리즘으로, React 16에서 처음 도입되었습니다. Fiber는 React를 한층 더 강력하고 유연하게 만들어주는 기술로, 비동기 렌더링을 가능하게 하여 복잡한 UI를 빠르고 부드럽게 렌더링할 수 있도록 도와줍니다. 특히, Fiber는 긴 작업을 작은 단위로 나누어 우선순위에 따라 처리할 수 있는 기능을 제공하여, 사용자가 상호작용하는 동안에도 UI가 원활하게 업데이트될 수 있도록 합니다. 또한, Fiber는 다양한 렌더링 전략을 지원하여 개발자가 애플리케이션의 요구에 맞는 최적의 성능을 달성할 수 있게 해준다고 합니다. 이러한 점에서 Fiber는 React의 핵심 아키텍처를 변화시켰고..

React의 Concurrent를 톺아보자!🏂React는 항상 사용자 경험(UX)을 최우선으로 고려하여 설계된 강력한 라이브러리라고 합니다. 특히 Concurrent Rendering(동시성 렌더링)은 이를 한층 더 끌어올린 기술인데요. 복잡한 사용자 인터페이스를 매끄럽게 처리할 수 있게 해주며, 사용자와의 상호작용에 즉각적으로 반응하도록 설계되었습니다.  특히 여러 작업이 동시에 이루어져야 할 때 그 진가를 발휘합니다. 예를 들어, 대량의 데이터가 로드되거나 복잡한 애니메이션이 실행될 때도, 사용자가 애플리케이션을 사용하는 동안 불편함이나 지연을 최소화하여 UI의 부드러움과 반응성을 느낄 수 있습니다. 🌀 Concurrent Rendering이란?React가 기존에 렌더링을 처리하는 방식React의..