Front-End97 [Recoil] Persist 데이터 구조가 도중에 바뀌면 어떻게 해야 할까? 안녕하세요 :)저는 사용자의 편의성을 위해 데이터를 로컬 스토리지에 남겨두어 사용자가 재방문하거나 일시적으로 인터넷이 끊겨도 불편하지 않도록 어플을 만드는 편입니다. 이렇게 되면 데이터 구조를 짜고 업데이트하는 등 추가적인 작업이 많아지지만 결과적으로는 서버의 통신 부하를 줄이고 더 빠른 사용자 경험을 제공할 수 있어서 단점보다는 장점이 많다고 생각합니다.오늘은 사이드 프로젝트를 진행하다 아래와 같은 에러 창이 뜨는 것을 보았습니다. 오잉? 하던 와중에 생각해 보니 로컬 스토리지 데이터 구조를 바꾸었던 것이 생각났습니다. 현재 저의 로컬 스토리지에는 기존의 데이터가 남아있기 때문에 자바스크립트 코드가 기존의 데이터를 사용하면 프로토타입이 달라져 발생하는 문제였습니다. 사용자가 아무도 없는 서비스라면 단.. 2024. 8. 20. [HTML_CSS] 파일 업로드 버튼 만들기 안녕하세요 :)오늘은 사실 간단해 보이는 ui인데 꽤 고민을 하게 만든 파일 업로드 버튼 ui에 대해 포스팅하려고 합니다. react와 tailwind를 사용하는 프로젝트라 아래와 같이 컴포넌트를 만들었습니다. 여기서 저는 업로드 아이콘에서 꽤 애를 먹었는데요, 아이콘이 이벤트 버블을 일으키지 않아서 아이콘 위를 클릭하면 아무런 일이 발생하지 않는 문제가 있었습니다. 찾아보니 css에 pointer-events: none이라는 스타일 속성이 있더라구요. 해당 스타일은 어떤 상황에서 그래픽 엘리먼트가 이벤트의 타깃이 될 수 있는지를 결정할 수 있는 속성입니다. 여기서 저는 none값을 줘서 svg 아이콘이 이벤트 타깃이 아니니 그 뒤에 있는 이벤트를 트리거 시키도록 했습니다. {label && {.. 2024. 5. 10. [HTML_CSS] table에 유연한 ellipsis 적용하기 안녕하세요 :) 포스팅을 올릴 때마다 저의 밑바닥을 보이는 것 같아 부끄럽지만... 저랑 같은 어려움을 겪고 계신 분들을 위해 포스팅을 올려봅니다. 사실 저는 ellipsis를 적용할 때마다 긴장합니다. ellipsis '...' 표시는 일상에서 자주 접하는 문자 overflow 처리 방식인데 이게 아무렇게 사용한다고 "쨘"하고 적용되지는 않습니다 ㅠㅠ block 요소인지 그리고 너비가 있는지 등 함께 적용되어야 하는 스타일이 있습니다. 자세한 내용은 다른 블로그에 자세히 설명되어 있으니 살펴보시길 바랍니다. 저도 매번 찾아보고 있습니다. 오늘은 table 컴포넌트 작업중이었는데요, Saas 웹애플리케이션이다 보니 테이블이 지원해야 하는 기능들이 꽤 많이 있습니다. 그리고 유저 특성상 많은 데이터를 살펴.. 2024. 4. 19. [HTML_CSS] height 속성 애니메이션 적용할 때 주의사항 안녕하세요 :) 오늘은 아래와 같이 버튼을 누르면 높이가 늘어났다 줄었다 하는 애니메이션 작업을 했습니다. 처음에는 그저 hegiht 값을 변경하면 되겠지~ 생각했는데요, 스무스한 애니메이션이 아닌 딱딱 끊기는 높이변화만 적용되었습니다. 원인을 찾아보니 height 값이 auto로 설정되어 있다면 애니메이션이 적용되지 않는다고 합니다. auto 값이란 가변적인 값이기 때문에 애니메이션 연산이 어려운 모양입니다. 자세히 알고 싶었지만 자세한 설명은 찾지 못했습니다 ㅠㅠ 여하튼 중요한 포인트는 height 값이 아닌 max-height 값을 변경해서 이 문제를 해결할 수 있었습니다. 저는 gsap을 이용해 애니메이션을 구현했는데요, 엘리먼트를 펼칠 때의 maxHeight 값을 어떻게 넣으면 좋을지 고민하다가.. 2024. 4. 9. [Highcharts] "removePoint" 에러 해결 안녕하세요 :) 오늘은 하이차트 작업 중에 위와 같은 에러가 발생했습니다. 필터를 선택하면 필터에 따라 위의 플래그가 나타나는 기능을 구현 중이었습니다. 이런저런 실험을 진행해 보니 아무래도 차트를 리렌더링 하는 과정에 문제가 발생하는 듯합니다. 정확한 원인을 파악하지 못했지만, 이전에 하이차트가 기존의 데이터를 캐싱해 발생하는 문제를 겪어본 경험이 있어 관련 문제라 짐작하고 해결을 시도해 보았습니다. 저의 경우 리엑트를 사용하고 있기 때문에 리엑트 라이브러리에 관련 옵션이 있는지 살펴보았고 아래와 같은 설정이 가능하다는 것을 발견 했습니다. immutable Boolean no false Reinitialises the chart on prop update (as oppose to chart.updat.. 2024. 1. 17. [React] 디바운스로 추천 검색 기능 구현하기 안녕하세요 :) 오늘 기능 테스트를 하다 이상한 문제를 발견했습니다. 문제 검색창에 관련 검색 추천리스트를 아래에 보여주도록 검색바 기능을 업그레이드했습니다. 근데 "디오"를 검색하면 "디"의 검색 결과가 나타나는 현상이 발생했습니다. 더군다나 키워드에 따라 추천 리스트가 제대로 나타나는 경우가 있고 아닌 경우가 있었습니다. 원인 자세히 살펴보니 이 문제는 한글의 문자표현 + 다른 리스폰스 시간에 따른 에러였습니다. 검색창에 입력되어 추천리스트 api 요청이 이루어지기 전에 어떤 키워드가 api 요청되는지 콘솔로 확인해 본 결과입니다. "디오"를 완성하기 위해 "딩"에서 "디오"로 넘어가기 전에 "디"라는 키워드가 api 요청되는 것을 확인할 수 있습니다. 왜 이런 문제가 발생하는 것일까요? 이는 한글에.. 2023. 11. 7. [CSS] 사용하는 글꼴의 숫자 폭이 일정하지 않을때 해결방법 안녕하세요 :) 작업 도중에 아래와 같이 사용하는 글꼴의 숫자 폭이 일정하지 않아 깔끔하게 정렬하는 데 문제를 겪고 있다면, 그 문제를 해결 방법에 대해 포스팅하려고 합니다. 한동안 이 문제로 고생을 했는데, 어느 날 디자이너님께서 아래 참조 블로그 글을 보고 공유 주셨더라고요. (디자이너님께 커피를 대접해 드려야겠습니다 허허) 위 문제는 폰트가 가변글꼴일 때 나타납니다. 고정글꼴이 아니라 가변글꼴이기 때문에 숫자의 너비값이 저마다 다른 것이지요. 해결방법은 정말 간단했습니다. font-variant-numeric: tabular-nums; 위 속성을 부여하면 숫자가 같은 폭을 가지게 됩니다. 이런 기본적인 CSS도 모르다니... 공부를 더 열심히 해야할 것 같습니다. 참조: https://velog.i.. 2023. 11. 7. [CSS] woff 폰트 적용하기 안녕하세요 :) 오늘은 woff가 무엇인지 그리고 해당 폰트를 어떻게 적용하는지 알아보도록 하겠습니다. woff란? woff는 웹 폰트 파일형식을 말합니다. 웹 폰트는 시스템 폰트와 반대되는 개념인데요, 시스템 폰트는 사용자의 기기에 기본적으로 설치되어 있는 폰트를 의미합니다. 반면 웹 폰트는 애플리케이션 실행 전 따로 다운로드를 하아야 하죠. 이전에는 웹 폰트로 TTF나 OTF와 같은 파일 형식(OpenType 폰트라고 부른다네요)을 이용했습니다. 하지만 파일의 크기가 너무 컸고 로컬 환경에 설치가 가능했기 때문에 라이센스 문제가 발생했습니다. 따라서 woff와 같이 압축된 형식의 설치가 불가능한 파일 형식을 필요로 하게 된 것이죠. woff 폰트를 다운로드하면 아마 woff2 파일도 같이 받게 되실 .. 2023. 10. 31. [Highcharts] x축 날짜 표시 조정하기 안녕하세요 :) 프론트엔드 개발을 하다 보면 "안됩니다" 유혹에 빠지기 쉬운 것 같습니다. 디자이너님이 정말 예쁜 디자인을 구상해 오면 대부분의 경우 로직이 복잡해지기 마련입니다. 빠른 개발 일정으로 인해 심신이 지쳐있는 경우라면 "안됩니다"라고 말해버리고 싶은 충동이 가끔 들기도 하죠. 오늘 작업한 내용도 사실 고민을 많이 했습니다. 위의 차트를 보면 x축의 일자 표시가 매월 1일부터 시작하고있습니다. 따라서 가장 최근 달의 tick이 y축에 상당히 붙어 있음을 확인 할 수 있습니다. 이 포스팅을 쓰는 시점이 10월 4일이었거든요 ㅎㅎ 하지만 디자이너님이 바랬던 x축 디자인은 매월의 중간에 tick이 표시되는 것이었습니다. 예를들어 10월 1일이 아닌 10월 15일의 위치에 날짜가 표시되는 방식으로 말.. 2023. 10. 4. [Highcharts] 바차트에서 radius값 적용하기 안녕하세요 :) 오늘은 바차트 ui를 만들었는데요, 디자이너님이 네 모서리 모두 예쁘게 둥근 바차트를 디자인으로 넣어주셨습니다. 그래서 아래와 같이 borderRadius값을 넣어주었는데요, plotOptions: { bar: { pointWidth: 12, borderRadius: '30%', dataLabels: { enabled: false }, stacking: 'normal', borderWidth: 0, } }, 문제는 radius 적용이 오른쪽 상단과 오른쪽 하단만 되는 것이었습니다. highcharts 포럼을 뒤적이니 series에 borderRadiusTopLeft, borderRadiusBottomLeft 등의 값을 적용해 문제를 해결할 수 있다고는 나와있지만 documentation을.. 2023. 8. 23. [SVG] SVG를 이용한 gauge 차트 만들기 안녕하세요 :) 오늘은 게이지 차트를 아래와 같이 만들어 보았습니다. 고등학교 때 배운 삼각함수 개념정도만 이해하고 있으면 차트를 만드는데 큰 어려움은 없습니다. 1. 삼각함수를 이용해 좌표값 구하기 게이지 차트를 위해 가장 중요한 좌표는 게이지가 끝나는 지점 (sx, sy)입니다. (s는 starting의 약어인데 적절하지 않은 변수명이네요 ㅠㅠ) 코사인 세타에 반지름을 곱하면 cx에서 sx까지의 거리값이 나옵니다. 여기에다 중앙값인 cx값을 더하면 sx값이 구해지게 됩니다. y좌표도 마찬가지 방법으로 구했습니다. 2. SVG 태그를 이용해 호 그리기 이부분이 살짝 어려운데요, 공식문서를 찾아보면 Arc를 그리는 방법에 대해 설명이 되어 있습니다. SVG에서 Arc를 그리기 위해서는 꽤나많은 파라미터를.. 2023. 8. 1. [React] Optimizing linechart ui with "useMemo" and "memo" Background: LightLineChart ui runs several functions in order to interpolate points and make a path to SVG format. This requires multiple iterations which gives a burden to rendering process. Problem: The codes for interpolation and SVG path drawing, will be continuously called on any of the props changes or parent component's state changes. const minValue = Math.min(...data) - lineWidth - paddi.. 2023. 7. 18. 이전 1 2 3 4 ··· 9 다음
