오늘한 일
- 작성했던 게시물 관련 기능들 서버와 연동, 버그 수정
- 색상 구현에 색상 비율 조정하는 기능 추가하기...
그라디언트 다중 슬라이더가 있으면 쉽게 했겠지만.. 못찾아서
직접 해보려 했음.. - 엘리먼트 내에서의 좌표값 얻어내기
screenX, Y - 사용자 모니터 기준 좌표
pageX, Y - 전체 문서 기준 좌표
clientX, Y - 보여지는 웹페이지 영역 기준 좌표
offsetX, Y - 이벤트가 등록된 엘리먼트 기준 좌표 >> 이걸 사용하여 색상 비율 조절바를 만들어보자.. 리액트에선 event.nativeEvent.offsetX로 접근이 가능했다 마우스 이벤트로 접근 해볼까나.. - draggable 옵션과 onDrag, onDrop 속성을 이용해볼까 했지만 원하는 기능이 아니라서 전환!
- 위와 같은 옵션들로 마우스 좌표에 따라 조절 바가 움직이게 구현하려 했다. 리액트에서 dom을 사용해서 하기에는 효율적이지 않아보였음
- 그러던 중 react-dnd 라는 것을 발견함. react-beautiful-dnd라는 것도 있지만, 박스의 순서를 바꾸는 드래그 앤 드랍을 구현하기에 최적화되어 보였고, 조금 더 범용적으로 사용할 수 있는 것은 react-dnd라는 블로그를 읽었음. 박스의 순서를 바꾸는 것이 아니기에 react-dnd를 사용해보려 함
- 우선 text Input 상자에 값을 적도록 하여 색깔 구현해내기는 성공, 색깔 구현은 state로 styled components의 props를 넘겨 구현
layer 형태로 나타내는 것은 flex 속성의 grow를 이용한 것으로 색상 수보다 하나 적은 포인터가 필요했고
gradient 형태로 나타내는 것은 linear-gradient를 이용한 것으로 색상수와 동일한 포인터와 %값이 필요했다
왠만하면 다른 라이브러리를 사용하지 않고 드래그를 구현해보려 했는데, 어려울까??!
- 썸네일 색상 비율 조정 기능 추가(text input 이용)
- 헤더 휠 이벤트, Top 이동 버튼 구현
- 게시물 리스트 grid 수정, 썸네일 배치 수정
할 일
- 마우스를 이용한 비율 조정은 잠시 뒤로 미뤄두고, bare 단계 완성도 높이기
- 시간날 때 react-dnd 라이브러리 살펴보기
개발자 공부 일기😉