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() { // ..

추상클래스는 상속을 위한 클래스이기때문에 만약 메서드를 구현했다고하더라도 인스턴스로 사용할 수 없다. 아래처럼 abstract을 붙인 클래스가 있다면 아래와 같이 new 를 통한 새로운 인스턴스 정의는 할수 없다. 추상 클레스 및 추상 메서드는 다른곳에서 쓸때 해당 메서드가 정의되어 사용해야한다. 만약 그러고 싶지 않다면 Hook 메서드를 만들어서 사용한다. 템플릿 메서드 추상 메서드나 구현된 메서드를 활용하여 코드의 흐름(시나리오)를 정의하는 메서드이다. final로 선언하여 하위 클래스에서 재정의 할 수 없게 한다. final 예약어 final 변수 : 값이 변경될 수 없는 상수 ex) final static final double PI = 3.14; final 메서드 : 하위 클래스에서 재정의 할 ..

자바의 경우 모든 메서드는 가상 메서드이고 해당 메서드에 대한 address를 가짐 재정의가 안된경우 같은 address를 가리키고 재정의가 된경우 재정의된 메서드주소 address를 가리킨다. 메서드의경우 code영역에 속한다. 위의 코드는 아래 코드를 본후 다시 보면 이해가 쉽다. 기존 부모 클래스 Customer 안의 calcPrice 메서드 public int calcPrice(int price) { bonusPoint += price * bonusRatio; return price; } 자식클래스인 VIPCustomer에서 재정의된 calcPrice 메서드 @Override public int calcPrice(int price) { bonusPoint += price * bonusRatio; ..

static 변수, 메서드는 데이터 영역에 속함 static 예약어를 사용할때 해당 static 변수나 메서드는 외부에서 클래스로 접근하여 호출가능 여러 인스턴스에서 공용으로 쓰기위해 사용한다. 싱글톤 패턴 프로그램에서 인스턴스가 단 한개만 생성되어야 하는 경우 사용하는 디자인 패턴 static 변수, 메서드를 활용하여 구현 할 수 있음 ex) 회사 // Company.java class public class Company { private static Company instance = new Company(); // 유일한 instance Company 인스턴트 private Company() { // private처리로 외부에서 생성자를 생성하지못하게한다. } public static Compan..

class 를 정의하여 instance로 여러개를 생성하여 사용할 경우 Student studentLee = new Student(); Student studentKim = new Student(); 각 instance객체 클래스마다 힙메모리(동적메모리)를 가진다. 이 힙 메모리는 garbage collector 가 주기적으로 사용하지 않는 메모리를 제거한다. System.out.println(studentKim); System.out.println(studentLee); 다음과 같이 각 클래스 인스턴스를 log를 찍어보면 각각의 참조값을 가지고 해당 주소는 각각 인스턴스가 자리잡은 jvm이 준 주소를 확인할수있다.

인트로 영상을 보기전에 활용되는 썸네일은 우리가 흔하게 유튜브, 인스타, 페이스북 등 여러 매체를 통해 볼수있다. 하지만 이러한 영상 썸네일을 영상자체속성으로써 보여줄지 아니면 이미지로 추출하여 보여줄지 등 썸네일을 만드는 방법이 여러가지 있지만 그중 현재 서비스에서 사용하는 방식을 설명하고자한다. 결과 위는 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..