개요

• TradingView 에서 만든 경량, 고성능 차트 라이브러리

• 주식과 같은 그래프 구현시 용이하게 쓸 수 있다. 공식 문서 링크

설치

npm install lightweight-charts

사용

아래 2가지 개념만 있으면 누구나 사용할 수 있을 정도로 간펀하면서 쉽다.

• createChart -> 차트 배경 생성

• .addLineSeries -> 그래프 생성

import { useEffect, useRef } from 'react';
import { createChart } from 'lightweight-charts';


const MyChart = () => {
  //차트배경을 가리키는 Ref
  const chartContainerRef = useRef<HTMLDivElement>(null);  


  useEffect(() => {
    if (!chartContainerRef.current) return; //요소 생선 전 차트 생성 방지

    // createChart(container, options) → 차트 배경 생성 (지정 DOM 요소)
    const chart = createChart(chartContainerRef.current, { 
      width: chartContainerRef.current.clientWidth,
      height: 300,
    });


    // 그래프 추가
    //Candles, Line, Bars, Area, BaseLine, Histogram
    //addLineSeries(그래프 형태, 옵션설정)
    const graph = chart.addSeries(Line);

    // 데이터 넣기
    graph.setData([
      { time: '2025-01-01', value: 100 },
      { time: '2025-01-02', value: 110 },
      { time: '2025-01-03', value: 105 },
      { time: '2025-01-04', value: 120 },
    ]);

    // 리사이즈 대응
    const handleResize = () => {
      chart.applyOptions({ width: chartContainerRef.current!.clientWidth });
    };
    window.addEventListener('resize', handleResize);

    // 컴포넌트 언마운트시 메모리 관리를 위한 remove
    return () => {
      window.removeEventListener('resize', handleResize);
      chart.remove();
    };
  }, []);

  return (
    <div ref={chartContainerRef} style={{ width: '100%', height: '300px' }} />
  );
};

export default MyChart;

옵션

커스텀할 수 있는 부분이 많은 만큼, 옵션 또한 엄청 많다.

차트 배경 옵션(createChart)

• width, height(차트 크기)
• layout (배경/글자 색상, 폰트)
• grid (세로/가로 라인 색상 및 스타일)
• crosshair (마우스 올렸을 때 보이는 십자선 모드)
• rightPriceScale / leftPriceScale (가격축 보이기 여부, 색상)
• timeScale (시간축 옵션)
• handleScroll / handleScale (마우스/터치 스크롤, 줌 허용 여부)

  const chart = createChart(container, {
  width: 800, //width, height(차트 크기)
  height: 400,
  layout: { //배경/글자 색상, 폰트
    background: { color: '#ffffff' },
    textColor: '#333',
    fontSize: 12,
  },
  grid: { //세로/가로 라인 색상 및 스타일
    vertLines: { color: '#e1e1e1', style: 0 },
    horzLines: { color: '#e1e1e1', style: 0 },
  },
  crosshair: { //crosshair (마우스 올렸을 때 보이는 십자선 모드)
    mode: 1,
  },
  rightPriceScale: { // or leftPriceScale 가격축 보이기 여부, 색상
    visible: true,
    borderColor: '#ccc',
  },
  timeScale: { //시간축 옵션
    borderColor: '#ccc',
    timeVisible: true,
    secondsVisible: false,
  },
  handleScroll: { //마우스/터치 스크롤
    mouseWheel: true,
    pressedMouseMove: true,
  },
  handleScale: { //줌 허용 여부
    axisPressedMouseMove: true,
    pinch: true,
    mouseWheel: true,
  },
  });

그래프 옵션(addSeries)

Candlestick Series

const candleSeries = chart.addSeries(CandlestickSeries, {
  upColor: '#26a69a',
  downColor: '#ef5350',
  borderUpColor: '#26a69a',
  borderDownColor: '#ef5350',
  wickUpColor: '#26a69a',
  wickDownColor: '#ef5350',
  priceLineVisible: true,
});

• upColor / downColor: 양봉/음봉 몸통 내부 색
• borderUpColor / borderDownColor: 몸통의 테두리 색
• wickUpColor / wickDownColor: 위·아래 심지(꼬리)의 색
• priceLineVisible: 현재가 라인(수평선)을 표시할지 여부

Line Series

const lineSeries = chart.addSeries(LineSeries, {
  color: '#2962FF',
  lineWidth: 2,
  lineStyle: 0, // 0: solid, 1: dotted, 2: dashed
  priceLineVisible: true,
  crossHairMarkerVisible: true,
});

• color: 선의 색상
• lineWidth: 선의 두께
• lineStyle: 선의 스타일 (실선, 점선 등)
• crosshairMarkerVisible: 크로스헤어가 있을 때 지점 마커를 보일지 여부
• priceLineVisible: 현재가 라인 보이기 여부

Histogram Series

const volumeSeries = chart.addSeries(HistogramSeries, {
  color: '#26a69a',
  base: 0,
  priceFormat: { type: 'volume' },
});

• color: 막대의 기본 색
• base: 기준선 값 (보통 0)
• priceFormat: 값의 표시 방식 (예: volume, percent 등)

Area Series

const areaSeries = chart.addSeries(AreaSeries, {
  lineColor: '#2962FF',
  topColor: 'rgba(41, 98, 255, 0.5)',
  bottomColor: 'rgba(41, 98, 255, 0.0)',
  lineWidth: 2,
});

• lineColor: 영역 상단 경계선 색
• topColor: 라인 위쪽 영역 색
• bottomColor: 라인 아래쪽 영역 색
• lineWidth: 경계선의 두께

Bar Series

const bar = chart.addSeries(BarSeries, {
  upColor: '#26a69a',
  downColor: '#ef5350',
  thinBars: false,
});

• upColor / downColor: 가격 상승/하락 시 막대 색
• thinBars: 얇은 막대 스타일 여부

Baseline Serise

const baseline = chart.addSeries(BaselineSeries, {
  baseValue: 100,
  topFillColor1: 'rgba(0, 200, 0, 0.3)',
  topFillColor2: 'rgba(0, 200, 0, 0.0)',
  bottomFillColor1: 'rgba(200, 0, 0, 0.3)',
  bottomFillColor2: 'rgba(200, 0, 0, 0.0)',
  topLineColor: 'green',
  bottomLineColor: 'red',
  lineWidth: 2,
  lineStyle: 0,
  lineVisible: true,
  crosshairMarkerVisible: true,
});

• baseValue: 기준선 값
• topFillColor1 / topFillColor2: 기준선 위쪽 영역 그라디언트 색상
• bottomFillColor1 / bottomFillColor2: 기준선 아래쪽 영역 그라디언트 색상
• topLineColor / bottomLineColor: 기준선 위/아래 경계선 색상
• lineWidth: 기준선 경계선 두께
• lineStyle: 기준선 스타일 (solid, dashed 등)
• lineVisible: 기준선 경계선을 보일지 여부
• crosshairMarkerVisible: 크로스헤어가 지점 마커를 표시할지 여부

지금까지 폴더 구조에 대해 고민해본적 없었다.

개인, 팀프로젝트는 화면상 기능, 뎁스가 깊지 않았고, 인턴 시절엔 이미 폴더 구조가 정해져 있었으니 그에 대해 적응하면 그만이었다.

하지만 실제 서비스 할 제품을 만들면서 부터는 고민이 깊어지기 시작했다. 물론 MVP를 빠른 속도로 개발 하는 것이 1순위라 생각했지만, 아예 무시하고 개발하기엔 이후에 발생할 유지보수비용이 너무나 커질 것만 같았다.

그래서 찾아본게 Feature-Sliced Design FSD 아키텍쳐이다.

기존 문제점

기존엔 레이어, 도메인 기반으로만 코드를 나누고 있었다.

상대경로 지옥

import Logo from '../../../../../../../assets/logo.png';

• 설명할 필요도 없다

재사용 단위 불명확

src/components/common/
  └── TokenListCard.tsx  # ❌ 특정 페이지에서만 쓰는 컴포넌트

• 정작 공용으로 만들어두고 한 페이지에서만 사용

중복 경로 혼선

src/pages/exchange/...
src/pages/add/exchange/...

• 코드 작성자가 봐도 헷갈리는 경로

이런 문제들을 해결할 수 있는 아키텍쳐라 본다.

FSD 아키텍쳐 간단 설명

기능 단위로 프로젝트를 분할, 각 계층에서 책임을 분리

Layers

모든 FSD 프로젝트의 표준 최상위 폴더

src/
├── app/          # 애플리케이션 로직이 초기화되는 곳입니다. 프로바이더, 라우터, 전역 스타일 등 정의. 애플리케이션의 진입점 역할.
├── processes/    # 온보딩, 회원가입과 같이 한 기능에 여러 페이지(더이상 안쓰임)
├── pages/        # 애플리케이션의 페이지
├── widgets/      # 페이지에 사용되는 독립적인 UI 컴포넌트
├── features/     # (선택적) 비즈니스 가치를 전달하는 사용자 시나리오와 기능(좋아요, 리뷰 작성, 제품 평가 등).
├── entities/     # (선택적) 사용자, 리뷰, 댓글 등
└── shared/       # 로직에 종속되지 않은 재사용 가능한 컴포넌트와 유틸리티(UI 키트, axios 설정, 애플리케이션 설정, 비즈니스 로직)

Slice

Layer 내부를 비즈니스 도메인별로 나눈 두 번째 수준.

src/
├── app/
│    ├── providers/
│    ├── styles/
│    └── index.tsx
├── pages/
│    ├── home/
│    ├── profile/
│    └── about/
├── widgets/
│    ├── newsfeed/
│    ├── catalog/
│    ├── header/
│    └── footer/
├── features/
│    ├── user/
│    ├── auth/
│    ├── favorites/
│    └── filter-users/
├── entities/
│    ├── user/
│    └── session/
└── shared/  

• 이름이나 개수에 제한이 없다. 위 사진에 나와있는 것들은 말 그대로 예시.
• 같은 Layer 내 다른 Slice를 참조할 수 없다. 이 규칙이 높은 응집도와 낮은 결합도를 보장한다.

Segment

Slice와 App·Shared Layer는 Segment로 세분화

• 기술적 목적에 따라 코드를 그룹화. 일반적으로 다음과 같은 Segment를 사용.

ui - UI components, date formatter, styles 등 UI 표현과 직접 관련된 코드
api - request functions, data types, mappers 등 백엔드 통신 및 데이터 로직
model - schema, interfaces, store, business logic 등 애플리케이션 도메인 모델
lib - 해당 Slice에서 여러 모듈이 함께 사용하는 공통 library code
config - configuration files, feature flags 등 환경·기능 설정

점진적 도입 방법

리팩토링 중에는 새로운 대규모 Entity 추가를 피하는 것을 추천.

기존 프로젝트에 FSD를 도입하는 방법

1. app, shared Layer를 먼저 정리하며 기반을 다짐.

2. 기존 UI를 widgets, pages Layer로 대략 분배.

위 과정에서 FSD 규칙을 위반은 괜찮음.

3. Import 위반을 하나씩 해결하면서, entities, features를 추출.

마치며

정답은 없다. 다만, 오답은 있다.

오죽 했으면 리액트 공식 문서에서 조차 폴더 아키텍쳐에 대해서 별 다른 의견이 없다고 하겠는가?

하지만 오답은 있다. 너무나 많은 중첩, 너무 높은 의존도, 이에 대한 너무 많은 생각과 고민은 피하라고 한다.

효율적이라 생각는 방법이 다른 사람들을 납득시킬 수 있으면 그게 정답이지 않을까?

📌 참고 문헌

FSD 공식 문서 emewjin 님의 깃헙 블로그