페어 알고리즘

비센스 헤드와 함께 페어로 알고리즘을 풀었다.
스킬트리

    function solution(skill, skill_trees) {
    let blank = [];
    let count = 0;
    for (let i = 0; i < skill_trees.length; i++) {
        let arr = [];
        for (let j = 0; j < skill_trees[i].length; j++) {
            if (skill.includes(skill_trees[i][j]))
                arr.push(skill_trees[i][j]);
        }
        blank.push(arr.join(''));
    }

    for (let i = 0; i < blank.length; i++) {
        if (blank[i].length === skill.length && blank[i] === skill) count++;
        else if (skill.slice(0, blank[i].length) === blank[i]) count++;
    }
    return count;
}

비센스가 ‘체’ 같은 로직을 만들어서 걸러내면 좋을 것 같다는 아이디어를 줘서 구현했다.
오랜만에 페어로 푼 문제가 풀렸다! 심지어 30분 내로 풀었음!

AMAZON step3 리팩토링

• 아래처럼 import와 export를 활용했다.

//layer.js
export default class PlansUI {
    ...
}

//main.js
import PlansUI from './layer.js';

//index.html
<script src="./main.js" type="module"></script> // type을 꼭 module로 적어줘야 돌아간다... 이것땜에 조금 헤맴.  

• 함수 쪼개기

  (기존)

    showLayer() {
        this.isExtenderShown ? this.checkExtender() : this.showPlansLayer();
    };
  
    showPlansLayer() {
        if (window.scrollY > this.layerPosition) {
            this.plansLayer.classList.add('shown');
            this.header.classList.remove('extended');
            this.plansLayerWrapper.classList.remove('closing');
        }
  
        else this.closePlansLayer();
    };
  

  (수정)

    controlLayer() {
        this.isExtenderShown ? this.checkExHeader() : this.controlPlansLayer();
    }
  
    isScrollToShowPL() {
        return window.scrollY > 366;
    }
  
    isHeaderShown() {
        return window.scrollY < 99;
    }
  
    controlPlansLayer() {
        if (this.isScrollToShowPL()) this.plansLayer.classList.add('shown');
        else if (this.isHeaderShown()) this.moveTopToHeader();
        else this.closePlansLayer();
    }
  

arrow function에서 this

document.addEventListener("scroll", plansUI.controlLayer.bind(plansUI));document.addEventListener("scroll", () => plansUI.controlLayer());

여기서 콜백함수를 arrow function으로 부르면 this가 무엇인가! 를 두고 좀 더 공부해오기로 했었다.
arrow function은 this가 렉시컬 스코프로 선언된다…

일반 함수 선언식으로 콜백함수를 부르면 함수 자체가 스코프가 되지만, arrow function은 실행 컨텍스트에서 자기 상위의 스코프를 this로 사용하기 때문에 위 코드에서는 window가 this가 된다.

위의 함수에서 this를 plansUI에 바인드 시켰는데, 밑에서는 this가 window라면 둘다 왜 실행이 되는 것인가…

좀 더 공부해부기 ==> https://poiemaweb.com/es6-arrow-function 읽고 예제 실행해보기

constructor

// layer.js
constructor() {
    this.isExtenderShown = false;
    this.closeExtenderBtn = document.querySelector('.plans-extender-btn');
    this.closeExtenderBtn2 = document.querySelector('.plans-extender-closeBtn')
    this.plansMoreBtn = document.querySelector('.plans-see-more');
    ...
}
// main.js
const plansUI = new PlansUI();

이렇게하면 재사용성이 떨어지므로 아래처럼 쓰는 것이 좋다.

// layer.js
constructor({btnName, divName}) {
    this.closeExtenderBtn = document.querySelector(btnName);
    ....
}

// main.js
const classSettings = {
    btnName: '.plans-extender-btn',
    divName: '...'
};

const plansUI = new PlansUI(classSettings);

TODO

• 캐로셀 기획서 만들기 -> 요구사항 목록 / 동작 단위로 (이 기능이 되려면) - step4의 전체 (뼈대를 볼 수 있음)
• wireframe (ppt로 만들어놓고 markup까지)
• arrow function ‘poiema’ 예제 풀어보기