개발일지

javascript 모듈 (Module)모듈이란?개발하는 웹의 크기가 커지면서 어느 시점에는 파일을 여러 개로 분리해야 하는, 이때 분리된 파일을 각각 "module"이라고 부릅니다.위처럼 type을 module이라고 지정해 주면 export와 import를 사용하여 다른 모듈을 불러와 작업하는 것을 가능하게 해 줍니다. 모듈의 scope모듈은 자신만의 scope가 있습니다. 그래서 모듈에서 정의한 내부의 변수, 함수는 다른 script에서 접근할 수 없게 됩니다. 그래서 외부로 공개하려면 export를 사용해 내보내어야 하고, 내보낸 모듈을 사용하기 위해서는 import를 통해 가져와서 사용할 수 있습니다. 📍export를 통해 내보내기export const options = {} 📍import를 ..

📌 DOM요소에 접근하여 속성값을 가지고올 수 있는 메서드 정리  getElementByid() - html 태그내의 특정 id값을 가져와 DOM요소에 접근할 수 있습니다.getElementsByClassName() - html 태그내의 특정 class값을 가져와 DOM요소에 접근할 수 있습니다.getElementsByTagName() -태그 name매개변수와 일치하는 모든 하위 요소의 컬렉션을 구축합니다.querySelector() - 괄호 속에 제공한 선택자와 일치하는 문서 내 첫 번째 Element를 반환 일치하는 요소가 없다면 null 반환querySelectorAll() - 객체내에서 지정한 CSS 선택자와 일치하는 모든 요소를 반환합니다.innerHTML - element 안의 HTML이나 ..

오늘은 localStorage 사용법을 정리해 보겠습니다! localStorage 란?localStorage를 사용하면, 브라우저에 key-value값을 Storage에 저장할 수 있습니다.저장된 데이터는 세션간에 공유가 가능해집니다. setItem()  - key, value 추가getItem() - value 읽어 오기removeItem() - item 삭제clear() - 도메인 내의 localStorage 값 삭제length - 전체 item 갯수key() - index로  key값 찾기

오늘 새로 알게 된 점!.addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정하는 메서드입니다! 📌 기본구조langBtn.addEventListener("실행할 이벤트", () => { 코드}); 자주 사용하는 이벤트 종류click – 마우스버튼을 클릭하였을 때 실행된다.mouseover – 마우스를 HTML요소 위에 올리면 실행된다.mouseout – 마우스가 HTML요소 밖으로 벗어날 때 실행된다.resize – 브라우저 창의 크기를 조절할때 실행된다.