Front-End8 [SVG] Catmull-Rom 알고리즘으로 svg 차트 만들기 안녕하세요 :) 오늘은 아래 사진과 같은 ui 작업 도중에 차트가 있는 것을 확인했습니다. 주식 관련 어플에서 흔히 볼 수 있는 차트인데요, 이부분을 구현하는데 약간의 고민이 있었습니다. 어플의 다른 차트 부분은 ui 라이브러리를 이용하고 있는데, 이 부분을 ui 라이브러리를 사용하는 게 맞는지 고민되었습니다. 왜냐하면 ui 라이브러리를 이용하면 아래와 같은 단점이 있기 때문입니다. 렌더링 부담 비대한 로딩 용량 디자인 유연성 하락 라이브러리 비교 및 테스팅 위의 ui는 목록 형식으로 다량의 ui가 반복해서 호출될건데 되도록이면 가벼운 ui가 좋겠다고 생각되어 svg를 이용해 직접 만들기로 했습니다. 차트를 만드는 방법은 흔히 svg와 canvas를 이용하는 방법이 있는데요, 여기서 svg를 이용한 이유.. 2023. 7. 13. [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. [DragNDrop] 드래깅 도중 hover 가상 선택자 문제 안녕하세요, 개발자 Sean입니다. 오늘은 드래그 앤 드롭 작업도중 이상한 문제가 발생해 원인과 해결방법에 대해 기록하려고 합니다. 드래그 앤 드롭 컴포넌트에 :hover 가상 선택자로 스타일 변경 코드를 적용하고 드래그 앤 드롭으로 순서를 변경하는 컴포넌트를 만들었습니다. 그런데 아래 사진과 같이 순서가 바뀌고 기존에 선택했던 칸에 새 컴포넌트가 들어가면 :hover 가상 선택자가 발동하는 현상이 나타났습니다. 문득 마우스의 포지션 변화가 없어 이런 문제가 발생하는지 궁금해 아래와 같이 현재 커서의 위치를 로그로 찍어보았습니다. useEffect(() => { const handleMouseMove = (event) => { setMousePos({ x: event.clientX, y: event.cl.. 2023. 3. 23. [DragNDrop] 드래그 도중 커서 변경 안녕하세요, 개발자 Sean입니다. 오늘은 react-dnd를 이용한 드래그 앤 드롭 기능 구현도중 겪었던 커서 변경 문제에 대해 포스팅을 해보려고 합니다. 드래그 앤 드롭을 이용해 drag 이벤트를 발생시키면 자동적으로 마우스 뒤편에 ghost image가 나타나고 마우스는 기본 커서로 변경되는 것을 확인할 수 있습니다. 이는 html5 백엔드 api에서 자동으로 설정된 값이기 때문입니다. 안타깝게도 html5의 백엔드 api는 다루기가 어려운 데다 자유도가 낮아 많은 드래그 앤 드롭 예제에서는 커서변경을 포기하고 기능에 초점을 맞추고 있습니다. 구글에서도 많은 분들이 관련해서 불편함을 토로하는 글을 읽어볼 수 있습니다. 근본적인 해법으로는 드래그엔드랍을 지원하는 백엔드 api를 변경하는 것이지만 np.. 2023. 3. 16. [UI] styled-components를 이용한 원형 차트 만들기 안녕하세요, 개발자 Sean입니다. 오늘은 원형차트 ui 관련 내용을 포스팅하려고 합니다. 아래 사진의 우측 상단에 들어가는 조그마한 차트입니다. 사실 팀에 합류하고 차트 ui 제작을 해본 경우는 매우 드문데요, 왜냐하면 외부 라이브러리(highchart)를 이용하는 편이 훨씬 생산성이 높기 때문에 직접 차트 ui를 만들지 않았습니다. 하지만 이번에 개편되는 ui 디자인의 경우 외부 라이브러리를 이용하면 디테일한 부분의 스타일을 수정해주어야 하는 번거로움이 생기는데 반해 직접 구현하기에 어렵지 않은 디자인이라 직접 만들어 보기로 했습니다. 리엑트와 스타일 컴포넌트를 이용했습니다. 우선은 아래와 같이 원형차트 컴포넌트 파일을 만들어 줍니다. 여기서 저는 이름을 CircleChart라고 지었는데 보통은 Pi.. 2023. 3. 9. [React] 선언형과 리엑트 안녕하세요, 개발자 Sean입니다. 라이브러리를 공부할 때 다른 참고서나 설명 블로그를 참조하는 방법도 좋은 방법이지만 뭐니 뭐니 해도 공식 라이브러리 설명 페이지가 개발자의 의도를 가장 잘 설명하겠죠? 따라서 저도 이번에 한 번 처음부터 찬찬히 살펴보려고 합니다. 어느정도 리엑트에 대한 이해도가 생긴 상태에서 공식 페이지를 읽어보니 새삼 이전에는 생각치 못했던 여러 의문이 생겼습니다. 그중 하나가 아래와 같은 설명입니다. 선언형 React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 합니다. 선언형 뷰는 코드를 예측 가능하고 디버그 하기 쉽게 만.. 2022. 10. 20. DB에 쿼리하기 VS 클라이언트에서 데이터 분류하기 바보 같은 질문에도 항상 현명한 답을 주시는 우리 토이 프로젝트 팀원님... 오늘은 sorting 기능을 구현하다가 문득 이런 의문이 들었다. 분류 옵션을 선택할 때 마다 데이터베이스에서 새로운 데이터를 받아온다면, 자원낭비가 아닐까? 만약에 데이터를 한번만 불러와 로컬에 저장하고 분류 옵션을 선택할 때마다 클라이언트에서 저장된 데이터를 분류해서 새로 랜더링 하면 되지 않을까? 바보같은 질문에 팀원님은 아주 좋은 질문이라며 좋아하셨다. 읭? 답변을 정말 상세하게 주셨는데 아래와 같다. A: 제가 생각하기에 분류와 그룹핑과 같은 기능을 데이터베이스 서버에서 실행하는 이유는 다음과 같습니다. 잘 구현된 데이터베이스 서버는 보통 클라이언트의 컴퓨터보다 더 많은 리소스를 가지고 있습니다. 따라서 클라이언트보다 .. 2022. 5. 4. 이전 1 다음
