반응형
관련 글 썸네일

SWR(Stale-While-Revalidate)의 개념

https://swr.vercel.app/ko 데이터 가져오기를 위한 React Hooks – SWRSWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.swr.vercel.app SWR란?SWR란 Stale-While-Revalidate의 약자로, 먼저 캐시된 오래된 데이터(stale)를 즉시 보여주고 배경에서 최신 데이터로 재검증(revalidate)하여 갱신하는 데이터 패칭 전략을 말한다. 사용자는 로딩 스피너 대신 즉시 ..

  • format_list_bulleted 코딩/React
  • · 2025. 8. 26.
  • textsms

Vite의 개념과 장단점

vite란?Vite는 차세대 프론트엔드 빌드 도구로, 프랑스 개발자인 Evan You(Vue.js 창시자)가 만든 프로젝트다. 기존의 Webpack, Parcel 같은 번들러와 비교했을 때 훨씬 더 빠른 개발 환경과 단순한 설정을 제공하는 것이 특징이다. Vite라는 이름은 프랑스어로 '빠르다'라는 뜻을 가진 단어에서 유래했으며, 실제로 개발 서버 구동 속도와 HMR(Hot Module Replacement) 성능에서 큰 강점을 보인다. https://vite.dev/ ViteNext Generation Frontend Toolingvite.devVite의 핵심 특징빠른 개발 서버 구동Vite는 브라우저의 ES 모듈(ESM)을 적극 활용하여, 전체 번들을 미리 만드는 대신 필요한 파일만 불러온다. 덕분에..

  • format_list_bulleted 코딩/Web
  • · 2025. 8. 24.
  • textsms
관련 글 썸네일

SPA란?

SPA란?SPA는 Single Page Application의 약자로, 우리말로는 싱글 페이지 애플리케이션이라 한다. 기존 웹사이트는 사용자가 페이지를 이동할 때마다 서버에서 새로운 HTML을 받아오지만, SPA는 최초 한 번 페이지를 불러온 뒤 필요한 데이터만 비동기적으로 가져와 화면을 갱신하는 방식으로 동작한다. 이러한 구조 덕분에 전체 화면을 새로고침하지 않고도 빠른 화면 전환을 제공할 수 있다.SPA 예시SPA는 다양한 웹 서비스에서 널리 활용되고 있다. 대표적으로 Gmail 같은 이메일 서비스는 메일 목록을 클릭해도 전체 화면이 새로 고쳐지지 않고, 필요한 부분만 업데이트된다. 또한 구글 지도 서비스 역시 지도를 이동하거나 확대·축소할 때 전체 페이지가 다시 로딩되지 않고 부드럽게 동작하는데, ..

  • format_list_bulleted 코딩/React
  • · 2025. 8. 22.
  • textsms
관련 글 썸네일

React에서 콘솔 로그 안뜨게 하는 방법 (개발·배포 환경별 설정)

React 프로젝트를 개발하다 보면 console.log, console.warn, console.error 등이 브라우저 콘솔에 출력되어 화면을 어지럽히는 경우가 많은데. 배포 환경(production)에서는 보안과 깔끔한 UI/UX를 위해 콘솔 출력을 완전히 제거하는 것이 좋다.이번 글에서는 React에서 콘솔에 아무것도 뜨지 않게 하는 방법을 단계별로 정리보고자 한다!1. 개발 환경에서 콘솔 출력 최소화하기개발 중에는 디버깅을 위해 console.log가 유용하지만, 불필요하게 많은 로그는 오히려 작업 속도를 늦출 수 있다.아래처럼 조건부 로그 출력을 적용하면 필요한 경우에만 콘솔이 찍힌다.if (process.env.NODE_ENV === 'development') { console.log('개..

  • format_list_bulleted 코딩/React
  • · 2025. 8. 12.
  • textsms
관련 글 썸네일

Web Workers와 성능 최적화

웹 애플리케이션의 기능이 점점 복잡해지면서 JavaScript 성능 최적화는 프론트엔드 개발의 필수 과제가 되었다. 특히 무거운 연산이나 대용량 데이터 처리가 필요한 경우, 메인 스레드(Main Thread)가 이를 모두 처리하면 UI 렌더링이 멈추는 현상(프리즈)이 발생할 수 있다. (근데 난 아직 못 본 거 같다..) 이때 브라우저에서 제공하는 Web Workers(웹 워커)를 활용하면 성능 저하 없이 부드러운 사용자 경험을 제공할 수 있다고 해서 공부를 해보았습니다람쥐! https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers Using Web Workers - Web APIs | MDNWeb Workers..

  • format_list_bulleted 코딩/Web
  • · 2025. 8. 10.
  • textsms
관련 글 썸네일

클래스형 컴포넌트와 함수형 컴포넌트의 차이

한 줄 차이클래스형: class로 만들고 this를 사용하며 라이프사이클 메서드로 상태와 부수효과를 관리한다.함수형: 함수와 Hook으로 상태와 부수효과를 선언적으로 관리한다. 보일러플레이트가 적고 최신 기능이 집중된다.핵심 비교 표항목클래스형 컴포넌트함수형 컴포넌트선언 방식class extends React.Componentfunction 또는 화살표 함수상태 관리this.state, this.setState(얕은 병합)useState, useReducer(교체식, 직접 병합)부수효과componentDidMount/Update/UnmountuseEffect(의존성 기반, 정리 함수)최적화PureComponent, shouldComponentUpdateReact.memo, useMemo, useCallb..

  • format_list_bulleted 코딩/React
  • · 2025. 8. 8.
  • textsms
반응형