🍏 onRemove 충돌 대처하기
상황
localStorage에 저장된 값이 만약 오염되었을때 (막 바뀌었을때)
가져온 TodoList를 오염된 부분을 제외한 부분들을 처리하는 것에서 오류가 발생한다.
오류의 원인
- 내부값 손상상태에서 새로고침으로 main.js에서 App Component 생성,
- App Component 내부 const todoList = new TodoList() 를 만나게됨.
- todoList에 값이 할당되기전 TodoList()가 호출됨
- 내부 오류값 발견으로 onRemove 호출
- onRemove 함수내부에서 App Component의 App.setState 호출
- App.setState에서 todoList.setState() 호출 시도
- todoList 값이 할당되기전이므로 todoList 참조 에러 발생
main
⬇
App - todoList = new TodoList({ ... })
⬇
TodoList - onRemove 실행
⬇
App - App.setState 호출 + todoList.setState() 호출
⬇
todoList는 아직 할당 전인데 todoList.setState를 호출하여 오류
해결방법
setTimeout을 이용해 onRemove를 todoList를 할당 후 진행하도록 하여
할당전 참조 에러를 막는다.
setTimeout(() => onRemove(idx), 0);
🍏 Validation 검사 ( 유효성 검사 )
1. 생성자 함수 체크
if (!(this instanceof App)) {
throw Error("App was declared without 'new'!");
}2. 배열 체크
this.state = Array.isArray(initialState) ? initialState : [];3. 매개 변수 처리
function sum(a,b){
return a+b
}
sum(1,2) //3
sum(1,undefined) //NaNundefined가 나오면 제대로 된 값이 나오지 못한다.
function sum(a=10,b=20){
return a+b
}
console.log(sum(1)) //21
console.log(sum(1,undefined)) //21
console.log(sum(1,null)) //1
console.log(sum(1,false)) //1
console.log(sum(1,[])) //1
console.log(sum(1,{})) //1[object Object]
대상이 존재하지않을 경우 해당 부분을 =의 대상으로 처리를 할 수 있다.
🍏 NPX란?
npx v5.2.0 버전부터 제공하는 명령어
특징
1회성 실행 도구
npm(Package Manager) 관리적 측면을 말한다면, npx(Package Runner)는 실행이란 측면이 강합니다. 그렇기 때문에 실행 후에 아주 깔끔하게 스스로 제거
주의할 점
한번씩 실행하면서 오류안뜨는데 빨간 에러가 있다면
url문제일 수 있다.
<script src="./src/main.js" type="module"></script>이
<script src="/src/main.js" type="module"></script>가 되거나
이런 문제다
npx serve -s의 s의 역할
웹서버 설정으로 404 발생시 루트에 있는 index.html을 부르게 하도록 하는 설정 => SPA에서 필요
🍏 1. 절대경로
어떠한 웹페이지나 파일이 가지고 있는 고유한 경로를 말한다.
예를 들어 http://www.google.com, C:\users\document\untitled.jpg 등을 모두 절대 경로라고한다.
🍏 2. 상대경로
파일이 위치한 곳을 기준으로 경로를 파악한다.
/ : 루트
./ : 현재 위치
../ : 현재 위치의 상단 폴더
예를 들어, index.php가 C:\index\a에 위치한다면, 다음은 표현법이다.
/ == C:\ ; 가장 최상의 디렉토리다.
./ == \a ; 현재 디렉토리를 의미한다.
../ == \index\ ; 파일 있는 곳의 상위 디렉토리다.
../../ == C\ ; 상위 디렉토리로 두 번 이동한다.
npx -serve -s 를 사용하면?
localhost:5000이 index.html의 역할을 하므로 그때의 src는
./src이면 현재경로의 src이므로 C:\Desktop\...이런쪽에서 경로에서 찾는것이니 가능은 할 수도 있겠지만 실패할 수 도있다.
이때는 /src를 입력해서 루트인 localhost:5000을 기준으로 찾은 index.html에서 부터 해당 루트에서 src부분을 찾아 나서는 방법을 시도해야한다.
🍏 오늘의 느낀점
아침부터 겨우 2주차 과제 피드백 답변은 했다.
3주차 과제 피드백 3명 모두 완료했다.
하면서 이벤트 위임에서 이벤트가 스택마냥 쌓여서 당황하고 시간을 많이썼다.
onRemove 관련하여 문제가 발생하는 것과 해결하는 것이 인상깊었다.
값을 할당 전에 해당 값을 사용하는 오류가 발생 할 수도 있다는 것을 생각하게 되었다
🍏 innerHTML과 백틱 사용
$postPage.innerHTML = `
<ul>
${this.state.map((document) => `<li>${document.title}</li>`).join("")}
</ul>
`;this.state.map을 위해 전체에 백틱을 쓰고
<li>의 처리와 내부의 document.title을 처리하기 위해 안에 백틱을 한번더쓴다.
해당 <li> 세트를 join으로 묶어서 처리한다.
🍏 출처
