김재욱의 이모저모

클론코딩을 진행하다 보니 useCallback() 함수를 사용해야 하는 경우가 많았다. 그래서 'useCallback() 함수는 무슨 역할을 하는지, 왜 써야 하는지'에 대하여 자세히 공부해 보아야겠다는 생각이 들었다. useCallback() 함수란? useCallback() 함수는 React에서 사용자 정의 함수를 기억하는데 사용된다. 이 함수의 주요 목적은 통상적으로 말하면 성능 최적화와 렌더링 최적화를 달성하는 것이라고 한다. 이게 무슨 말이냐고 하면 일반적으로는 React 컴포넌트 내에서 함수를 정의하면 해당 함수들은 매 렌더링 주기마다 새로운 함수 객체가 생성된다. 이로 인해 React는 다시 렌더링 될 때마다 함수를 새로운 것으로 간주하고 해당 함수를 참조하는 컴포넌트 및 하위 컴포넌트가 다..

넷플릭스 클론코딩의 첫 단계로 로그인 페이지를 구현하였다. 이번 클론코딩을 처음으로 진행하면서 알 수 있었던 사실은 HTML에도 많은 기능이 있고, 그걸 모르면서 코딩을 한 나는 정말 아무것도 모르고 코드를 쓰고 있었음을 알 수 있었다... ㅠ_ㅠ 내가 이번에 클론코딩을 진행하면서 새롭게 알고, 배운 사실들을 여기에 기록하면서 한 단계씩 진행해볼까 한다. useState 를 통한 상태관리 로그인 화면 회원가입 화면 위의 두 화면은 하단의 흰색 글씨를 누르면 서로의 화면으로 바뀌어야 했다. 물론 서로 다른 화면으로 분리해서 만든 후 링크를 걸어도 됐지만 디자인도 같은데 굳이 넘어다니는데 사용자가 더 긴 시간을 허비하게 할 필요가 없다고 생각하였다. (만약 보안상의 다른 문제나 따로 고려해야 할 것이 있다면..

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