small point⛔

small point
사소한 주의점

 

1. script 링크에 폴더명 미기제

폴더 단위로 파일을 나눈 후, 제대로 <script> 링크를 걸지 않으면 작동하지 않는다. 
'"폴더명"/'을 꼭 파일명 앞에 붙이자.

 

2. String 만 입력되는 경우

padStart() 와 같이, argument로 string만 받아들이는 경우도 있다. 
그럴 때는 String() 로 감싸주면 string로 인식된다.

 

3. Backtick ' 은 무엇인가?

backtick의 위치. esc 밑이라고 생각하면 쉽다.

`` 은 위와 같이 쓰이며, 큰 따옴표(")없이도 띄어쓰기를 읽을 수 있으며, 변수를 다룰 시에는 ${}를 사용하여 다룬다. 

이런 식으로 깔끔하게 활용되기도 한다.

 

4. querySelector 활용 시 경로가 잘못된 경우.

querySelector 사용시 그림의 첫번째 줄처럼, 이미 만들어 놓은 const 요소의 경로를 입력 후 사용하거나,
두번째 줄처럼 #을 이용하여 document에서 해당 요소를 찾고 그 안의 경로를 다시 입력해주는 경우가 있다.

하지만, 단순히 바꾸는 것에만 집중하다가는 위 그림처럼 잘못된 경로를 입력할 수 가 있다. 

const toDoInput = toDoForm.querySelector("input");
의 뜻은 toDoForm 안의 input을 지칭하겠다는 것이고,
const toDoInput2 = document.querySelector("#toDoform input");
의 뜻은 document안의 toDoForm 안의 input을 지칭 하겠다는 것이다. 

 

하지만 애초에 toDoForm은 document의 "todo-form"을 데려온 것이므로,
const toDoInput2의 경우처럼, js에서 지칭된 toDoForm을 document에서 찾게 되므로 잘못된 경로가 된다.

 

제대로된 경로로 바꿔주자면 위의 그림과 같이 된다. 
document내에서의 우리가 지정하길 원하는 "input"의 경로를 앞에 넣어주면 된다. 

 

 

5. .parse 활용 시 오류가 나는 경우

위의 그림과 같이 Uncaught SyntaxError: Unexpected token ' in JSON at position 라고 뜨는 경우가 있다. 

JSON의 Syntax 는 문자열이 기본이다. 
그래서 .parse의 Syntax도  JSON.parse(text[,reviver])  의 형태를 띈다.
즉, 위의 오류는 JSON을 사용하면서 문자열이 아닌 값을 줘서 발생한다.그래서 문자열을 값으로 주면 해결.

혹은 문자열로 만들어주는 JSON.stringify() 을 사용하여, 문자열로 만들어 주고, 그 대상을 .parse 하면 제대로 작동한다.

 

 

6. .filter 활용 시 array 가 안 변하는 경우

위의 그림과 같이 .filter을 하여도 해당 array 자체가 바뀌진 않는다. 
이를 모르고 계속 활용하면 후에 filter가 안먹히는 문제가 발생한다.

위의 경우와 같이 array.filter의 값을 받는 것(ex: newArr)을 만들어두고 활용하자.

 

7. 인식이 안된다면, number 인지 string 인지 확인하기

간혹 분명히 맞게 연결 시킨 것 같은데 안되는 경우가 있다. 
그런 경우, 하나는 string 으로 하나는 number로 되어있는 경우가 있다. 

잘 안되면 다면 console.log에 typeof 를 사용하여 어떤 형태인지 알아온 후, 맞춰 주도록하자. 
*위의 그림 같은 경우는, Aitem.id가 string여서 인식이 안된 경우다. 
그래서 parseInt로 문자열을 숫자로 바꿔주고 있다. 
( parseInt 는 문자열을 숫자로 바꿔준다.)