크고 작은 문제들/바보짓 모음 5

[JavaScript] String.prototype.replace - undefined가 삽입되는 문제

문제 문자열로부터 정규표현식에 해당하는 부분을 제거하려 하였으나, undefined가 삽입되는 현상이 발생하였습니다. replace 함수의 두 번째 인자가 생략되었기 때문입니다. // 반복문 내부 코드 // 탐색 대상 letter 정규표현식 생성 const regexp = new RegExp(letter, 'g'); // 발견된 문자열의 개수를 결과에 더하기(옵셔널 체이닝 ?, null 병합 연산자 ?? 사용) result += input.match(regexp)?.length ?? 0; // input으로부터 검사 완료된 문자열을 전부 제거 input = input.replace(regexp); // ddz=z= // dundefinedz= // dundefinedundefined 해결 replace ..

[CSS] 색상에 큰 따옴표 사용 + content 속성에 따옴표 미사용

문제 상황 :root에 css 변수를 등록 var()를 사용하여 버튼의 배경색으로 활용 시도 배경색이 투명하게 표시되는 현상 발생 원인 및 해결 색상 변수에 큰 따옴표 사용 큰 따옴표 사용이 원인이었음에도 불구하고 개발자 도구 상으로는 마치 정상적으로 색상을 지정한 것처럼 색상 아이콘이 표시되었습니다. 큰 따옴표를 제거하니 배경색이 제대로 적용되었습니다. 덧 content 속성에는 따옴표를 붙여주어야 합니다.

[PWA] mainfest.webmanifest를 가져오지 못하는 문제

문제 원인 분명 CRA 초기 구성할 때 index.html에 manifest.json으로 링크되는데 어떤 이유에서인지 스스로 manifest.webmanifest로 바꾸어 프로젝트 초기 설정을 해버렸습니다. 확장자가 잘못되었으니 파일이 정상적으로 불러와질 리가 없습니다. 해결 저의 경우, 처음 프로젝트를 세팅할 때 어떤 글을 보고 확장자를 바꾼지는 모르겠습니다만 일단 프로젝트 public 폴더에 작성된 manifest 파일의 확장자를 확인하여 다시 올바르게 작성합니다. 저의 경우엔 json을 그대로 사용하니 webmanifest 확장자 대신 json 확장자로 변경하였습니다. 이제 잘 됩니다. 아플 땐 무리하지 말고 쉽시다.

테스트 파일 확장자 실수

문제 다른 페이지에 대한 테스트케이스를 추가하고자 기존의 테스트를 복사하여 붙여넣기 하였습니다. eslint에서 불만을 토로하는 것을 확인하고 stash, pop, 브랜치 작업을 하는 과정에서 eslint 설정이 바뀌었나 싶어서 설정 확인 결과 jest 관련된 설정 모두 이상 없음을 확인했습니다. 초기 설정부터 들어있던 jest가 사라졌나 싶었지만 그것도 아닙니다. 그 순간 JavaScript 아이콘이 눈에 들어왔습니다. 아차... 해결 QuestionItemPage.test copy.js → QuestionPage.test.js 로 파일명을 변경하니 말끔히 해결되었습니다.