전체 글 썸네일형 리스트형 마이크로 프론트엔드(Micro Frontends) 마이크로 프론트엔드(Micro Frontends) 는 프론트엔드 애플리케이션을 여러 개의 독립적인 모듈로 나누어 개발하고 관리하는 아키텍처이다. 이는 백엔드의 마이크로서비스(Microservices) 개념을 프론트엔드에서도 적용한 것으로, 대규모 애플리케이션을 보다 효율적으로 운영할 수 있도록 도와준다. 왜 필요할까?기존의 프론트엔드 개발 방식 모놀리식 프론트엔드 (Monolithic Frontends) 는 하나의 거대한 코드베이스로 구성되기 떄문에 프로젝트가 커질수록 여러가지 문제가 발생하기도 한다. 코드베이스가 비대해짐(Codebase Bloat) → 유지보수와 기능 추가가 어려워짐팀 간 충돌 증가(Team Conflicts) → 여러 팀이 동일한 코드베이스를 수정하면서 충돌이 빈번하게 발생배포의 어.. 더보기 웹 스토리지(Web Storage) 웹 스토리지는 웹 브라우저에서 데이터를 저장하는 방법 중 하나로, 사용자가 웹사이트를 방문할 때 로컬에서 데이터를 저장하고 필요할 때 빠르게 불러올 수 있도록 도와준다.웹 스토리지는 쿠키와 비슷하지만, 더 많은 데이터를 저장할 수 있고 성능 면에서도 더 뛰어난 장점이 있다. 1. 로컬 스토리지(Local Storage)도메인별로 데이터를 저장하며, 사용자가 브라우저를 닫아도 데이터가 유지된다.localStorage 객체를 사용하여 데이터를 저장하고 불러올 수 있다.데이터는 브라우저에서만 접근 가능하며, 서버에는 자동으로 전송되지 않는다.// 데이터 저장localStorage.setItem("username", "JohnDoe");// 데이터 가져오기let username = localStorage.get.. 더보기 서버사이드 렌더링(SSR) vs 클라이언트사이드 렌더링(CSR) 서버사이드 렌더링(SSR)서버에서 HTML을 생성하여 클라이언트에 전달하는 방식. 사용자가 웹사이트에 접속하면, 서버가 요청을 받아 HTML 을 렌더링 한 후 브라우저에 전송. 이후 브라우저가 HTML 을 해석하여 페이지를 표시. 장점 서버에서 미리 렌더링된 HTML을 제공하므로 페이지가 빠르게 표시되서 초기 로딩 속도가 빠르고, 검색 엔진 크롤러가 완전한 HTML을 가져가기 때문에, 검색 엔진 최적화(SEO)에 유리하다. 단점 서버에서 모든 요청을 처리해야 하므로, 트래픽이 많아질 경우 성능 저하가 발생할 수 있어 서버 과부하를 조심해야하고, 페이지가 새로고침될 때마다 서버에서 다시 렌더링해야 하므로 인터랙티브한 UI 구현 어렵고 초기 화면은 빨리 로딩되지만, JavaScript가 실행되어야 인터랙.. 더보기 rem / em rem (Root EM)rem은 Root EM의 약자로, HTML의 최상위 요소인 의 font-size를 기준으로 상대 크기를 설정하는 단위이다.기준: 항상 의 font-size를 기준으로 한다.글로벌 스타일링에 적합: 문서의 root 크기를 변경하면, rem을 사용하는 모든 요소의 크기가 비례적으로 조정된다.일관성 유지: 요소가 중첩되거나 부모 요소의 스타일에 영향을 받지 않으므로, 예측 가능한 크기 조정이 가능하다.html { font-size: 16px; /* Root font-size */}h1 { font-size: 2rem; /* 16px × 2 = 32px */}p { font-size: 1.5rem; /* 16px × 1.5 = 24px */} emem은 현재 요소의 font-size.. 더보기 JSX란 무엇인가? JSX(JavaScript XML)은 React에서 사용되는 JavaScript 확장 문법으로, UI 컴포넌트를 정의할 때 HTML과 유사한 구문을 작성할 수 있게 한다. JSX는 직관적이고 가독성이 높아 React 애플리케이션 개발을 더 쉽게 만들어준다.React는 JSX를 필수로 요구하지는 않지만, JSX를 사용하면 UI를 정의하는 코드를 보다 명확하고 간결하게 작성할 수 있다.JSX의 특징1. HTML과 JavaScript의 결합JSX는 JavaScript 코드 안에서 HTML과 유사한 구문을 사용할 수 있게 한다. const element = Hello, React!; 위 코드는 React에서 사용하는 JSX 문법이다. JSX는 HTML과 비슷해 보이지만 실제로는 JavaScript 코드로 변환된.. 더보기 배포 환경에서 이미지 애니메이션 실행 안되는 문제 문제 상황PNG 이미지를 순차적으로 전환해 애니메이션 효과를 구현했다. 로컬 개발 환경에서는 이미지가 매끄럽게 전환되며 원하는 애니메이션 효과를 잘 보여줬다. 하지만 배포 환경으로 올리니 중간 이미지들이 제대로 로드되지 않아 애니메이션이 끊기거나 어색하게 보였다. 첫 번째와 마지막 이미지는 문제없이 나타났지만, 중간 이미지가 자연스럽게 연결되지 않았다. 원인 분석이미지 경로 문제는 아니었다. 첫 번째와 마지막 이미지는 잘 로드됐기 때문에 경로 문제일 가능성은 낮았다.이미지 로드 타이밍 문제였다. 이미지 전환이 setTimeout으로 일정 간격(70ms)마다 실행되고 있었는데, 중간 이미지가 로드되기 전에 다음 이미지로 넘어가면서 끊김 현상이 발생했다. 이는 네트워크 속도나 서버 응답 시간이 로컬 환경과.. 더보기 이미지 애니메이션 로딩 문제 특정 이미지 시퀀스를 순차적으로 표시하여 애니메이션 효과를 구현하는 코드를 작성했다. 하지만 구현한 초기 코드에서 다음과 같은 문제가 발생했다: 이미지 로딩 지연 및 깜빡임 현상 애니메이션 도중 일부 이미지가 로드되지 않거나, 이미지가 전환될 때 깜빡임 현상이 발생했다. 이는 이미지가 로드되지 않은 상태에서 src를 변경하면서 발생한 문제였다. 애니메이션 끊김이미지 전환 시 애니메이션이 매끄럽지 않고 중간중간 끊기는 문제가 있었다. 특히 이미지 전환 속도가 빠를수록 이런 현상이 두드러졌다. 반복 실행 문제애니메이션이 이미 한 번 실행되었음에도 페이지를 새로고침하면 다시 애니메이션이 실행되는 문제가 있었다. 이는 sessionStorage 설정이 제대로 작동하지 않거나, 코드 흐름에서 애니메이션 확인 조건.. 더보기 overflow: hidden이 제대로 동작 안함 body와 html에 overflow: hidden;을 설정했는데도 스크롤이 사라지지 않는 문제가 생겼다. 이 문제의 원인은 wrap에 overflow-x: hidden;을 설정한 것 때문이다.CSS의 overflow 속성은 요소의 콘텐츠 영역에만 적용된다. overflow: hidden;은 요소의 경계(border-box)를 기준으로 콘텐츠를 숨기지만, 자식 요소가 부모의 영역을 초과하거나 별도의 크기와 위치를 가지면 부모의 overflow 설정이 제대로 동작하지 않을 수 있다.특히 wrap이 너비를 초과하거나 내부 콘텐츠가 화면 밖으로 밀려나는 상황에서 overflow-x: hidden;을 설정하면 브라우저는 wrap 내부의 수평 스크롤을 숨기려 한다. 하지만 자식 요소의 너비가 여.. 더보기 이전 1 2 3 4 5 다음
