React 관련 애니메이션 문서를 찾아보다가애니메이션, 컴포넌트, 배경 등 여러 React 컴포넌트를 제공해주고 있는 라이브러리를 발견했다.이미 Github 21.9K star를 받은 레포지토리인데,요즘 React를 쓴다면 "우와" 할법한 애니메이션들이 가득하다.실제로 컴포넌트를 체험해볼 수도 있다! 사용 방법도 간단하다.npm에서 설치를 먼저 해주고,npm install gsap 사이트에서 체험해본 원하는 컴포넌트를 가져와서 쓰면 된다.import SplitText from "./SplitText"; delay, duration 같은 props를 맘대로 조절할 수 있어서커스터마이징에 자유롭다는 게 큰 장점인거 같다! https://reactbits.dev/ React BitsAn open source..

SNS 공유하기 기능이 필요해서 만들다가대부분 공식 문서의 가이드는 JavaScript 기반으로 되어 있어서TypeScript에 맞게 작업하다가 과정을 정리해본다! 이런식으로 네이버, X(트위터), 페이스북 세 가지로 만들었고,카카오톡 공유는 만드려고 설정은 다 했으나..https 인증을 받지 않은 http 환경에서는 테스트 할 수 없어서환경설정한 코드까지만 살려두고 추후 다시 해보는걸로.. 카카오톡으로 공유하기 위해서는 Kakao Developers 사이트에 로그인한 뒤앱을 생성하고 키를 발급받아서 사용해야 한다. env 파일에 발급 받은 JavaScript 키를 입력하고 사용하면 된다.# kakao 공유하기 API KEY 개발REACT_KAKAO_API_KEY= (JavaScript 키 입력) win..

Next.js에서 설정할 수 있는 reactStrictModeNext.js 공식문서에서는 next.config.js에서 reactStrictMode를 설정할 수 있다고 알려주고 있다.React의 Strict 모드를 통해서 잠재적인 문제를 강조하는 개발 모드 전용 기능으로, 안전하지 않은 라이프사이클, 레거시 API 사용 및 기타 여러 기능을 식별하는데 도움을 준다.// next.config.jsmodule.exports = { reactStrictMode: true,} React에서 말하는 React에서는 이 를 통해 일반적인 버그를 찾을 수 있다고 말한다. StrickMode는 개발 환경에서 동작하므로 실제 배포 환경에서는 동작하지 않는다.- 불순한 렌더링으로 인해 발생한 버그를 찾기 위해 구성 요소..

⚠️ 에러 상황 React 18.2.0 버전을 사용하면서 색상 선택 컴포턴트가 필요해서react-color 패키를 사용했는데 Sketch 컴포넌트를 불러올 때마다 아래와 같은 오류가 떴다..Sketch: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters insteadCheckboard: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead ✅..