만약 영상에 배속기능이 없다면? (ex. 학교 강좌)
·
Programming/Javascript
가끔 인강 영상들을 보다보면 배속기능이 없는 강좌들이 있다. 물론 무조건 학생들이 처음부터 끝까지 다 보라는 마음에 조작 키들을 없애버린 것 이겠지만,, 21세기에 살고 있는 우리들에겐 이런걸 듣고 있을 시간이 없다.. 내가 웹을 공부하고 나서 보니, 결국 웹을 만든 것도 사람이다. 결국 보안을 철저히 하지 않는 이상 헛점이 들어날 수 밖에 없고, 웹을 공부하고 있는 사람으로써 이런건 못참는다..ㅎ 본론으로 돌아가, 우리 학교 웹 사이트를 기준으로 설명을 하겠다. 우선 개발자 도구(일반적으로 F12)를 열어서 그림에 커서가 가리키고 있는 버튼을 눌러준다. 그리고 웹사이트에 커서를 대면 이것저것 뜰텐데, 커서를 영상파일에 가져다 대고 클릭하면 해당 영상의 HTML Element를 가리켜 준다. 위 그림에서..
Javscript의 Math.random과 정규분포에 대해
·
Programming/Javascript
요새 Nature of Code 라는 책을 간간히 보고 있는 중인데, Javascript의 Math.random 이라는 함수가 단순히 난수를 생성하는 지 또는 정규분포를 나타내는지 궁금하여 알아보게 되었다. 수학적 지식이 뛰어나지는 못해 작성한 것이 정확하진 않을 수 있습니다. 참고만 해주세요... 오류가 있다면 지적 부탁드립니다. ECMA 공식 문서를 참고해보면, Math.random에 대해 다음과 같이 적혀있다. US: Returns a Number value with positive sign, greater than or equal to +0𝔽 but strictly less than 1𝔽, chosen randomly or pseudo randomly with approximately unifor..
OverRiding(오버라이딩)과 OverLoading(오버로딩) 간단 정리
·
Programming/Javascript
OverRiding(오버라이딩) 부모 Class로 부터 받은 메서드와 같은 이름의 내용이 다른 매서드를 재정의해 덮어 씌우는 방식. [경우] 부모 Class의 기능을 사용하지 않고 자식 Class에서 구현한 기능을 사용하고 싶은 경우. 부모 Class의 기능을 자식 Class에서 확장하고 싶은 경우. [조건] 매서드의 이름이 같아야 한다. 매서드가 받는 매개변수(parameter)가 같아야 한다. 매서드의 반환 타입이 같아야 한다. class greet { constructor() {}; hello() { return "안녕하세요"; } bye() { return "ㅃ2ㅃ2"; } } class greet_new extends greet{ hello() { return "ㅎㅇㅎㅇ"; } } const f..
간단하게 훑어보는 함수형 프로그래밍 #1
·
Programming/Javascript
시작하기에 앞서.. 함수형 프로그래밍을 배우면서 프로그래밍을 새로 배운다고 생각해보자. 올바른 관점을 가진다면 올바른 생각을 하게 될 것이고, 개념이 어려워도 학습을 관두지 않을 것이다. 서두르지 말고 천천히 글을 보고, 코드를 이해하며, 사고를 정리하자. 가장 중요한 건 본인이 이해해야 한다는 것이다. 순수 함수 순수 함수는 굉장히 단순한, 그저 매개변수에 따라 계산이 이루어질뿐인 함수를 말한다. 달리 말하자면, 외부 상태를 변경 시키지 않고 동일한 매개변수가 주어졌을 때, 항상 같은 값을 리턴하는 함수를 의미한다. 이해를 위해 코드를 살펴보자. 1. let z = 10; function add(x, y) { return x + y; } console.log(add(5,10)); // 15 consol..
ES6 Class
·
Programming/Javascript
ES6 Class 문법에 대한 정리에 앞서.. 자바스크립트는 객체 기반 또는 프로토타입 기반(Prototype-based) 언어입니다. 그래서 클래스 기반(Class-based)의 객체지향 언어들과는 달리 프로토타입 체인과 클로저 등을 이용하여 상속과 캡슐화같은 개념들을 만들어 냈습니다. 하지만, ES6(ECMAScript 6)에서 Class문법이 추가되었습니다. 이 문법에 대해서 syntax sugar인가 아닌가에 대해 다양한 의견들이 있습니다. 이에 대해선 스스로 다양한 글을 읽고 판단하시는 것을 추천합니다. 자바스크립트에 Class문법이 추가되었다고 했지만, 사실은 Class로 선언된 객체의 속성을 알아보면 Function이라 나옵니다. (더보기 참고) 더보기 // ES5 function Human..
한 줄짜리 if 문, for 문 그리고 함수
·
Programming/Javascript
조건문을 작성할 때마다 한 줄로 작성할 수 있을 것 같으면 중괄호를 표시할지 혹은 삼항 연산자를 사용할지 고민하곤 한다. 그래서 이에 대해 커뮤니티에서 얻은 답변 내용과 내 생각을 적어두려고 한다. 결론부터 얘기를 하자면, 정해진 규칙은 없으며 자신의 코드 스타일에 따라서 작성하면 된다고 한다. 하지만 작성 방법에 따라서 오류나 문제가 있을 수는 있다는 것을 기억하자. 스타일이 갈리는 이유를 꼽자면 주로 다음과 같았다. 1. 코드의 간결성 ("나는 짧은 코드가 좋아!") 2. 안정성 ("나중에 코드가 추가되거나 했을 때 오류 생기면 어캄?") 3. 가독성 ("보기 편한 게 가장 좋더라") 솔직히 3가지 다 포기하기 어려운 조건이긴 하다. 하지만 개인적인 생각으로는 2번이 가장 중요하다고 본다. 내가 짠 ..
객체 리터럴 사용 시, 값이 undifined라고 뜬다면..
·
Programming/Javascript
우선, 객체 리터럴 방식은 다음과 같이 쓸 수 있습니다. let human = { name: "kim", age: 20, call: "010-1111-1234", weight: "60kg" } 그리고 객체 리터럴의 속성에 접근하기 위해 다음과 같이 작성할 수 있습니다. console.log(human.name); // 점 표기법 console.log(human["name"]); // 각괄호 표기법 그런데 만약 객체 리터럴 값이 undifined가 떳다면, 다음과 같은 패턴으로 코드를 작성했을 가능성이 있습니다. let food = { ramen: "ramen!", kimbab: "kimbab!", kimchi: "kimchi!" } let foodname = "remen"; console.log(food..
ES6 Set과 Destructuring 을 이용한 로또 번호 생성기
·
Programming/Javascript
const SETTING = { name: "LUCKY LOTTO!", count: 6, maxNumber: 46, }; function getRandomNumber() { const lotto = new Set(); // 파라미터에서 디스트럭쳐링 할 수도 있음. const { count, maxNumber } = SETTING; while (lotto.size < count) { // 0~46이 아니라 실제 로또처럼 1~45가 나오게 끔 함. lotto.add(Math.floor(Math.random() * (maxNumber - 1)) + 1); } console.log(lotto); } getRandomNumber(); lotto.has()를 써서 중복검사 처리를 할려다가 lotto.size를 이용..