TIW_220808

jybaek96·2022년 8월 8일

@shopify/draggable Apache ECharts Drag & Drop TIW cors draggable gh-pages

TIW_2022

목록 보기

6/11

🦝 2022-08-08 (월)

오늘 한 것

포틀릿을 통한 차트 이동 구현
gh-pages 배포시 cors 문제 해결 (야매로 한 거라 다시 봐야할 듯 싶다)
Bootstrap Card 레이아웃 생성 및 Card header에 있는 특정 아이콘 클릭시에만 차트 드래그 앤 드랍 구현

오늘 배운 것

@shopify/draggable Draggable 속성

handle - 특정 버튼 클릭시에만 drag & drop 가능하게 구현
plugins: [Plugins.SortAnimation] - drag & drop 시 부드러운 애니메이션 및 주변 컴포넌트 상하좌우 움직이게 적용

<div class="box red">
	<div class="draggable-handle">
</div>

const sortable = new Sortable(containerEl, {
  draggable: '.box',
  handle: '.draggable-handle', // handle에 작성한 클래스 가진 요소를 눌렀을 때만 컴포넌트 이동 가능
  sortAnimation: {
    duration: 200,
    easingFunction: 'ease-in-out',
    horizontal: true
  },
  plugins: [Plugins.SortAnimation] // 상하 좌우로 주변 컨테이너 이동 (1.0.0@beta12버전부터 추가)
});

echarts 공백 제거 방법

grid - 속성으로 원하는 만큼의 공백을 제거한다.

grid: {
  left: 0,
  top: 0,
  right: 0,
  bottom: 0
}

에러 해결

react 프로젝트 gh-pages에 배포시 cors 문제 해결

개발 단계에서는 http-proxy-middleware 모듈을 이용해 proxy 설정으로 CORS 문제를 해결했지만 배포 단계에서는 지원이 되지 않기에 CORS 문제가 발생했다. 여러 방법을 사용해봤지만 다 안되었다...
당장 배포해서 회의 때 진행 상황을 보고해야 했기 때문에 일단 급하게 아래와 같은 방법을 사용했다.

해결 방법

axios 설정에서 withCredentials값을 false로 수정한다.

axios({
    method: 'get',
    url: `https://hello`,
    withCredentials: false, // withCredentials를 false로 설정
    params: {
      access_token: SECRET_TOKEN,
    },
  });