본문 바로가기

전체 글235

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.
[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.
[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.
[Web server] Apache vs NginX 안녕하세요 :) 오늘은 평소 업무와는 조금 색다른 Apache와 NginX 웹 서버에 대한 공부를 해보았습니다. 이번에 맡은 프로젝트의 경우 폐쇄망 내부 웹서버 설치가 필요해 이런저런 많은 시행착오를 거치고 있습니다. 웹 서버란? 웹서버는 사용자의 웹 브라우저로 웹 콘텐츠를 전송해 주는 World Widw Web의 근간이 되는 소프트웨어 애플리케이션 혹은 하드웨어 기기를 말합니다. 클라이언트-서버 모델에서 중요한 역할을 하며, 클라이언트는 이를 통해 웹 페이지와 다른 리소스를 받게 됩니다. 웹 서버 소프트웨어 흔히 사용되는 웹 서버 소프트웨어는 아래와 같습니다. - Apache - NginX - Microsoft Internet Information Service - LiteSpeed - Lighttpd.. 2023. 9. 19.
[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.
[SVG] SVG를 이용한 gauge 차트 만들기 안녕하세요 :) 오늘은 게이지 차트를 아래와 같이 만들어 보았습니다. 고등학교 때 배운 삼각함수 개념정도만 이해하고 있으면 차트를 만드는데 큰 어려움은 없습니다. 1. 삼각함수를 이용해 좌표값 구하기 게이지 차트를 위해 가장 중요한 좌표는 게이지가 끝나는 지점 (sx, sy)입니다. (s는 starting의 약어인데 적절하지 않은 변수명이네요 ㅠㅠ) 코사인 세타에 반지름을 곱하면 cx에서 sx까지의 거리값이 나옵니다. 여기에다 중앙값인 cx값을 더하면 sx값이 구해지게 됩니다. y좌표도 마찬가지 방법으로 구했습니다. 2. SVG 태그를 이용해 호 그리기 이부분이 살짝 어려운데요, 공식문서를 찾아보면 Arc를 그리는 방법에 대해 설명이 되어 있습니다. SVG에서 Arc를 그리기 위해서는 꽤나많은 파라미터를.. 2023. 8. 1.
[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.

티스토리툴바