안녕하세요.이번 글에서는 앞선 포스팅에서 구현한 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 는 화면을 컴포넌트라는 작은 단위로 나눠서 구성합니다. 예를 들어 웹 페이지가 있다고 하면 헤더는 본문은, 푸터는 이렇게 각각의 부분을 독립적인 파일로 만들고, 조립하듯이 붙여서 하나..

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

저희 회사 제품인 CMS 솔루션 bizXpress는 Thymeleaf Template Engine 2.1.5 을 채택하여 사용하고 있습니다. 과거에는 JSP만 사용하다가 Thymeleaf 를 처음 접하면서 조금 생소하고 비교적 까다로운 사용법 때문에 적응하기 힘들었는데 지금은 모든 팀원들이 어려움 없이 잘 사용하고 있습니다. 저희들과 같이 Thymeleaf를 처음 접하는 분들에게 조금 이나마 도움이 될 수 있지 않을까 해서 자주 사용했던 기능들을 예제 위주로 정리 해보겠습니다. Thymeleaf는 Server-side Template Engine으로 순수 HTML문서에 HTML5문법으로 Server-side 로직을 수행하고 적용시킬 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14..

이번 주제는 웹 보안에 관련된 내용입니다. 홈페이지에 웹 취약성점검 툴을 돌려 테스트 해본 결과 나온 몇 가지 점들에 대해서 이야기 해볼까 합니다. 지금 여기서 이야기하지 않은 내용들도 많이 있겠지만 간단한 설정만으로 큰 효과를 볼 수 있는 사항에 대해서 진행해 보도록 하겠습니다. 1. 불필요한 Method 지원 첫 번째 목록은 불필요한 Method지원에 관한 내용입니다. HTTP method는 다음과 같은 Method를 지원하고 있습니다. GET 일반적인 요청으로 요청 URI에 모든 요청정보를 포함 하여 전송합니다. POST GET이 URI에모든 요청정보를 포함하였다면 POST는 BODY에 요청정보를 숨겨 전송합니다. PUT POST와 같은 방식으로 전달되지만 BODY의 내용이 실제 URI에 저장됩니다..