본문 바로가기

Lect & Tip/node, Angular, React18

애자일 개발 환경에서의 UI 프로토타이핑과 컴포넌트 디자인 애자일 개발 환경에서의 UI 프로토타이핑과 컴포넌트 디자인애자일(Agile) 개발 환경에서는 빠른 피드백과 반복적인 개선이 핵심 가치입니다. 이러한 환경에서 UI 프로토타이핑과 컴포넌트 디자인은 개발 초기 단계부터 사용자 경험을 검증하고, 개발자와 디자이너 간의 원활한 협업을 지원하는 중요한 요소로 자리 잡고 있습니다. 이번 포스팅에서는 프로토타이핑 도구와 리액트 스토리북(Storybook) 등을 활용하여 UI 디자인을 신속하게 시각화하고 검증하는 방법, 그리고 이를 통한 개발 프로세스와 협업 시나리오에 대해 구체적으로 살펴보겠습니다.애자일 개발과 UI 프로토타이핑의 중요성애자일 개발은 짧은 개발 주기와 지속적인 피드백을 통해 제품을 점진적으로 개선하는 방식입니다. UI 프로토타이핑은 이러한 애자일 개발.. 2025. 2. 26.

React JS 데이터피커 최소/최대 날짜 설정 가이드 React JS 데이터피커 최소/최대 날짜 설정 가이드최근 웹 애플리케이션 개발에서 사용자 친화적인 인터페이스를 구성하는 데 중요한 요소 중 하나가 날짜 선택 기능입니다. React를 비롯한 최신 프론트엔드 프레임워크에서는 다양한 날짜 선택 컴포넌트를 제공하고 있으며, 그 중에서도 JavaScript 기반의 데이터피커는 사용자가 원하는 날짜 범위를 손쉽게 선택할 수 있도록 도와줍니다.오늘은 React에서 JS 데이터피커를 활용하여 최소 날짜와 최대 날짜를 설정하는 방법에 대해 자세하게 알아보도록 하겠습니다.데이터피커의 필요성과 기본 개념웹 폼이나 예약 시스템, 일정 관리 등 여러 애플리케이션에서 날짜 선택 기능은 필수적입니다. 단순히 사용자가 임의의 날짜를 입력하도록 두는 대신, 미리 정해진 범위 내에서.. 2025. 2. 12.

리액트 api axios 엑셀 다운로드 버튼 구현 react.JS filesaver.saveAs javascript blob response.headers 값에서 filename추출하기 리액트 api axios 엑셀 다운로드 버튼 구현 react.JS filesaver.saveAs javascript blob response.headers 값에서 filename추출하기리액트로 프로젝트를 진행하면서 서버로부터 엑셀 파일을 다운로드 받는 기능을 구현해야 할 경우가 종종 있습니다. 특히 API 호출 시 Axios를 사용하여 데이터를 받아오고, 그 데이터를 파일로 저장하는 과정에서 여러 가지 제약과 이슈를 마주하게 됩니다. 이번 포스팅에서는 리액트 환경에서 Axios를 활용하여 엑셀 파일 다운로드 버튼을 구현하는 방법과 함께, response.headers에 포함된 파일명을 추출하는 꼼수에 대해 자세히 다루고자 합니다.리액트 프로젝트 개요 및 구현 배경리액트는 단순한 컴포넌트 기반 라이브러리로.. 2025. 2. 11.

[React] SPA 페이지 이동 시 스크롤 맨 위 유지 하는 방법 [React] SPA 페이지 이동 시 스크롤 맨 위 유지 하는 방법최근 웹 개발 트렌드에서 싱글 페이지 애플리케이션(SPA)은 사용자 경험(UX)을 극대화하기 위해 많이 활용되고 있습니다. 특히 React와 같은 프론트엔드 라이브러리를 사용하여 SPA를 구축할 때, 페이지 간 전환이 빠르고 부드러운 전환 효과를 제공할 수 있다는 점이 큰 장점입니다. 그러나 이러한 SPA의 특성상 페이지 이동 시 스크롤 위치가 이전 페이지의 위치를 그대로 유지하는 문제가 발생할 수 있습니다. 본 포스팅에서는 React 환경에서 SPA 페이지 이동 시 스크롤을 항상 맨 위로 유지하는 다양한 방법과 그 구현 사례에 대해 심도 있게 다루어 보겠습니다.SPA와 스크롤 문제의 이해SPA는 한 번의 로딩으로 애플리케이션 전체를 불러.. 2025. 2. 10.

[React] REST API, AXIOS로 받아온 Array 객체를 map함수 호출이 불가능할때 [React] REST API, AXIOS로 받아온 Array 객체를 map함수 호출이 불가능할때이 글에서는 React를 사용하여 REST API로부터 Axios를 통해 데이터를 받아올 때 발생하는 배열(Array) 객체의 map 함수 호출 오류에 대해 상세히 설명하고, 이를 해결하는 간단하면서도 효과적인 방법을 소개하고자 합니다. 특히 비동기 데이터 처리와 관련하여 Promise 객체가 해결되기 전에 컴포넌트가 렌더링되어 발생하는 오류의 원인과 해결책을 중점적으로 다루며, 로딩 상태 관리 및 조건부 렌더링을 활용한 접근법에 대해 이야기합니다.도입부React를 사용하면서 서버로부터 데이터를 받아와 렌더링하는 과정은 매우 일반적입니다. 많은 개발자들이 Axios를 사용하여 REST API와 통신하며 데이터.. 2024. 10. 18.

서버 데이터와 컴포넌트의 분리: 유지보수성을 높이는 방법 서버 데이터와 컴포넌트의 분리: 유지보수성을 높이는 방법개발을 하다 보면 서버에서 받아온 데이터를 그대로 화면에 렌더링하는 컴포넌트를 만들게 됩니다. 그러한 경우, 서버에서 반환되는 데이터의 형식이 변경되면 컴포넌트 코드에도 영향을 미치게 되어 유지보수가 어려워지는 문제가 발생합니다. 이번 포스팅에서는 서버 데이터와 컴포넌트를 분리하여 각각의 책임을 명확히 하고, 변화하는 환경에서도 안정적으로 컴포넌트를 관리할 수 있는 방법에 대해 자세히 알아보겠습니다.문제의 출발점: 서버 데이터와 컴포넌트의 강한 결합대부분의 웹 애플리케이션은 서버에서 데이터를 받아 이를 화면에 표시하는 구조로 이루어져 있습니다. 개발 초기에는 서버에서 제공하는 데이터 형식에 맞춰 컴포넌트를 제작하는 것이 자연스러워 보입니다. 예를 들.. 2024. 9. 9.

이전 1 2 3 다음

티스토리툴바