🦝 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,
},
});