[React] React + Upbit API로 실시간 코인 시세 사이트 만들기 (2)

안녕하세요.이번 글에서는 앞선 포스팅에서 구현한 API와 WebSocket 연동이후에 데이터를 받아 화면에 보여주는 부분을 구현해보겠습니다. 목차데이터 가공과 UI 수정검색 및 탭기능 구현데이터 가공과 UI 수정ProductTable.tsx실시간 데이터를 화면에 보여주기 위해 ProductTable 컴포넌트를 구현해보겠습니다.ProductTable은 현재 선택된 마켓 탭과 검색 조건에 따라 화면에 보여줄 코인 목록(visible)과 실시간 시세 데이터를 테이블 형식으로 렌더링하는 컴포넌트입니다.ProductTable내부에서는 Zustand의 useUpbitStore을 사용하여 visible 배열상태로 구독하고, 해당 배열을 순회하며 ProductItem컴포넌트를 동적으로 생성하도록 구현합니다.visibl..

안녕하세요.이번 글에서는 앞선 포스팅에서 소개한 React 와 Upbit API 를 활용하여 간단한 예제를 직접 구현해보겠습니다. 목차 1. 프로젝트 세팅 2. Upbit API 와 WebSocket 연동 프로젝트 세팅 UI 구성에 앞서 React 프로젝트에서는 각 기능별로 폴더를 나눠서 관리하는것이 일반적입니다. 이렇게 구조화하면 유지보수와 확장에 유리하고, 협업시에도 각자의 역할이 명확해집니다. 아래는 대표적인 폴더구조 예시입니다. components 재사용 가능한 UI 요소들을 보관하는 폴더입니다. 라우팅과 직접 연결되지 않는, 작고 반복적인 컴포넌트들을 정의합니다. pages 라우팅에 대응되는 페이지 단위 컴포넌트를 보관합니다. URL 경로와 직접 연결되며, 각 화면의 중심역할을 합니다. ..

안녕하세요. 이번 글에서는 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에 대해 알아보고 ..

안녕하세요. 이번 주제는 앞서 포스팅했던 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 페이지 전체를 불러오지 않고 ..

1. Flutter란? Flutter는 Google에서 만든 Cross-Platform Framework입니다. 하나의 코드로 Android / IOS, Desktop App까지 개발할 수 있습니다. 언어는 구글이 개발한 Dart를 사용합니다. 2. Widget Flutter에서는 모든 것이 Widget으로 시작합니다. Image, Icon, Text, Row, Column, Padding도 모두 Widget입니다. Flutter는 크게 Material Widget과 Cupertino Widget을 자체적으로 제공하기 때문에 look&feel, 빠른 속도, 커스터마이즈, 확장 가능성 등을 지원받습니다. Flutter은 Widget과 Renderer들을 플랫폼 영역에서 앱의 영역으로 옮겨서 위젯들의 커스터..

웹차트 만들기 1편에 이어 응용 편으로 파이그래프를 그려보도록 하겠습니다~! 파이그래프 그리기 먼저, 파이그래프의 전체적 윤곽을 잡는 코드와 설명입니다. [line6] D3 라이브러리를 사용하기 위해서 해당 스크립트 링크 주소를 넣어줍니다. [line11 ~ 15] 파이차트를 그려내기 위해서 고정적으로 사용할 변수들을 선언합니다. - 파이차트를 그려내기 위한 바깥쪽반지름(outerRadius), 안쪽반지름(innerRadius) - d3.scale.category20() 으로 d3 표준색상을 지정합니다. [line17 ~ 22] 파이차트에서 사용할 데이터를 dataset변수에 할당합니다. [line24 ~ 30] 해당라인의 코드는 아래와 같은 구조로 후에 그리게 될 파이차트를 감싸는 태그를 만듭니다. s..

D3.js란? 안녕하세요. 자바스크립트 라이브러리 중 하나인 D3.js에 대해서 소개해드리려고 합니다. D3.js란 자바스크립트 라이브러리를 처음 들어보신 분도 또는 자주 사용해보셨던 분들도 계시겠지만, 이번에는 처음 접해보시는 분들을 위해 조금 자세하고 쉽게 설명해드리도록 하겠습니다. (이미 자주 사용하시고 저보다 더 많은 지식을 알고 계시는 분들에게 미리 양해 말씀드립니다^^) 우선 D3는(D3.js를 줄여서 D3라고 함) 완전히 오픈소스이며, Data-Driven-Documents의 약자로 D가 연속으로 3번 들어가서 일명 D3라는 명칭으로 부르며, 웹브라우저상에서 동적이고 인터렉티브한 정보시각화를 구현하기 위한 자바스크립트 라이브러리입니다. D3의 장점은 새로운 언어 형태가 아니라 자바스크립트 문..