classList는 요소의 클래스를 조작하는 메소드를 제공하는 속성입니다.
요소의 클래스를 조작하는 메소드는 다음과 같습니다.
add(className): 지정한 클래스 이름을 요소의 클래스 목록에 추가합니다.
remove(className): 지정한 클래스 이름을 요소의 클래스 목록에서 제거합니다.
toggle(className): 지정한 클래스 이름이 요소의 클래스 목록에 있는 경우 제거하고 없는 경우 추가합니다.
contains(className): 지정한 클래스 이름이 요소의 클래스 목록에 있는지 여부를 반환합니다.
classList 속성을 사용하면 클래스 이름을 직접 문자열로 조작하는 것보다 훨씬 편리하게 클래스를 추가, 제거, 토글할 수 있습니다.
element.classList.add('foo') 코드를 사용하면 element 요소의 클래스 목록에 foo 클래스를 추가할 수 있습니다. element.classList.remove('foo') 코드를 사용하면 element 요소의 클래스 목록에서 foo 클래스를 제거할 수 있습니다. element.classList.toggle('foo') 코드를 사용하면 element 요소의 클래스 목록에 foo 클래스가 있으면 제거하고, 없으면 추가할 수 있습니다.
element.classList.contains('foo') 코드를 사용하면 element 요소의 클래스 목록에 foo 클래스가 있는지 여부를 확인할 수 있습니다.
JSON.stringify()는 자바스크립트 객체를 문자열로 변환하는 메소드입니다.
JSON.stringify() 메소드는 다음과 같은 인자를 받습니다.
value : 변환할 자바스크립트 객체입니다.
replacer (선택사항) : 객체의 속성을 변환하는 함수입니다.
space (선택사항) : 반환되는 문자열의 들여쓰기를 설정합니다.
JSON.stringify() 메소드는 자바스크립트 객체를 JSON 형식의 문자열로 변환합니다.
JSON 형식은 자바스크립트 객체와 유사하지만, 문자열은 큰따옴표("")로 감싸져 있으며, 모든 속성 이름과 문자열 값은 큰따옴표로 감싸져 있습니다.
const personJSON = JSON.stringify(person);
console.log(personJSON); // '{"name":"John","age":30,"city":"New York"}'
일반적으로, 변수 이름 앞에 '$' 기호를 붙이는 것은 변수가 DOM 요소를 나타내는 것을 나타내기 위한 규칙입니다.
이 규칙은 변수가 DOM 요소를 나타내는지 쉽게 구분할 수 있도록 도와주며, 코드의 가독성을 높이는 데 도움을 줍니다.
즉, 변수 이름 앞에 '$' 기호를 붙이는 것은 변수가 DOM 요소를 참조한다는 것을 명시적으로 나타내는 데 사용됩니다.
이 규칙은 일반적으로 JavaScript 코드에서 사용되며, 다른 언어에서는 사용되지 않을 수 있습니다.
그러나 '$' 기호를 붙이는 것은 단순히 규칙이며, 필수 사항은 아닙니다.
변수 이름을 지을 때 '$' 기호를 붙이지 않아도 문제가 되지 않습니다.
따라서 개인적인 취향이나 코드 작성 규칙에 따라서 선택하면 됩니다.
