👉 자신이 만든 모듈로 npm package 배포하는 법을 설명한다. git repository 를 node 로 만들어준 후 clone을 하였습니다. 그 다음 index.js 파일을 만들고 간단하게 sum 함수를 만든뒤 module.exports 를 하였습니다. module.exports 도 만들 수 있고 import 를 해오려면 export 로 만들어줘야 합니다. npm init 에 -y를 붙여주면 package.json 파일을 만들어 줍니다. 그 다음 npm login 을 해준 후 npm publish 를 해주면 배포가 됩니다. access를 설정해주지 않아서 'You muse sign up for private packages' 라고 에러 문구가 나왔습니다. 테스트 용도로 작업한것이기 때문에 acc..

👉 브라우저를 코딩 에디터로 사용하는 방법을 설명한다. 우선 내 컴퓨터에 폴더를 만들어준다. 개발자 모드를 킨 후에 Source 탭으로 들어가서 폴더 드롭하여 추가해준다. '완전한 엑세스를 요청합니다. ' 라는 문구가 보이면 승인 버튼을 눌러줘야 수정을 할 수 있다. 오른쪽에 보면 web 폴더가 추가 되었고 해당 폴더 아래에 test.html 파일을 추가해주었다. 이제 수정이 가능하다. script 태그를 추가해서 JS 테스트를 해보았다. 그리고 수정을 하면 test.html 왼쪽에 * 이 표시가 생긴다. 👉 VS Code 에서도 수정할 수 있지만 Node 보다는 브라우저에서 테스트 하는 것이 더 편하고 Scope 나 Closure, Call Stack 등 확인 할 수 있어서 더 편리하다. 출처: 브라우..

👉 호이스팅 (Hoisting): 끌어 올리다. 게양하다. 호이스팅은 끌어 올린다는 뜻을 갖고 있다. JavaScript 에서 호이스팅을 무엇을 의미할까? 우선 아래 코드를 살펴보자. console.log(score); // 변수 참조 var score; // 변수 선언문 변수 선언문 보다 변수를 참조하는 코드가 앞에 있다. 자바스크립트는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log 가 가장 먼저 실행될 것이다. 참조에러 ReferenceError 가 발생할 것으로 예상했지만, undefined가 출력된다. 그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점 런타임 runtime이 아니라 그 이전 단계에서 먼저 실행되기 때문이다. 변수 선언은 소스코드의 어디에 있..

Array.from() Array.from() 메서드는 유사 배열 객체나 반복 가능한 객체를 얕게 '복사'해 새로운 Array 객체를 만든다. console.log(Array.from('soyoung')); // expected output: Array ["s", "o", "y", "o", "u", "n", "g"] console.log(Array.from([1, 2, 3], x => x + x)); // expected output: Array [2, 4, 6] //배열 형채를 가진 객체(arguments)에서 배열 만들기 function f() { return Array.from(arguments); } f(1, 2, 3); // [1, 3, 3] Array.prototype.reduce() 배열의 ..

getElementById let element = document.getElementById(id); // id passwd 인 element 를 가지고 올 때 let passwd = document.getElementById("passwd"); querySelecter let element = document.querySelecter(selectors); // id passwd 인 element 를 가지고 올 때 let passwd = document.querySelecter("#passwd");

Global Object ex) innerWidth ← Window 안의 innerWidth 를 가져온다. DOM - Document Object Model BOM - Browsers Object Model JavaScript Window Size window.screen 모니터 사이즈 - 브라우저 사이즈가 변경되어도 사이즈를 유지한다. window.outer 브라우저에 있는 url 상단,탭까지의 사이즈 window.inner 웹페이지(스크롤바 포함) documentElement.clientWidth 웹페이지(스크롤바 제외) page x,y (문서의 시작점) client x,y (브라우저 시작점) Window Coordinates scroll_to.addEventListener('click', event..