IFrame Player API 유튜브 동영상을 재생하기 위해서는 유튜브에서 제공하는 Iframe을 사용해야 한다. IFrame API를 사용하면 동영상 플레이어를 직접 제어할 수 있다. * 공식 문서 iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google Developers Embed a YouTube player in your application. developers.google.com YoTube 동영상 데이터 불러오기 가져온 데이터의 id값으로 동영상을 재생 2023.01.11 - [React] - [Youtube API] 유튜브 API 동영상 데이터 가져오는 방법 1. 라이브러리 설치 공식 문서를 보고 사용해도 되..

1. 문제 원인 NextJS에서 Recoil을 사용할 경우 발생하는 오류로 파일이 변경되면 다시 빌드되면서 Atoms의 State들이 재선언 되어 발생한다. NextJS에서만 발생하는 오류로 기능적으로는 문제가 없다. 2. 해결 방법(1) 고유성이 보장되는 UUID를 활용하여 key값을 생성한다. npm install uuid // TypeScript npm i --save-dev @types/uuid import { atom, selector } from "recoil"; import { IVideo } from "../api/youTubeApi"; import { IGetListResult, getPopularList } from "./../api/youTubeApi"; import { v1 } fr..

프로세스 메모리  운영체제는 프로세스마다 각각 독립적인 메모리 영역을 할당해 주기 때문에 프로세스간 영향을 받지 않고, 작업을 수행할 수 있다. 기본적으로 다른 프로세스의 변수나 자료에 적급할 수 없지만, IPC나 공유 메모리 등의 통신 기법을 사용하면 접근할 수 있다.  스택은 위 주소부터 할당되고, 힙은 아래 주소부터 할당된다.스택과 힙에 저장되는 함수는 객체는 동적으로 Run 타임 때 계속 늘어날 수 있기 때문에 메모리 사용량이 늘어난다.   1. 스택(Stack)동적인 특징을 가진다.지역변수, 매개변수, 함수가 저장된다. 함수의 호출과 함께 할당되며 함수의 호출이 완료되면 소멸한다.컴파일 시에 크기가 결정된다.함수가 함수를 재귀적으로 호출하게 되면 동적으로 크기가 늘어날 수 있는데, 이때 힙과 스..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 문제 설명 카카오톡에서는 이모티콘을 무제한으로 사용할 수 있는 이모티콘 플러스 서비스 가입자 수를 늘리려고 합니다. 이를 위해 카카오톡에서는 이모티콘 할인 행사를 하는데, 목표는 다음과 같습니다. 이모티콘 플러스 서비스 가입자를 최대한 늘리는 것. 이모티콘 판매액을 최대한 늘리는 것. 1번 목표가 우선이며, 2번 목표가 그 다음입니다. 이모티콘 할인 행사는 다음과 같은 방식으로 진행됩니다. n명의 카카오톡 사용자들에게 이모티콘 m개를 할인하여 판매합니다. 이모티콘마다 할인율은 다를 수 있으며, 할인율은 ..

유튜브 영상을 가져오기 위해서는 유튜브 API를 사용해야 한다. 1. Google Cloud Platform 프로젝트 등록 Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 1-1) 프로젝트 생성 1-2) YouTube Data API v3 사용 검색 > YouTube Data API v3 클릭 > 사용 클릭 1-3) API Key 생성 사용자 인증 정보 > 사용자 인증 정보 만들기 > API 키 1-4) API Key 제한 설정 (선택) 무단 사용 방지를 위해 Key 수정 키제한 > YouTube Data API v3 선택 2. YouTube API 통해 동영상 리스트 가져오기 Videos: list | YouTube Data API | Goo..

Observer Pattern 옵저버 패턴(Observer Pattern)이란? 주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다. 여기서 주체란 객체 상태 변화를 보고 있는 관찰자이며, 옵저버들이란 이 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 ‘추가 변화 사항’이 생기는 객체들을 의미한다. 1. 옵저버 패턴 구조 1-1) 객체와 주체가 분리 1-1) 객체와 주체가 합쳐짐 2. 옵저버 패턴의 사용 예 2-1) 옵저버 패턴을 활용한 서비스로는 트위터가 있다. 내가 어떤 사람인 주체를 ‘팔로우’했다면, 주체가 포스팅을 올리게 되면 알림이 ‘팔로워’에게 간다. 2-2) 옵저버 패턴은 주로 이벤트 ..

Proxy 프록시 객체란? 프록시(proxy) 객체는 어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체를 뜻하며 자바스크립트에서 프록시 객체는 두 개의 매개변수를 가진다. 1. 사용 방법 const proxy = new Proxy(target, handler) target : 프록시할 대상 handler : 프록시 객체의 traget 동작을 가로채서 정의할 동작들이 정해져 있는 함수 Handelr 작동 시점 get 프로퍼티를 읽을 때 set 프로터티에 값을 쓸 때 has in 연산자가 작동할 때 deleteProperty delete 연산자가 작동할 때 apply 함수를 호출할 때 constructor new 연산자가 작동할 때 getProtot..

빅오란? 빅오(BigO)는 대략적으로 숫자를 세는 공식적인 표현입니다. 입력된 내용이 늘어날수록 알고리즘에 실행 시간이 어떻게 변하는지 설명하는 공식적인 방식이다. 즉, 어떤 함수의 입력 값이 늘어나거나 함수의 실행 시간이 변하는 관계 입력의 크기와 실행시간의 관계를 말한다. 1. BigO의 예 시간 복잡도 시간 복잡도란? 입력이 커질수록 알고리즘의 실행 속도가 어떻게 바뀌는지 표현 1-1) O(1) : 상수 /* n의 값이 늘어나도 실행 되는 시간에는 아무런 영향을 받지 않는다. 시간복잡도 O(1) */ function addSec(n) { return n * (n + 1 ) / 2; } O(1) 상수 : n(입력값)이 커져도 실행 시간에 아무런 영향도 받지 않을 경우(항상 상수) 나타내는 표현 1-2..

팩토리 패턴이란? 객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화하는 패턴이자 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴이다. 1. 장점 상위 클래스와 하위 클래스가 분리되어 느슨한 결합을 가지지만 상위 클래스에서는 인스턴스 생성 방식에 대해 전혀 알 필요가 없기 때문에 많은 유연성을 갖게 된다. 객체 생성 로직이 따로 떼어져 있기 때문에 코드 리팩토링 하더라도 한 곳만 고칠 수 있게 되니 유지 보수성이 증가한다. 2. JavaScript에서 팩토리 패턴 각각의 레시피(우유, 아메리카노 등) 들어있는 하위 클래스가 컨베이어 벨트를 통해 전달되고, 상위 클래스인 바리스타 공장에서 이 레피시들을 토대로 우유..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 문제 설명 숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서, 이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요. 예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개 입니다. 2. 입출력 예 3. 문제 풀이 fun..