원래는 주마다 이슈를 정리하여 올리려 했으나 프로젝트 개발에 힘쓰느라 몰아 올리게됨 노력할예정
삽질 리스트
1. 웹팩 오류
상황 설명 : 어쩌다 그랬는지 심신미약 상태로 개발하던 중이라 정확히 기억나지는 않지만 이런 오류를 만났다.
ERROR in ./node_modules/jws/lib/verify-stream.js 8:13-30
Module not found: Error: Can't resolve 'stream' in 'D:\react_file\Project\temp_porject\node_modules\jws\lib'
> BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.웹팩이 버전업 되면서 지원하지 않는 기능들에 대해서 오류가 났고 변경이 있으니 확인하고 조치하라는 오류 메시지인 듯 하다
일단 버전업 하면 되나 했지만 오류는 여전히 존재했고
npm install webpack@latest
아마 이 이 명령어도 나락으로 가는 도우미 역활을 하지 않았나 싶다
열심히 찾아보니 웹팩 설정에서 polyfill 부분을 만들어주면 해결된다고 하여 설정해주었다.
폴리필(polyfill)은 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다.
- 기능을 지원하지 않는 웹 브라우저에서 원하는 기능을 구현할 수 있으나, 폴리필 플러그인 로드 때문에 시간과 트래픽이 늘어나고, 브라우저별 기능을 추가하는 것 때문에 코드가 매우 길어지고, 성능이 많이 저하된다는 단점이 있다.
다만 나는 잘 몰라서 node_modules 꼭꼭 숨어있는 webpack.config 파일을 직접 찾아 수정 했다는 것이다.
그 이후는 상상에 맡기겠다. 모르면 맞아야지
해결을 위해 init 하고 몇 가지만 수정하니 오류가 사라졌다.
이제는 croco 를 사용해 설정을 만져주고 있다.
삽질과 별개로 오류를 해결하는 방법은 이러했다.
이 글을 믿지마라 해결방법이 아니라 삽질의 결과를 적어두는것이니 참고만 하시길
웹팩 설정 파일에서 따로 대응책 객체(?){ facllback :{} } 에 사용하려면 설치해서 require 해서 쓰고 아니면 false 로 안쓴다고 못박아 두면 되는 듯 하다.
만약 프로젝트에 문제가 뜨면 어련히 오류를 띄워줄 것 같아 다 false 로 설정을 했었다.
resolve: {
fallback:{
"path": false,
"buffer":false,
"util":false,
"stream":false,
"crypto":false,
}
...
}2. "global" 플래그로 정규식에서 test () 사용
상황 설명 : 회원가입시 형식에 맞게 입력받기 위해 정규식으로 검사하는 기능을 만들었는데 마치 토글 버튼마냥 두번째 결과가 이상하게 나왔다 (boolean 값이 2번째마다 반대로 나왔다)
정규식에 전역 플래그가 설정 되어 있으면
test()는 정규식 의lastIndex를 앞 당깁니다. (RegExp.prototype.exec()는lastIndex속성 도 향상시킵니다 .)
이게 무슨소리냐면 정규식에 g 즉 global flag 가 있을 때.test(), .exec() 메서드를 사용하면 검색한 부분의 마지막 인덱스lastIndex를 기억해 다음번에 사용할때 활용한다는 의미인데
쉽게 말하면 한번 정규식을 가지고 검사를 하면 인덱스를 기억하고 다음번에 그 인덱스 이후를 검사한다는 의미이다.
즉 같은 값을 검사해도 다른 값이 나올 수 있다는 것 그래서 객체로 생성해 정규식을 상수로 만들어 사용하려 할 때 global flag 가 있는 정규식이라면 개판이 난다는 의미이다.
const REGEX = {
ID_RULE:/^[a-z0-9_]{4,20}$/g,
EMAIL:/^[\w]([-_\.]?[0-9a-zA-Z])*@[\w]([-_\.]?[0-9a-zA-Z])*[a-zA-Z]{2,3}$/gi,
NAME_RULE: /^[가-힣a-zA-Z]+$/g,
PWD_RULE:/^[a-zA-Z0-9\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"].{8,16}$/,
}나의 경우 정규식을 객체에 모아놓고 상수화 시켜 사용하려 했는데
global flag 가 있다는 있는 정규식이기 떄문에 마찬가지로 위에서 언급한 오류가 같은 문자열을 .test() 두 번 실행한 시점에서 오류가 발생했다.
현재는 g 플래그를 지워서 해결했다 더 나은 방법이 있는지 찾으면 변경할 듯 하다
정규식에 대한 지식이 부족했고 단순히 따로 선언한 내장 객체도 아니고 내가 선언해둔 정규식이 인덱스를 기억한다는 개념도 상상도 못했다.
지금 내가 이해한 부분이 맞는지도 정확히 알 수 가 없다
내 상식을 깨주는 그런 이슈였고 추가적인 공부가 필요해 보인다.
참고 : https://secondmemory.kr/699
3 useSelecter 의 Promise 객체리턴
상황 설명 : useSelecter 로 유저데이터 값을 가져와 콘솔로 찍어보니 난데없이 Promise 객체가 찍히는 기묘한 일을 겪었다.
물론 Pomise 객체를 풀어 사용하면 사용할 수 있고 데이터도 온전했지만 그 이유를 알지 못해 찾다 보니 문제점을 발견했다.
axios 로 데이터를 가져와 dispatch 로 리듀서를 호출 후 데이터를 저장하는 과정에서 axios 요청을 보내는 메서드 앞에 await 키워드를 깜빡했다.
axios 를 통해 원하는 값이 아니라 그래서 Promise 객체 상태로 dispatch 되어 저장되어있던 것
이번 기회에 다시 복습하게 된 듯 하다
axios 요청이 다 끝나지 않은 채 dispatch 되는 이런 흔히 볼 수 있는 비동기 처리 오류(?) 를 쉽게 해결하고자 나타난 것이 Promise 객체임을
4. input 과 state 관한 이슈
###상황 설명 : input:text 에 글을 입력하면 onchange(onChange) 로 state 변경 메서드를 지정하여 input value 를 변경하고 사용하는 방식이 일반적인데 그럴시에 state 가 지속적으로 입력시마다 업데이트되어 리랜더링 되는 부분을 개선하고자 시도했었던 상황이다.
이번 기회에 다른 방식으로 하려다 결국 성공시키지 못했다 (redux 를 활용해 보았으나 이놈도 결국 state 이고 submit 하는 쪽 에서 state 를 선언한 시점에 변경시 리랜더링은 불가피 해보인다)
무슨생각으로 이랬는지 모르겠음
그래서 React 로 만들어진 타 사이트들을 둘러봤으나 input 박스 뿐만 아니라 다른 요소들도 리랜더링 되는 모습을 봤고 깨달았다.
결국 작은 요소의 리랜더링을 줄이려고 코드를 추가하는 것 보다 코드 및 로직을 단순히 구성해 놓는 게 이득임을 깨달았다.
(주관적 의견이고 반박의견 환영)