반응형 전체 글122 npm package.json NPM NPM은 Node Package Manager로 필요한 모듈을 다운로드할 수 있는, 모듈들이 모여있는 모듈 스토어다. 앞으로 필요한 모듈은 대부분 NPM에서 다운로드해서 사용한다. node 모듈을 사용하는 프로젝트에서 npm이라는 키워드는 하나의 명령어처럼 사용된다. npm start처럼, 프로젝트를 실행시킬 때 npm 키워드를 사용하기도 한다. package.json 프로젝트에 대해 필요한 모듈이 무엇인지 알려주는 역할을 하는 것이 바로 *_package.json *_이다. package.json에는 이 프로그램을 실행시키기 위해 필요한 모듈들이 무엇인지, 프로그램을 실행시키는 방법, 프로그램을 테스트하는 방법 등이 명시되어 있다. 프로그램을 실행시키기 위해 필요한 실제 모듈은 node_modu.. 2020. 10. 25. this call() apply() bind() this 패턴바인딩되는 객체 (브라우저)바인딩되는 객체 (node.js)Globalwindow (strict mode - undefined)module.exportsFunction 호출window (strict mode - undefined)global 화살표함수의 this const foo = () => { return this } foo() === module.exports //true 메서드 안에서 this를 호출하면 global이 바인딩되는 것이 맞지만, 화살표 함수 내에서 this를 호출하면 메서드 내부에서 호출한 것이 아닌 해당 함수가 선언된 위치를 기준으로 this 가 바인딩 되게 된다. (*좋은 설명 있으면 추가할 것.) call() call은 항상 함수를 "실행"한다. 첫 번째 인자가 항.. 2020. 10. 20. shorthand syntax / 객체분해 / rest spread syntax 예시 const name = 'gildong' const age = 19 const human = { name, age, level: 'Junior' } console.log(human) // { name: 'gildong', age: 19, level: 'Junior' } 객체에 변수 명을 key로 변수 값을 value로 할당할 수 있다. 객체분해 cosnt student = {name: 'gildong', major: 'computerScience'} const { name } = student { name } === { name: 'gildong' } //true 객체의 특정 키값만 따로 임의의 객체에 저장할 수 있다. rest / spread syntax 이용 const student = { name:.. 2020. 10. 20. 구조 분해 할당 (Destructing Assignment) 2020. 10. 20. Git 명령어 git checkout 브랜치명 브랜치명으로 이동 git checkout 브랜치명 -b 브랜치명을 생성하고 이동 git commit --no-verify -m 'blabla' 유효성검사 하지 않고 커밋 2020. 10. 19. Ubuntu CLI 명령어 sudo apt-get update sudo apt-get upgrade .deb 파일설치 sudo dpkg -i 패키지.deb 조회 ls 파일 리스트 ls -al 파일 (속성) 리스트 code . 현재 위치를 VS code에서 열기 이동 (수정) cd . 현재 디렉토리(= . )로 이동 cd .. 상위 디렉토리로 이동 cd ~ 홈 디렉토리로 이동 cd / 최상위(루트) 디렉토리로 이동 cd - 이전 위치(경로)로 이동 (= 뒤로가기) pwd 현재 디렉토리 경로 확인 (print working directory) mv 파일명(폴더명) 경로 파일(폴더)을 경로로 이동 mv 파일명(폴더명) 새로운이름 파일(폴더)명 변경 chown woner:group file 파일 소유권 변경 chmod? 생성 touch .. 2020. 10. 19. 버블링(bubbling) vs 캡처링(capturing) eventListener() vs onclick()를 이해하기 위해 간단히 개념만 설명했다. 자세한 설명은 하단 출처 참고. 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 3개의 요소 ( form > div > p )가 있다 form 안에 div 안에 p요소가 있는 형태. 직접 확인 : plnkr.co/plunk/FDfhm3tzwTz3B6Fb 가장 안쪽의 p요소를 클릭하면 다음과 같은 실행과정이 발생한다. 에 할당된onclick핸들러가 동작. 바깥의 에 할당된 핸들러가 동작. 그 바깥의에 할당된 핸들러가 동작. document객체(최상위 .. 2020. 10. 16. addEventListener() vs onclick() 사용법 document.getElementById('trigger').addEventListener('click',()=>{ alert('hello!'); },false); document.getElementById('trigger').onclick = () => { alert('hello!'); } addEventListener()를 사용하는 방법이 모던하다는 이유 1. 여러 개의 메서드를 동시에 등록할 수 있다. do1 함수는 바로 아랫줄에서 do2 함수로 덮어 씌워졌기 때문에 동작하지 않는다. 반면, 한 클릭이 일어났을 때 여러가지 일이 동작하게 하고 싶고, 함수가 분리되어 있다면 addEventListener로 작성하는 것이 .. 2020. 10. 16. Function.prototype.apply() 2020. 10. 16. 이전 1 ··· 6 7 8 9 10 11 12 ··· 14 다음 반응형
