공부중... 공부중...

react

• [react] The result of getSnapshot should be cached to avoid an infinite loop at VideoLayout 에러

  react/react 에러 2023. 1. 12. 09:35

  The result of getSnapshot should be cached to avoid an infinite loop at VideoLayout 리액트로 프론트 작업을 어느정도 완료한 시점에서 기능 테스트를 해보고있는데 아주 가끔 아무런 반응이 없이 하얀 화면만 나타났습니다. 개발자도구에서 로그를 확인해보니 위와 같은 에러가 있네요. 일시적인건가 싶어서 화면을 여러번 refresh 해보니까 에러가 비정기적으로 나타났습니다. 뭔가 문제가 있구나 싶어서 정보를 찾아보니 useffect 에서 사용한 내용이 문제였었습니다. 비디오 재생 기능을 넣었는데 랜덤 재생을 추가하기 위해 useEffect 에 기능 넣고 뒤에 조건으로 내용을 넣었던것이 위와 같은 에러를 만들어냈네요. useEffect(()=>{ if..

  Read More
• [react] 모바일로 웹페이지 접근시 key event 동작 안될 때

  react/react 공부 2022. 11. 25. 09:56

  react 로 만든 웹 페이지를 안드로이드 기기로 접속하여 로그인 비밀번호를 입력하고 이동(엔터키)버튼을 눌렀으나 아무런 동작을 하지 않았습니다. 분명히 pc 와 아이폰에서는 잘 되는것을 확인했었는데 안드로이드만 안되네요. const handleKeyDown = (event) => { const key = event.code; switch(key){ case 'Enter': PasswordChk(); break; default: alert('입력 값 : ' + key); break; } } 다른 사람들이 쓴 글을 보니까 keyup과 keydown 이벤트가 안먹는다는 글이 보여서 확인해봤는데 동작이 잘 되긴했습니다. 그럼 해결방안은 뭐지 더 찾아보았습니다. https://developer.mozilla.o..

  Read More
• [react] onKeyPress deprecated

  react/react 에러 2022. 11. 23. 16:23

  input 태그 입력시 버튼 이외에 키보드 엔터키로도 입력할 수 있도록 하기 위해 onKeyPress 를 사용하려고 하였으나 vscode 에서 가운데 줄이 쫙 그어져있었습니다. 왜 이렇게 나오나 찾아보니deprecated 되었네요. https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event Element: keypress event - Web APIs | MDN The keypress event is fired when a key that produces a character value is pressed down. developer.mozilla.org mozilla.org 에서는 키보드 입력 확인 방법을 기존의 onKeyPress..

  Read More