본문 바로가기
728x90

전체 글

React의 renderToString 실행 여부 감지 방법 React에서 renderToString을 사용하여 서버 사이드 렌더링(SSR)을 수행할 때, 해당 코드가 서버에서 실행 중인지 클라이언트에서 실행 중인지 구분해야 할 경우가 있다. 이를 확인하는 방법을 정리한다.1. window 객체를 활용한 감지브라우저 환경에서는 window 객체가 존재하지만, 서버 환경(Node.js)에서는 존재하지 않는다. 이를 이용하여 실행 환경을 구분할 수 있다.const isServer = typeof window === "undefined";true: 서버에서 실행 중 (renderToString이 실행될 가능성이 있음)false: 클라이언트에서 실행 중2. useEffect를 활용한 감지React의 useEffect는 클라이언트에서만 실행되므로 이를 활용하여 SSR 여부.. 더보기
🚀 렌더링 최적화: Virtual DOM, Incremental DOM, Signal 비교 및 Angular의 변화 렌더링 최적화는 UI 성능을 개선하고 불필요한 연산을 줄이는 핵심 기술이다. 본 글에서는 Virtual DOM, Incremental DOM, Signal을 비교하고, Angular가 어떻게 렌더링 방식을 최적화하고 있는지 살펴본다. 과연 리엑트는 올바른 길을 가고 있는 것인가. 1️⃣ Virtual DOM: 기존의 렌더링 방식✅ 개념Virtual DOM(VDOM)은 실제 DOM의 가상 복사본을 생성하여 변경 사항을 비교한 후 최소한의 업데이트만 반영하는 방식이다.React가 주로 사용하는 방식이다.🔹 동작 방식상태가 변경되면 새로운 Virtual DOM을 생성.기존 Virtual DOM과 비교(Diffing)하여 변경된 부분을 찾음.변경된 부분만 실제 DOM에 업데이트(Reconciliation).⚡.. 더보기
🏥 정부 실손보험 개혁 방안 - 이득일까 과연 최근 정부는 실손의료보험 개혁 방안을 발표하며 국민의 의료비 부담을 줄이고 의료체계를 정상화하는 방향으로 정책을 추진하고 있다. 이번 개혁의 주요 목표는 과잉·남용되는 비급여 진료를 관리하고, 실손보험의 구조적 문제를 해결하는 데 있다.1. 실손보험 개혁의 배경실손보험은 국민의 의료비 부담을 완화하는 중요한 역할을 하지만, 비급여 진료의 과잉 이용과 보험금 지급 증가로 인해 보험료 인상이 지속적으로 발생하고 있다. 이에 따라 실손보험의 지속 가능성을 높이고, 건강보험과의 균형을 맞추기 위한 개혁이 필요하게 되었다.2. 주요 개혁 방안(1) 급여 항목 자기부담률 조정현재 실손보험의 급여 항목 자기부담률은 약 20% 수준이다. 정부는 경증 환자가 상급종합병원 외래 재진이나 권역응급의료센터를 이용할 경우, 건.. 더보기
사회 초년생 경제적 자유 이루기 ✈️ - 7화: ETF 활용법과 글로벌 자산 배분 전략 TF(상장지수펀드)는 개별 주식보다 안정적이고, 초보 투자자가 쉽게 접근할 수 있는 투자 수단이다. 이번 편에서는 ETF의 개념과 종류, 글로벌 자산 배분 전략, 그리고 ETF를 활용한 포트폴리오 구성법을 다룬다.1. ETF 투자, 왜 해야 할까?ETF는 특정 지수를 추종하는 방식으로 운용되며, 개별 주식을 직접 고르는 것보다 분산 효과를 제공한다. 초보 투자자가 ETF를 활용해야 하는 이유를 살펴보자.✅ 저비용으로 다양한 종목에 분산 투자 가능✅ 운용이 간편하고 실시간 거래 가능✅ 배당 수익과 성장 기회를 동시에 노릴 수 있음✅ 특정 업종이나 시장(예: S&P500, 나스닥, 신흥국)에도 간접 투자 가능ETF는 개별 주식보다 변동성이 적고, 장기 투자 시 복리 효과를 누릴 수 있어 안정적인 투자 방법 .. 더보기
React 고급 기술 익히기 - 10편: React Hooks의 모든 것 React의 Hooks는 컴포넌트의 상태 및 생명 주기 기능을 클래스 없이도 사용할 수 있도록 만든 기능입니다. React 16.8에서 처음 도입되었으며, 이후 버전에서도 지속적으로 개선되고 있습니다. 특히 React 19에서는 새로운 훅이 추가되면서 더 강력한 기능을 제공하고 있습니다.이번 글에서는 Hooks의 기본 개념, 등장 배경, 내부 동작 원리, 모든 Hook의 기능과 사용법, 그리고 앞으로의 방향성에 대해 다룹니다. 🚀1. Hooks의 등장 배경과 동작 원리1.1 Hooks는 왜 등장했을까?React에서 클래스 기반 컴포넌트는 다음과 같은 문제점을 가지고 있었습니다.상태 관리가 복잡: this.state를 계속 관리해야 하며, 상태 변경 로직이 흩어져 있음재사용성이 낮음: 같은 로직을 여러 .. 더보기
사회 초년생 경제적 자유 이루기 ✈️ - 6화: 해외 주식 투자와 글로벌 시장에서 기회 찾기 국내 주식 투자에 익숙해졌다면, 이제 해외 주식으로 시야를 넓힐 차례다. 미국, 유럽, 신흥국 등 글로벌 시장에는 다양한 투자 기회가 존재한다. 해외 주식 투자 방법과 글로벌 시장에서 성장 가능성이 높은 분야를 살펴보자.1. 해외 주식 투자, 왜 해야 할까?🔹 글로벌 경제 성장의 혜택을 직접 누릴 수 있다특정 국가가 아닌 전 세계 성장에 투자할 수 있다.미국, 유럽, 아시아 등 다양한 시장에서 기회를 찾을 수 있다.🔹 국내 시장 대비 더 넓은 선택지국내 증시는 특정 업종(반도체, 배터리 등)에 집중되어 있지만 해외에는 기술주, 헬스케어, 친환경 에너지 등 더 다양한 투자 기회가 있다.🔹 강력한 글로벌 기업에 투자 가능애플, 마이크로소프트, 테슬라 등 세계적인 기업의 주주가 될 수 있다.배당 투자자라.. 더보기
부업 알아보기: 3편 – AI를 활용한 부업 완전 정복 AI 기술이 빠르게 발전하면서, 이제 누구나 AI를 활용해 새로운 부업을 시작할 수 있는 시대가 되었다. AI를 활용한 부업은 시간이 적게 들고, 자동화가 가능하며, 초기 비용이 낮다는 점에서 매력적이다. 이번 글에서는 AI를 활용한 다양한 부업 종류와, 실제로 시작하는 방법을 예시와 함께 상세히 정리해 보았다.1. AI를 활용한 부업 종류(1) AI 블로그 & 자동 콘텐츠 생성 부업✔ 수익화 방식: 네이버 애드포스트, 구글 애드센스, 블로그 체험단, 제휴 마케팅 ✔ 필요 도구: ChatGPT, 네이버 블로그, 워드프레스, 미디엄 ✅ 하는 방법ChatGPT를 활용해 키워드 기반 블로그 글 작성 (예: "건강한 다이어트 방법")Canva를 활용해 블로그용 썸네일 및 본문 이미지 제작네이버 블로그나 워드프레.. 더보기
React 고급 기술 익히기 - 9편: React와 WebAssembly(WASM) 연동하기 WebAssembly(WASM)는 웹 애플리케이션의 성능을 극대화할 수 있는 기술로, React와 결합하면 보다 빠르고 강력한 웹 애플리케이션을 개발할 수 있습니다. Rust, C, C++ 등의 언어로 작성된 코드를 WebAssembly로 변환하여 React 애플리케이션에서 실행하면, 기존 JavaScript보다 훨씬 높은 성능을 발휘할 수 있습니다. 이번 글에서는 WebAssembly의 기본 개념, React에서 WebAssembly를 활용하는 방법, Rust와 WASM을 연동하는 실습을 다루고, Web Workers와 결합하여 병렬 연산을 최적화하는 방법까지 살펴봅니다. 🚀1. WebAssembly(WASM)란?WebAssembly(WASM)는 브라우저에서 실행 가능한 저수준의 이진 코드 포맷입니다.. 더보기
728x90
반응형

티스토리툴바