![]()
업무에서 첨부파일 업로드 솔루션을 적용하는 도중 드래그앤드롭을 구현하게 됐다.라이브러리를 써야할 정도로 다양한 기능이 필요한 것은 아니여서 html5에서 제공하는 드래그앤드롭 API를 사용했다. 아주 간단하게 기능만 동작하는 코드를 가져왔다. State 및 상태 관리const [files, setFiles] = useState([]);useEffect(() => { console.log(files);}, [files]);files가 변경될 때마다 로깅한다. 드래그 앤 드롭 이벤트 핸들링// 드래그 중일 때 이벤트 발생const handleDragOver = (e) => { e.preventDefault(); e.stopPropagation();};// 파일을 드래그 영역 위에 떨어트렸을 ..
![]()
프로젝트 디자인이 나왔는데 폰트가 Pretendard 여서 적용해봐야 한다.바닐라JS 환경이기에 패키지 매니저로 관리할 수 없어서 CDN으로 적용했다. Pretendard 공식 문서https://github.com/orioncactus/pretendard GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternativ어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternative font for all cross-platform - orioncactus/pretendardgithub.com 공식 문서에서 다양한 타입의 cdn을 찾을 수 있다.나는 가변 다이나..
![]()
노션 embed를 활용해서 Color Picker라는 위젯을 만들다가 한 문제를 발견했다.평소 PC로 작업을 많이 하니 PC 환경에서만 항상 테스트가 이루어졌는데 우연히 들어간 노션 페이지에서 위젯의 css가 이상한 현상을 발견했다. 위젯 내부의 색상 선택기가 둥글게 변해 있었고, text 타입의 input도 모서리가 살짝 둥글게 변했다.개발자 도구를 열어서 CSS 우선순위가 어떻게 적용되어 있나 보고 싶은데 어플이기 때문에 개발자도구를 열 수가 없었다.그래서 갖가지 환경을 테스트해봤다. 문제와 원인 분석 우선 크기를 최대한으로 줄인 노션 데스크톱에서는 문제없는 걸 확인할 수 있었다. 두 번째로는 PC 브라우저로 접속해서 개발자도구의 기기 툴바 전환 기능을 이용해 반응형 모바일 크기로 확인해 봤다.역..
![]()
스크롤 바 커스텀 디자인 하기. 원하는 색상 또는 효과를 준 다음 스타일 태그 안이나 css 파일에 넣어 두면 된다. Result
