포스트 | baealex

배진오

@baealex

창작을 좋아하는 개발자입니다.

2025년 04월 06일 · 10분 분량

앵귤러는 화면을 어떻게 그릴까?

앵귤러는 화면을 어떻게 그릴까?

앵귤러 성능 개선의 핵심, 렌더링 원리 이해하기! Zone.js부터 변경 감지, 실제 DOM 업데이트까지 앵귤러의 작동 방식을 배우고, OnPush 전략을 적용하여 앱 성능을 최적화하는 방법을 알아보세요.

프론트엔드

2024년 11월 21일 · 3분 분량

Sass @import 및 Legacy API 해결 방법

Sass @import 및 Legacy API 해결 방법

Sass의 @import 구문이 Dart Sass 3.0.0에서 사용 중단되며, Legacy JS API도 더 이상 지원되지 않습니다. 이 글에서는 @use와 @forward로의 전환 방법을 설명하고, Vite에서 Legacy API 경고를 해결하는 방법을 안내합니다. Sass와 Vite 설정을 최신 상태로 유지하여 원활한 개발 환경을 구축하세요.

프론트엔드

2024년 09월 08일 · 14분 분량

쉐도우 돔을 스타일링 하는 방법

쉐도우 돔을 스타일링 하는 방법

HTML은 모두 DOM으로 변환된다. DOM은 자바스크립트로 엑세스하고 CSS로 스타일링 할 수 있다. Shadow DOM은 요소 내부에 Shadow DOM 이라는 자체 DOM을 생성할 수 있다. 웹 사이트의 소스를 보다가 위와 같은 것을 발견한다면 그것이 쉐도우 돔이 적용된 것이다. Shadow DOM을 사용하는 이유? 페이지의 다른 자바스크립트나 CSS로 부터 컴포넌트를 보호 컴포넌트에 대한 …

프론트엔드

2024년 07월 06일 · 7분 분량

React Suspense에 대해서 알아보자

React Suspense에 대해서 알아보자

React Suspense는 비동기 작업 완료까지 컴포넌트 렌더링을 잠시 멈추고, 로딩 상태를 보여줍니다. Suspense 컴포넌트는 fallback 속성을 사용해 대기 UI를 정의하며, React.lazy로 동적 로딩을 지원합니다. API fetch와 메모리 캐싱 기법을 통해 비동기 데이터 관리를 효율화합니다.

프론트엔드

2024년 04월 27일 · 15분 분량

웹 앱 API 개발을 위한 GraphQL 1~4장 정리

웹 앱 API 개발을 위한 GraphQL 1~4장 정리

GraphQL을 보다 잘 사용하기 위해서 '웹 앱 API 개발을 위한 GraphQL' 도서의 1-4장 부분에서 새롭게 알게된 것이나 주요한 내용들을 정리하였습니다. GraphQL 소개, 그래프 이론, GraphQL 쿼리 작성과 스키마 설계에 대한 내용을 다루고 있습니다.

프론트엔드

2024년 03월 11일 · 3분 분량

React - Server Component

리액트 18에서 Server Component 라는 개념이 추가되었다. 서버 컴포넌트란? 서버에서 렌더링되는 컴포넌트이다. (이 이상의 표현이 아직은 떠오르지 않는다.) 하지만 사실 리액트에서는 이미 컴포넌트를 서버에서 렌더링 하는 방법을 제공하고 있었다. 근데.. 왜.. 필요..? 기존 컴포넌트를 서버 사이드 렌더링 (이하 SSR) 할 때 어떤 문제들이 있었을까? 1. 하이드레이션사용자는 서버에서 렌더링 된 HTML과 …

프론트엔드

2023년 11월 03일 · 12분 분량

이번 SPA 개발은 앵귤러 어떠세요?

이번 SPA 개발은 앵귤러 어떠세요?

SPA(Single Page Application)는 하나의 HTML 파일에서 사용자가 웹 사이트의 모든 기능을 사용할 수 있는 웹 애플리케이션 형태를 나타냅니다. SPA는 웹 페이지를 새로고침하지 않고 필요한 영역만 업데이트하여 사용자에게 빠른 상호작용을 제공하며, 웹 사이트를 컴퓨터 프로그램이나 모바일 앱과 유사한 경험으로 만들어줍니다. 여기서는 앵귤러를 활용한 SPA 개발에 대한 내용을 다루고 있습니다.

프론트엔드

2023년 06월 21일 · 9분 분량

Svelte의 상태 관리

Svelte의 상태 관리

이 글은 바닐라 JavaScript로 프론트엔드를 개발하다가 복잡성에 직면하여 Svelte를 적용하고 얻은 경험에 대해 이야기합니다. Svelte의 상태 관리 및 리액티브 선언, 전역 스토어 및 구독 스토어 등의 기능에 대해 다루고 있습니다. 이를 통해 Svelte가 UI 관리를 효율적으로 할 수 있는 방법을 제공한다는 점을 이야기 합니다.

프로그래밍

자바스크립트

프론트엔드

2022년 05월 11일 · 4분 분량

실용적인 프론트엔드 테스트

실용적인 프론트엔드 테스트

프론트엔드 테스트에 대한 고민과 어려움을 다룬 글입니다. 클린 아키텍처에서 설명하는 테스트의 이유와 프론트엔드에서 테스트할 내용, 시각적 요소의 검증 방법, 기능적 테스트 방법, 그리고 Jest와 Cypress의 사용에 대한 내용이 담겨있습니다. 테스트는 비용이며, 시각적 테스트와 기능적 테스트를 분리하고 전문 도구를 고려하는 것이 좋습니다.

프론트엔드

2022년 03월 02일 · 2분 분량

GitHub Action으로 Yew.rs 배포하는 방법

GitHub Action으로 Yew.rs 배포하는 방법

YewYew는 React와 유사한 구조를 Rust 기반으로 개발한 프론트엔드 프레임워크로, WASM으로 배포됩니다. Rust 개발환경에서 WASM 빌드 시 필수적으로 실행해야하는 rustup target add wasm32-unknown-unknown 명령어와 GitHub Action을 이용한 자동화 방법에 대해 설명하고 있습니다.

프론트엔드