전체 글235 [React & Canvas] 리엑트와 캔버스 사용시 메모리 누수 방지 안녕하세요, 개발자 Sean입니다. 최근 캔버스를 이용해 어플을 제작하는 재미에 푹 빠져있는데요, 회사 프로젝트에도 한번 사용해 보려고 프리로딩 컴포넌트를 캔버스를 이용해 제작했습니다. 웹 어플 라이브러리로 리엑트를 사용하고 있기 때문에 useRef로 캔버스를 제어해 아래와 같이 멋진 다이내믹한 프리로딩 이펙트를 만들었습니다. 원이 돌아가며 작은 입자를 뿌리는 방식의 애니메이션 입니다. 하지만 오늘 이것저것 테스트 진행 도중 심각한 기능저하 문제를 발견했습니다. 프리로더가 언마운트 된 뒤에 어플의 속도가 급격하게 느려지는 문제가 발생했습니다 :( 우선 개발자 도구를 통해 퍼포먼스를 측정해 보았습니다. 역시나 메모리 누수가 발생하고 있는 것을 확인할 수 있었습니다. 어디가 원인인지 한참을 고민하다가 req.. 2023. 4. 27. [UI] Chakra와 Storybook 연동하기 안녕하세요 :) 개발자 Sean입니다. 이번주 새로운 프로젝트를 시작하며 아키텍쳐와 사용할 라이브러리에 대해 고민하고, 기본 틀을 세팅하는 시간을 가져보았습니다. 이번에는 ui 라이브러리로 chakra를 이용해 약간의 커스터마이징을 하고, storybook을 통해 컴포넌트 단위로 테스팅과 유지보수를 하도록 만들려고 합니다. 회사에서 기존에 만들었던 웹어플의 경우 잦은 디자인 변경과 담당자 교체로 인해 수많은 ui 파일들이 생겨나는 문제가 발생했습니다. 문제는 어떤 ui가 사용되고 있는지 모르기 때문에 좀비처럼 폴더안에 살아있는 문제가 발생했습니다. 이를 해결하기 위해 이번 프로젝트는 처음부터 디자인을 확실히하여 위의 문제가 발생하지 않도록 하려 합니다. # 1. "@chakra-ui/storybook-a.. 2023. 4. 17. [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. [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. [DragNDrop] 드래그 도중 커서 변경 안녕하세요, 개발자 Sean입니다. 이전에 만들었던 DragNDrop 기능에서 고스트 이미지가 마음에 안 들어, 별도의 컴포넌트로 더 예쁜 커스텀 고스트 이미지를 만들어 보았습니다. 하지만 이로인해 마우스 커서 스타일이 도로 화살표로 돌아와 버렸는데요. 원인은 고스트 이미지를 없애기 위해 빈 이미지를 넣었기 때문에 그런 것 같습니다. react-dnd를 만든 개발자 깃헙에도 들어가 해결방법을 찾아보았지만 해결방법이 딱히 없다는 충격적인 답변을 보기만 했습니다 ㅠㅠ 하지만 해결방법이 없는 건 아닙니다. 왜냐하면 다른 웹사이트에서는 멋지게 드래그 앤 드롭 도중에 커서를 변경해주고 있거든요. 따라서 저는 약간은 과격한 방법으로 문제를 해결했습니다. 해결방법은 바로 드래그 이벤트가 시작되면 전역 스타일에 커서를.. 2023. 3. 21. [DragNDrop] 드래그 도중 커서 변경 안녕하세요, 개발자 Sean입니다. 오늘은 react-dnd를 이용한 드래그 앤 드롭 기능 구현도중 겪었던 커서 변경 문제에 대해 포스팅을 해보려고 합니다. 드래그 앤 드롭을 이용해 drag 이벤트를 발생시키면 자동적으로 마우스 뒤편에 ghost image가 나타나고 마우스는 기본 커서로 변경되는 것을 확인할 수 있습니다. 이는 html5 백엔드 api에서 자동으로 설정된 값이기 때문입니다. 안타깝게도 html5의 백엔드 api는 다루기가 어려운 데다 자유도가 낮아 많은 드래그 앤 드롭 예제에서는 커서변경을 포기하고 기능에 초점을 맞추고 있습니다. 구글에서도 많은 분들이 관련해서 불편함을 토로하는 글을 읽어볼 수 있습니다. 근본적인 해법으로는 드래그엔드랍을 지원하는 백엔드 api를 변경하는 것이지만 np.. 2023. 3. 16. [Firebase] Auth undefined 문제 해결방법 안녕하세요, 개발자 Sean입니다. 사이드 프로젝트로 만드는 어플에서 자꾸만 원인 모를 에러가 발생해 퇴근 후 원인을 분석하다 해결방법을 발견해 관련해서 포스팅하려고 합니다. 현재 프로젝트에서 typescript와 firebase의 auth를 활용해 프론트엔드를 만들고 있는데요, 이 둘 조합해서 사용하는게 여간 까다로운 일이 아니네요. (아마... 제 실력이 떨어져서겠죠..?ㅎㅎ;;) 우선 토큰을 가져오기 위해 auth.currentUser.getIdToken()를 호출하면 타입에러가 발생합니다. 이유는 auth.currentUser 안에 getIdToken() 메서드가 있을 수도 있고 없을 수도 있기 때문입니다. 자세히 이해하지 못했지만 auth 객체가 호출될 때 중간단계(초기화 등)를 거치기 때문이라.. 2023. 3. 15. [UI] styled-components를 이용한 원형 차트 만들기 안녕하세요, 개발자 Sean입니다. 오늘은 원형차트 ui 관련 내용을 포스팅하려고 합니다. 아래 사진의 우측 상단에 들어가는 조그마한 차트입니다. 사실 팀에 합류하고 차트 ui 제작을 해본 경우는 매우 드문데요, 왜냐하면 외부 라이브러리(highchart)를 이용하는 편이 훨씬 생산성이 높기 때문에 직접 차트 ui를 만들지 않았습니다. 하지만 이번에 개편되는 ui 디자인의 경우 외부 라이브러리를 이용하면 디테일한 부분의 스타일을 수정해주어야 하는 번거로움이 생기는데 반해 직접 구현하기에 어렵지 않은 디자인이라 직접 만들어 보기로 했습니다. 리엑트와 스타일 컴포넌트를 이용했습니다. 우선은 아래와 같이 원형차트 컴포넌트 파일을 만들어 줍니다. 여기서 저는 이름을 CircleChart라고 지었는데 보통은 Pi.. 2023. 3. 9. [React] 플랫폼 메인구조(헤더, 사이드바, 푸터) 특정 페이지에만 적용하기 안녕하세요, 프론트엔드 개발자 Sean입니다. 오늘은 플랫폼에서 메인구조(헤더, 사이드바, 푸터)를 특정 페이지에만 적용하려면 어떻게 해야 하는지에 대해 정리한 내용을 올려볼까 합니다. 사실 오늘 플랫폼 리펙토링 중에 페이지를 바꿀 때 마다 상단 헤더의 이미지 아이콘이 깜빡 거리는 사실을 알게 되었습니다. 원인은 페이지를 바꿀 때 메인구조가 리렌더링 되었기 때문이었습니다. 이러한 이유가 발행한 이유는 라우팅 되는 컴포넌트 안에 메인구조 컴포넌트를 삽입하는 형태였기 때문에 페이지를 변경하면 매번 같은 메인구조를 다시 그렸던 겁니다. 예를 들어 라우터는 path='/에 Dashboard.js 컴포넌트를 불러오고 해당 컴포넌트 안에 MainStructure.js 컴포넌트가 들어있는 구조였습니다. 이 문제를 해.. 2023. 3. 2. [JS] 일정 값 사이의 랜덤 값 생성 함수 export const randomNumBetween = (min, max) => { return Math.random() * (max - min + 1) + min } 2023. 2. 28. [JS] Event Delegation 작동방식 안녕하세요, 개발자 Sean입니다. 오늘은 Event Delegation에 대한 좋은 글을 읽어 번역해 옮겨보려고 합니다. How JavaScript Event Delegation Works 자바스크립트 세계에서 가장 핫한 방법론 중 하나로 event delegation이 있습니다. Event delegation을 사용하면 특정 노드에 이벤트 리스너를 추가하지 않아도 되지요. 대신 부모 엘리먼트에 이벤트 리스터를 추가하면 됩니다. 그렇게 되면 해당 이벤트 리스너는 버블링 된 이벤트를 분석하여 하위 요소에서 일치하는 항목을 찾을 수 있죠. 기본 개념은 매우 간단하지만 많은 사람들이 event delegation이 작동하는 방식을 알지 못합니다. 이번 포스팅에서 event delegation이 작동하는 방식.. 2023. 2. 20. 이전 1 2 3 4 5 6 7 ··· 20 다음
