Youngble_개발스토리

사용자의 컴퓨터마다 fps(hz)가 다르기떄문에 animate를 실행하여 1초마다 y값을 1씩 아래로 이동하게될경우 어떤 컴퓨터는 빠르고 어떤 컴퓨너튼 느리게 움직이게 되서 같은 유저 경험을 할수가없다. 이를 방지하기위해 아래 표처럼 interval과 delta, date를 이용하여 fps 값을 구하고 해당 delta값이 interval 보다 클때마다 동작하도록 구현한다. 아래의 표를 보며 fps에 따라 화면에 그려주는 밀도를 확인해보자. requestAnimationFrame 메서드를 사용하는것을 참고 해당 구현코드 class Particle { constructor(x, y, radius) { this.x = x; this.y = y; this.radius = radius; } draw() { // ..

인트로 영상을 보기전에 활용되는 썸네일은 우리가 흔하게 유튜브, 인스타, 페이스북 등 여러 매체를 통해 볼수있다. 하지만 이러한 영상 썸네일을 영상자체속성으로써 보여줄지 아니면 이미지로 추출하여 보여줄지 등 썸네일을 만드는 방법이 여러가지 있지만 그중 현재 서비스에서 사용하는 방식을 설명하고자한다. 결과 위는 mp4 동영상을 선택했을때 img태그에 썸네일을 보여주는 결과물이다. 이렇게 만들기위해선 몇가지 기본적인 개념을 이해가 필요하다. 1. Blob 2. Canvas 먼저 Blob을 알아보면 Binary Large OBjects 의 약자로 바이너리 형태로 큰 오브젝트를 저장한다고 할수 있고, 주로 이미지, 비디오, 사운드 등의 멀티미디어 객체를 나타낸다. Blob 객체 자체로 봤을때는 사실 데이터가 아..

상황 iframe안에서 KCP 결제 진행 같은 url path 경로에서 진행되지만 iframe에서 결제프로세싱을 진행하면 history가 쌓임 뒤로가기를 눌러도 같은 주소로만 찍힐뿐 여러번 눌러야 예전페이지로 가게됨 해결방안 1. nextjs에서 router기능으로 beforePopState, routeChangeStart 등을 이용하여 라우트 변화 감지에 따라 로직을 짤려고 했음 2. 하지만 뒤로가기를 눌러도 같은 페이지 path이고 트리거가 먹히지 않아 해당 메서드를 사용해도 안되었음 3. iframe속성을 찾아보고 가능한지 보았지만 실제로 되는 부분은 없음 4. history를 이용해서 스텍을 알수있다면 그걸로 컨트롤 하기로 함 5. history.length를 이용하여 iframe 안에서 결제 이..

Step 1. 왜 순수함수, 불변성을 정리하고자 하는지 2. 순수함수와 불변성은 무엇인가? 3. 리덕스/리듀서와는 무슨 관계가 있는가? 4. 미들웨어는 무슨 관계인가? 그전에 다 끝내지 못한 모던 자바스크립트 Deep Dive 책을 읽고 있는데, 이 책을 읽은지가 일년 반정도 되었고 1/3 정도만 읽었던 상태라 그전에 읽었을때 이해하는 시야와 잊어버렸던 부분을 다시 다잡기위해서 처음부터 읽기 시작했는데, 확실히 그전에 읽었을때와 지금 읽었을때 이해하는 바가 많이 다르고 현시점에서 어떻게 실질적인 실무에서 적용하는 부분인지 생각하면서 보게 된거 같다. 확실히 읽는 속도도 예전보다 빠르게 읽히기도 해서 좀더 가속도를 높이고 있다. 1. 왜 순수함수, 불변성을 정리하고자 하는지 그전 내용들은 따로 블로그에 정..

코어자바스크립트를 보다가 변수이름앞에 $을 붙이거나 _ 가 있는것을 보고 이게 무슨의미인가 찾아보았는데 단순히 식별자 로써 사용할수있다고한다. 다른 특수문자나 숫자 등은 맨앞에 붙일수없지만 $(Dollar Sign)와 _(Underscore)는 사용할수있다고 한다. 그런데 관례(?)적으로 변수앞에 $을 쓸때 보통 document.getElemetById 를 쓸때 사용한다고도 하고 jQuery 객체를 담을때 사용한다고 하는데 이렇게 들으면 애매하지만 예시를 보면 언제 쓰이면 좋은지 알수있다. 보통 변수안에 값을 할당해줄때 string, number, function, object 형식으로 이루워진다. 일반적인 변수명과 할당 const a = 1; let b = 'a'; const c = function (..

해당 함수 실행컨텍스트가 종료된 이후에도 소멸하지않고 호출하여 내부함수가 외부 함수의 변수를 참조 접근하여 사용할수 있게 하는 특성을 갖는 현상/함수 해당함수에서 함수자체를 참조함으로써 outer인 외부함수의 실행 컨텍스트가 종료되는 시점에서 가비지 컬렉터의 수집대상에서 제외되어 해당 LexicalEnvironment의 정보를 사용할수 있게 한다. 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상 예시 코드를 보면서 비교하면 더욱 이해하기 쉽다. 1) 기존 일반함수, 내부함수 사용 위와같이 inner함수를 outer함수에서 return 해주고 outer2에 담아 console.log에 각각 찍어보면 inner..

콜백함수란? 콜백함수는 다른 코드의 인자로 넘겨주는 함수 이다. 콜백함수의 기능을 일상생활 예시를 통해 설명해보자. A 와 B는 다음날 아침 8시에 만나기로 하고 잠을 잔다고 했을때, 약속장소에 가려면 적어도 6시에 일어나야한다. A는 불안한 마음에 수시로 잠에서 깨면서 시계를 확인하고 잠들기를 반복하다가 결국 5시에 이를 포기하고 일어난다. 반면 B는 시계알람을 세팅하고 해당 시간일때 알람이 울리는걸 알기에 쭉 잠을 자다가 해당 시간이 될때 상쾌하게 일어났다. A는 수시로 시간을 구하는 함수를 직접 호출한걸로 볼수있고 B는 시계 알람을 설정하는 함수를 호출하고 호출 당시에는 아무것도 하지않다가 정해준 시각이 됐을때 알람이 울리는 결과를 반환 한다. A의 경우 시계 함수의 제어권은 A에게 있고, 시계는 ..

ES5에서 추가된 기능으로 call과 비슷하지만 즉시 호출하지않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드이다. 다시 새로운 함수를 호출할 때 인수를 넘기면 그 인수들은 기존 bind 메서드를 호출할 때 전달했던 인수들의 뒤에 이어서 등록된다. bind 메서드는 두가지 목적을 지닌다. 1. 함수에 this를 미리 적용하는 것 2. 부분 적용 함수를 구현 var func = function(a,b,c,d){ console.log(this, a, b, c, d); } func(1,2,3,4); //Window{...} 1 2 3 4 var bindFunc1 = func.bind({x:1}); bindFunc1(5,6,7,8) // {x:1} 5 6 7 8 var bindF..

Function.prototype.call(thisArg[, arg1[, arg2[, ...]]]) call / apply 메서드 call 메서드와, apply 메서드는 기능적으로 완전히 동일하다. call 메서드와 apply 메서드는 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령이다. 이때 첫번째 인자를 this로 바인딩하고, 그 이후 인자들을 호출할 함수의 매개변수로 한다. 명시적 this 바인딩 지정 함수를 그냥 실행하면 this는 전역객체를 참조하지만 call, apply 메서드를 사용하면 임의의 객체를 this로 지정할 수 있다. 차이점은 call 경우 첫번째 인자 이후의 모든 인자들을 호출할 함수의 매개변수로 순서대로 지정하는 반면, apply는 두번째에 배열로 인자를 받아 호출할 함..

생성자 함수 생성자 함수는 어떤 공통된 성질을 지니는 객체를 생성하는데 사용하는 함수라고 정의한다. 객체지향 언어에서는 생성자를 클래스(class)라고 하고, 클래스를 통해 만든 객체를 인스턴스(instance)라고 한다. 예를들어, '인간'의 공통 속성들을 생각해보면 직립 보행, 언어 구사, 도구 사용 등 이 있다면 이런 공통 속성들을 모아 인간집합을 정의한 것이 바로 클래스이고, 각 사람들은 인간 클래스에 속하는 인스턴스이다. 이러한 인스턴스는 공통점들도 있지만 저마다의 개성도 존재할 수 있다. 생성자(클래스)는 구체적인 인스턴스를 만들기 위한 일종의 틀이라고 생각하면된다. 이 틀에는 해당 클래스의 공통 속성들이 준비되어있고, 여기에 구체적인 인스턴스의 개성을 더해 개별 인스턴스를 만든다. 자바스크립..