반응형 프로젝트/코드스테이츠 - 4주프로젝트28 UseEffect를 이용한 무한루프방지(sideEffect로부터 보호) props로 전달받은 변수를 useState를 이용하여 상태변경을 할 때 무한루프가 걸렸다. 처음에는 props로 전달받은 변수의 렌더링과 다른값들의 렌더링 순서가 꼬이면서 뒤엉켜 발생하는 무한루프라고 생각했다.(얼추 맞는말이지만 엄밀히 따지면 뭔가 명확한 설명은 아님) 8일이 지나서야 원인을 알아냈다. 바로 sideEffect!! 위 코드의 setText(comment.text)가 다른 요소들에게도 영향을 받으면서 무한루프가 일어난 것이다. 그럼 setText(comment.text)를 어떻게 sideEffect로 부터 보호할 수 있을까?? 위와 같이 useEffect안에 넣어주는 것이다. useEffect(()=>{원하는기능},[]) 첫번째 인자 : 실행하려는 기능이 담긴 콜백함수, 두번째 인자 : .. 2021. 12. 13. 리프레시토큰 없이는 쿠키로 로그인상태결정을 못한다(보안포기하면 가능) 배포전에는 엑세스토큰을 쿠키에넣고 매번 쿠키를 검사하여 로그인상태를 결정했다. 그런데 쿠키 보안설정을 한 후 배포를 하고나서 이것저것 눌러보는데 새로고침할때마다 로긴상태가 초기화 되는 것이다! 면밀히 오랫동안 구글링을 하여 알아낸것은, 쿠키에 httpOnly:true를 설정했을때는 클라이언트에서 쿠키를 절.대 다룰 수 없다는 것이다. 때문에 보안은 강화되는 한편, 클라이언트에서 쿠키를 검사하여 로긴상태를 결정할 수 없게된다. 때문에 리프레시토큰을 가지고 새로고침을 할때마다 엑세스토큰을 만들고, 그 액세스토큰으로 로긴상태를 결정해야 한다. 즉, 리프레시토큰을 만들지 않을꺼면 애초에 쿠키에 토큰을 저장하는게 쓸모가 없다. httpOnly:true를 설정하지 않으면 자바스크립트에서 쿠키를 다룰 수 있지만, 자.. 2021. 12. 11. 경고 : setTimeout으로 인한 메모리누수 => 페이지 unmount될때 setTimeout 꺼주기 아래의 NextBtn 함수가 5초마다 실행되는데, 페이지를 옮긴후에도 setTimeout이 실행되어 메모리 누수가 발생한다는 내용이다. 그럼 페이지를 옮겼을때 setTimeout을 꺼주면 된다. 나의 경우에서는 다음과 같이했다. return () => { mounted = false; }; 이 부분은 오늘 처음보는 형식인데, unmount될 때 실행되는 함수인것같다. => 아닌걸로 판명, 공식문서에 따르면 모든리렌더링시마다 실행된다.(의존성배열넣으면 의존성배열이 변할때마다) https://ko.reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update 참고자료 : https://norwayy.tistory.com/370?ca.. 2021. 12. 9. URL.createObjectURL()은 formData를 url로 바꿔준단걸 몰라서 겪은 에러 클라이언트에러 : 타입에러 사진업로드 기능을 이용하다가 다음과 같은 에러를 만났다. URL.createObjectURL 은 formData를 url로 바꿔주는 메소드이다.(오늘알게되었다. 이 에러덕분에 !) 때문에 저 imgURL에느 반드시 formData형식의 데이터가 할당되어야 한다. formData일때는 type이 object이고 url일때는 type이 string이다. type에 따라 분기해주었다. 그리고 추가할점으로 이 코드에서는 메모리누수 warning이 뜨지 않았는데, 아래와 같이 꼭 메모리누수 방지하는 코드를 써주어야 한단다. mdn에 따르면 URL.createObjectURL()은 잠재적인 메모리누수 가능성을 내포하고 있다고 한다. 때문에 URL.revokeObjectURL() 를 이용하.. 2021. 12. 9. 이전 1 2 3 4 5 6 7 다음 반응형
