💙 들어가며 classList를 이용해서 클래스를 직접 추가하고 제거하는 방법으로 동적인 페이지를 구현해보자. ✏️ 학습내용 정리 #이전시간 복습 자바스크립트로 요청한 데이터를 HTML형태로 꽂아넣을 수 있게 되었다. content.insertAdjacentHTML("beforeend", template); 본질적으로 생각하면 template이라는 변수 안에 텍스트 형식으로 꽂는 것이지만 화면에 출력되는 모든 것은 객체화 되어서 올라가는 것이다. 이전에는 객체를 직접 만들어서 추가할 수 밖에 없었는데 자바스크립트의 기능이 올라가면서 백틱을 이용한 문자열이 가능해졌다. 기억할 것은 데이터를 올리는 형태는 문자열이지만 최종적으로는 객체형태로 올라간다는 것이다. innerHTML은 문자열을 객체화 한다. in..
💙 들어가며 Ajax에 대해서 알아보고 동기로 처리하는 것과 비동기로 처리하는 것의 차이점에 대해서 알아보자. 비동기로 처리할 때 콜백함수의 역할도 살펴보자. ✏️ 학습내용 정리 #스크립트로 문서의 특정 노드 선택하기: querySelector 스크립트로 문서의 특정 노드를 선택할 때 CSS의 선택자(Selector)를 이용한 querySelector를 이용하려고 한다. querySelector는 원래 JQuery에서 지원하던 기능이었는데, HTML 버전이 올라가면서 HTML에서도 지원하게 되었다. 주의해야 할 점은 querySelector안은 일종의 코드블록과 같아서 CSS의 형태대로 써줘야 한다는 것이다. 즉, querySelector 안에 들어가는 것은 CSS다. 💡 JavaScript의 query..
💙 들어가며 ES6에서 ES5의 문제점을 보완한 것들에 대해서 배워보자! ✏️ 학습내용 정리 #ES6에서 크게 달라진 것14: ES6 Module 스크립트 파일을 class 단위로 나눠서 작성할 수 있게 되었다. 그럼 이렇게 나누어서 작성한 스크립트 파일을 어떻게 서로 연동시킬 수 있을까? 기존에는 스크립트가 다른 스크립트를 import하지 못했기 때문에 html에게 도움을 받았어야 했다. 파일들이 html의 도움을 받아서 script 파일을 써야 했기 때문에 html 상에서 script파일을 불러올 때 순서도 중요했고, (html 문서에서 script들을 사용하는 순서에 따라서 쭉 작성하고 끝에 defer를 쓰는 방법으로 html문서를 순서대로 구동하고 난 뒤에 스크립트 파일을 구동하는 식으로 조작했다..
💙 들어가며 ES6에서 ES5의 문제점을 보완한 것들에 대해서 배워보자! ✏️ 학습내용 정리 #ES6에서 크게 달라진 것12: class 기존에 ES5일 때도 객체지향스럽게 구현하려고 노력하였으나 class라는 개념이 없어서 데이터의 은닉성이 보장되지 못했다. class라는 개념이 생기면서 (function을 통해 확장하는 것이 아니고) 별도의 생성자라는 개념이 생겼다! (Exam이라는 이름의 함수를 통해서가 아니라 class로 정의할 수 있게 되었고 constructor라는 것이 별도로 생겼다.) 생성자를 통해 기본값을 설정할 수 있다. 그러나 ES5를 그대로 안은채로 ES6가 나온 것이기 때문에 완전하게 달라진 것이라고는 볼 수 없다. class라는 것을 뜯어보면 사실 틀이 달라졌을 뿐 functio..
💙 들어가며 ES6에서 ES5의 문제점을 보완한 것들에 대해서 배워보자! ✏️ 학습내용 정리 #ES6에서 크게 달라진 것8: 나머지 매개변수(Rest Parameters) 이전에 함수를 정의할 때 알아봤지만, 자바스크립트에서는 파라미터를 받는 매개변수에 대해서 크게 신경쓰지 않아도 된다. 매개변수를 2개로 설정하든 3개로 설정하든, arguments라는 컬렉션으로 받으니까 매개변수의 개수를 초과해도 알아서 arguments에 값이 저장이 된다. 그런데 arguments 컬렉션을 이용할 경우에는 매개변수를 포함해서 인덱스를 설정하기 때문에 인덱스를 신경쓰기가 복잡해질 수 있다. 그래서 설정한 매개변수를 제외하고 인덱스를 카운트하기 위해 나머지 매개변수를 다 커버하는 개념이 등장했다. 바로 나머지 매개변수이..
