본문 바로가기
반응형

Javascript10

💿 상태 패턴 🕹️ 상태 패턴이란객체의 상태를 조건문으로 검사해서 행위를 달리하는것이 아닌상태를 객체화 하여 상태가 행동할 수 있도록 위임하는 패턴.객체의 상태에 따라 행동을 변경videoPlayer를 상태패턴 만들기VideoPlay클래스를 통해 상태를 인자로 받고, setState를 통해 상태를 바꾸도록 한다class VideoPlay { constructor(state) { // Object.create를 통해 새로운 객체로 받고, Object.assign을 통해 객체복사를 진행한다 this.state = Object.create(Object.assign({ videoplayer: this }, state)); } setState(state) { this.state = Object.creat.. 2024. 11. 25.
❄️ 전략 패턴 🥹 전략 패턴이란여기저기 조사한 바로는 전략패턴은 아래와같다동일 계열의 알고리즘을 정의하고,각 알고리즘을 캡슐화하여,상호교환 가능하도록 만든다. 비슷한 계열의 객체를 if/else문 대신에, 객체의 메소드를 호출하는 방식으로 이해가 된다.다만 이렇게 했을때는 if/else으로 하지 않는 장점은 있지만, 객체수가 늘어난다.  😚 if/else으로 작성Video라는 객체가 있고, play 메소드에서는 생성자에서 어떤값을 받느냐에 따라 log가 다르게 나온다.그것을 If/else 문으로 작성하면 아래와 같다class Video { constructor(videoType) { this.videoType = videoType; } play() { if (this.videoType === "St.. 2024. 11. 19.
☂️ 커링 🍋 커링이란???"커링은 함수 인자를 받는 대신, 한개만 받는 여러개의 함수를 리턴"이다 라고 대부분 설명이 나온다.나의 생각으로는 함수 안에 함수 안에 함수를 리턴해주는 방식으로 이해했다.덧셈,곱셈을 통해서 커링을 어떻게 사용했는지 알아보자 🍈 덧셈,곱셈 을 커링으로 만들기덧셈,곱셈에 인자를 똑같이 받고, 결과값만 다르게 커링을 만들어보면 아래와 같다.화살표 함수로 만들었으며, a,b,fn을 받고  a,b는 덧셈,곱셈 할 숫자를 입력하는 것이고, fn은 두개의 인자를 통해서 함수의 결과를 리턴한다. 그리고 sum,multipy 함수를 만든다./** * 인자를 똑같이 받고 결과값만 다르게 받고 싶다 * ex) 5,4를 받는 인자가 존재하고, 결과(곱셈,덧셈)이 달랐으면 좋겠다 */const curry.. 2024. 5. 29.
🍟Hls 콘텐츠 변경 감시 현재 Hls를 사용하는 도중 컨텐츠가 바뀌면 화면에 보여지는 정보가 바뀌어 하는 서비스를 제공하고있다. 근데 현재 interval으로 API를 호출하기 때문에 서버에 부담이 가고 있어서, 이번에 Hls에서 컨텐츠 변경감지 하는 법에 대해 알아보았다. 🥙 Hls.js에서의 변경 감지 🦴 Hls.js를 지원하는 경우 만약 Hls.js를 사용할 수 있는 상황이라면 아래 처럼, FRAG_CHANGED 이벤트가 트리거가 될때 , "DIS" 가 포함 되면 컨텐츠가 변경된것으로 감지가 된다. Hls에서 EXT-X-DISCONTINUITY은 컨텐츠 내용이 변경될때마다 발견되는 태그이다. 아래는 Hls.js사용할 수 있는 경우에 대한 코드이다. 현재는 배열의 길이로 체크를 했지만, 정확하게 할려면 "DIS"가 포함되면 .. 2023. 12. 4.
반응형