atomicdev 님의 블로그

React 함수와 JavaScript 함수는 근본적으로 JavaScript에서 실행되는 코드이지만, React에서 사용하는 함수는 React의 특정 개념이나 기능에 초점을 맞춥니다. 아래는 React 함수와 JavaScript 함수의 차이점과 용도에 대한 설명입니다.1. JavaScript 함수JavaScript 함수는 코드의 재사용성을 높이고 특정 작업을 수행하기 위해 정의된 일반적인 함수입니다. React와 관계없이 순수하게 JavaScript 언어 자체에서 사용하는 함수입니다.특징:목적: 특정 작업을 수행하거나 값을 반환.종류: 일반 함수, 화살표 함수, 익명 함수 등.호출 방법: 직접 호출하거나 이벤트에 의해 호출.유형일반 함수:function add(a, b) { return a + b;}co..

2.데이터 관리 및 기본 기능 구현이번 포스트에서는 **리얼그리드(RealGrid)**를 활용하여 Jira 스타일의 이슈 트래커에서 데이터 관리, 페이징, 필터링, 정렬 기능과 함께 동적 스타일을 적용하여 우선순위에 따라 다른 색상을 부여하는 방법을 다룹니다.주요 구현 기능데이터 필터링: 특정 조건에 맞는 데이터를 필터링.데이터 정렬: 컬럼 헤더를 클릭하여 데이터를 정렬.페이징 처리: 대량 데이터를 페이지별로 나누어 보여줌.동적 스타일: 데이터 값(우선순위)에 따라 컬럼의 색상 스타일 동적 변경.1. 페이징 처리코드 및 설명페이징은 데이터를 화면에 효율적으로 표시하기 위해 사용됩니다. gridView.setPaging을 통해 페이지 수를 설정하고, 현재 페이지와 총 페이지 수를 계산하여 화면에 표시합니다..

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

1강: 리얼그리드 설치 및 환경 설정개요:이 강의에서는 리얼그리드를 리액트 프로젝트에 연동하는 방법을 배웁니다. 리액트 프로젝트를 생성하고, 리얼그리드 패키지를 설치한 후 기본 환경 설정을 완료하여 리얼그리드를 사용할 준비를 마칩니다.1. 리액트 프로젝트 생성먼저 리액트 프로젝트를 생성해야 합니다. 다음 명령어로 새로운 리액트 프로젝트를 생성할 수 있습니다.npx create-react-app realgrid-democd realgrid-demo create-react-app 명령어를 사용하여 프로젝트를 초기화한 후 프로젝트 디렉토리로 이동합니다.2. realgrid-react 패키지 설치리얼그리드 패키지를 프로젝트에 추가합니다. npm 또는 yarn을 사용하여 패키지를 설치할 수 있습니다.npm ins..

리얼그리드를 리액트에서 사용하는 튜토리얼을 기반으로, 실제 설치 및 활용 가이드 입니다.1강: 리얼그리드 설치 및 환경 설정개요: 리얼그리드와 리액트를 연동하는 방법을 배웁니다. 리액트 프로젝트에 리얼그리드 패키지를 설치하고 기본 환경을 설정하는 과정을 다룹니다.리액트 프로젝트 생성realgrid-react 패키지 설치기본 프로젝트 구조 및 환경 설정실습: 리액트 프로젝트에 리얼그리드 패키지 적용하기2강: 리얼그리드 기본 구성 및 라이선스 설정개요: 리얼그리드의 기본 구성 요소와 라이선스를 설정하는 방법을 학습합니다. 그리드 생성 후 기본적인 UI와 데이터를 시각화하는 예제를 다룹니다.라이선스 발급 및 적용 방법그리드 컴포넌트 생성실습: 간단한 그리드 생성 및 데이터 시각화3강: 그리드 컬럼 생성 및 데..

React 컴포넌트 기반 설계와 상태 관리, 비동기 처리의 실제 사례React는 컴포넌트 기반 UI 라이브러리로, 재사용 가능한 컴포넌트를 설계하는 것이 핵심입니다. PL로서 팀원들에게 컴포넌트 설계 원칙을 교육하고, 효율적인 상태 관리와 비동기 처리를 위한 최적의 패턴을 제시하는 것이 매우 중요합니다. 이번 글에서는 사용자 목록 관리 애플리케이션을 예로 들어, React 프로젝트에서 컴포넌트 기반 설계, 상태 관리, 그리고 비동기 처리에 대해 설명하고 소스 코드까지 함께 제공하겠습니다.1. 프로젝트 개요우리는 사용자 목록을 API에서 가져와 화면에 표시하고, 추가로 사용자를 등록할 수 있는 간단한 애플리케이션을 개발할 것입니다. 이 과정에서 컴포넌트 재사용성, 상태 관리와 비동기 처리의 원칙을 적용합니..