여태 React로 개발을 하면서 아마 가장 자주 쓴 hook이 뭐냐고 묻는다면 useState가 Top 3안에 무조건 든다고 장담할 수 있을 것이다. 근데 개발을 하면서 왜 useState는 배열로 묶어서 선언하는 방식으로 해야 하는 것인지에 대해 생각을 해본 적이 없다. 그래서 길진 않지만 알아본 내용을 살짝 풀어 보려고 한다. 배열 디스트럭처링(Array Destructuring) 본론으로 넘어가기 앞서 배열 디스트럭쳐링(Array Destructuring)이란 무엇일까 배열 디스트럭처링(Array Destructuring)은 JavaScript에서 배열에서 원소들을 추출하여 개별 변수로 할당하는 문법적인 기능이며, 이를 통해 배열의 각 원소에 접근하고 값을 할당하거나 읽을 수 있다. 기본적인 배열 ..
토이프로젝트 진행 중에 useDebounce라는 훅을 사용해야 하는 일이 생겼다. https://usehooks-ts.com/react-hook/use-debounce useDebounce() react hook - usehooks-ts This React hook helps to limit that the component is re-rendered too many times. Imagine that you want to execute a function on an event that executes… usehooks-ts.com 위 페이지의 훅으로 debounce 기능을 사용하였는데, 디바운스(debounce) : 과도하게 이벤트 처리 함수(콜백함수)가 호출되지 않도록 하여 부하방지를 위해 쓰이는 방..
프로젝트를 진행하면서 소셜 로그인 구현을 맡게 되었다. 다들 프론트엔드는 소셜 로그인에서 할게 많이 없다 쉽다~, 그중에서 카카오가 가장 쉽다~ 이렇게 얘기해서 방심했다. 그렇게 6일간의 소셜 삽질이 시작되었다. 구글링을 해보니 똑같은 카카오 로그인 구현인데도 정말 신기하게 포스팅한 사람들마다 다들 다른 방법을 사용하여 매우 혼란스러웠고 이해하는데 한참 걸렸다. 마침내 성공을 했을 때 극한의 희열감과 이건 반드시 포스팅으로 남겨 놓으리라 다짐하여 지금 글을 작성 중이다. 카카오 개발자 홈페이지를 정말 많이 읽었음에도 프론트엔드가 소셜 로그인을 할 때 어떤 역할을 해주어야 하는지 명확히 감이 오질 않았고 API 활용 방법만 적혀있을 뿐이었다. 프론트와 백엔드의 역할 구분에 대한 개념이 확실히 잡히질 않았기..
