김재욱의 이모저모

웹 페이지를 만들기 위해 작년, 재작년의 페이지들을 보면서 내가 가장 관심이 갔던 부분은 움직이는 그림들이었다. 저런 애니메이션들은 내가 svg, png 파일들을 주입하는 것처럼 그냥 mp4나 gif 파일을 찾아서 주입하면 되는 건가?라는 의문이 들었고 git 주소를 받아서 뜯어본 결과 Lottie를 이용하여 애니메이션을 주입하신 거였다! https://lottiefiles.com/ LottieFiles: Download Free lightweight animations for website & apps. Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Creat..

웹 페이지를 꾸미다 보면 시각적인 효과를 위해 아이콘을 주입하고 싶을 때가 있다. 그냥 구글에 돌아다니는 사진을 가져다가 써도 될 수도 있지만 그런 아이콘들은 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..

이번에는 JavaScript의 고차함수에 대하여 작성해보려고 한다. JavaScript에서 "고차 함수"는 다른 함수를 인자로 받거나 함수를 반환하는 함수를 말합니다. 이러한 기능은 함수형 프로그래밍 스타일을 지원하며, JavaScript에서 함수를 값으로 다룰 수 있는 유연성을 제공합니다. 나는 함수를 인자로 받는 방식의 고차함수를 활용해 보았는데 결과가 훌륭했다! 활용하기 전 이 코드가 나의 원래 코드였다. 5개의 아이콘을 직접 입력하였고 새로운 아이콘을 추가하고 싶다면 직접 추가하면 되었다. map을 이용한 고차함수를 활용하고 난 후 export type IconItem = { name: TName; width: string | number; height: string | number; viewBo..

프런트앤드 코딩을 처음 진행하면서 알게 된 하나의 사실은 내가 글자 혹은 데이터를 작성해서 화면에 띄우는 것은 굉장히 쉽지만 서버에서 관리하는 데이터를 받아오는 것은 귀찮다는 사실이었다. 하지만 우리는 슬프게도 많은 데이터는 서버에서 관리해야 하고 이 데이터를 화면에 띄우거나 활용해야 할 때면 이를 서버에서 받아와야 한다. 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..