김재욱의 이모저모

🖼️ SVGR 사용법 총정리📌 SVGR란?SVGR은 svg파일을 react component로 변환해주는 도구이다.react 프로젝트에서 아이콘을 깔끔하게 관리하고 사용할 수 있게 도와준다.예: icon.svg → Icon.tsx✅ 왜 필요할까?SVG 파일을 img로 사용하는 것보다 더 정밀하게 커스터마이징 가능색상, 크기, title 등을 JSX처럼 props로 제어할 수 있음코드로 관리되기 때문에 트리 쉐이킹과 빌드 최적화에 유리📦 설치하기https://react-svgr.com/docs/getting-started페이지엣 나의 프로젝트에 맞게 설치하면 된다. 나는 next.js를 사용중이라 next.js 로 들어갔다. (webpack이랑 같은듯)1. next.js로 설치 (webpack)npm..

웹 페이지를 꾸미다 보면 시각적인 효과를 위해 아이콘을 주입하고 싶을 때가 있다. 그냥 구글에 돌아다니는 사진을 가져다가 써도 될 수도 있지만 그런 아이콘들은 png파일이라면 배경색이 남아있기 때문에 뒤의 배경이 남은 모양으로 주입되어 아이콘을 넣지 않은 거보다 못생겨진다. 그래서 svg파일로 된 아이콘을 찾아야 하는데 내 마음에 드는 아이콘이 svg 파일로 된 것을 찾기가 쉽지않다. react에서는 이런 개발자들을 위해서 react-icons를 제공하고 있다. https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, w..

프런트앤드 코딩을 처음 진행하면서 알게 된 하나의 사실은 내가 글자 혹은 데이터를 작성해서 화면에 띄우는 것은 굉장히 쉽지만 서버에서 관리하는 데이터를 받아오는 것은 귀찮다는 사실이었다. 하지만 우리는 슬프게도 많은 데이터는 서버에서 관리해야 하고 이 데이터를 화면에 띄우거나 활용해야 할 때면 이를 서버에서 받아와야 한다. server에서 데이터를 받아오는 방법은 많을 것이지만 내가 유일하게 알고 있고, 우리가 활용한 방법은 useQuery를 활용하는 것이였다. 우리가 만든 서버에서 api를 호출해 오는 코드를 전부 소개하는 것도 좋지만 오늘은 useQuery를 사용하는 코드를 집중적으로 봐보도록 하자. useQuery의 사용법! api를 호출하여 얻은 데이터를 활용하는 곳에서 사용하는 코드이다. exp..

useState란? 컴포넌트의 상태를 간편하게 생성하고 업데이트 해주는 도구를 제공해준다. const [state, setState] = useState(초기값); useState 함수의 기본 꼴이다. state라는 변수를 선언하고 그 값은 useState 괄호 안의 값을 초기값으로 초기화 된다. 그리고 setState함수를 통해서 해당 값을 바꾸고, setState함수를 통해 state가 바뀌게 된다면 해당 컴포넌트가 다시 랜더링 된다. useState를 왜 사용하는가?! 이 아이콘의 배경색은 지금의 색깔이 defalut 값이지만 클릭을 하게 된다면 배경색이 변하게 될 것이다. 저 아이콘의 코드는 아래와 같다. //CircleIconChip.tsx 아이콘의 전반적인 기능을 관리하는 코드이다 import..

전역 상태 관리 내가 이번 프로젝트에서 경험해 본 전역 상태관리 라이브러리는 recoil이다. 전역 상태 관리의 필요성은 예를 들면 naver 사이트를 이용하는데 내가 뉴스, 증권, 날씨 등 다른 메뉴에 들어가게 되면 다른 화면이 나오게 되고 그때마다 필요한 정보들은 다름으로 각각의 페이지에서 관리할 것이다. 하지만 항상 알고 있어야 할 정보가 있다면 어떻게 해야 할까?? 그때마다 props로 값을 넘겨주기보다는 중앙에 창고 같은 것이 있다면 그곳에 넣어두고 모든 페이지들이 그 창고에 있는 값을 참조하면 좋을 것이다. 그 기능을 하는 것이 전역 상태 관리이다. //state.user.ts user의 이름을 관리하는 파일이다 import { atom } from 'recoil'; export const U..

위 사진의 icon들은 사용자가 클릭 후 홈으로 가기 버튼을 누르면 사용자가 클릭한 결과가 사용 만족도로 서버에 전송되어야 했다. 하지만 이 아이콘들은 각각의 compenent로 독립적으로 관리되고 있었고 여러 가지 아이콘이 클릭되는 버그가 존재했다. 따라서 이 버그를 해결하기 위해서는 5개의 아이콘을 그룹화하여 같이 상태관리를 하여 최대 1개 혹은 0개의 아이콘이 클릭되게 수정해야 했다. 첫 번째 시도 const FeedbackResultHelpfulnessModal = ({ title, visible, close }: FeedbackHelpModalProps) => { const [iconIndex, setIconIndex] = useState([false, false, false, false, fa..