Front-End/React40 [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] 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. [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. [React] 최초 렌더링에서 useEffect 실행 생략하기 안녕하세요, 개발자 Sean입니다. 오늘 플랫폼 테스트 진행 중 이상한 버그 하나를 발견했습니다. 차트를 그리는 페이지에서 차트 세팅을 변경해 적용하면 변경된 세팅이 아닌 이전 세팅값으로 차트가 그려지는 현상이었습니다. 왜 이런 현상이 발생하는지 조사해보니, 초기 렌더링 때 상태변화가 이루어지지 않은 상태에서 이전 상태 값으로 차트를 그렸기 때문에 문제가 발생하는 것을 확인할 수 있었습니다. 개인적으로 올바른 해결방법은 아니라고 생각하지만 급한데로 우선은 useEffect에서 초기 렌더링일 때는 함수 실행을 스킵하도록 코드를 짰더니 문제가 해결되긴 했습니다. 방법은 여러가지가 있을 수 있겠지만 제가 사용한 방법은 useRef를 활용하는 것이었습니다. const notInitialRender = useRe.. 2022. 12. 14. [React] React-dnd 사용방법 안녕하세요, 개발자 Sean입니다. 오늘은 플랫폼 상단 탭의 Drag and Drop 기능 리펙터링을 진행했습니다. 베타 테스트용으로 급하게 만드느라 기존의 드래그 앤 드롭은 html5에서 기본적으로 지원하는 내장 기능을 이용해 구현해 놓은 상태였습니다. 하지만 ui/ux가 다소 엉성(?)하고 이를 해결하려면 여러 부수적인 코드를 많이 만들어야 하는 까닭에 많은 사람들이 이용해 안정성을 입증하면서 개발자의 의도대로 커스터마이징이 용이한 React-dnd를 사용하기로 했습니다. 완성된 동작은 아래와 같습니다. React-Dnd를 이용한 드래그 앤 드랍 하지만 사용하는 개발자 수에 비해 어딘가 부실한 설명으로 이해하는데 시간이 다소 걸렸습니다. 따라서 많이 부족하지만 다른 분들의 시간을 아껴드리기 위해 간단.. 2022. 11. 29. 이전 1 2 3 4 다음
