Yyunkooinyunkoo.hashnode.dev·Apr 21, 2024 · 2 min readReact+Vite에서 vite-plugin-svgr 사용해서 SVG 컴포넌트 만들기❗ 본글은 작성 당시 프로젝트에서 사용했던 코드입니다. 사용 하실 때 유의해주세요 React+Vite 프로젝트 중 svg를 사용 할 경우가 생겼다. 매번 <img /> 태그에 넣어서 사용했지만 더욱 조작하기 쉽게 사용하는 방법 중 vite-plugin-svgr를 이용해 컴포넌트로 만드는방법이 있어 사용해봤다. 블로그 마다 동작하는 코드가 달라 정리를 해볼까한다. vite-plugin-svgr - 패키지 사이트 ✨ 표시가 있는 필수적으로 추...00
Yyunkooinyunkoo.hashnode.dev·Apr 20, 2024 · 3 min read페이지 이동을 했지만 컴포넌트가 마운트 되지 않는다?프로젝트를 처음엔 하나의 페이지 구성으로 계획 했지만 검색에 따라 결과를 다르게 보여주기 위해 페이지 분기 처리가 필요했다. 때문에 react-router-dom을 사용해 페이지를 나누기로 결정했다. react-router-dom 구성 react-router-dom의 공식문서를 찾아보고 페이지 분기를 나누는 코드를 작성 할 수 있었다. // main.js import * as React from 'react'; import * as ReactD...00
Yyunkooinyunkoo.hashnode.dev·Apr 15, 2024 · 2 min readZustand 사용 후기프로젝트를 진행하면서 상태관리 도구를 하나 선정해서 도입하려고 마음먹었다. 선택지에는 redux-toolkit, Recoil, Zustand 가 있었다. zustand를 선택한 이유는? 이전부터 사용이 간단한 상태관리 도구를 사용해보고 싶다는 생각이 있었기에 redux, redux-toolkit 은 제외되었다. Recoil은 더이상 업데이트를 하지 않고 많은 사람들이 zustand를 추천해서 도입하게 되었다. Zustand 설치 npm inst...00
Yyunkooinyunkoo.hashnode.dev·Jan 9, 2024 · 2 min readDebouce로 알아보는 Closure검색 기능을 구현 할때 불필요한 요청을 줄이기위해 debounce를 구현해서 요청을 줄인다. 보통은 라이브러리(Lodash)를 많이 사용하지만 직접 구현 해보기로 했다 💡 Debounce : 일정 시간안에 연속되어 발생되는 이벤트를 마지막 이벤트만 콜백 함수를 실행 시킨다. function debounce(callback, delay = 500) { let timer = null return (...args) => { ...00
Yyunkooinyunkoo.hashnode.dev·Dec 6, 2022 · 4 min readEslint 와 Prettier 설정 해보자 (airbnb 곁들이기)🧐 Eslint 와 Prettier를 왜 써야하는가? 이번 프로젝트를 시작하면서 초기 환경 설정에 진심으로 공부해보고 싶었다. 코드를 작성하거나 협업을 할때 이유 모르는 error가 발생하거나 코드의 일관성이 사라져 가독성이 낮아지는 경우가 있습니다. 이런경우 규칙과 코드의 문제를 잡아주는 도구 lint 와 코드의 스타일을 잡아주는 prettier를 사용함으로써 코드의 품질과 깔끔함 코드를 작성하고 협업에 도움을 줄 수 있습니다. ✨ Esli...00
