React, Vue 같은 라이브러리나 프레임워크들을 쓰는 목적은 여러가지가 있겠지만 하나의 페이지에서 데이터를 동적으로 변경하기 위함(SPA)도 있을 것 이다. Vue에 대해 공부하던 중 Vue는 일반 객체를 제외한 반응형 객체들은 변경사항을 추적하기 위해 Proxy 객체로 변환한다는 사실을 알게 되었고 관련된 개념이 모자라 간단히 정리해보려고 한다.반응성 (Reactivity)Vue 공식 문서에선 반응성(Reactivity)에 대해, "변경"에 대한 제어를 선언적으로 수행하는 프로그래밍 패러다임이라고 나와 있다. 간단히 말해 내부에서 변경을 어떤식으로 이루어지게 하는지보다 해당 방식을 통해 변경을 이뤄지게 하겠다에 대해 중점이 맞춰진 방식이란 말이다. (여기서 선언형 프로그래밍이 이해가 되지 않는다면..

가끔 인강 영상들을 보다보면 배속기능이 없는 강좌들이 있다. 물론 무조건 학생들이 처음부터 끝까지 다 보라는 마음에 조작 키들을 없애버린 것 이겠지만,, 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..