[React] React 소개 및 프로젝트 생성

안녕하세요. 이번 글에서는 React가 어떤 라이브러리인지 간단히 살펴보고, Vite와 TypeScript를 활용해 React 개발 환경을 구성하는 방법을 소개해 드리겠습니다. 목차1. React란2. 프로젝트 생성 1. React란 React 는 사용자 인터페이스 (UI) 를 효율적으로 구축할 수 있도록 도와주는 JavaScript 라 이브러리입니다. Meta(Facebook) 에서 개발되었으며, 현재는 다양한 웹 서비스와 애플리케이션에서 널리 사용되고 있습니다. React의 주요 특징 컴포넌트 기반 구조 React 는 화면을 컴포넌트라는 작은 단위로 나눠서 구성합니다. 예를 들어 웹 페이지가 있다고 하면 헤더는 본문은, 푸터는 이렇게 각각의 부분을 독립적인 파일로 만들고, 조립하듯이 붙여서 하나..

안녕하세요.이번 글에서는 지난 포스팅에서 구현한 실시간 코인 시세 사이트에 WebSocket을 활용한 실시간 데이터를 구현하고, 데이터를 가공하고 변화를 감지하여 UI에 반영하는 방법을 함께 살펴보겠습니다. 목차WebSocket을 활용한 실시간 데이터 구현데이터 가공과 UI 수정 1. WebSocket을 활용한 실시간 데이터 구현 실습을 진행하기 전, Vue의 Lifecycle Hooks에 대해 알아보도록 하겠습니다. | Lifecycle HooksVue에서는 컴포넌트가 생성되고 제거되는 일련의 흐름(생명주기)에 따라 특정 시점마다 작업을 수행할 수 있도록 라이프사이클 훅이라는 개념을 제공합니다.Composition API에서는 각 훅을 함수 형태로 가져와서 실행하며, 컴포넌트의 생성, 마운트, 업데이..

안녕하세요.이번 글에서는 앞선 포스팅에서 소개한 Vue 3와 UPbit API를 활용하여 간단한 예제를 직접 구현해보겠습니다.실습 과정에서 Vue의 컴포넌트 구조와 컴포넌트간의 상호작용 방식에 대해서도 함께 알아보겠습니다. 목차프로젝트 세팅과 UI 구성UPbit API 연동하여 종목명 표시하기 1-1. 프로젝트 생성 및 VSCode 확장 프로그램 소개이전 포스팅에서 Node.js 설치와 프로젝트 생성 방법을 다뤘습니다.이번에는 동일한 방식으로 Vue 프로젝트를 만들고, 로컬 환경에서 실행해보겠습니다. [Vue.js 3.0] (1) Vue 소개 및 프로젝트 생성안녕하세요. 이번 글에서는 웹 개발에서 중요한 역할을 하는 프론트엔드 프레임워크 Vue.js를 설명드리겠습니다. 우선 Vue.js에 대해 알아보고 ..

안녕하세요. 2편에서는 1편에서 설명드렸던 CI/CD를 실제로 구축해보도록 하겠습니다. 1편을 확인하고 싶으신 분들은 아래 링크를 눌러주세요. AWS EC2 활용한 CI/CD 구축 (1) 1. 아키텍처 아키텍처는 아래 순서대로 진행합니다. 개발자 작업사항 커밋 → jenkins 빌드 실행 → GitHub 프로젝트 파일 빌드 → jenkins 빌드한 파일을 배포서버 ec2 인스턴스에 배포 → 배포 서버 ec2 톰캣 실행 → 스프링 부트 프로젝트 실행 완료 2. 구축순서 구축은 아래 순서대로 진행하도록 하겠습니다. 1. 개발 프로젝트 github 연동 2. AWS 계정 생성 → 2번 단계까지는 별도 설명없습니다. 3. IAM 사용자 추가 (그룹 생성, 권한 추가) 4. EC2 서비스 인스턴스 생성 5. EC..

안녕하세요. 이번 글에서는 CI/CD에 대한 개념과 CI/CD 이해에 도움이되는 AWS, 클라우드 컴퓨팅에 대해 설명드리겠습니다. 1. AWS와 클라우드 컴퓨팅 1-1. AWS(Amazon Web Services)란 Amazon Web Services는 아마존에서 제공하는 클라우드 서비스 플랫폼으로 네트워킹을 기반으로 가상 컴퓨터와 스토리지, 네트워크 인프라 등 다양한 서비스를 제공합니다. [서비스 종류] Amazon EC2 가상 서버를 제공하여 애플리케이션 실행에 필요한 컴퓨팅 리소스를 제공합니다. AWS CodePipeline 소프트웨어 전달 프로세스를 자동화하기 위한 서비스로 소스 코드 변경 사항을 가져와 빌드, 테스트, 배포 단계를 설정하고 연결하여 전달을 지원합니다. AWS CodeBuild 소..

안녕하세요. 이번 주제는 앞서 포스팅했던 Vue 소개 및 프로젝트 생성 편에 이어 실제 프로젝트에서 Vue를 사용하는데 많이 도움되었던 Navigation Guard, Pinia의 활용 경험과 장점을 공유해드리고자 합니다. 목차 네비게이션 가드 (Navigation Guard) 피니아 (Pinia) ※ 시작하기에 앞서 해당 글에서 제공하는 코드는 실제 코드가 아니며 예제를 위해 유사하게 만든 샘플 코드이니 참고바랍니다. 1. 네비게이션 가드 (Navigation Guard) (1) 네비게이션 가드란? 네비게이션 가드는 Vue Router 라이브러리에서 제공하는 라우터로 페이지를 이동하는 동안 특정 조건에 따라 화면 이동을 제어하거나 변경하는 기능입니다. 다시 말해 특정 URL로 접근할 때 조건에 따라 접..

안녕하세요. 이번 글에서는 웹 개발에서 중요한 역할을 하는 프론트엔드 프레임워크 Vue.js를 설명드리겠습니다. 우선 Vue.js에 대해 알아보고 프로젝트를 생성하며 간단한 예제를 만들어보고, 다음 편에선 자사 수행 프로젝트(현대차증권 ‘모바일리빌딩’)에서 Vue를 활용하며 느꼈던 개발 경험을 공유드리도록 하겠습니다. 1. Vue란 먼저 Vue를 알아보기 전 프론트엔드 프레임워크를 사용하는 이유와 SPA(Single Page Application)가 등장한 배경에 대해 설명드리겠습니다. SPA 방식 등장 전 웹 애플리케이션은 사용자가 화면을 이동할 때 마다 새로운 HTML 페이지를 서버에 요청합니다. 반면, SPA는 한 페이지 안에서 모든 기능이 동작되도록 설계되어 HTML 페이지 전체를 불러오지 않고 ..

안녕하세요. 이번 글은 사이버이메지네이션의 CMS 솔루션인 bizXpress v2.0 제품을 소개해드리고자 합니다. bizXpress는 웹 컨텐츠 작성, 퍼블리싱, 배포까지 손쉽게 이용할 수 있습니다. 멀티 디바이스에 최적화되어 홈페이지와 모바일 컨텐츠 생성 및 수정 작업 시간을 획기적으로 단축시킬 수 있으며 한국투자증권, 신한라이프, DB손해보험, 롯데카드 등 대형 금융사에서 사용하고 있는 검증된 솔루션입니다. 제품의 더 많은 정보는 글 마지막 부분의 링크를 통해 확인하실 수 있습니다. 제품 주요 기능 레퍼런스 소개 더 많은 레퍼런스를 확인하시려면 여기를 클릭해주세요. bizXpress 제품기능 보러가기 bizXpress 제품영상 보러가기

안녕하세요 이번 글에서는 내장형 DB (인메모리 데이터베이스) 종류와 Scale-Out 또는 HA 구조에서의 내장형 DB 동기화 기술 구현 방식에 대해 설명드리도록 하겠습니다. 내장형 DB (In-memory DB) 란? 디스크 베이스 DB와 반대로 메모리에 데이터를 저장하는 것을 인메모리 DB라고 합니다. 외부 저장 장치에 데이터를 저장하지 않고 메모리에서 데이터를 읽고 쓰기 때문에 디스크 베이스 DB 대비 데이터 이용 속도가 빠른 것이 특징입니다. Java에서의 내장형 DB 엔진은 일반적으로 Jar 파일 안에 포함되어 있으며 애플리케이션이 실행되는 동안 동일한 JVM 내에서 동작합니다. 내장형 DB 관련 기술을 구현하는 경우 데이터 저장 방식, 네트워크 구조 등 여러 데이터베이스 환경을 고려하여 데이..

안녕하세요. 이번 글은 사이버이메지네이션의 증권/금융거래용 WTS 구축 솔루션인 coreFRAME WTS Edition을 도입하여 진행한 제휴 서비스 개발 레퍼런스를 소개해드리고자 합니다. coreFRAME WTS Edition은 웹표준 및 웹접근성 준수, 대용량 데이터의 실시간 처리, One Source Multi Use, 손쉬운 유지보수를 지원하며 한국투자증권, 한화투자증권, 신한금융투자 등 대형 금융사에서 사용하고 있는 검증된 솔루션입니다. 제품의 상세한 기능과 레퍼런스는 글 마지막 부분의 링크를 통해 확인하실 수 있습니다. 레퍼런스 소개 1. 한화투자증권x우리은행 제휴 주식매매 서비스 개발 (2022.08 OPEN) - MTS 설치없이 우리WON뱅킹 앱 내에서 간편하게 주식 거래가 가능하도록 국내..