xeunnie

프리 렌더링(Pre-rendering)을 톺아보자! 🖼️프리 렌더링(Pre-rendering)은 페이지를 사전에 생성하여,브라우저가 초기 로드 시 바로 콘텐츠를 표시할 수 있도록 하는 기술입니다. 이는 SEO 개선, 빠른 사용자 경험, 초기 로드 시간 단축에 유리합니다.프리 렌더링이란? 🤔프리 렌더링은 HTML을 미리 생성하여 클라이언트에 제공하는 방식을 의미합니다. React는 기본적으로 클라이언트에서 렌더링(클라이언트 사이드 렌더링, CSR)하지만,프리 렌더링을 통해 초기 HTML을 서버 또는 빌드 시점에 준비할 수 있습니다.프리 렌더링의 장점1️⃣ SEO 개선검색 엔진 크롤러는 초기 HTML 내용을 읽습니다. 프리 렌더링을 사용하면, 콘텐츠가 미리 제공되어 SEO 성능이 향상됩니다.2️⃣ 초기 ..

HMR(Hot Module Replacement): Vite vs Webpack 비교 🌟HMR(Hot Module Replacement)은 웹 개발 생산성을 높이기 위한 도구로, 코드가 변경될 때 페이지를 새로고침하지 않고도 변경된 모듈을 즉시 업데이트할 수 있도록 합니다. 이를 통해 개발자는 빠르게 결과를 확인하고, 상태를 유지하면서 작업을 이어갈 수 있죠. 이번 글에서는 HMR이 무엇인지, Vite와 Webpack에서의 HMR 동작 방식, 그리고 둘의 차이점과 장단점을 비교해 볼게요!HMR이란 무엇인가요? 🤔HMR은 모듈 업데이트를 효율적으로 관리하는 개발 도구의 기능입니다. 일반적인 브라우저 새로고침과 다르게, 변경된 부분만 갱신하여 전체 상태를 초기화하지 않습니다.HMR의 핵심 목표빠른 피드백..

🎭 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) 방식이 주로 사용되었습니다.그러나 이 방식은 페이지 로딩 시간이나 서버 부하 문제 등에서 한계를 드러냈습니다. 특히..