본문 바로가기

Front-End97

[SVG] Catmull-Rom 알고리즘으로 svg 차트 만들기 안녕하세요 :) 오늘은 아래 사진과 같은 ui 작업 도중에 차트가 있는 것을 확인했습니다. 주식 관련 어플에서 흔히 볼 수 있는 차트인데요, 이부분을 구현하는데 약간의 고민이 있었습니다. 어플의 다른 차트 부분은 ui 라이브러리를 이용하고 있는데, 이 부분을 ui 라이브러리를 사용하는 게 맞는지 고민되었습니다. 왜냐하면 ui 라이브러리를 이용하면 아래와 같은 단점이 있기 때문입니다. 렌더링 부담 비대한 로딩 용량 디자인 유연성 하락 라이브러리 비교 및 테스팅 위의 ui는 목록 형식으로 다량의 ui가 반복해서 호출될건데 되도록이면 가벼운 ui가 좋겠다고 생각되어 svg를 이용해 직접 만들기로 했습니다. 차트를 만드는 방법은 흔히 svg와 canvas를 이용하는 방법이 있는데요, 여기서 svg를 이용한 이유.. 2023. 7. 13.
[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.
[React] React Fiber Reconciler 안녕하세요 :) 오늘은 React는 어떻게 ui의 변화를 감지하고 화면을 렌더링 하는지 조금 더 깊이 공부하기 위해 Fiber Reconciler에 대해 공부해 보았습니다. Fiber Reconciler을 이해하기 이전에 미리 알아두어야 할 내용이 있어 먼저 정리하고 가도록 하겠습니다. Diffing 리엑트가 가상 dom 트리를 이용해 효율적인 dom tree 리렌더링을 지원한다는 사실은 조금만 공부해 보신 분들이라도 다들 알고 있는 내용일 겁니다. 여기서 가상 dom 트리와 실제 dom 트리를 "비교한다"는 개념을 diffing이라고 합니다. 즉 두 개의 차이를 알아낸다는 의미로 사용됩니다. Reconciler Reconciler는 리엑트에서 diffing을 위해 사용하는 "알고리즘"입니다. 가상의 트.. 2023. 6. 16.
[FE] s3 버켓으로부터 csv 파일 다운로드 받기 안녕하세요 :) 오늘은 사이드프로젝트로 만드는 웹어플에서 파일 다운로드 기능을 만들어 보았는데요, 생각보다 복잡한 것 같아 기록으로 남겨봅니다. 우선 일반적인 파일 다운로드 경로는 아래와 같습니다. 일반적 다운로드 방법 보안문제 때문에 보통은 위처럼 클라이언트와 s3 버킷사이에 서버가 위치해 파일 다운로드를 지원해 줍니다. 하지만 이번 사이드프로젝트에서는 핸들링하는 서버가 없습니다. 따라서 클라이언트에서 직접 s3의 csv파일을 다운로드해야 했는데, 이 부분에 문제가 발생했습니다. 직접 s3에 접근할 경우 아래와 같이 코드를 작성하고 이벤트를 발생시키는 순간 Download 위와 같이 access denied 에러가 발생합니다. 이유는 보안상 문제 때문입니다. 클라이언트는 보안에 취약할 수 밖에 없는 구.. 2023. 6. 9.
[css] flex 아이템 스크롤 상단부분 가림 문제 안녕하세요, 오늘은 이런저런 라이브러리 테스트 도중 위와 같이 스크롤을 위 끝까지 올려도 상단의 텍스트가 잘리는 문제가 발생했습니다. 문제의 원인은 flex 속성 사용중에 아래 두 개의 스타일 때문입니다. align-items: center justify-content: center 위 스타일을 이용하면 flex item을 아주 쉽게 가운데 정렬 할 수 있습니다. 하지만 만약 item이 container의 크기를 벗어난다면 overflow 된 부분에 접근이 불가능 해지는 문제가 발생합니다. 이러한 문제를 해결하기 위해 "safe" 값을 추가할 수 있도록 했다고 하지만, 아직 여러 브라우저에서 지원을 하지 않는 모양입니다. justify-content: safe center align-self: safe .. 2023. 5. 24.
[Highcharts] Key events 플래그 만들기 안녕하세요 :) 구글 파이낸스 웹사이트에서는 Key events라는 신기한 기능을 지원하길래 비슷한 기능을 highchart로 구현해 보았습니다. Key events란 특정 시점에 어떤 일이 있었는지 자세히 알려줄때 유용한 기능입니다. 위와 같이 차트상 어떤 시점에 중요한 이벤트가 있었다면 표시하는 방식으로 사용자가 빠르게 중요 과거사에 대해 알 수 있도록 해줍니다. 지금 근무하는 회사에서도 주식 차트를 다루기 때문에 해당 기능을 구현하면 좋겠다 싶어 한번 기능 구현만 간단하게 해 보았습니다. 사실 highchart에서는 필요한 기능을 이미 지원하기 때문에 별다른 기능추가 없이 간단하게 keyEvents 차트를 만들 수 있습니다. 위 플래그 부분의 경우 아래와 같이 코드를 추가하면 됩니다. { type:.. 2023. 5. 22.
[React] lambda-client request 취소하기 안녕하세요, Sean입니다. 최근 제작한 웹앱 프로젝트에서 한 가지 심각한 문제가 발생했는데요, 그건 바로 api request를 취소했지만 서버에서는 이를 알지 못해 뒤늦게 데이터가 랜더링 되는 문제가 있었습니다. 워낙 방대한 데이터에 쿼리를 하다보니 데이터 수신에 2분가량이 소요되는데 중간에 멈추더라도 서버에서 데이터를 보내면 클라이언트에서 이를 받아 랜더링 하는 게 주된 이유였죠. 백엔드팀에 물어보니, 안타깝게도 람다에 쿼리가 들어가면 리스폰스를 막지 못한다고 합니다. (아마 가능은 할 겁니다. 안되는게 어디 있겠습니다 허허..) 여하튼 위 문제를 프런트에서 해결해야 하는 상황! 다행히 javascript에서는 "AbortController"라는 내장 api를 제공합니다. 사용방법은 간단합니다. A.. 2023. 5. 15.
[React] Auth0로 authentication처리 안녕하세요. 회사에서 간단한 사이드 프로젝트를 진행하다, 회원가입과 어드민 유저의 회원 초대 및 관리 기능이 필요하다는 사실을 알게 되었습니다. 분명 간단한 거랬는데... :( 사실 로그인/로그아웃/회원가입 기능은 간단하면서도 은근 손이 많이가는 그런 기능인데요, 이부분을 간편하게 처리할 수 있는 방법이 없을까 고민하다가 Auth0를 이용하기로 했습니다. Auth0 웹사이트 링크 Auth0: Secure access for everyone. But not just anyone. Rapidly integrate authentication and authorization for web, mobile, and legacy applications so you can focus on your core busine.. 2023. 5. 15.
[React] Refactoring 안녕하세요 :) 이 주간 정신없이 데모를 위한 웹어플을 만들고 나니 벌써 5월이 되었네요 ㅎㅎ 오늘은 너저분하게 흐트러져 있는 코드를 리펙토링 하는 시간을 가져보았습니다. 사실 사수로부터 체계적으로 배운 코딩이 아니라 리펙토링이 다소 엉성할 수 있습니다. 그냥 이렇게 하는 사람도 있구나하는 가벼운 느낌으로 참고해 주시면 감사하겠습니다. 리펙토링 코드: import styled from "styled-components"; import Button from "ui/button/Button"; import { RepeatClockIcon } from '@chakra-ui/icons'; import { useAppDispatch, useAppSelector } from "store/hooks"; import .. 2023. 5. 3.
[UI] Chakra와 Storybook 연동하기 안녕하세요 :) 개발자 Sean입니다. 이번주 새로운 프로젝트를 시작하며 아키텍쳐와 사용할 라이브러리에 대해 고민하고, 기본 틀을 세팅하는 시간을 가져보았습니다. 이번에는 ui 라이브러리로 chakra를 이용해 약간의 커스터마이징을 하고, storybook을 통해 컴포넌트 단위로 테스팅과 유지보수를 하도록 만들려고 합니다. 회사에서 기존에 만들었던 웹어플의 경우 잦은 디자인 변경과 담당자 교체로 인해 수많은 ui 파일들이 생겨나는 문제가 발생했습니다. 문제는 어떤 ui가 사용되고 있는지 모르기 때문에 좀비처럼 폴더안에 살아있는 문제가 발생했습니다. 이를 해결하기 위해 이번 프로젝트는 처음부터 디자인을 확실히하여 위의 문제가 발생하지 않도록 하려 합니다. # 1. "@chakra-ui/storybook-a.. 2023. 4. 17.
[CSS] 텍스트 양쪽라인에 맞추기 안녕하세요, 개발자 Sean입니다. 만약에 텍스트를 아래 사진처럼 양옆에 딱 붙여서 나열하고 싶다면 어떻게 해야 할까요? 그럴 땐 아래와 같이 CSS를 설정해 주면 됩니다. #list-item-wrapper { width: 383px; margin: 0 auto; word-break: break-all; text-align: justify; } 2023. 3. 30.
[DragNDrop] 드래깅 도중 hover 가상 선택자 문제 안녕하세요, 개발자 Sean입니다. 오늘은 드래그 앤 드롭 작업도중 이상한 문제가 발생해 원인과 해결방법에 대해 기록하려고 합니다. 드래그 앤 드롭 컴포넌트에 :hover 가상 선택자로 스타일 변경 코드를 적용하고 드래그 앤 드롭으로 순서를 변경하는 컴포넌트를 만들었습니다. 그런데 아래 사진과 같이 순서가 바뀌고 기존에 선택했던 칸에 새 컴포넌트가 들어가면 :hover 가상 선택자가 발동하는 현상이 나타났습니다. 문득 마우스의 포지션 변화가 없어 이런 문제가 발생하는지 궁금해 아래와 같이 현재 커서의 위치를 로그로 찍어보았습니다. useEffect(() => { const handleMouseMove = (event) => { setMousePos({ x: event.clientX, y: event.cl.. 2023. 3. 23.

티스토리툴바