끄적끄적

사용자와의 인터랙션중에 수많은 API요청이나, 액션들로 인해 우리의 사이트가 느려질 수가 있습니다. 이중 가장 흔한 건 scroll event, keydown event .. 같은 종류들입니다. 오늘은 scroll event를 인식할 때 동작 하기 위한 throttling 과 debounce에 대해 알아보겠습니다. 우선 둘다 이벤트나 함수 실행의 빈도를 줄이고 효율성을 올리기 위한 함수들입니다. 1. Throttling Throttle 는 입력 주기를 방해하지 않고, 일정 시간 동안의 입력을 모아, 한번씩 출력을 제한한다. 예시로는 javascript 라이브러리인 lodash 의 throttle, debounce를 사용하겠습니다. _.throttle(func, [wait=0], [options={}]) ..

리엑트를 사용하는 사람들한테 가장 많은 실수를 유발시키거나, 문제를 일으키는 부분은 바로 state를 set시키는 과정이라고 생각합니다. 개인적으로 질문을 주시는 분들 중 절반정도의 분들은 setState의 비동기 문제때문에 원치않은 state를 사용하고 계셨습니다. 이처럼 setState는 비동기 작업으로 우리가 언제! 정확히 실행 되는지를 보장할 수 없습니다. 따라서 한 함수내에서 또는 같은 실행환경?에 있는 곳에서 같은 같은 state를 여러번 set시키는 것은 안됩니다. 하지만 꼭 사용을 하고 싶거나, 그래야만 하는 상황이 존재한다면 방법이 한가지 있습니다. 바로 함수형 setState입니다. 위와같이 객체의 형태가 아닌 함수의 형태이기때문에 큐에 넣고 순차적으로 실행할 수 있게 해줍니다. 위와 ..

PWA란 Progressive Web App의 줄임말입니다. 쉽게 웹사이트를 앱처럼 사용할 수 있도록 해주는 것입니다. 기존의 웹사이트들을 핸드폰에서 실행할 경우 성능상의 문제로 좋지 않은 경험을 느꼈을 수 있습니다. 하지만 PWA를 이용한다면 네이티브앱과 비슷한 성능의 앱처럼 사용할 수 있습니다. 제가 PWA를 사용하게 된 이유는 2가지입니다. 1. 웹사이트 주소를 매번 입력하여 들어오기 번거로우며, 해당 사이트의 특정 기능을 앱처럼 사용하고 싶다. 2. 핸드폰 푸쉬알림을 이용하여 사용자들의 서비스 질을 높이고 싶다. 이번 글에서는 NextJS로 만들어진 프로젝트를 PWA로 적용하는 법을 다뤄보겠습니다. ■필요한 library 설치하기 npm i next-pwa yarn add next-pwa ■web..

React 개발하다보면 콘솔 창에 한번쯤은 봤을 경고문이 있습니다. " Each Child in an array or iterator should have a unique 'key' prop " 특히 리스트 형식의 구조를 짜다보면 map 같은 반복문을 통해 요소를 return 하는 형식도 많이 사용합니다. 그럴때 각 요소의 식별을 위한 값이 바로 key 값입니다. 어떤 데이터들은 각 데이터들을 식별할 수 있는 고유의 값인 ID를 가지고 있지만, 그렇지 않은 것들에게 우리는 종종 index를 이용하여 key값에 부여했습니다. 하지만 이 index를 이용한 key값 부여에는 우리가 예상하지 못하는 오류가 생길 수 있습니다. 요소가 추가되거나 삭제될때 key값이 고유한 값이 아닌 index로 하게 되면 요소가..

개인적으로 구글 파이어베이스가 다른 플랫폼에 비해 사용하기가 쉽다고 생각됩니다. 가장 좋은건 파이어베이스 Auth를 통해 각종 소셜 로그인을 쉽게 구현할 수 있고 Realtime DB와 store를 통해 프로젝트를 쉽게 만들어볼 수 있습니다. 오늘은 React 프로젝트에서 구글Firebase연동을 통해 구글로그인을 할 수 있도록 설정해보겠습니다. 1. 파이어베이스에 로그인하여 프로젝트를 생성합니다. 2. 프로젝트를 등록하고 받은 firebase SDK를 저장해놓습니다. 3. 이제 다시 VSC로 돌아와 터미널에서 firebase를 설치해 줍니다. npm install firebase 그리고 아까 저장해두었던 SDK를 가지고 유틸 컴포넌트를 하나 만들어줍니다. // firebase_config.js impo..