Forri's Dev Log

1. 컴포넌트(Component)리액트는 "컴포넌트" 기반 라이브러리이다. ui를 작은 조각들(컴포넌트)로 나눠서 재사용할 수 있음 🐢예제 코드(컴포넌트 만들기)function Greeting() { return 안녕 나는 리액트 컴포넌트야;}export default Greeting;return 안에는 JSX문법을 사용해 화면에 표시할 내용을 작성2.JSX(JavaScript XML)JSX는 리액트에서 HTML을 JavaScript 안에서 사용할 수 있도록 도와주는 문법 🐢예제 코드(JSX 사용) function App() { const name = "포리"; return {name}야, 안녕!;}export default App;{name} 처럼 중괄호를 사용하면 JavaScipt 변수를 JS..

1. PWA란?PWA(Progressive Web App)는 웹 기술(HTML, CSS, JS)로 구현된 웹 앱이지만 네이티브 앱처럼 동작하도록 만든 웹 기술이다. 웹사이트를 앱처럼 설치해서 사용할 수 있고, 오프라인에서도 작동하며, 푸시 알림 기능도 지원한다.PWA의 주요 특징앱 설치 가능 – 웹사이트를 홈 화면에 추가하여 앱처럼 실행오프라인 지원 – 네트워크가 없어도 일부 기능이 동작푸시 알림 가능 – 서비스 워커(Service Worker)를 이용한 알림 기능빠른 로딩 속도 – 캐싱을 활용해 성능 최적화반응형 디자인 – 모든 기기에서 최적화된 화면 제공2. PWA vs 네이티브 앱 차이점비교PWA네이티브 앱설치 방식브라우저에서 '홈 화면에 추가'앱스토어에서 다운로드운영체제(OS) 종속성크로스 플랫폼..

웹 개발에서 UI를 렌더링하는 방식은 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)으로 나뉩니다. 이와 관련된 주요 기술로는 Spring Boot에서 사용하는 Thymeleaf(SSR 기반)와 동적인 UI를 만드는 React(CSR 기반)가 있습니다.이번 포스팅에서는 Thymeleaf vs React의 차이점과 함께 SSR vs CSR 개념까지 하나로 정리하여 어떤 프로젝트에서 어떤 방식을 선택하는 것이 좋은지 비교해보겠습니다.🫡1. Thymeleaf vs React 비교📌 Thymeleaf란?Spring Boot에서 사용하는 서버 사이드 템플릿 엔진서버에서 HTML을 렌더링한 후 클라이언트에게 완성된 페이지를 전달동적인 데이터 삽입 가능 (th:text, th:each 등의 속성 ..

리액트에서 전역 상태 관리가 필요할 때 가장 많이 사용되는 방법은 Context API와 Redux다. 두 방법 모두 상태를 공유하고 관리하는 역할을 하지만, 쓰임새와 구조가 다르다.Context API란?Context API는 리액트에서 기본 제공하는 전역 상태 관리 기능이다. 별도의 라이브러리를 설치하지 않고, React.createContext()를 이용해 상태를 관리할 수 있다.언제 사용할까?규모가 작거나 간단한 전역 상태 관리가 필요할 때상태를 여러 컴포넌트에서 공유해야 할 때별도의 라이브러리 없이 리액트 기본 기능으로 해결하고 싶을 때Context API 예제import React, { createContext, useContext, useState } from 'react';// 1️⃣ Co..

1. 왜 리액트를 사용할까?리액트는 전 세계적으로 가장 많이 사용되는 프론트엔드 라이브러리 중 하나다. 그렇다면 왜 리액트를 사용할까? 그리고 다른 프레임워크와 비교했을 때 어떤 차이점이 있을까?리액트 vs 다른 프레임워크 비교비교 React Vue Angular Svelte 러닝 커브중간낮음높음낮음상태 관리Context API, Redux, ZustandVuex, PiniaRxJS, NgRxStore API성능빠름빠름무겁지만 확장성 좋음가장 빠름커뮤니티매우 큼큼큼작음기업 사용Facebook, Netflix, AirbnbAlibaba, XiaomiGoogle, MicrosoftRelatively small 리액트는 컴포넌트 기반 구조로 유지보수가 쉽고, 커뮤니티가 크며, 다양한 라이브러리를 통해 확..

SWR이란?SWR은 React에서 데이터 가져오기를 단순하고 효율적으로 처리할 수 있도록 도와주는 라이브러리입니다. Next.js를 만든 Vercel에서 개발했으며, stale-while-revalidate 전략을 기반으로 합니다. 주요 특징자동 갱신(Auto Revalidation): 데이터가 오래되었다고 판단되면 자동으로 최신 데이터로 갱신됨빠른 UI 업데이트: 먼저 캐시된 데이터를 보여주고, 이후 최신 데이터를 가져옴집중적인 성능 최적화: 동일한 요청이 여러 번 발생하지 않도록 최적화됨간편한 사용법: useSWR() 하나만으로 간단하게 사용 가능SWR 기본 사용법1. 설치하기npm install swr2. 사용법 (기본 데이터 가져오기)import useSWR from 'swr';// 데이터를 가져..