본문 바로가기

전체 글139

[React] React-beautiful-dnd 활용법 Basic 개요 React-beautiful-dnd (이하 rbd)는 zira로 유명한 atlassian에서 만든 오픈소스다. 디자인 시스템을 구축하는 팀에서 주로 작업하는 듯 하다. (오픈소스 운영자 트윗) 만약, zira를 써보았다면, 오픈소스를 사용하면서, 똑같은 느낌을 받을 수 있을 것이다. 비슷한 오픈소스들이 많았지만, zira의 점유율이 높아지면서, 자연스럽게 atlassian 에서 공개한 rbd 라이브러리도 점유율이 매우 높다. 같은 카테고리에서는 과반이상이 되어버린 것 같다. 사용하게 된 계기 nomad coder 수업을 수강하면서 알게되었다. api 구조가 매우 단순하면서도, 편하게 사용할 수 있게 되어 있다. 그래서 앞으로 Trello 형태의 UI를 구현해야하면, rbd를 계속 사용하게 될 것 같.. 2023. 2. 3.
[JavaScript] day.js locale (key, name) - i18n 매번 어디가서 검색하기 좀 그래서 걍 기록해둠. 한국 key : "ko" [ { key: "af", name: "Afrikaans" }, { key: "am", name: "Amharic" }, { key: "ar-dz", name: "Arabic (Algeria)" }, { key: "ar-iq", name: " Arabic (Iraq)" }, { key: "ar-kw", name: "Arabic (Kuwait)" }, { key: "ar-ly", name: "Arabic (Lybia)" }, { key: "ar-ma", name: "Arabic (Morocco)" }, { key: "ar-sa", name: "Arabic (Saudi Arabia)" }, { key: "ar-tn", name: " A.. 2023. 1. 31.
[React] React.memo로 만드는 성능 최적화 기법 개요 가끔씩 React.memo에 대해 왜 쓰는지 이해가 안가는 경우가 많았다. 이건 또 뭔가 싶고. 개선해도 얼마 되지도 않고.. 오늘에서야 그 이유를 정확히 알게 된 것 같아서 글을 정리하게 되었다. 😁 React.memo 라는 것 한문장으로 정리하면, props가 변경되지 않으면, 재 렌더링 하지 않게 하는 것 그렇다. 이게 끝이다. 그럼 언제 사용할까? 당연하게도, props가 변경되지 않는데, 자꾸 재 렌더링해서 성능이 저하 되는 경우에 사용한다. 예제 코드 // parents.tsx // ... {toDos.map((toDo, index) => ( ))} {magic.placeholder} // ... // children.tsx import React, { memo } from "react".. 2023. 1. 26.
[React / Recoil] 예제로 알아보는 Recoil (컨셉, 환경세팅, Atom, Selector) This Document wrote based Recoil v0.7.6 at 2022.12.30. 1. Concept 전역 상태 관리를 하는 상태 관리 라이브러리이다. key, value를 한 쌍으로 이루어서 사용한다. React를 만든 메타에서 직접 만든 Library이기 때문에, React답게 유지하려고 만들었다고 한다. 나는 redux(현재까지 좀 더 많이 사용 중인)를 안써봤기 때문에 잘 모르지만, 비교 사용해본 사람들은 redux보다 사용하기에 단순하고 편리하다고 한다. 실제 익혀서 사용까지 매우 금방이었다. (결국은 짬바인가? 얼마되진 않지만 전보다는 쉬워졌다. 오히려 개념을 익히는 게 더 시간이 많이 걸리지 않을까 싶다.) 공식 사이트에 있는 아래 영상을 보면서 개념을 익히는 것도 매우 유용.. 2023. 1. 9.
[JavaScript] imgbb 이미지 업로드 api Post 코드 무료 이미지 서버 사용하는 방법이다. { var formData = new FormData(); formData.append( "image", "iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAIAAACzY+a1AAAS/0lEQVR42u2deZQURZrAvy8iK6u6jj7og26wAWU4BhRlcFaBGcEFVsUn6qK+dRyP8VhnnFFxZzxGdx10jh2YnTfKk6fjG1cdkXVYVx3FGwVRPBAB8UQUlYa+6Luquo7MiG//iKrqBqu7svpOXvxe0+81XZ0ZGb+MyIjIiC8w9uU40LgZNtwJ0PQXrdD1aIWuRyt0PVqh69EKXY9W6Hq0QtejFboerdD1aIWuRyt0PVqh69EKXY9W6Hq0QtejFboerdD1aIWuRyt0P.. 2023. 1. 6.
[React / Typescript] setInterval, useRef 이용한 대기시간 제어하기 클라이언트에서 대기시간이 지나면, 화면이 전환되도록 작성한 코드다. 이 방법이 정답인지는 모르겠는데, 이런 저런 구글링은 그닥 도움이 되지 않았었다. 구글링 중 유용했던 내용은 다음과 같다. 1. useRef를 이용해서 dom에 간섭을 해야한다는 것. 2. useRef의 타입을 NodeJS.Timeout 으로 설정해주어야 한다는 것. 조사한 내용을 바탕으로 이렇게 하면 될 것 같아 작업했다. const timerRef = useRef(); let initProcessingCount = 0; const initializingCount = () => { initProcessingCount = 0; }; useEffect(() => { timerRef.current = setInterval(() => { if.. 2023. 1. 4.

티스토리툴바