가끔 인강 영상들을 보다보면 배속기능이 없는 강좌들이 있다. 물론 무조건 학생들이 처음부터 끝까지 다 보라는 마음에 조작 키들을 없애버린 것 이겠지만,, 21세기에 살고 있는 우리들에겐 이런걸 듣고 있을 시간이 없다.. 내가 웹을 공부하고 나서 보니, 결국 웹을 만든 것도 사람이다. 결국 보안을 철저히 하지 않는 이상 헛점이 들어날 수 밖에 없고, 웹을 공부하고 있는 사람으로써 이런건 못참는다..ㅎ 본론으로 돌아가, 우리 학교 웹 사이트를 기준으로 설명을 하겠다. 우선 개발자 도구(일반적으로 F12)를 열어서 그림에 커서가 가리키고 있는 버튼을 눌러준다. 그리고 웹사이트에 커서를 대면 이것저것 뜰텐데, 커서를 영상파일에 가져다 대고 클릭하면 해당 영상의 HTML Element를 가리켜 준다. 위 그림에서..

몬테 카를로(Monte Carlo) 방식은 무작위로 추출된 난수를 이용하여 함수의 값을 계산하는 통계학의 방법이라고 한다. 위 이미지의 코드와 같은 경우에는 다음과 같이 이용되었다. (여기서의 난수라 함은 0~1 사이의 값을 얘기한다.) 1. 난수 값을 r1에 저장한다. 2. r1이 난수일 확률 probability를 계산한다. (probability = r1 으로 둔다.) 3. 또 다른 난수 r2를 저장한다. 4-1. r2가 probability 보다 크다면, 작은 보폭을 선호. 4-2. r2가 probability 보다 작다면, 큰 보폭을 선호. 5. 두가지 경우 중, 원하지 않는 결과라면 1로 돌아가고 원하는 결과면 r1을 return 한다. 그리고 Math.random을 사용하는 과정에서 최소값,..

요새 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..

ES6 Class 문법에 대한 정리에 앞서.. 자바스크립트는 객체 기반 또는 프로토타입 기반(Prototype-based) 언어입니다. 그래서 클래스 기반(Class-based)의 객체지향 언어들과는 달리 프로토타입 체인과 클로저 등을 이용하여 상속과 캡슐화같은 개념들을 만들어 냈습니다. 하지만, ES6(ECMAScript 6)에서 Class문법이 추가되었습니다. 이 문법에 대해서 syntax sugar인가 아닌가에 대해 다양한 의견들이 있습니다. 이에 대해선 스스로 다양한 글을 읽고 판단하시는 것을 추천합니다. 자바스크립트에 Class문법이 추가되었다고 했지만, 사실은 Class로 선언된 객체의 속성을 알아보면 Function이라 나옵니다. (더보기 참고) 더보기 // ES5 function Human..

View ES6 공부를 계속하다가 공부만 너무 하는 것 같아서 각잡고 한 번 만들어 봤다. 작업시간은 하루 5시간 씩 4일 정도 걸린 것 같다. (중간중간 일이 있어서 실제 기간은 일주일 정도 걸렸따..) 지뢰찾기를 만들기 위해선 다양한 생각을 했어야 했다. 1. 난이도 설정 2. 타이머 3. 초기화 버튼 4. 지뢰 배치 5. 숫자가 뜨는 로직 6. 깃발 기능 등등.. 세부적으로 들어가면 더 많지만 이러한 기능을 구현하면서 잘못된 지식들을 조금씩 파악하게 되었다. 그리고 아직 공부를 안해서 그런거긴 하지만.. 객체형과 함수형 프로그래밍을 한 번 공부해 봐아겠다. 말 만들었을때는 함수가 객체 아닌가? 라고 생각되어서 무슨차인지 잘 모르겠다. Link Minesweeper JS MINESWEEPER EASY..

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를 이용..

디스트럭쳐링(Destructuring) 이란? 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것입니다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용합니다. 배열 디스트럭쳐링 (Array Destructuring) // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; // ES6 // 배열의 인덱스를 기준으로 값이 저장됩니다. const arr = [1, 2, 3]; const [one, two, three] = arr; 객체 디스트럭쳐링 (Object Destructuring) // ES5 var obj = { firs..

View 프론트엔드 개발자을 위한 자바스크립트 책을 11장까지 본 후 연습 삼아 만들어본 작품이다. 노드 삽입과 미디어 쿼리 변화에 집중해서 만들었다. Grid의 내부 구조를 HTML에서 작성하지 않고 자바스크립트를 통해 삽입하려고 시도했다. 창 크기가 변함에 따라 타일 하나하나에 접근해 내부의 SVG를 제거하고 삽입하는 코드를 짜기 위해 고심했는데 matchMedia라는 매서드가 있다는 것을 알게 되곤 깜짝 놀랐다. DOM 조작을 공부하면서 예전엔 알지 못했던 다양한 메소드들을 알게 된 것 같다. 아직 DOM에 대해서 공부할게 더 남았는데 후딱 끝내야 겠다. +여담 타일의 모양은 사실 우리집 화장실 타일모양이다..ㅋㅋ 어릴적 부터 봐왔는데 약간 매직아이 효과가 있는 것 같다. 타일 간의 간격을 준 이유..