본문 바로가기

React51

[Recoil] Persist 데이터 구조가 도중에 바뀌면 어떻게 해야 할까? 안녕하세요 :)저는 사용자의 편의성을 위해 데이터를 로컬 스토리지에 남겨두어 사용자가 재방문하거나 일시적으로 인터넷이 끊겨도 불편하지 않도록 어플을 만드는 편입니다. 이렇게 되면 데이터 구조를 짜고 업데이트하는 등 추가적인 작업이 많아지지만 결과적으로는 서버의 통신 부하를 줄이고 더 빠른 사용자 경험을 제공할 수 있어서 단점보다는 장점이 많다고 생각합니다.오늘은 사이드 프로젝트를 진행하다 아래와 같은 에러 창이 뜨는 것을 보았습니다. 오잉? 하던 와중에 생각해 보니 로컬 스토리지 데이터 구조를 바꾸었던 것이 생각났습니다.  현재 저의 로컬 스토리지에는 기존의 데이터가 남아있기 때문에 자바스크립트 코드가 기존의 데이터를 사용하면 프로토타입이 달라져 발생하는 문제였습니다. 사용자가 아무도 없는 서비스라면 단.. 2024. 8. 20.
[React] 디바운스로 추천 검색 기능 구현하기 안녕하세요 :) 오늘 기능 테스트를 하다 이상한 문제를 발견했습니다. 문제 검색창에 관련 검색 추천리스트를 아래에 보여주도록 검색바 기능을 업그레이드했습니다. 근데 "디오"를 검색하면 "디"의 검색 결과가 나타나는 현상이 발생했습니다. 더군다나 키워드에 따라 추천 리스트가 제대로 나타나는 경우가 있고 아닌 경우가 있었습니다. 원인 자세히 살펴보니 이 문제는 한글의 문자표현 + 다른 리스폰스 시간에 따른 에러였습니다. 검색창에 입력되어 추천리스트 api 요청이 이루어지기 전에 어떤 키워드가 api 요청되는지 콘솔로 확인해 본 결과입니다. "디오"를 완성하기 위해 "딩"에서 "디오"로 넘어가기 전에 "디"라는 키워드가 api 요청되는 것을 확인할 수 있습니다. 왜 이런 문제가 발생하는 것일까요? 이는 한글에.. 2023. 11. 7.
[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.
[React] React Fiber Reconciler 안녕하세요 :) 오늘은 React는 어떻게 ui의 변화를 감지하고 화면을 렌더링 하는지 조금 더 깊이 공부하기 위해 Fiber Reconciler에 대해 공부해 보았습니다. Fiber Reconciler을 이해하기 이전에 미리 알아두어야 할 내용이 있어 먼저 정리하고 가도록 하겠습니다. Diffing 리엑트가 가상 dom 트리를 이용해 효율적인 dom tree 리렌더링을 지원한다는 사실은 조금만 공부해 보신 분들이라도 다들 알고 있는 내용일 겁니다. 여기서 가상 dom 트리와 실제 dom 트리를 "비교한다"는 개념을 diffing이라고 합니다. 즉 두 개의 차이를 알아낸다는 의미로 사용됩니다. Reconciler Reconciler는 리엑트에서 diffing을 위해 사용하는 "알고리즘"입니다. 가상의 트.. 2023. 6. 16.
[React] lambda-client request 취소하기 안녕하세요, Sean입니다. 최근 제작한 웹앱 프로젝트에서 한 가지 심각한 문제가 발생했는데요, 그건 바로 api request를 취소했지만 서버에서는 이를 알지 못해 뒤늦게 데이터가 랜더링 되는 문제가 있었습니다. 워낙 방대한 데이터에 쿼리를 하다보니 데이터 수신에 2분가량이 소요되는데 중간에 멈추더라도 서버에서 데이터를 보내면 클라이언트에서 이를 받아 랜더링 하는 게 주된 이유였죠. 백엔드팀에 물어보니, 안타깝게도 람다에 쿼리가 들어가면 리스폰스를 막지 못한다고 합니다. (아마 가능은 할 겁니다. 안되는게 어디 있겠습니다 허허..) 여하튼 위 문제를 프런트에서 해결해야 하는 상황! 다행히 javascript에서는 "AbortController"라는 내장 api를 제공합니다. 사용방법은 간단합니다. A.. 2023. 5. 15.
[React & Canvas] 리엑트와 캔버스 사용시 메모리 누수 방지 안녕하세요, 개발자 Sean입니다. 최근 캔버스를 이용해 어플을 제작하는 재미에 푹 빠져있는데요, 회사 프로젝트에도 한번 사용해 보려고 프리로딩 컴포넌트를 캔버스를 이용해 제작했습니다. 웹 어플 라이브러리로 리엑트를 사용하고 있기 때문에 useRef로 캔버스를 제어해 아래와 같이 멋진 다이내믹한 프리로딩 이펙트를 만들었습니다. 원이 돌아가며 작은 입자를 뿌리는 방식의 애니메이션 입니다. 하지만 오늘 이것저것 테스트 진행 도중 심각한 기능저하 문제를 발견했습니다. 프리로더가 언마운트 된 뒤에 어플의 속도가 급격하게 느려지는 문제가 발생했습니다 :( 우선 개발자 도구를 통해 퍼포먼스를 측정해 보았습니다. 역시나 메모리 누수가 발생하고 있는 것을 확인할 수 있었습니다. 어디가 원인인지 한참을 고민하다가 req.. 2023. 4. 27.
[JS] JavaScript 객체 key 값 변수로 설정하기 안녕하세요 :) 개발자 Sean입니다. 객체 key 값을 변수로 설정하고 싶을 때는 어떻게 해야 할까요? 오늘 업무 중에 관련해서 코딩한 부분이 있어 잘라서 붙여봅니다. import { useState } from 'react'; const useFilters = (_filterList: {[key: string]: any}) => { const [filterList, setFilterList] = useState(_filterList); const updateFilterList = (target: string, value: any) => { if (filterList[target] in filterList){ setFilterList({ ...filterList, [target]: value, }) }.. 2023. 4. 17.
[DragNDrop] 드래그 도중 커서 변경 안녕하세요, 개발자 Sean입니다. 이전에 만들었던 DragNDrop 기능에서 고스트 이미지가 마음에 안 들어, 별도의 컴포넌트로 더 예쁜 커스텀 고스트 이미지를 만들어 보았습니다. 하지만 이로인해 마우스 커서 스타일이 도로 화살표로 돌아와 버렸는데요. 원인은 고스트 이미지를 없애기 위해 빈 이미지를 넣었기 때문에 그런 것 같습니다. react-dnd를 만든 개발자 깃헙에도 들어가 해결방법을 찾아보았지만 해결방법이 딱히 없다는 충격적인 답변을 보기만 했습니다 ㅠㅠ 하지만 해결방법이 없는 건 아닙니다. 왜냐하면 다른 웹사이트에서는 멋지게 드래그 앤 드롭 도중에 커서를 변경해주고 있거든요. 따라서 저는 약간은 과격한 방법으로 문제를 해결했습니다. 해결방법은 바로 드래그 이벤트가 시작되면 전역 스타일에 커서를.. 2023. 3. 21.
[React] 플랫폼 메인구조(헤더, 사이드바, 푸터) 특정 페이지에만 적용하기 안녕하세요, 프론트엔드 개발자 Sean입니다. 오늘은 플랫폼에서 메인구조(헤더, 사이드바, 푸터)를 특정 페이지에만 적용하려면 어떻게 해야 하는지에 대해 정리한 내용을 올려볼까 합니다. 사실 오늘 플랫폼 리펙토링 중에 페이지를 바꿀 때 마다 상단 헤더의 이미지 아이콘이 깜빡 거리는 사실을 알게 되었습니다. 원인은 페이지를 바꿀 때 메인구조가 리렌더링 되었기 때문이었습니다. 이러한 이유가 발행한 이유는 라우팅 되는 컴포넌트 안에 메인구조 컴포넌트를 삽입하는 형태였기 때문에 페이지를 변경하면 매번 같은 메인구조를 다시 그렸던 겁니다. 예를 들어 라우터는 path='/에 Dashboard.js 컴포넌트를 불러오고 해당 컴포넌트 안에 MainStructure.js 컴포넌트가 들어있는 구조였습니다. 이 문제를 해.. 2023. 3. 2.
[React] React를 왜 만들었을까? 안녕하세요, 개발자 Sean입니다. 프론트엔드 면접을 보시다보면 아마 많은 분들이 "React는 왜 만든 걸까요?"라는 질문을 받곤 합니다. 개발에 대해 아무 몰랐던 옛날에는 그냥 어플을 잘 만들려고 만든거 아닌가?라고 생각했는데, 어느정도 경험이 쌓이고 나서 생각해보니 면접관 분들이 듣고자 하는 대답은 따로 있었던것 같다는 생각이 듭니다. 근데 여기에 대해 React를 만든 개발자가 직접 작성해놓은 글이 있다는 사실 아시나요? ㅎㅎ 오늘은 관련 글을 번역해 옮겨볼까 합니다. Why did we build React? 이미 수많은 자바스크립트 MVC 프레임워크가 있음에도 불구하고 왜 우리는 리엑트를 만들었으며 왜 리엑트를 사용해야 하는 걸까요? 리엑트는 MVC 프레임워크가 아닙니다. 리엑트는 compos.. 2023. 2. 17.
[React] 모바일 청첩장에 벚꽃 배경 만들기 안녕하세요, 개발자 Sean입니다. 오랜만에 포스팅할 시간이 생겨서 글을 적어봅니다. 친형이 결혼을 하게 되어 갑작스레 모바일 청첩장을 만들어 달라는 부탁을 받아 흔쾌히 그러겠다고 했습니다. 근데 하루도 지나지 않아 언제 다 되는지 주변에서 아우성이네요;; 그냥 뚝딱하면 만들어지는 줄 안 모양입니다 ㅠㅠ 그래도 친형 결혼식이니 조금은 신경을 써서 만들고 싶어 배경에 예쁜 벚꽃이 휘날리는 그럼 청첩장을 후다닥 만들어 주었습니다. 퇴근하고 쉬질 못하니 엄청 피곤하긴 하네요. 아래는 벚꽃이 흩날리는 이펙트의 스크린샷입니다. 시간이 넉넉하면 직접 만들어보고는 싶었는데 기한이 빡빡하다 보니 오픈 라이브러리를 이용했습니다. 라이브러리나 오픈 코드들이 여러 개 있긴 했지만 제가 선택한 라이브러리는 react-snow.. 2023. 1. 10.

티스토리툴바