gsap으로 애니메이션을 만드는 중에 Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this code 오류와 마주했다. 오류 해결의 방법은 매우 간단했다. 작동시키고자 하는 컴포넌트를 혹은 (이에 경우는 가장 바깥쪽을 감쌀 경우 이용)로 감싸주면 된다. 즉, root 컴포넌트를 만들어주면 된다. 아래는 문제 해결에 참고한 블로그이다. 여기에 따르면 React는 root 컴포넌트만 신경쓰고 내부 child 컴포넌트의 변화는 신경쓰지 않다고 한다. https://chana.tistory.com/entry/Scroll-Magic-Failed-to-execute-removeChild-on-Node-%EC%97..
REACT
Uncaught TypeError: destroy is not a function 잘 돌아가던 페이지에서 에러가 떠서 뭔가 하고 봤는데 TypeError가 발생했다. 리액트 버전 업데이트를 하면서 자잘한 버그가 많이 생긴다. 아마 기존에 해결 안되던 걸 새로 해결해서, 버그로 버티고 있던 구조가 무너지기 때문인 듯하다. (내가 코드를 잘 짜놨다면 이런 일은 없었겠지...) 이번에 뜬 에러는 Uncaught TypeError: destroy is not a function 였는데 useEffect 안에서 함수 이외의 것을 return 하거나 async, await를 사용하는 경우에 발생한다고 한다. 나의 경우는 useEffect 안에서 async를 사용해서 발생했다. 제거해주니 이전처럼 잘 돌아갔다. as..
SEO란? SEO는 search engine optimization의 약자로, 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정을 말한다. 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다. 요약하면, 내가 운영하는 사이트와 연관된 단어를 검색할 경우 구글이나 네이버에 더욱 잘 노출될 수 있도록 사이트를 개선하는 방법을 말한다. 검색엔진의 상위에 노출되는 것은 매출과 같은 부분에 중요한 영향을 미치기 때문에 검색 결과 상위를 차지하는 것은 매우 중요한 일이다. React에서 검색엔진최적화를 하기 위한 간단한 2가지 방법 1. robots.txt파일을 만들어 검색봇이 정보를 수집하게 한다. 2. 사이트맵을..
문제 input을 이용해 값을 가져와 수정하고 싶으면 수정하고, 수정이 필요없을 때는 그냥 두는 코드를 짜고 싶었는데 input value를 이용했을 때 수정이 안되는 오류가 있었다. 해결 react에서의 input value는 읽기 전용이라 수정이 안된다고 한다. value 말고 defaultValue를 이용하면 위에서 내가 생각한대로 코드를 짤 수 있다. 출처 : https://7357.tistory.com/50
문제 리액트 주제랑 관련이 전혀 없지만, 리액트 앱을 만들다가 이런 일이 발생했으니 react에 글을 남긴다. 새로운 모듈을 설치해 앱을 만들고 있었는데 코드빌드에서 빌드 중에 자꾸 Module not found 에러가 발생하는 문제가 있었다. 제 컴퓨터에선 됩니다를 외쳐봤자 반영이 안되니... 인터넷을 아무리 뒤져봐도 이를 해결할 수 있는 답변이 없었다. (다른 사람들의 경우, 경로 설정 문제가 대부분이었다. 대문자 소문자를 잘못 썼다거나) 내 로컬을 신나게 뜯어봤지만 전혀 답이 나오지 않아서 코드빌드 설정에 문제가 있을 거라고 생각했고, 그게 맞았다. 해결 phases: preBuild: commands: - npm ci build: commands: - node -v - npm run-script ..
문제 어떤 것을 장바구니에 담았을 때, 담아졌는지 않았는지 알기 어려운 문제가 있었음. 이를 해결하기 위해 alert를 이용해 알림창을 띄웠는데 일일이 확인을 누르기 귀찮은 문제 발생. 이에 따라 일정 시간이 지나면 자동으로 사라지게끔 하는 기능이 필요 해결 setTimeout()과 clearTimeout()을 이용해 알림 메시지를 띄운 후, 사라지게 했다. 아래와 같이 컴포넌트를 하나 만들어준다. (컴포넌트를 만들지 않고 사용하고 싶은 곳에서 하나 만들어 사용해도 될 것 같다. 본인은 여러 곳에서 사용할 수 있을 것 같아서 컴포넌트로 만들었다.) import { useEffect } from "react"; export default function Message ({setMessage, text}) ..
문제 react는 SPA를 만드는 라이브러리로, 그 특성상 페이지 이동 시 스크롤바 위치가 그대로 유지된다. 해결 useLocation, useEffect 훅을 이용해 페이지가 이동될 때마다 스크롤 위치를 초기화 시켜주는 컴포넌트를 만들어 해결할 수 있다. import { useEffect } from "react"; import { useLocation } from "react-router-dom"; export default function ScrollRestoration() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; } 위와 같은 컴포넌트를 만들어준 ..
