Frontend28 [HTML_CSS] table에 유연한 ellipsis 적용하기 안녕하세요 :) 포스팅을 올릴 때마다 저의 밑바닥을 보이는 것 같아 부끄럽지만... 저랑 같은 어려움을 겪고 계신 분들을 위해 포스팅을 올려봅니다. 사실 저는 ellipsis를 적용할 때마다 긴장합니다. ellipsis '...' 표시는 일상에서 자주 접하는 문자 overflow 처리 방식인데 이게 아무렇게 사용한다고 "쨘"하고 적용되지는 않습니다 ㅠㅠ block 요소인지 그리고 너비가 있는지 등 함께 적용되어야 하는 스타일이 있습니다. 자세한 내용은 다른 블로그에 자세히 설명되어 있으니 살펴보시길 바랍니다. 저도 매번 찾아보고 있습니다. 오늘은 table 컴포넌트 작업중이었는데요, Saas 웹애플리케이션이다 보니 테이블이 지원해야 하는 기능들이 꽤 많이 있습니다. 그리고 유저 특성상 많은 데이터를 살펴.. 2024. 4. 19. [JS] Nested 객체 다루기 안녕하세요 :) 사이드 프로젝트로 간단한 캘린더 어플을 만들고 있는데요. 날짜 데이터가 은근히 다루기가 까다롭네요 ㅠㅠ 날짜(+ 약속) 데이터를 어떻게 하면 잘 정리된 상태로 보관하면 좋을지 생각을 해보다가 아무래도 중첩 객체 형태로 데이터를 다루는 게 좋겠다고 생각했습니다. {"year": { "month: { "date": [] } } } 이렇게 데이터를 보관하면 탐색과 저장 속도가 빠르고 서버와의 소통에도 장기적으로 용이하다고 생각했기 때문입니다. 문제는 배열의 경우 물음표 식별자를 통해 "undefined" 처리를 하기가 쉽지만 객체에서는 꽤나 까다로운 부분이 있었습니다. 키값이 있는지 없는지 확인을 해야하기 때문에 if문이 줄줄이 늘어나는 문제가 있었습니다. 그래서 객체의 중첩된 내부객체 값을 .. 2024. 2. 29. Local storage vs Cookie 브라우저 환경에서 데이터를 저장해 사용할 수 있는 공간으로 Local storage와 Cookie가 있습니다. 프론트엔드 작업을 하다보면 흔히 Local storage를 이용하는데, 그렇다면 localStorage가 cookie보다 항상 좋은 것일까요? 웹앱이 JWT를 사용하는 경우 토큰을 어디에다 저장해야 하는 걸까요? Local Storage localStorage는 자바스크립트를 이용해 데이터를 읽고 저장할 수 있습니다. localStorage.setItem("data", data) localStorage.getItem("data", data) localStorage는 매우 편리하고 순수 자바크스립트만으로 제어할 수 있다는 것이 장점입니다. 그리고 저장용량이 약 5메가 바이트로 쿠키에 비해 널널한 .. 2023. 11. 15. [CSS] 사용하는 글꼴의 숫자 폭이 일정하지 않을때 해결방법 안녕하세요 :) 작업 도중에 아래와 같이 사용하는 글꼴의 숫자 폭이 일정하지 않아 깔끔하게 정렬하는 데 문제를 겪고 있다면, 그 문제를 해결 방법에 대해 포스팅하려고 합니다. 한동안 이 문제로 고생을 했는데, 어느 날 디자이너님께서 아래 참조 블로그 글을 보고 공유 주셨더라고요. (디자이너님께 커피를 대접해 드려야겠습니다 허허) 위 문제는 폰트가 가변글꼴일 때 나타납니다. 고정글꼴이 아니라 가변글꼴이기 때문에 숫자의 너비값이 저마다 다른 것이지요. 해결방법은 정말 간단했습니다. font-variant-numeric: tabular-nums; 위 속성을 부여하면 숫자가 같은 폭을 가지게 됩니다. 이런 기본적인 CSS도 모르다니... 공부를 더 열심히 해야할 것 같습니다. 참조: https://velog.i.. 2023. 11. 7. [Three.js] requestAnimationFrame 사용시 브라우저별 속도 일정하게 맞추기 안녕하세요 :) 개인 프로젝트로 블랙홀을 만들고 있는데요, 재미있는 gltf 오브젝트가 있어서 추가해 보았습니다. 저는 보통 작업할 때 크롬을 사용하기 때문에, 크롬 환경에서 시간에 따른 액션 변화를 설정했는데요, 이게 웬걸 사파리나 파이어폭스에서는 액션이 엉뚱한 타이밍에 트리거 되는 것이었습니다. 왜 이런 문제가 발생하는지 찾아보니 브라우저별 성능차이로 인한 문제였습니다. Three.js에서 움직임을 표현할 때 자바스크립트 내장 함수인 requestanimationFrame을 많이 이용합니다. 이 함수는 한 차례 랜더링이 끝나면 이어서 다음 랜더링이 시작되기 때문에 기기와 브라우저의 프레임 차이에도 최적화된 움직임을 표현할 수 있습니다. 문제는 저는 requestanimationFrame안에서 인스턴스.. 2023. 10. 6. [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. [Three.js] 텍스처가 깜빡이는 문제 안녕하세요 :) 오늘은 아래와 같이 구름 텍스쳐를 실험하다가 각도가 변경되면 텍스처가 깜빡거리거나 부분이 잘려 보이는 문제가 발생했습니다. 위에 보시면 어색하게 잘려있는 구름이 보이실 겁니다. 위 원인은 각 객체가 가지고 있는 depth 정보 때문인데요, 객체들은 depth 정보를 이용해 해당 객체를 그릴지 말지를 결정한다고 합니다. 렌더링 최적화에는 도움이 되겠지만 위처럼 겹겹이 쌓여있는 형태의 객체에선 오히려 나타나야할 부분이 잘려버리는 문제가 발생하네요. 해결방법은 간단합니다. material을 생성할때 depthWrite 키값으로 false를 넘겨주면 됩니다. const material = new THREE.MeshLambertMaterial({ map: textureMap, transparent.. 2023. 8. 18. [GLSL] 사각형 그리기 안녕하세요 :) 오늘은 The book of shaders를 정독하다가 아래와 같은 문제를 풀어보았습니다. Make another function that just draws the outline of a rectangle. 하루종일 업무를 보다가 쉬엄쉬엄 휴식할 겸 틀었는데 생각보다 쉽진 않을 듯합니다. ㅠㅠ 특히나 glsl은 디버깅이 쉽지 않아서 안에 들어가는 값을 머리속에 생각해야 하는 점이 더욱 진입장벽을 높이는 듯합니다. 각설하고 제가 만든 코드는 아래와 같습니다. vec3 rect( float borderWidth, vec2 blposition, vec2 trposition, vec2 st) { vec2 bl = (1.0-step(blposition, st) * step(blposition.y.. 2023. 7. 24. [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. [React] textarea input에서 shift+enter로 줄 바꾸기 안녕하세요 :) 오늘은 input에서 enter가 아닌 shift+enter를 눌렀을 때 줄 바꿈이 되도록 input 엘리먼트를 변경하는 방법에 대해 포스팅하려고 합니다. 바닐라 자바스크립트를 이용했을경우와 리엑트를 이용했을 때 코드 패턴이 약간은 달라질 수 있는데요, 저의 경우 리엑트를 이용한 예제를 공유하려고 합니다. 우선 필요한 이벤트 핸들러는 키가 눌러졌을 때 트리거되는 onKeyDown과 키가 떼어졌을 때 트리거되는 onKeyUp 그리고 안의 내용이 변경되었을 때 트리거 되는 onChange입니다. 우선 아래와 같이 input 컴포넌트를 준비합니다. const InputArea = ({ value, onChange, onKeyDown, onKeyUp, }:Props) => { return ( ).. 2023. 7. 3. [FE] s3 버켓으로부터 csv 파일 다운로드 받기 안녕하세요 :) 오늘은 사이드프로젝트로 만드는 웹어플에서 파일 다운로드 기능을 만들어 보았는데요, 생각보다 복잡한 것 같아 기록으로 남겨봅니다. 우선 일반적인 파일 다운로드 경로는 아래와 같습니다. 일반적 다운로드 방법 보안문제 때문에 보통은 위처럼 클라이언트와 s3 버킷사이에 서버가 위치해 파일 다운로드를 지원해 줍니다. 하지만 이번 사이드프로젝트에서는 핸들링하는 서버가 없습니다. 따라서 클라이언트에서 직접 s3의 csv파일을 다운로드해야 했는데, 이 부분에 문제가 발생했습니다. 직접 s3에 접근할 경우 아래와 같이 코드를 작성하고 이벤트를 발생시키는 순간 Download 위와 같이 access denied 에러가 발생합니다. 이유는 보안상 문제 때문입니다. 클라이언트는 보안에 취약할 수 밖에 없는 구.. 2023. 6. 9. 이전 1 2 3 다음
