🤷‍♂️ 리액트, 왜 쓰나요?사람들이 다 쓰니까 쓴다는 재미없고 식상한 말을 하기 싫다면 다음 항목들을 외워가보자. 1번은 당연한 소리고2, 3번만 외우면 된다화면 업데이트 구현이 쉽다화면 업데이트가 빠르게 처리된다이걸 직접 사용해보면 몸소 느껴지지만 막상 말로 하려면 안 나온다간단히 말해, 리액트는 화면 처리를 쉽고 빠르게 할 수 있는 프레임워크 중 가장 많이 사용되는 것이다. 그럼 두 가지 장점에 대해 좀 더 자세히 알아보자. 1. 화면 업데이트 구현이 쉽다리액트는 선언형 프로그래밍 방식으로 동작한다. 선언형 프로그래밍?불필요한 과정은 생략하고, 목적만 간결히 명시하는 방법.선언형 프로그래밍의 반댓말은 명령형 프로그래밍인데, 이는 과정까지 모두 말해줘야 하는 아주 복잡하고 친절한 방법이다. ..

Next.js 프로젝트에서는 이렇게 비동기 방식으로 locomotive scroll 패키지를 불러와서 사용한다.(async () => { const LocomotiveScroll = (await import("locomotive-scroll")).default; const locomotiveScroll = new LocomotiveScroll(); locomotiveScroll.scrollTo(".pageWrapper", { offset: 0, duration: 1, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), onComplete: () => { setT..

https://velog.io/@summereuna/%EB%A6%AC%EC%95%A1%ED%8A%B8-useEffect-%EB%AC%B4%ED%95%9C-%EB%A3%A8%ED%94%84-%ED%83%88%EC%B6%9C%ED%95%98%EA%B8%B0 🔥 React: 리액트 useEffect 무한 루프 탈출하기useEffect 무한 루프 탈출하기velog.io 재난 보관함 개발 중, fetch api를 하는 useEffect 구문에서 갑자기 무한 api 호출을 하는 현상이 발생했다.알고보니 해당 컴포넌트에 props를 추가한 후, 갑자기 의존성 배열에 노란 줄이 쳐지면서 의존성으로 props, url을 추천하길래 아무 생각 없이 추가했더니(다신 이러지마라) 무한 루프가 발생했다.이유는 위 출처로 미루..

1. public 사용 간단하게 사용할 수 있으며 public 폴더에 있는 이미지를 상대 경로를 통해 쉽게 불러올 수 있다.이미지를 직접 불러오기 때문에 번들링 처리가 필요없다 라는 장점이 있다. 대신 이미지의 관리가 어려울 수 있으며 이미지가 많거나 프로젝트가 커질수록 유지보수가 어려워진다는 단점이 있다. 또, 이미지의 크기가 큰 경우 로딩 성능에도 영향을 미칠 수 있다고 한다. 2. src/assets 사용이미지를 구조화 할 수 있기 때문에 유지보수 및 관리 측면에서 큰 도움이 된다.Webpack과 같은 모듈 번들러를 사용하여 이미지를 처리할 수 있으며 이미지를 최적화하고 번들에 포함시킬 수 있다. 하지만 이미지를 번들링하면 번들의 크기가 커질 수 있다. 프로젝트의 성향에 따라서 이를 잘 선택하는 것..

재난보관함 개발 중에 gnb 메뉴로 페이지 이동 시 해당 메뉴에 대한 active 상태 처리를 중앙에서 해주는 게 좋을 것 같아useContext 또는 사람들이 많이 쓰는 redux를 사용해보려고 한다.웬만하면 중앙 상태 관리는 안 쓰려고 했는데,직접 gnb의 메뉴를 클릭했을 때뿐만 아니라특정 페이지에서 '더보기'와 같은 관련 상세 페이지로 이동하게 할 때도 gnb의 메뉴에 active 처리가 되어야 하는데이걸 props로 타고 가게 하자니 귀찮기도 하고 설계를 어떻게 해야할 지 좀 막막해서일단 경험해볼 겸 이걸로 편리해지면 더 좋고.. 해서 시도해보게 되었다. 참고 링크: https://gomban.tistory.com/44 [React] 중앙상태관리 Context, Redux, Recoil시작하며 R..