Web tech

코드 스플리팅 은 프론트엔드 애플리케이션의 번들을 작은 조각으로 분할하여 필요한 부분만 로드하는 최적화 기법입니다. 이를 통해 초기 로딩 속도를 개선하고 사용자 경험을 향상시킬 수 있습니다. 일반적으로 웹 애플리케이션은 모든 자원(JavaScript, CSS, 이미지

프로그레시브 웹 앱은 웹의 한계를 넘어 모바일 앱과 유사한 경험을 제공하는 새로운 개발 방식 중 하나입니다. 이번 포스트에서는 프로그레시브 웹 앱의 개념, 구조, 장점, 그리고 실제 개발 시 고려해야 할 핵심 요소에 대해 자세히 알아보겠습니다. 프로그레시브 웹 앱(P

React 애플리케이션을 개발할 때 상태 관리는 매우 중요한 요소입니다. 상태가 커지고 복잡해질수록 관리하기가 매우 어려워 집니다. 이런 문제를 해결하기 위해 Redux는 강력한 상태 관리 라이브러리로써 많은 개발자들에게 현재까지도 사랑받고 있습니다. 이 포스팅에서는

클라이언트 사이드 렌더링(Client-Side Rendering, CSR)은 웹 애플리케이션의 렌더링을 클라이언트 측에서 처리하는 방식입니다. CSR은 React와 같은 JavaScript 프론트엔드 프레임워크와 함께 주로 사용되며, 동적인 사용자 경험과 인터랙티브한

서버 사이드 렌더링(SSR)은 웹 애플리케이션에서 클라이언트 측에서만 렌더링되던 부분을 서버에서도 렌더링하여 완전한 HTML 문서를 클라이언트에게 제공하는 기술입니다. 즉, 서버로부터 요청해서 받은 내용을 브라우저 화면에 표시해주는 기술입니다. 이번 포스팅에서는 SSR

REST(Representational State Transfer)는 웹 서비스를 위한 아키텍처 스타일 중 하나입니다. REST API는 HTTP 프로토콜을 기반으로 클라이언트와 서버 간의 통신을 위한 규칙과 규약을 제공합니다. REST API를 사용하면 애플리케이션

ESLint는 자바스크립트 코드의 정적 분석을 수행하는 도구로, 코드의 일관성, 오류, 코딩 스타일, 보안 문제 등을 식별하여 개발자에게 피드백을 제공합니다. 이 포스팅에서는 ESLint의 개요와 주요 기능에 대해 알아보고, 프로젝트에 ESLint를 설정하는 방법을 설

리액트 컴포넌트의 생명주기(Lifecycle)는 컴포넌트가 생성되고, 업데이트되고, 제거될 때 발생하는 여러 단계의 이벤트를 말합니다. 이런 생명주기 메서드를 통해 컴포넌트의 초기화, 데이터 업데이트, 리소스 해제 등을 관리할 수 있습니다.리액트 버전 16.8 이전에는

Domain-Driven Design (Domain-Driven Design)은 소프트웨어 개발 방법론 중 하나로, 복잡한 도메인을 이해하고 효과적으로 모델링하기 위해 사용되는 개발 철학과 방법입니다. 도메인 주도 설계라고도 부르는데, 도메인에 집중하며 도메인의 복잡성

Puppeteer는 Chrome DevTools Protocol(CDP)을 추상화한 고수준 Node.js 라이브러리이다. CDP를 직접 다루는 것보다 사용하기 쉬운 API를 제공하지만, 때로는 CDP를 직접 사용해야 하는 경우가 있다.CDP란? 쉽게 말해서, ...

SOLID는 소프트웨어 설계에서 사용되는 다섯 가지 원칙 집합으로, 깨끗하고 유지보수하기 쉬운 코드를 작성하는 데 도움을 준다.React와 같은 프론트엔드 애플리케이션에서도 SOLID 원칙을 적용하면 컴포넌트 구조를 명확히 하고, 코드의 품질과 확장성, 유지보수성을 높

지난 게시글에서는 SRP, OCP, LSP까지 알아보았다. 이번에는 남은 두 가지 원칙인 ISP와 DIP에 대해서 서술하겠다.인터페이스 분리 원칙은 "클라이언트는 자신이 사용하지 않는 메서드에 의존하면 안 된다"는 원칙이다. 즉, 하나의 방대한 인터페이스나 props를

FSD? Feature-Sliced Design은 러시아 개발자 커뮤니티에서 시작된, 프론트엔드 아키텍처의 난제인 의존성 지옥을 해결하기 위해 나타난 프론트엔드 아키텍처 방법론이다. 2021년경부터 본격적으로 문서화되기 시작했으며, 대규모 프론트엔드 애플리케이션의 복잡

FSD? Feature-Sliced Design은 러시아 개발자 커뮤니티에서 시작된, 프론트엔드 아키텍처의 난제인 의존성 지옥을 해결하기 위해 나타난 프론트엔드 아키텍처 방법론이다. 2021년경부터 본격적으로 문서화되기 시작했으며, 대규모 프론트엔드 애플리케이션의 복잡

회원정보 수정 폼을 열심히 채우다가 실수로 뒤로가기를 눌러본 적 있으신가요? 어드민 페이지를 작업하던 중 이 문제를 마주쳤습니다. 사용자가 긴 폼을 채우다가 링크를 잘못 클릭하거나, 뒤로가기를 실수로 누르거나, 탭을 닫아버리는 바람에 작성한 내용이 전부 날아가는 상황이

모바일 채팅 UI를 만들때면 이상한 걸 발견할 수 있습니다.입력창을 탭하면 키보드가 올라오는데, 입력창이 키보드에 가려져버립니다.height: 100dvh로 앱 높이를 잡아줬고, 입력창에 position: fixed; bottom: 0도 붙여뒀습니다. 그런데 키보드가