atomicdev 님의 블로그

강의 목표React 컴포넌트의 개념과 역할을 이해한다.함수형 컴포넌트와 클래스형 컴포넌트를 비교하며 학습한다.React 컴포넌트를 활용해 간단한 UI를 구현한다. 강의 목차1. React 컴포넌트란? (15분)컴포넌트의 정의React 컴포넌트는 UI의 독립적이고 재사용 가능한 단위입니다.컴포넌트는 JavaScript 함수 또는 클래스 형태로 정의됩니다.React 애플리케이션은 컴포넌트 트리를 통해 UI를 구성합니다.React 컴포넌트의 역할UI 렌더링: 컴포넌트는 특정 상태에 따라 화면에 표시될 UI를 정의합니다.재사용성: 동일한 컴포넌트를 여러 번 사용할 수 있어 코드를 효율적으로 관리할 수 있습니다.상태 관리: 컴포넌트는 상태(State)와 속성(Props)을 통해 동적인 UI를 생성합니다.2. Re..

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

클라우드 네이티브의 미래: 개념, 주요 특징, 실무 활용법, 미래 전망클라우드 네이티브(Cloud Native)는 소프트웨어 개발 및 배포에 혁신적인 변화를 가져왔습니다. 이 글에서는 클라우드 네이티브의 미래가 가져올 기술적 변화와 기회를 중심으로, 개념부터 실무 적용 방법까지 심도 있게 살펴보겠습니다.1. 클라우드 네이티브의 미래의 개념클라우드 네이티브는 클라우드 환경을 기반으로 설계된 애플리케이션 개발 및 배포 방식을 의미합니다. 전통적인 온프레미스 방식과 달리, 클라우드 네이티브는 확장성과 유연성을 핵심으로 합니다. 이는 컨테이너, 마이크로서비스 아키텍처, 지속적 통합/지속적 배포(CI/CD), 오케스트레이션 도구 등을 포함한 다양한 기술을 조합하여 실현됩니다.2. 주요 특징1. 확장성클라우드 네이..

머신러닝 모델의 배포와 관리: 개념, 특징, 활용법, 미래 전망머신러닝은 다양한 산업 분야에서 혁신을 이끌며 소프트웨어 개발의 필수 요소로 자리 잡았습니다. 그러나 머신러닝 모델을 성공적으로 개발한 후에도 이를 실제 환경에 배포하고 관리하는 작업은 쉽지 않은 도전 과제입니다. 이번 글에서는 머신러닝 모델의 배포와 관리를 중심으로 개념부터 실무 적용 방법, 그리고 미래 전망까지 단계별로 알아보겠습니다.1. 머신러닝 모델의 배포와 관리의 개념머신러닝 모델의 배포는 학습된 모델을 실제 환경에서 사용할 수 있도록 준비하고 서비스화하는 과정을 의미합니다. 관리 측면은 배포된 모델의 성능을 모니터링하고, 필요할 경우 업데이트하거나 재훈련하여 최적의 상태를 유지하는 활동을 포함합니다.이 과정은 단순히 코드를 배포하는..

Windows 10 Pro에서 원격 데스크톱 서비스를 활성화하고 설정하는 방법을 단계별로 설명하겠습니다. 현재 윈도우 비밀번호가 없는 경우, 원격 접속을 활성화하려면 반드시 비밀번호가 설정된 사용자 계정이 필요합니다. 원격 데스크톱은 비밀번호 없는 계정으로는 접속이 허용되지 않습니다.1. Windows 비밀번호 설정원격 접속을 활성화하려면 먼저 사용자 계정에 비밀번호를 설정해야 합니다.비밀번호 설정:Windows 키 + I를 눌러 설정을 엽니다.계정 → 로그인 옵션으로 이동합니다.비밀번호 섹션에서 추가를 선택하여 계정에 비밀번호를 설정합니다.비밀번호를 설정한 후 다음 단계로 진행합니다.2. 원격 데스크톱 서비스 활성화시스템 설정 열기:Windows 키 + Pause/Break를 눌러 시스템 속성 창을 엽..

이 섹션에서는 RealGrid를 활용해 이슈 데이터 관리 및 기본 기능을 구현합니다. 데이터 바인딩, 필터링, 정렬, 페이지네이션 기능을 다루며, 이슈 속성에 따라 상태와 우선순위를 관리하는 방법을 포함합니다.1. RealGrid 데이터 바인딩: 이슈 생성 및 수정설명:데이터 바인딩: 데이터를 실시간으로 그리드에 연결하여 표시합니다.이슈 생성/수정: 사용자가 새로운 이슈를 추가하거나 기존 이슈를 편집할 수 있도록 구성합니다.예제 코드:import * as React from "react";import { useRef } from "react";import { RGDataField, RGDataColumn, RealGridReact } from "realgrid-react";const IssueTracke..

목표Jira 스타일 이슈 트래커 개발을 위한 초기 설정과 UI 설계 방법을 다룹니다. RealGrid와 React를 사용하여 데이터 처리 및 사용자 경험을 향상시키는 방법을 설명합니다.1. 프로젝트 소개 및 주요 목표프로젝트 목표사용자 친화적 UI: 이슈 데이터를 효율적으로 관리하고 탐색 가능.실시간 업데이트: 변경 사항 즉시 반영.대량 데이터 처리: RealGrid의 강력한 데이터 관리 성능 활용.기대 결과체계적인 이슈 관리 UI 제공.명확한 데이터 시각화를 통해 사용자 만족도 향상.2. UI 구조 설계전체 레이아웃 설계헤더: 프로젝트 제목 표시.사이드바: 필터 및 탐색 메뉴.메인 그리드: RealGrid로 이슈 목록 표시.UI 레이아웃 예제 코드import React from 'react';impor..

4회차: FSD를 활용한 기능 개발목표FSD 구조를 활용하여 실제 기능을 개발하고, 각 레이어, 슬라이스, 세그먼트 간의 상호작용을 이해합니다.기능 개발 흐름entities 레이어에서 도메인 모델을 정의합니다.features 레이어에서 비즈니스 로직을 구현합니다.widgets 레이어에서 UI 컴포넌트를 구성합니다.pages 레이어에서 최종 페이지를 구성하여 완성합니다.예시 기능"사용자 목록을 불러와 화면에 표시하는 기능"을 구현하겠습니다.실습: 사용자 목록 표시 기능 개발Step 1: 프로젝트 설정이전 실습에서 생성한 fsd-example 프로젝트를 사용하거나 새로 프로젝트를 생성해도 좋습니다.npx create-react-app fsd-example --template typescriptcd fsd-e..

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 컴포넌트를 포함하..