atomicdev 님의 블로그

3회차: Segment를 통한 코드 세분화목표Segment를 활용하여 코드를 세분화하고, 각 세그먼트의 역할을 이해합니다.Segment 구성FSD의 Segment는 각 슬라이스 내부에서 코드를 더욱 체계적으로 관리하기 위해 나누어집니다. 주로 ui, model, api, lib, consts로 구성됩니다. 이 구성은 각 기능 모듈의 역할을 명확히 하여 코드의 가독성과 유지보수성을 높입니다.각 Segment의 역할ui: 사용자 인터페이스 컴포넌트를 포함합니다.model: 상태 관리 및 비즈니스 로직을 담당합니다.api: API 호출을 담당하는 함수들을 포함합니다.lib: 공통 라이브러리나 유틸리티 함수를 정의합니다.consts: 상수 값을 정의하여 코드의 가독성과 재사용성을 높입니다.실습: features..

React FSD 1회차2회차: FSD의 Layer와 Slice 구성목표FSD의 Layer와 Slice를 구성하고, 각 레이어의 역할을 이해합니다.FSD의 Layer 구성FSD는 각 레이어를 통해 프로젝트를 구조화하며, 각 레이어는 서로 명확한 역할과 책임을 가집니다. 상위 레이어는 하위 레이어에 의존할 수 있지만, 하위 레이어는 상위 레이어에 의존하지 않는 방식으로 설계됩니다.주요 레이어 설명app: 애플리케이션의 진입점으로, 전역 설정이나 초기화 코드가 위치합니다.processes: 페이지나 여러 컴포넌트에서 공통으로 사용하는 비즈니스 로직을 포함하는 레이어입니다.pages: 페이지 단위로 구성된 컴포넌트들이 위치하는 레이어입니다.widgets: 헤더, 풋터 등 재사용이 가능한 UI 컴포넌트를 포함하..

1회차: FSD 개념 이해 및 프로젝트 설정목표FSD(Feature-Sliced Design)의 기본 개념과 필요성을 이해하고, React 프로젝트를 설정합니다.FSD란 무엇인가?Feature-Sliced Design(FSD)은 기능 중심의 아키텍처 패턴으로, 애플리케이션을 모듈화하여 코드의 유지보수성과 확장성을 높이는 데 목적이 있습니다. 프로젝트를 기능 단위로 분리해 각 기능을 독립적으로 관리하고 유지보수할 수 있게 합니다.FSD의 주요 구성 요소FSD 아키텍처는 레이어, 슬라이스, 세그먼트 구조로 구성됩니다.1. Layer (레이어)프로젝트의 주요 폴더 구조를 정의합니다. 레이어는 다음과 같이 구분됩니다:app: 애플리케이션의 초기화 및 전역 설정과 관련된 코드processes: 페이지 간에 걸쳐 ..

React 애플리케이션에서 Feature-Sliced Design(FSD)을 적용하면 코드 구조를 체계적으로 관리하고 유지보수성을 향상시킬 수 있습니다. 다음은 FSD의 개념 설명과 실제 개발 적용을 위한 5회차 강의안입니다.1회차: FSD 개념 이해 및 프로젝트 설정목표:FSD의 기본 개념과 필요성을 이해하고, React 프로젝트를 설정합니다.내용:FSD란 무엇인가?기능 중심의 아키텍처 패턴으로, 코드의 모듈화와 유지보수성을 높이기 위한 설계 방법론입니다.프로젝트를 기능 단위로 분리하여 각 기능을 독립적으로 관리합니다.FSD의 주요 구성 요소:Layer(레이어): 애플리케이션의 전반적인 구조를 구성하는 최상위 폴더입니다. 주요 레이어는 다음과 같습니다.app: 애플리케이션의 진입점 및 초기화와 관련된 ..

제품 정보는 정확하고 체계적으로 관리하는 것이 중요합니다. 리얼리포트의 웹 디자이너 기능을 사용하여 제품 정보를 빠르게 업데이트하고 관리할 수 있는 방법을 소개합니다. 이 가이드에서는 제품 정보 양식을 자동화하여 관리 시간을 절감하고 데이터 정확성을 높이는 방법을 설명합니다.엑셀/워드로 제품 정보 관리할 때의 문제점엑셀이나 워드로 제품 정보를 관리할 경우, 다음과 같은 번거로운 과정이 발생할 수 있습니다:서식 설정: 제품 정보의 레이아웃을 맞추고, 로고와 제품 정보를 수동으로 입력해야 하므로 시간과 노력이 많이 듭니다.정보 업데이트: 제품 정보가 변경될 때마다 데이터를 수정하고 새 문서를 작성해야 하며, 실수로 인한 데이터 오류가 발생할 가능성도 높습니다.출력과 저장: 다양한 형식으로 출력하거나 PDF로..

리얼리포트로 문서 자동화하기: 간편한 재직증명서 작성법리얼리포트를 활용해 번거로운 재직증명서 작성 과정을 웹 디자이너 환경에서 효율적으로 자동화할 수 있습니다. 이 포스트에서는 간단한 데이터 입력과 템플릿을 통한 재직증명서 자동화 과정을 살펴보겠습니다. 1. 엑셀/워드로 작성할 때의 번거로움엑셀이나 워드를 사용해 재직증명서를 작성할 때는 다음과 같은 문제가 있습니다:서식 설정: 문서의 레이아웃을 매번 조정해야 하며, 로고, 주소, 회사명을 수작업으로 입력해야 합니다.정보 입력: 직원의 이름, 직급, 입사일 등을 하나하나 수작업으로 입력하기 때문에 실수의 가능성이 높습니다.출력과 저장: PDF로 변환하거나 인쇄할 때, 문서 형식을 일일이 다시 조정해야 하므로 관리에 번거로움이 따릅니다.이러한 문제를 해결하..

회사에서 다양한 보고서를 만들어야 하는 상황에서, 저는 처음에는 엑셀이나 워드를 사용해 재직증명서 같은 문서를 작성하려 했습니다. 하지만 더 효율적인 방법을 찾던 중 리얼리포트를 알게 되었고, 이를 통해 문서를 보다 간편하고 체계적으로 작성하는 방법을 발견하게 되었습니다. 이번 시리즈에서는 리얼리포트를 활용해 각기 다른 양식을 사용하여 문서를 드라마틱하게 완성해 나가는 과정을 공유하려 합니다.1. 리얼리포트로 완성하는 효율적인 재직증명서 작성법재직증명서 작성의 번거로움을 해결하는 리얼리포트 활용 방법을 소개합니다. 엑셀이나 워드 없이 간단하게 작성하고 출력할 수 있는 효율적인 방법을 설명합니다.2. 제품 정보 관리의 혁신: 리얼리포트를 활용한 제품정보 양식 작성제품 정보를 체계적으로 관리하고 업데이트하는..

프로젝트 소개 및 초기 설정이슈 트래커 주요 기능 개요React 및 RealGrid 설치, 초기 환경 설정UI 구조 설계와 데이터 모델 정의데이터 관리 및 기본 기능 구현RealGrid 데이터 바인딩: 이슈 생성 및 수정필터링, 정렬, 페이지네이션 기능이슈 속성별 상태 및 우선순위 관리이슈 상세 관리와 협업 기능 추가이슈 상세 보기 및 편집 모달사용자 할당 기능과 댓글 추가변경 기록 관리 및 알림 기능 구현배포와 최적화대용량 데이터 성능 최적화데이터 내보내기 및 백업배포와 최종 테스트, 서버 연동

Lazy Loading은 대용량 데이터를 한 번에 로드하지 않고 필요한 시점에 데이터 일부만 불러오는 방식으로, 성능을 크게 향상시키는 기술입니다. RealGrid에서는 Lazy Loading을 통해 네트워크 트래픽을 줄이고, 로드 시간을 단축하여 사용자 경험을 개선할 수 있습니다. 이 포스트에서는 Lazy Loading의 기본 개념과 RealGrid를 통해 구현하는 방법을 알아보겠습니다.1. Lazy Loading의 필요성대용량 데이터를 한 번에 모두 로드하면:성능 저하: 데이터가 많아질수록 로딩 시간이 길어지고, 브라우저 메모리를 많이 차지해 성능이 떨어집니다.네트워크 부하: 서버와의 네트워크 부하가 커지며, 실시간 데이터를 표시하기 어려워질 수 있습니다.Lazy Loading은 스크롤이나 페이지 이..

데이터 페이징은 많은 데이터를 한 화면에 표시하지 않고 페이지 단위로 나누어 보여주는 기능으로, 사용자에게 더 편리한 탐색 환경을 제공하고, 대량의 데이터를 로드할 때 발생할 수 있는 성능 문제를 줄이는 데 유용합니다. RealGrid에서는 데이터를 효율적으로 페이징하는 기능을 제공하며, 특히 대용량 데이터를 다루는 실무 상황에서 중요하게 사용됩니다.주요 내용기본 페이징 설정RealGrid의 기본 페이징 기능을 활성화하여 데이터 페이지당 보여줄 행(row) 수를 설정할 수 있습니다.예시: gridView.setPaging(true, 50);위 코드를 통해 페이지 기능을 활성화하고, 한 페이지에 50개 행을 표시할 수 있습니다.페이징 UI 설정기본 페이징 설정 외에도 페이지 이동 버튼과 같은 UI를 사용자..