NPM 배포하기 cra로 설정한 full-page-scroll 개발 중 문득 내가 개발한 기능을 npm에 배포해보면 어떨까? 하는 재미있는 생각이 들었다. 바로 배포해보자! 패키지 이름 먼저, 패키지 이름이 겹치는지 확인해야 한다. 해당 이름의 패키지가 존재하지 않는다면, 배포가 가능하다. 프로젝트 구조 내 프로젝트의 구조는 다음과 같다. components 폴더 내의 FullPageScroll을 배포할 계획이다. components 폴더 내의 index.js에 배포할 컴포넌트를 불러온 뒤, export 해준다. babel 설치 package.json과 같은 경로에 babel.config.js 작성 package.json 작성 (아래는 내 react-fp-scroll 패키지의 package.json 파일이다.) npm login package.json 까지 작성해준 뒤, 배포를 하기 전 npm 계정으로 로그인을 해야한다. 로그인이 정상적으로 되었다면, 명령어로 배포하면 완료된다.…

React에서의 배열 state 관리 배열 state를 업데이트하기 위해서는 배열에 직접적으로 영향이 가지 않는 방법을 이용해야 한다. (state에 저장한 배열은 변경이 불가능한 것으로 취급해야 하기 때문) 객체 state를 업데이트할 때와 마찬가지로, state에 저장된 배열을 업데이트하려면, 새로운 배열을 만들어 사용해야 한다. 추천하지 않는 방법 예시 추가: push, unshift 삭제: pop, shift, splice 교체: splice, arr[i] = … 정렬: reverse, sort 추천하는 방법 예시 추가: concat, […arr] spread syntax 삭제: filter, slice 교체: map 정렬: 배열을 복사한 뒤 처리 두 방식 비교 코드 (배열에 값 추가 예시) Refference: https://react-ko.dev/learn/updating-arrays-in-state

Lodash란? 함수형 프로그래밍 패러다임을 사용하여 일반적인 프로그래밍 작업을 위한 유틸리티 기능을 제공하는 Javascript 라이브러리(Wikipedia) debounce와 throttle debounce와 throttle은 이벤트가 연속적으로 발생할 때, 콜백함수의 불필요한 실행을 줄여주는 기능을 제공한다. 서버로의 불필요한 요청(Request)을 줄일 수 있고, 불필요한 렌더링을 방지할 수 있어 컴포넌트 성능 개선에 도움이 된다. 또한, 외부 API를 호출해야 하는 경우, 과도한 서버 요청을 막아줄 수 있는 면에서 아주 중요한 기능을 한다고 생각한다. debounce는 이벤트가 종료된 뒤, 일정 시간 뒤에 콜백함수가 실행된다. throttle은 콜백 함수를 일정 주기마다 한 번 실행한다. debounce 적용 예시 beforeDebounce afterDebounce

Side Effect 란? React 컴포넌트가 화면에 1차로 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들 비동기로 처리되어야 하는 이유? 데이터를 가져오려고 외부 API를 호출할 때, 일단 화면에 렌더링할 수 있는 것은 1차로 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 이유는 연동된 API가 응답이 늦거나 없을 때 데미지(사용자의 답답함)를 최소화 시켜 사용자 경험 측면에서 유리하기 때문이다. React Hooks 란? Hooks는 리액트 v16.8에 새로 도입된 기능이다. 함수형태의 컴포넌트에서 사용되는 몇가시 기술을 Hook이라고 부른다. 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다. 잘 사용하고 있던 클래스형 컴포넌트에서 함수형 컴포넌트로 바꾸는 이유? React를 배우는 데 있어서 클래스는 큰 진입장벽이었다. 코드의 재사용성과 코드 구성을 …