무조건 코드는 선언형으로 짤 것, 순수 함수로 짤 것 함수를 실행하는 쪽에서는 함수명만 보고도 코드의 동작을 알 수 있게끔 변수 명도 신경 써서 잘 짜야한다. remove delete update modify 비슷한 단어들이 있을 때 하나만 통일해서 써야한다. 비슷한 역할을 하는 코드끼리 위치를 모아서 정리하기 작성을 완료한 코드는 편집기의 코드 접기를 이용해 접어두고 흐름만 파악 리팩터링을 할 때는 너무 큰 범위로 하면 안 되고 작은 단위로 하면서 무조건 테스트 리팩터링엔 유닛 테스트가 꼭 필요하다, 필수 기존에 있던 A 기능을 리팩터링 했을 때 A가 제대로 동작하는지 + 다른 기능들이 문제없이 동작하는지 새롭게 B 기능을 추가했을 때 기존에 있던 A 기능이 정상적으로 동작하는지 실 서비스에서는 기능이..
하나의 이미지만 다운로드 받기 // download: (클릭하면) 다운 받아지게 되는 이미지 명 // href: 이미지 경로 특정 버튼을 클릭하여 다운로드 받고 싶은 경우에는 useRef 훅을 이용하여 a 태그에 ref를 걸고 버튼을 클릭했을 시에 aRef.current.click() 이런식으로 구현합니다. 캡처 이미지(브라우저의 이미지)를 canvas를 이용해서 다운로드 받기 (html2canvas 라이브러리) import html2canvas from 'html2canvas'; import Karina from './karina.png'; const Main = () => { const onCapture = () => { // html2canvas에서 html에서 캡처를 할 tag를 매개변수로 넣어주..
이벤트 콜백함수에 매개변수를 넣지 않아도 되는 경우에는 콜백함수를 바로 작성해야 컴포넌트가 Unmount 되었을 시에 이벤트를 remove 할 수 있습니다. 함수로 콜백함수를 한 번 감싸주게 되면 React.Strictmode에 의해 useEffect가 2번이 실행이 되는데 addEventListener와 removeEventListener에서 콜백함수를 감싸고 있는 함수의 주소가 다르기 때문에 cleanup이 되지 않아서 이벤트가 2번이 등록되게 됩니다. (removeEventListener에서 이벤트 삭제가 안됨) React.Strictmode가 useEffect를 2번 호출하는 이유는 이런 cleanup같은 예시를 포함하여 컴포넌트가 제대로 작동하는지 확인하기 위함인데 이벤트가 2번씩 등록되는 문제..
React Query (Server State Management for React) state vs props state와 props는 모두 자바스크립트의 순수한 객체입니다. 렌더링에 영향을 미치는 정보를 담고 있기 때문에 React는 state나 props의 값이 변경되면 화면에 렌더링해야 할 데이터가 바뀌었기 때문에 리렌더링을 하게 됩니다. 이들은 중요한 차이점이 있습니다. state는 컴포넌트 내부에서 관리가 됩니다 (함수 내부에서 선언 된 지역변수와 비슷합니다). props는 컴포넌트로 전달됩니다 (함수에 매개변수를 전달하는 것과 비슷합니다). Client State vs Server State Client State 브라우저 세션과 관련된 정보, 즉 클라이언트가 제어하고 소유하는 데이터입니다...
