뭘 배웠지?

var videos = document.getElementsByTagName("video"); for (var i = 0; i < videos.length; i++) { videos[i].addEventListener("pause", function(event) { event.preventDefault(); this.play(); }); }

웹팩이 (조금이라도) 이해됬다면 이제는 모듈 문법(syntax)를 알아볼 차례 단 두 가지 구성요소가 있다. import export 쉽게 사용할 수 있다. export // functionOne.js 파일 const functionOne = () => console.log('FUNCTION ONE!') export { functionOne } import import { functionOne } from './functionOne' functionOne() //this should work as expected! 모듈로 코드를 작성하는 많은 장점이 있는데, 그 중 가장 좋은것은 '코드 재사용' 다른 이점은 factory function 또는 module pattern으로 코드를 감쌀 수 있다는 것 참고..

웹팩(Webpack)은? 간단히 말해 모듈(HTML, CSS, JavaScript, sass, png 등 각각 모듈)을 묶어주는거다. 인터넷은 어렵고, 복잡하지만, 우리는 조금 있으면 되고, 원하는 설정도 간단하다. 이런것 도와주는거다 엄청 강력한 도구다, 꽤 복잡한 config file에서 강한 파워가 나온다. 코드가 많아지면 유용하다고 한다. 시작해보자 설치하면 CLI 및 API를 통해 웹팩과 상호작용 가능 다른 bundlers와 비교 경고: webpack5를 돌리기 위한 Node.js 최소 버전 10.13.0(LTS) 기본 설정 디렉토리를 만들고 npm 실행하고 웹팩을 로컬에 설치 webpack-cli도 설치(커맨드라인에서 웹팩 사용하기 위한 도구) 디렉토리는 이렇게 구성될거다 project web..

npm(node package manager) 방대한 플러그인, 라이브러리, 도구의 플러그인 저장소에 액세스 할 수 있게 도와주는 커맨드 라인 도구 여기서 수많은 개발자들이 공유한다. 공개하는 패키지에는 꼭 package.json 파일이 있어야된다. package.json 파일은 프로젝트가 의존하는 파일을 나열한다 빌드를 복제할 수 있게 해줘서 다른 개발자와 쉽게 공유할 수 있게 한다. package.json 필드 name과 version 필드 필수 name 필드에는 패키지 이름이 들어가고, 하이픈(-), 언더스코어(_), 소문자 사용가능 version 필드는 x.x.x 형태를 따라야 된다. { "name": "my-awesome-package", "version": "1.0.0" } Author 필드 ..

클래스란? 클래스는 특별한 함수(function)다. 오브젝트를 만들어주는 템플릿이다. class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); } } alert(typeof User); //function이 나온다 여기서 class User { ... }이 한일을 알아보자 1. function 이름 User란 놈을 만든다. function의 코드는 constructor 메소드에서 가져온다(constructor 메소드를 안만들어주면 비어있다고 가정된다). 2. class 메소드를 저장해준다, User.prototype 안에 있는 sayHi 처럼 new User 오브젝트가 만들어지고, 안의 메소드를 부르면, 프로토타입 ..

Module Pattern는 자바스크립트에서 가장 흔한 디자인 패턴중 하나 코드를 캡슐화 시키기 쉬운 방법이다. 보통 싱글톤 방식으로 한번만 사용되도록 쓰인다. 모듈 만들기 쉽다, 함수에 괄호를 두르고, 뒤에 괄호를 하나더 써주면된다. annoymous closure 이라고도 부르는듯 하다 (function() { 'use strict'; // Your code here // All function and variables are scoped to this function })(); 모듈 내보내기 그저 변수(myModule)에 집어넣는 일이다. 다음에 부를 수 있도록 var myModule = (function() { 'use strict'; })(); 그다음에 공개 메소드(publicMethod) 만들..

IIFE(immediately invoked function expression) '이삐(iffy)' 라고 읽는다 function delaration: 함수 이름을 주는 '보통' 방법 function myFunction () { } function expression: 변수나 프로퍼티에 함수를 넣어주는 방법 // 변수에 function expression 넣어주기 var myFunction = function () { /* logic here */ }; // 프로퍼티에 function expression 넣어주기 var myObj = { myFunction: function () { /* logic here */ } }; 이런것도 function expression 이라고 부른다 // 괄호안에도 expr..

santa 변수가 true면 '산타는 존재한다'가 콘솔에 출력하고, 아니면 아무것도 출력하지 않는 간단한 if문이 있다. if(santa === true){ console.log("산타는 존재한다") } else { null } 이것을 ternary(삼항연산자?)로 바꾸면 이렇게 된다. 한 줄에 깔끔하게 쫙 santa === true ? console.log("산타는 존재한다") : null; 이 포스트는 더 줄일 수 있는 &&에 대해 적어두려고 시작했다. &&은 모두를 만족시키는 조건문을 만들때 사용하곤 한다. 작동원리를 살펴보면 신기하다. true && false 이처럼 앞에 true가 있으면 바로 &&에 오른쪽에 있는 것을 리턴한다. 이 경우에는 false가 리턴된다. 그래서 false가 나오는것이..

DOM 끝장내기 코스 1번째 & 2번째 - HTML tag, class, id 등 잡아오는 기본 방법 1번째 https://www.youtube.com/watch?v=0ik6X4DJKCc 2번째 https://www.youtube.com/watch?v=mPd2aJXCZ2g&t=415s 3번째 - 이벤트처리 (addEventListener) youtu.be/wK2cBMcDTss 4번째 - 프로젝트, 메모장과 검색기능 만들기 youtu.be/i37KVt_IcXw

자바스크립트 면접시 가장 많이 물어본 20가지 문답 머신러닝과 웹개발 전문가 Mayank에게 감사합니다. 본문 (트위터: https://twitter.com/nlognco/status/1282888619917627393?s=20) ※영어주의※ ->구글번역기 1. What's the difference between undefined and null? "undefined" is the default value of a variable that has not been assigned a specific value and "null" is a value that represents no value. 2. What does the && operator do? The && or Logical AND operato..