104%

사람은 1초에 60개의 프레임을 볼 수 있다고 한다. 그 이상의 프레임을 더 찍어내더라도 사람이 느끼기엔 거의 차이가 없다는 말이다. 그래서 자바스크립트로 애니메이션을 구현할때도 1초에 60프레임정도를 찍어내면 된다. 그 말은, 1프레임을 찍어내는데 16.6ms(1000ms / 60frame)를 넘겨서는 안된다는 말이다. 프레임이란 그냥 한장의 사진이라고 생각하면 된다. 동영상도 사실 여러장의 사진이 빠르게 움직여서 움직이는것처럼 보이는것일 뿐이다. 16.6ms마다 프레임을 찍어내기 위해 첫번째로 사용할 수 있는 방법은 setInterval이다. setInterval(function() { // animiate something }, 1000/60); 또 다른 방법은 requestAnimationFram..

ES5 까지의 자바스크립트의 원시 타입은 number, string, boolean, undefined, null, Object 뿐 이었습니다. 하지만 ES6에서 새로운 Symbol 타입이 소개되었습니다. 이 Symbol타입은 고유한 값을 만들어내기 위해 사용됩니다. 생성된 심볼을 변수에 담아놓지 않으면 접근이 불가능합니다. 또한, 객체의 key값으로 사용될 경우 private 멤버 변수 처럼 동작합니다. 자세한건 아래 내용을 살펴봅시다. symbol의 특징 열거대상에서 제외 심볼을 객체의 키로 사용하게 되면 for .. in 문으로 순회가 불가능합니다. obj2에 있는 2개의 심볼은 콘솔에 찍히지 않았습니다. 왜그렇냐면, 생성된 심볼을 변수에 담아 놓아야만 나중에 그 변수를 통해서 심볼에 접근이 가능해..

https://www.notion.so/simsimjae/0f630712f62543b9803489d5f07be7b0 아래 글들은 검색엔진 노출을 위한 글입니다. 노션에서 확인하시면 이미지와 함께 정리된 글을 보실수 있습니다. 궁금하신점은 블로그 댓글이나 노션 코멘트를 이용해주세요(@comment) 제가 직접 만든 프로젝트입니다. http://pickvs.com : 닥전닥후 수학에서의 참조 투명성 x = 2 + (3 * 4) //이 수식을 다음과 같이 변경해도 결과는 똑같다. x = 2 + 12 3 * 4 라는 식이 있고 그 식의 결과인 12가 있다. 식을 그 식의 결과로 모두 치환해도 문제가 없기 떄문에(3 * 4)의 수식은 참조에 투명하다고 할 수 있다. 프로그래밍에서의 참조 투명성 int add(in..

https://www.notion.so/simsimjae/20-d626d399dfb8464783565dbbc43c34b3 아래 글들은 검색엔진 노출을 위한 글입니다. 노션에서 확인하시면 이미지와 함께 정리된 글을 보실수 있습니다. 궁금하신점은 블로그 댓글이나 노션 코멘트를 이용해주세요(@comment) 제가 직접 만든 프로젝트입니다. http://pickvs.com : 닥전닥후 순수 함수의 조건 사이드 이펙트를 만들지 않아야 함. → 함수 외부의 상태를 변경해선 안된다. 항상 같은 인풋에 같은 결과를 내야함. → 상황에 따라 결과가 달라지면 안된다. 왜 순수함수를 사용해야 하는가? 1. 가독성 사이드 이펙트는 코드를 읽기 힘들게 만든다. 동일한 인풋임에도 불구하고 상황에 따라 결과가 달라질 수 있기 때문..

https://www.notion.so/simsimjae/14-2-vs-85e2889263ae4c2baa482e18971fb963 아래 글들은 검색엔진 노출을 위한 글입니다. 노션에서 확인하시면 이미지와 함께 정리된 글을 보실수 있습니다. 궁금하신점은 블로그 댓글이나 노션 코멘트를 이용해주세요(@comment) 제가 직접 만든 프로젝트입니다. http://pickvs.com : 닥전닥후 클래스 class TodoModel { constructor(){ //멤버 변수 2개 정의(public) this.todos = []; this.lastChange = null; } //메소드 3개 정의 (public) addToPrivateList(){} add() {} reload(){} } 팩토리 패턴 functio..

https://www.notion.so/simsimjae/14-a118180e1c224db0ad73725f83b5bdbb 아래 글들은 검색엔진 노출을 위한 글입니다. 노션에서 확인하시면 이미지와 함께 정리된 글을 보실수 있습니다. 궁금하신점은 블로그 댓글이나 노션 코멘트를 이용해주세요(@comment) 제가 직접 만든 프로젝트입니다. http://pickvs.com : 닥전닥후 도입부 ES6이전까지 자바스크립트에는 Class라는 키워드가 없었다. 따라서, 객체지향 디자인 패턴을 따라하기 위해서 각자 개발에서 사용하곤 했다. 하지만 ES6에 드디어 도입이 되어서 다른 언어에서 유입되는 개발자들이 좀 더 편하게 개발할 수 있게 되었다. Class라는 키워드는 어떤 추가 기능을 제공하는게 아니라 원래 있었던 ..

https://www.notion.so/simsimjae/13-DOM-27569f529fe74c49b0353277ca0476f0 아래 글들은 검색엔진 노출을 위한 글입니다. 노션에서 확인하시면 이미지와 함께 정리된 글을 보실수 있습니다. 궁금하신점은 블로그 댓글이나 노션 코멘트를 이용해주세요(@comment) 제가 직접 만든 프로젝트입니다. http://pickvs.com : 닥전닥후 돔(DOM) 이란 무엇인가 브라우저는 HTML, CSS를 해석해서 HTML 엘리먼트 하나하나들을 트리 형태로 구조화 해놓는다. 이것을 DOM TREE라고 한다. 이 DOM TREE는 자바스크립트가 웹사이트를 조작하기 위해서 사용하는 객체이다. 쉽게말하면, 우리가 HTML을 작성하면 그건 말그대로 그냥 언어일뿐이고 이것이 브..

https://www.notion.so/simsimjae/12-75345283bf83403ea385b3d471a4bb26 아래 글들은 검색엔진 노출을 위한 글입니다. 노션에서 확인하시면 이미지와 함께 정리된 글을 보실수 있습니다. 궁금하신점은 블로그 댓글이나 노션 코멘트를 이용해주세요(@comment) 제가 직접 만든 프로젝트입니다. http://pickvs.com : 닥전닥후 객체안에 있는 bool변수들의 true/false를 체크하는 가장 좋은 방법은 무엇일까? 예를들어, 다음과 같은 객체 안에 4개의 bool 변수가 있다고 해보자. const myObject = { foo1: false, foo2: true, foo3: false, foo4: true }; 이 상황에서 foo1과 foo3만 fals..